「产品交互设计」产品交互设计基础
产品交互设计
产品交互设计基础
交互设计是什么意思 什么是交互设计1、交互设计(英文Interaction Design,缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。 2、交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和“用户体验”两个层面上进行分析,关注以人为本的用户需求 。

1、交互设计(英文Interaction Design,缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。 2、交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和“用户体验”两个层面上进行分析,关注以人为本的用户需求 。

北大青鸟分享产品设计中交互设计需要考虑的方面作为设计师,我们总是希望我们的用户获得更好的体验,试着让他们喜欢我们的网站,应用程序和启动界面。设计的原型要一再考究鉴定,确实要这样设计,用户可以接受吗?用户会按照我们的意图去操作?我们需要不停的假设与验证,不停的优化完善我们的设计,因此北大青鸟http://www.kmbdqn.com/建议需要考虑一些方面:1.分析产品需求在执行一个新的产品设计时,先与产品经理进行沟通,明确了解需求的定位。在工作中遇到过这样的问题,产品经理将需求发给设计人员,然后设计人员按照需求文档,直接进行了功能设计,产品经理评审原型时,发现与自己规划的产品完不同,在这两者之间,设计人员与产品经理缺少沟通与交涉,对产品的需求理 解不同;因此设计人员在设计前要进行前期需求分析。2.产品用户体验设计瞄准具体的用户群体一个产品的存在,肯定是有一定的市场,也会有一群用户需要使用它。对于用户的行为特征有所不同,作为设计人员需研究这个产品的目标群体从点到面,寻找到用户的共性将产品的主要特性以网页的形式展示。分析清楚你的用户的群体如:分析一些用户的年龄,学历,知识水平,理性感性成分,性别,家庭背景,个人成长环境,对行业进入的深浅,使用的客户端,操作系统,浏览器以及其版本,操作习惯,消费能力,个人好恶,地区,访问时间,停留时间,停留页 面,操作语言等信息因为不同的需求去设计,彻底了解你的用户为他们而设计原型:3.理解你的产品——规划页面布局1. 一个页面总体的信息量不宜过多,提供给用户识别的区块好不超出这个数字5-9范围太多。(7±2原则,即“由于人类大脑处理信息的能力有限,它会将复杂信息划分成块和小的单元。根据乔治A米勒(George A. Miller)的研究,人类短期记忆一般一次只能记住5-9个事物。”)2. 该页面需要完成的主体功能,放在页面要主体位置。其它必须功能放在次之位置。3. 不要让那些有必要而非必须的功能,因为自身利益的需要,强行抢占主体位置,以致影响人们对熟悉、常用的功能使用。

作为设计师,我们总是希望我们的用户获得更好的体验,试着让他们喜欢我们的网站,应用程序和启动界面。设计的原型要一再考究鉴定,确实要这样设计,用户可以接受吗?用户会按照我们的意图去操作?我们需要不停的假设与验证,不停的优化完善我们的设计,因此北大青鸟http://www.kmbdqn.com/建议需要考虑一些方面:1.分析产品需求在执行一个新的产品设计时,先与产品经理进行沟通,明确了解需求的定位。在工作中遇到过这样的问题,产品经理将需求发给设计人员,然后设计人员按照需求文档,直接进行了功能设计,产品经理评审原型时,发现与自己规划的产品完不同,在这两者之间,设计人员与产品经理缺少沟通与交涉,对产品的需求理 解不同;因此设计人员在设计前要进行前期需求分析。2.产品用户体验设计瞄准具体的用户群体一个产品的存在,肯定是有一定的市场,也会有一群用户需要使用它。对于用户的行为特征有所不同,作为设计人员需研究这个产品的目标群体从点到面,寻找到用户的共性将产品的主要特性以网页的形式展示。分析清楚你的用户的群体如:分析一些用户的年龄,学历,知识水平,理性感性成分,性别,家庭背景,个人成长环境,对行业进入的深浅,使用的客户端,操作系统,浏览器以及其版本,操作习惯,消费能力,个人好恶,地区,访问时间,停留时间,停留页 面,操作语言等信息因为不同的需求去设计,彻底了解你的用户为他们而设计原型:3.理解你的产品——规划页面布局1. 一个页面总体的信息量不宜过多,提供给用户识别的区块好不超出这个数字5-9范围太多。(7±2原则,即“由于人类大脑处理信息的能力有限,它会将复杂信息划分成块和小的单元。根据乔治A米勒(George A. Miller)的研究,人类短期记忆一般一次只能记住5-9个事物。”)2. 该页面需要完成的主体功能,放在页面要主体位置。其它必须功能放在次之位置。3. 不要让那些有必要而非必须的功能,因为自身利益的需要,强行抢占主体位置,以致影响人们对熟悉、常用的功能使用。

交互设计是啥交互设计是设计人造系统的行为的设计领域。交互设计(英文Interaction Design,缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析,关注以人为本的用户需求。交互设计可以用简单的术语来理解:它是用户和产品之间交互的设计。大多数情况下,当人们谈论交互设计时,他们讨论的产品往往是应用程序或网站等产品。交互设计的目的是提供给用户具有可用性的产品,以帮助用户实现其目标。

交互设计是设计人造系统的行为的设计领域。交互设计(英文Interaction Design,缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析,关注以人为本的用户需求。交互设计可以用简单的术语来理解:它是用户和产品之间交互的设计。大多数情况下,当人们谈论交互设计时,他们讨论的产品往往是应用程序或网站等产品。交互设计的目的是提供给用户具有可用性的产品,以帮助用户实现其目标。

产品 | 完善交互设计的三点大多数时候,交互的工作是和内容设计一起完成的,但两者又互有差别,可分成两个阶段。在讲交互的过程中,我必须排除体验(感觉)的干扰。这是极容易被混淆的两个概念。交互仅止于人与产品之间的互动,它会给与用户“感觉”的结果,但他们不是一回事。交互是人的行为与事物之间产生互动联系的过程。用动态表达逻辑关系:人类行为不是定格画面,而是连锁反应。动态视频比静止的画面传达更大的信息量并且被记住。你可能还记得《哈利波特》中的“预言家日报”的经典画面,你看到一段完整的视频:罪犯“小天狼星”被警察“傲罗”抓住,并且愤怒地嘶吼。如果是静态的画面,我们恐怕不能确定画面中人是先吼叫被抓住,还是先被抓住再吼叫:“疯狂罪犯终于落网!”“魔法界警察暴力执法!”——这两者之间的差别可大了。这就是动态画面中连贯地逻辑线,先后顺序、因果关系。如果内容设计就像一帧帧现场照片,那么交互就是用户触发的蝴蝶效应。你知道做了这个选择,会导致不同的结果。或者按下这个按钮,后面会发生什么。塑造立体空间感:Hi-Fi毁一生,如果你不巧是个高保真音乐的爱好者,并且运气糟糕还和我一样是个古典乐的爱好者,那么你应该有这样的经验:“优秀的耳机给你音乐厅一般身临其境的感受”。这个形容有它背后的原因:如果你身处于一个交响乐团或者摇滚乐队中间,当他们开始演奏的时候,你会感觉到小提琴就在你右手边,或者那把电吉他就在你前方5米处。越优秀的耳机,越会加深这种感觉,这就是为什么你会觉得“身临其境”。声音恐怕是传达信息效率最低的一种方法,但是即便如此,耳机也能够给你传达如此巨量的信息,最大程度激发人脑的空间想象力。那么,这件事情和我们的设计有什么关系?“大页面的设计是焦点的设计,小页面的设计是空间的设计”如果我们在web页上做设计,让用户快速找到内容是设计的重点。但是在小页面,移动设备的设计中,我却认为空间感才是设计的重点。比如小户型的设计重点是 “让你觉得大”。以AppleWatch为例(图5-1)。【图5-1 AppleWatch】AppleWatch继承了iphone的设计基调,它的交互设计有个显著的优点,这在表面的小屏幕上体现的尤其明显(我认为那不能简单地概括为“扁平化”)。AppleWatch的初始页面是表盘,按home键表盘缩小到home页面的中间,成为“手表小图标”。再次按下home键,则图标放大成表盘(图5-2),这会给用户透视的错觉。交互为人类行为而设计,人类的行为依赖经验和本能。经验经验是我们记忆中曾经发生过的事情,经验告诉我们能做什么或者不能做什么。比如公寓楼的门牌号,看到1003,我不用太费心就知道找个位置是10楼3号房间。这是社会通用的沟通语言。比如给我一个乐谱,我能快速地区分高低音谱号,或者升降音符。这是行业通用的沟通语言。我们喜欢遵循经验办事,因为那代表了安全和可控。一个成熟的行业为经验设计了规则,这些规则培养了用户习惯,如果没有足够的理由,我们不会轻易打破它们:平台官方制定的规则“使用APP,你不需要别人告知左箭头是什么意思。”平台(ios和Android)的官方设计规范事无巨细地规定了所有的细节,并且培养了用户的使用习惯以及前端开发的工作习惯。遵守官方设计规范,你和开发的沟通会非常轻松,以及不至于在用户面前“出错”规则除了告诉你用户习惯之外,还有技术可行性。我要向你强调规则的重要性,它们并不是限制你发挥的枷锁,而是你挥洒创意的舞台。你应该熟读Android和ios的官方设计规范、人机交互指南文档,只要遵循这些规范,用户不会因此犯错。Ps:规范可以帮我们“不出错”,但要达成“绝妙的设计”还需更多创造力。本能我们在规则的基础上,为本能设计交互。想象一下:突然!你被人打晕了!醒来的时候你发现自己到了一个陌生的地方。现在你在想啥?——“我在哪?”“我是谁?”“我该怎么办?”我们通过回答这三个问题,来完成接下来的交互工作:** “我在哪?”**如果用户在使用产品的过程中迷失了自己,就会觉得很挫败。所以,让用户时刻自己在哪里,并且知道自己从哪来,到哪去。“我是谁?”用户认知自己的身份或者状态,并且采取相应的行动,人物的身份和状态是探索用户行为的重要依据。“我该怎么办?”接下来会发生什么,用户会采取什么样的行动。我们应该提前预期到用户会遭遇哪些事情并作出什么样的反应。1我在哪为了让用户定位自己,我们需要为他们设计导航系统。表面上用户看到的仅仅是一个页面(图5-3):地图——页面方位我们需要一个足够简单便于记忆的地图。如果你有一栋两层小楼,面朝大海,春暖花开。第一层是客厅和厨房,第二层是卧室和书房。你从一层爬楼梯上到二楼,不会因此迷路。如果你住在公寓,高层楼的格局都是差不多的,18楼和28楼的楼梯间都在同一个位置,唯一能让你分辨自己在第几层的方法就是简单粗暴的门牌号。所以地图设计应该做到:层级扁平,排列规则统一。检查页面关系并排列(图5-6)身份还是状态?我们常在不同产品上看到不同的身份标签,比如普通用户和VIP用户啦,乘客和司机啦,女人和男人啦……大家都很喜欢树立敌人,这样不太好。你不能做一些不符合身份的事情,当你是一个老师的时候,你成为了一个教导者或者回答问题的人,但是有些问题你也很想请教别人。这个时候就一切就变得复杂起来:“毕竟是个有身份的人,万一问了个蠢问题怎么办,还是继续高深莫测下去吧。”我被拉进了不少交流群里,如果是以被访问者的身份邀请进去的,一定三缄其口,讲话慎之又慎,能不说就不说;如果我以菜鸟的身份进了一个大牛的群,就会满世界的喊“老师”;如果有人称呼我女神,我就不得不告诉他“我得去洗澡了”。你看,我自然而然地做着符合我身份的事情。这些都是别人眼中的我。而状态就不同了,我可以处于回答问题的状态,同时也可以处于问问题的状态,多么轻松自如。这是真实的我。如果限定一批用户是老师,另外一批用户是学生。那么我们就放弃了他们各自另外一半的时间和精力,另外一半的活力,另外一半的内容提供。因为某位“老师”不可能一直持续地在“教学”,即便他以此为工作。而如果我靠回答问题赚钱,那么我也同样愿意为别人的回答花钱。除非能得到足够数量匹配的供应者和消费者,否则就让用户上一秒收入,下一秒就卖出吧!身份标签当用户年龄平均在20岁或者更小的时候,这些未走入社会的年轻人急需认可,这种认可在现实中很难得到,身份头衔是有用的激励方法。对于年龄更长的用户来说就情况就相反了。我花钱买电影看理所当然,可是为什么好像是买了个VIP的头衔呢。天哪,连上个视频网站都在攀比,还能不能好好聊天了。如果一定要这样做,收集成就的方法比身份头衔有用多了。同时拥有不同的状态我最好的学习状态就是立刻把学到的东西分享出去。如果你是一个优秀的读者,或许应该尝试开始写点什么?在产品设计中,时刻把这种逻辑推送给用户,就像一颗思想的种子,它会自己成长和蔓延。这种方式用在状态可以灵活转变的用户群中更有效,比如零时的租客可以成为零时的房东,或者乘客有时候可以成为司机。这并不是通用的方法,如果用户之间的关系很少模糊地带,或者有极多的信息不能共用等,明确地区分身份也是可行方案,请视具体的产品情况考虑。比如出租车司机与乘客,双方身份与状态不能灵活转换,互相有较多不重叠的信息。3我做什么为人设计就要理解人的行为模式。结果可控的情况下,完成任务的唯一条件,就是不要犯错。因此,我们尽量确保用户不会犯错,这就是“为错误设计”这条规则的由来。另外,人类会收到情绪的影响,这是不可避免要被考虑到的。我将为你介绍一下“为人为错误设计”与“为情绪设计”的交互理念。为人为错误设计灾难是一系列错误的连锁反应——《重返危机现场》人类不是机器,行为不可控,所以只要涉及人类活动,我们甚至都无法真正意义上地杜绝错误的发生,只能尽力把它发生的概率减少。为错误设计的步骤:习惯违背习惯就像违背自然规律或者用户经验,这会及容易导致用户犯错。所以在设计先后顺序、左右位置的时候不必要特立独行(图5-20)。人类与硬件接触,通过行为与产品建立沟通交互的桥梁,有一门学科专门研究这些——“人体工程学”。以下以移动产品为例。对于手机用户来说,行为主要包含手指的活动,其次是眼睛接受信息,特定情况下用到嘴巴和耳朵。我猜暂时很少用到舌头和鼻子什么的。手指与屏幕的关系手指是最为高效、灵活并且使用最为频繁的器官。移动产品大部分都是手持设备,你会看到所有人都用手抓着手机戳来戳去,所以我们当然应该先说说手指的事情。单手点击舒适度(图5-24):使用移动产品时,用户经常处于噪杂的环境或者活动的状态。比如一边走路坐车一边看手机。这对眼睛的压力很大,同时也要求产品设计中为眼睛考虑更多。下图是眼动热力的示意图,用户习惯于从左到右的阅读方式,左上是关注的焦点。我们在设计产品时毫无疑问会把最重要的内容放置在左上角(图5-29)。【图5-29 眼动的焦点】用户在运动过程中实际看到的页面,很大一部分是糊的。所以视觉焦点应该清晰可见,这样用户可以快速捕捉到我们设计的“焦点”,对其他信息没什么耐心(图5-30)。

大多数时候,交互的工作是和内容设计一起完成的,但两者又互有差别,可分成两个阶段。在讲交互的过程中,我必须排除体验(感觉)的干扰。这是极容易被混淆的两个概念。交互仅止于人与产品之间的互动,它会给与用户“感觉”的结果,但他们不是一回事。交互是人的行为与事物之间产生互动联系的过程。用动态表达逻辑关系:人类行为不是定格画面,而是连锁反应。动态视频比静止的画面传达更大的信息量并且被记住。你可能还记得《哈利波特》中的“预言家日报”的经典画面,你看到一段完整的视频:罪犯“小天狼星”被警察“傲罗”抓住,并且愤怒地嘶吼。如果是静态的画面,我们恐怕不能确定画面中人是先吼叫被抓住,还是先被抓住再吼叫:“疯狂罪犯终于落网!”“魔法界警察暴力执法!”——这两者之间的差别可大了。这就是动态画面中连贯地逻辑线,先后顺序、因果关系。如果内容设计就像一帧帧现场照片,那么交互就是用户触发的蝴蝶效应。你知道做了这个选择,会导致不同的结果。或者按下这个按钮,后面会发生什么。塑造立体空间感:Hi-Fi毁一生,如果你不巧是个高保真音乐的爱好者,并且运气糟糕还和我一样是个古典乐的爱好者,那么你应该有这样的经验:“优秀的耳机给你音乐厅一般身临其境的感受”。这个形容有它背后的原因:如果你身处于一个交响乐团或者摇滚乐队中间,当他们开始演奏的时候,你会感觉到小提琴就在你右手边,或者那把电吉他就在你前方5米处。越优秀的耳机,越会加深这种感觉,这就是为什么你会觉得“身临其境”。声音恐怕是传达信息效率最低的一种方法,但是即便如此,耳机也能够给你传达如此巨量的信息,最大程度激发人脑的空间想象力。那么,这件事情和我们的设计有什么关系?“大页面的设计是焦点的设计,小页面的设计是空间的设计”如果我们在web页上做设计,让用户快速找到内容是设计的重点。但是在小页面,移动设备的设计中,我却认为空间感才是设计的重点。比如小户型的设计重点是 “让你觉得大”。以AppleWatch为例(图5-1)。【图5-1 AppleWatch】AppleWatch继承了iphone的设计基调,它的交互设计有个显著的优点,这在表面的小屏幕上体现的尤其明显(我认为那不能简单地概括为“扁平化”)。AppleWatch的初始页面是表盘,按home键表盘缩小到home页面的中间,成为“手表小图标”。再次按下home键,则图标放大成表盘(图5-2),这会给用户透视的错觉。交互为人类行为而设计,人类的行为依赖经验和本能。经验经验是我们记忆中曾经发生过的事情,经验告诉我们能做什么或者不能做什么。比如公寓楼的门牌号,看到1003,我不用太费心就知道找个位置是10楼3号房间。这是社会通用的沟通语言。比如给我一个乐谱,我能快速地区分高低音谱号,或者升降音符。这是行业通用的沟通语言。我们喜欢遵循经验办事,因为那代表了安全和可控。一个成熟的行业为经验设计了规则,这些规则培养了用户习惯,如果没有足够的理由,我们不会轻易打破它们:平台官方制定的规则“使用APP,你不需要别人告知左箭头是什么意思。”平台(ios和Android)的官方设计规范事无巨细地规定了所有的细节,并且培养了用户的使用习惯以及前端开发的工作习惯。遵守官方设计规范,你和开发的沟通会非常轻松,以及不至于在用户面前“出错”规则除了告诉你用户习惯之外,还有技术可行性。我要向你强调规则的重要性,它们并不是限制你发挥的枷锁,而是你挥洒创意的舞台。你应该熟读Android和ios的官方设计规范、人机交互指南文档,只要遵循这些规范,用户不会因此犯错。Ps:规范可以帮我们“不出错”,但要达成“绝妙的设计”还需更多创造力。本能我们在规则的基础上,为本能设计交互。想象一下:突然!你被人打晕了!醒来的时候你发现自己到了一个陌生的地方。现在你在想啥?——“我在哪?”“我是谁?”“我该怎么办?”我们通过回答这三个问题,来完成接下来的交互工作:** “我在哪?”**如果用户在使用产品的过程中迷失了自己,就会觉得很挫败。所以,让用户时刻自己在哪里,并且知道自己从哪来,到哪去。“我是谁?”用户认知自己的身份或者状态,并且采取相应的行动,人物的身份和状态是探索用户行为的重要依据。“我该怎么办?”接下来会发生什么,用户会采取什么样的行动。我们应该提前预期到用户会遭遇哪些事情并作出什么样的反应。1我在哪为了让用户定位自己,我们需要为他们设计导航系统。表面上用户看到的仅仅是一个页面(图5-3):地图——页面方位我们需要一个足够简单便于记忆的地图。如果你有一栋两层小楼,面朝大海,春暖花开。第一层是客厅和厨房,第二层是卧室和书房。你从一层爬楼梯上到二楼,不会因此迷路。如果你住在公寓,高层楼的格局都是差不多的,18楼和28楼的楼梯间都在同一个位置,唯一能让你分辨自己在第几层的方法就是简单粗暴的门牌号。所以地图设计应该做到:层级扁平,排列规则统一。检查页面关系并排列(图5-6)身份还是状态?我们常在不同产品上看到不同的身份标签,比如普通用户和VIP用户啦,乘客和司机啦,女人和男人啦……大家都很喜欢树立敌人,这样不太好。你不能做一些不符合身份的事情,当你是一个老师的时候,你成为了一个教导者或者回答问题的人,但是有些问题你也很想请教别人。这个时候就一切就变得复杂起来:“毕竟是个有身份的人,万一问了个蠢问题怎么办,还是继续高深莫测下去吧。”我被拉进了不少交流群里,如果是以被访问者的身份邀请进去的,一定三缄其口,讲话慎之又慎,能不说就不说;如果我以菜鸟的身份进了一个大牛的群,就会满世界的喊“老师”;如果有人称呼我女神,我就不得不告诉他“我得去洗澡了”。你看,我自然而然地做着符合我身份的事情。这些都是别人眼中的我。而状态就不同了,我可以处于回答问题的状态,同时也可以处于问问题的状态,多么轻松自如。这是真实的我。如果限定一批用户是老师,另外一批用户是学生。那么我们就放弃了他们各自另外一半的时间和精力,另外一半的活力,另外一半的内容提供。因为某位“老师”不可能一直持续地在“教学”,即便他以此为工作。而如果我靠回答问题赚钱,那么我也同样愿意为别人的回答花钱。除非能得到足够数量匹配的供应者和消费者,否则就让用户上一秒收入,下一秒就卖出吧!身份标签当用户年龄平均在20岁或者更小的时候,这些未走入社会的年轻人急需认可,这种认可在现实中很难得到,身份头衔是有用的激励方法。对于年龄更长的用户来说就情况就相反了。我花钱买电影看理所当然,可是为什么好像是买了个VIP的头衔呢。天哪,连上个视频网站都在攀比,还能不能好好聊天了。如果一定要这样做,收集成就的方法比身份头衔有用多了。同时拥有不同的状态我最好的学习状态就是立刻把学到的东西分享出去。如果你是一个优秀的读者,或许应该尝试开始写点什么?在产品设计中,时刻把这种逻辑推送给用户,就像一颗思想的种子,它会自己成长和蔓延。这种方式用在状态可以灵活转变的用户群中更有效,比如零时的租客可以成为零时的房东,或者乘客有时候可以成为司机。这并不是通用的方法,如果用户之间的关系很少模糊地带,或者有极多的信息不能共用等,明确地区分身份也是可行方案,请视具体的产品情况考虑。比如出租车司机与乘客,双方身份与状态不能灵活转换,互相有较多不重叠的信息。3我做什么为人设计就要理解人的行为模式。结果可控的情况下,完成任务的唯一条件,就是不要犯错。因此,我们尽量确保用户不会犯错,这就是“为错误设计”这条规则的由来。另外,人类会收到情绪的影响,这是不可避免要被考虑到的。我将为你介绍一下“为人为错误设计”与“为情绪设计”的交互理念。为人为错误设计灾难是一系列错误的连锁反应——《重返危机现场》人类不是机器,行为不可控,所以只要涉及人类活动,我们甚至都无法真正意义上地杜绝错误的发生,只能尽力把它发生的概率减少。为错误设计的步骤:习惯违背习惯就像违背自然规律或者用户经验,这会及容易导致用户犯错。所以在设计先后顺序、左右位置的时候不必要特立独行(图5-20)。人类与硬件接触,通过行为与产品建立沟通交互的桥梁,有一门学科专门研究这些——“人体工程学”。以下以移动产品为例。对于手机用户来说,行为主要包含手指的活动,其次是眼睛接受信息,特定情况下用到嘴巴和耳朵。我猜暂时很少用到舌头和鼻子什么的。手指与屏幕的关系手指是最为高效、灵活并且使用最为频繁的器官。移动产品大部分都是手持设备,你会看到所有人都用手抓着手机戳来戳去,所以我们当然应该先说说手指的事情。单手点击舒适度(图5-24):使用移动产品时,用户经常处于噪杂的环境或者活动的状态。比如一边走路坐车一边看手机。这对眼睛的压力很大,同时也要求产品设计中为眼睛考虑更多。下图是眼动热力的示意图,用户习惯于从左到右的阅读方式,左上是关注的焦点。我们在设计产品时毫无疑问会把最重要的内容放置在左上角(图5-29)。【图5-29 眼动的焦点】用户在运动过程中实际看到的页面,很大一部分是糊的。所以视觉焦点应该清晰可见,这样用户可以快速捕捉到我们设计的“焦点”,对其他信息没什么耐心(图5-30)。

互联网产品(四):交互设计原型是产品可视化的展示,包括了产品的信息架构、功有、内容、交互方式。目前业务普遍菜用了Axure作为原型设计工具。产品或交互人员通过对信息架构的梳理,确认界面内容区的划分,并通过交互方式呈现功能点。原型分为线框图、低保真图、高保值图。不管哪种呈现方式,都需要设计交互功能,“使原型活起来。不能设计交互的,要采用注释的方式。原型使用对象是产品、开发、前端、设计、测试、运营等相关人员。中小型公司的原型一般结合流程图被产品经理写入需求文档,作为需求描述一部分。而在大公司,交互设计师通常将原型图写入交互设计说明书,定义产品原型的相关要求。快速迭代的公司,要求产品上线时问题越快解决越好,甚至是开发完测试一下直接上线,所以很多缺少原型的规范。优点:原型设计人员可以自由把握原型的设计,尽可能输出更多想法缺点:需求团队默契度高。这种情形中小公司较多。大型多部门的公司制度完善,对于原型设计有一定的规范要求,原型设计人员必须按照要求完成原型。优点:既便人员流动,交接人也可以根据统一的规范标准立刻读懂原型,方便写交互文档。缺点:周期长,影响产品迭代。一般原型设计规范:产品的内容框架:产品功能的信息架构、流程判断的信息架构、带注解的线框图、过渡页面、带算法的页面、页面流程图(Axure8.0的页面快照)、多入口流程图、具体模块图、多方协作图、动画效果等。如果需要定义原型规范,请总结以上要点。建议原型规范不需要定义的太死板,但原型具有的细节注解(如字符限制、跳动指向、操作动作类型、浏览器兼容性等)需在交互说明书或者产品需求文档内交代清楚。定义:顾名思义,页面流程图是页面之间流转关系的示例图。该图属于宏观层面的全局规划,不需要有每个页面的布局、细节要求。部分产品页面的层级过深,采用信息架构的方式呈现。优点:快速从框架上了解业务的流程关系;相关人员了解工作量情况;聚集业务的行为路径工具:Axure、PPT、 Visio【如何画,举例:某众筹项目移动侧】一、业务流程图:点击流程图上的线框图,可以进入相应的页面或流程二、页面流程图:点击相关的页面,可进入对应的页面。三、页面快照与页面:在流程图上,点页面快照或线框图,进入相应的页(比如登录页)定义:有时也称为站点地图,强调内容、功能的结构、导航系统的设计、是产品的骨架。该图展示产品的内容归类或功能集合,需要罗列每个页面的细节内容或功能点形成结构化(有层次、有类别性)。该图也是技术人员创建数据结构的辅助文件。优点:快速全面的了解产品业务框架;相关人员了解工作量情况;相对Web产品,更适用于移动客户端产品。工具:Axure、PPT、Visio、xmind等【举例:京东众筹】交互说明文档(DRD),主要交付给前端、设计师、开发、测试等人员,根据需求大小难易程度,灵活撰写。注意点:文档起辅助作用,要面对面交流;沟通后持续完善;模板不一;无需纠结模板,把需要和细节阅明清楚即可。内容:信息架构图、页面流程图、页面细节图、交互相关规范等。优点:宏观上明细业务信息架构及页面流转怀脱史,从微观上设计用户交互行为。勿写:1、视觉规格规范2、市场需求3、功参实现方案4、相关文案工具:Word或Indesign【举例:XXX众筹平台】注:如果公司没有细分交互设计师岗,而由产品经理承担,则无需单独出交互设计说明并入prd即可。*移动端待续详情待续【常用的网站设计规范参考】<<常用的网站设计规范参考>> 可百度【相在知识】【目标】可用性、易用性、满意度、价值度、可信度、可实现性、可识别性【定义】指人们对使用或期望的产品、系统或服务的感觉与反应。它可以分为使用前体验、使用中体验、使用后体验。在产品设计中,用户体验要结合各方面不同利益,平衡产品元素:包括UI、交互、功能、逻辑、售后等等。通过“可用性、易用性、可实现性、可识别性”的提高,增加用户的满意度和信任度,最终提升用户的价值度。用户体验为设计目标用户为起点,进行满意度与概念设计、用户功能需求设计、交互设计等等过程,最终形成用户产品反馈和报告,进行新一轮产品设计优化。【用户体验要素】(待续)

原型是产品可视化的展示,包括了产品的信息架构、功有、内容、交互方式。目前业务普遍菜用了Axure作为原型设计工具。产品或交互人员通过对信息架构的梳理,确认界面内容区的划分,并通过交互方式呈现功能点。原型分为线框图、低保真图、高保值图。不管哪种呈现方式,都需要设计交互功能,“使原型活起来。不能设计交互的,要采用注释的方式。原型使用对象是产品、开发、前端、设计、测试、运营等相关人员。中小型公司的原型一般结合流程图被产品经理写入需求文档,作为需求描述一部分。而在大公司,交互设计师通常将原型图写入交互设计说明书,定义产品原型的相关要求。快速迭代的公司,要求产品上线时问题越快解决越好,甚至是开发完测试一下直接上线,所以很多缺少原型的规范。优点:原型设计人员可以自由把握原型的设计,尽可能输出更多想法缺点:需求团队默契度高。这种情形中小公司较多。大型多部门的公司制度完善,对于原型设计有一定的规范要求,原型设计人员必须按照要求完成原型。优点:既便人员流动,交接人也可以根据统一的规范标准立刻读懂原型,方便写交互文档。缺点:周期长,影响产品迭代。一般原型设计规范:产品的内容框架:产品功能的信息架构、流程判断的信息架构、带注解的线框图、过渡页面、带算法的页面、页面流程图(Axure8.0的页面快照)、多入口流程图、具体模块图、多方协作图、动画效果等。如果需要定义原型规范,请总结以上要点。建议原型规范不需要定义的太死板,但原型具有的细节注解(如字符限制、跳动指向、操作动作类型、浏览器兼容性等)需在交互说明书或者产品需求文档内交代清楚。定义:顾名思义,页面流程图是页面之间流转关系的示例图。该图属于宏观层面的全局规划,不需要有每个页面的布局、细节要求。部分产品页面的层级过深,采用信息架构的方式呈现。优点:快速从框架上了解业务的流程关系;相关人员了解工作量情况;聚集业务的行为路径工具:Axure、PPT、 Visio【如何画,举例:某众筹项目移动侧】一、业务流程图:点击流程图上的线框图,可以进入相应的页面或流程二、页面流程图:点击相关的页面,可进入对应的页面。三、页面快照与页面:在流程图上,点页面快照或线框图,进入相应的页(比如登录页)定义:有时也称为站点地图,强调内容、功能的结构、导航系统的设计、是产品的骨架。该图展示产品的内容归类或功能集合,需要罗列每个页面的细节内容或功能点形成结构化(有层次、有类别性)。该图也是技术人员创建数据结构的辅助文件。优点:快速全面的了解产品业务框架;相关人员了解工作量情况;相对Web产品,更适用于移动客户端产品。工具:Axure、PPT、Visio、xmind等【举例:京东众筹】交互说明文档(DRD),主要交付给前端、设计师、开发、测试等人员,根据需求大小难易程度,灵活撰写。注意点:文档起辅助作用,要面对面交流;沟通后持续完善;模板不一;无需纠结模板,把需要和细节阅明清楚即可。内容:信息架构图、页面流程图、页面细节图、交互相关规范等。优点:宏观上明细业务信息架构及页面流转怀脱史,从微观上设计用户交互行为。勿写:1、视觉规格规范2、市场需求3、功参实现方案4、相关文案工具:Word或Indesign【举例:XXX众筹平台】注:如果公司没有细分交互设计师岗,而由产品经理承担,则无需单独出交互设计说明并入prd即可。*移动端待续详情待续【常用的网站设计规范参考】<<常用的网站设计规范参考>> 可百度【相在知识】【目标】可用性、易用性、满意度、价值度、可信度、可实现性、可识别性【定义】指人们对使用或期望的产品、系统或服务的感觉与反应。它可以分为使用前体验、使用中体验、使用后体验。在产品设计中,用户体验要结合各方面不同利益,平衡产品元素:包括UI、交互、功能、逻辑、售后等等。通过“可用性、易用性、可实现性、可识别性”的提高,增加用户的满意度和信任度,最终提升用户的价值度。用户体验为设计目标用户为起点,进行满意度与概念设计、用户功能需求设计、交互设计等等过程,最终形成用户产品反馈和报告,进行新一轮产品设计优化。【用户体验要素】(待续)

相关推荐
评论列表
暂无评论,快抢沙发吧~
你 发表评论:
欢迎