《破茧成蝶—用户体验设计师》读书笔记

一.  用户体验设计

· 用户和人机界面的交互过程。

·  用户体验设计特征

1.严谨、理性、创意

2.提供特定问题的解决方案

3.让用户思考

4.妙趣横生

·  用户体验设计的精益之道

1.热爱生活,细心观察,勇于改变

2.了解人,观察人(人有共性,也有差异性,体会大多数人的想法)

3.理性的思路

思路

4.亲自使用、体验

5.多听用户反馈意见

6.留心好的设计,在此基础上优化

二.  用户体验设计师

用户研究员、交互设计师、视觉设计师的含义

·  交互设计就是通过分析用户心理模型、设计任务流程、运用交互知识,把业务逻辑(功能规格或内容需求)以用户能理解的方式表达给用户,最终实现产品战略(公司需求和用户需求的最佳平衡点)的过程。

·  最重要的是解决问题的能力。

·  交互设计师的产出物:竞品分析文档、用户反馈整理、流程图、设计草图、设计原型等。

·  设计原型:手绘、软件绘制

          软件:Balsamiq Mockups手绘风格

                      Axure绘制线框图

·  视觉设计师:懂产品、懂用户、懂设计,关键时能有条理地陈述自己的观点和理由。

菜鸟如何入门
部分知名设计公司/设计团队

·  优秀的设计师之所以优秀,是因为潜藏在技能表面下的东西。

(人文、心理学、设计学、工业工程学、代码、手绘等)


良好的素养,强大的思维能力,专业的技能,浓厚的兴趣

三.用户体验设计师技能

· 用户体验设计师目标:解决用户需求,减少用户理解和操作成本,给用户留下美好深刻印象。

项目流程

· 和产品经理一起做需求分析

需求考虑角度

1. 产品定位

产品定位是关于产品的目标、范围、特征等约束条件,它包括产品定义和用户需求。产品定位是产品设计的芳香,也是需求文档和设计产出的判断标准。

产品定位内容

产品定义——一句话概括某个产品。

使用人群——明确产品主要为谁服务,所有功能、内容、设计风格的设定都围绕使用人群来进行。

产品特色——使产品区别于同类竞争者,让产品脱颖而出,更具竞争力。

用户需求——可以看作是“目标用户”在“合理场景”下的“用户目标”,其实就是解决“谁”在“什么环境下”想要“解决什么问题”。

2. 产品需求

产品需求来源

· 用户调研——通过问卷调查、用户访谈、信息采集等手段来挖掘需求的方式。

· 用户反馈——发现很多之前意想不到的问题。

· 竞品分析—— 找到有代表性的同类产品,对比产品之间的优势、劣势,从而发现产品的突破口。

· 产品数据——艾瑞资讯、百度指数、淘宝指数等,手机到数据后,分析挖掘数据背后潜在的意义。

3. 如何分析与筛选需求

如何将用户需求转化为产品需求
根据产品定位和项目资源情况筛选、提炼出产品需求,定义出需求优先级,接着描述每个需求的逻辑、内容,撰写详细的需求文档。

4. 需求文档:目录、背景描述、用户类型和特征、项目时间安排、信息结构、整体业务流程说明、需求详细说明等。

5. 倾听用户的声音

· 拥抱用户

· 别被用户牵着走

考虑用户意见的5个因素

6.寻找设计目标

在某次优化任务中,产品经理要求增加一系列功能,先不要着急做设计,而是要思考以下问题。

既然是做优化,就说明已经有一定的用户基础了。那是不是可以先查一下目前用户的评论和反馈?是不是可以观察身边的人是如何使用的?可以做一些简单的访谈和测试,看看用户使用过程中有什么痛点。另外,还可以对比一下竞品,看看竞品哪里体验比我们好,哪里还有改进余地……

7. 如何“抄袭”竞品

功能方面,产品经理们可以去抄,设计师无力干涉。

但在设计方面,绝不允许自己盲目“抄袭”,即使功能一样,不同的设计水准也会让产品体验截然不同。

关注竞品、研究竞品、努力超越竞品。

四. 从需求到设计草图

· 工欲善其事,必先利其器。

优秀的设计要经理充足的规划过程。

根据需求,先确定应该提供哪些必要的信息给用户,然后对信息分门别类、有效地组织起来,并以导航的形式展现在界面上,让用户可以快速找到自己想要的信息。

从需求到界面设计

1. 信息/任务   从需求到界面,隔着一扇门

·  信息归类

           逻辑归类——使用人们在生活中熟悉的分类逻辑对内容进行组织。

           卡片归类——邀请用户“把类似的东西放在一起”。

开放式卡片分类
封闭式卡片分类

·  好的导航是成功的一半

            成功的导航设计可以自我解释:让用户在导航系统中清楚地认识到信息结构和自己所处的位置,为用户解释“我从哪里来?”、“我现在在那里?”、“我能去哪里?”的问题。

             。深广度平衡

              在设计导航结构时,要考虑到深度与广度的平衡,也就是纵向的层级数,与横向的选项数的平衡。(每多点击一次操作都会流失掉一批用户)

过深的层级关系令用户迷失方向
过广的导航广度,令用户患上“选择恐惧症”,很难选择哪一项才是自己想要的
平衡的导航深广度,使用户在每个层级上不必面临过多选择,通过每个选项的名称便可以明确自己寻找的方向

         。用户所需信息与商业推广信息的平衡

         矛盾:用户只想看到自己需要的信息,而企业又希望可以把业务和广告推荐给用户。

         合理的信息组织方式,应该既对用户有意义,又能满足业务目标。

         。为重要功能和常用功能设置快捷入口

         就像是在原有产品架构的基础上搭建“快捷通道”,用户可以一步一步顺着产品的逻辑来寻找所需功能,也可以通过快捷入口,按照自己的行为习惯,快速找到所需功能。(快捷入口不宜过多)

· 主要任务和次要任务

        一个页面上如果铺放过多的功能或内容,会让用户迷茫不知所措,效果反而会更差。

        明确主要任务和次要任务,可以帮助我们快速判断界面上内容的主次关系。

        设计任务流程——要先设计主线,再从容设计支线。

      (是否设计支线,即次要行为流,要看次要行为流是否能对用户完成主行为流产生必要的帮助,迷宫的支线越少,整体复杂度越低,越有助于用户迅速完成任务。)

不同角色心目中的产品

·  突出主要任务

             。1 分解用户任务

             。2 排列任务优先级(优先级不是出现的先后次序,而是在页面中的重要程度。这些任务的出现次序,要按照主行为流的次序排列。)

             。3 组织合并相关任务

· 引导用户完成任务

            。相似性引导——大小、色彩、形态、视觉元素等

            。方向性引导——对于操作步骤较多的任务,可以利用具有指向性的箭头,进行方向性引导。

            。运动元素引导——像是用户的小向导,带领用户找到下一步该往哪走。

            。向导控件——在陌生的页面环境下,为用户指引路线,引导用户完成多步操作。

· 设计友好而易用的界面

            。减少冗余步骤和干扰项

            。将复杂操作转移给系统(让机器变得更智能)

            。简化操作方式(Windows和MAC OS 安装软件)

            。优化操作过程(提供合适的首选项、适时帮助、及时反馈、提供合理的默认值等)

界面细节优化

· 信息量太大,页面如何摆

设计师没办法控制页面上要呈现信息的多少,因为这与产品和业务相关。

但设计师要保障受众信息的接受效果,掌握信息的展现形式,在页面信息量很大时,决定该如何组织这些信息。

        。让页面层次不言而喻 

                  逻辑相关的在视觉上分为一组——接近原则

(在设计界面时,将元素分好类后,在模块与模块之间、段落与段落之间、广告与广告之间、标题与正文之间划分几个固定的高度,在为整个页面排版的时候,严格按照这几个间距进行排布,从而形成整个页面模块与模块、内容与内容之间的节奏感。)

                 内容或重要程度不同的信息——差异原则(增强对比)

                 逻辑上有包含关系的——嵌套

       。让重点信息“跳出来”

           通过视觉设计方法——字体加大加粗、色彩对比、添加背景色、留白等,强调界面的重点元素。

       。将次要信息“藏起来”

            列表页的作用是“快速筛选,激发兴趣”。隐藏策略不仅可以让界面重点更突出,减少复杂信息对用户的干扰,还可以减少跳转,满足用户的快捷操作。

· 理性的规划VS感性的界面

           。以人为本的界面设计

                要了解用户,知道用户有什么样的需求。

                要保证界面逻辑不是错误的,可以让用户顺利完成任务。

                 力求让设计形式符合用户的心理模型,让用户感受到“人性化”的设计。

            。帮助用户找到想要的东西

                 让有明确目标的用户,能够快速找到所需信息。

                 有不确定目标的用户,通过浏览和寻找,一点点明确自己的需要,最终找到信息。

                 让没有目标的用户在探索中激发需求。

             。吸引无目标用户

                 充分换位思考,用感性的思维方式来为他们营造贴心、友好、有吸引力的界面。

            。符合用户心理模型

                设计师该充分考虑到用户是如何理解产品的,并在交互设计的表现形式上更贴近用户的心理模型,避免将枯燥的逻辑直接呈现给用户。

2. 捕获用户的芳心

· 来自真实世界的灵感

            。拟物化的视觉

                 注重效率的应用可以设计得尽可能简洁,帮助用户快速完成任务。但是,对于娱乐型应用来说,人们对于情感的追求永远不会消失。

                拟物化并不意味着一定要100%还原物理世界的真实质感,抽象出物体中最优特征的部分,将繁复的视觉元素进行简化处理,一样可以设计出既简约又可以调动用户情感的产品。

            。隐喻化的操作

                视觉表现难以拟物时,也可以通过模拟现实中的操作,使用隐喻的方式让用户对操作感到熟悉。

· 贴心的设计惹人爱

             。可控的感受

                 调查表明,如果界面没有任何提示,80%的用户等待超过2秒就会直接关闭窗口。

                 如果界面有提示或是加载状态,用户的离开率就会极大地降低。加载状态提示可以增加用户对界面的可控感,形成操作预期,使用户安心。

                 为增强用户的可控感,界面还需要预先提供提示,向用户透漏一些接下来将要发生的事情,让用户建立预期。系统需要根据用户的操作收集信息,掌握规律,正确地预计未来可能出现的问题,并提前采取措施或提醒用户,将可能出现的风险消除在萌芽状态。

               。积极的反馈

                   人们在社会交往时具有的期望,在使用互联网产品时也会有。积极的反馈可以增强用户的信心,提升用户体验的愉悦感。

               。贴心的提醒

                   在使用产品时,用户难免会有遗忘或是疏忽的时候。此时给予用户一些贴心的提醒,可以提升用户对产品的好感。

Quora登陆页面细节处理

                 。互动的乐趣

                    灵动的的交互画面、操作后的反馈效果、误操作时的提示,像对话一样亲切的文案,都是机器与用户互动的结果。让用户感觉到,自己的一点一滴都能被系统感知,满足用户的参与感和被尊重感,利用互动因素可以极大提升用户界面的趣味性,调动用户情感。

                     丰富的动效可以使界面更生动、充满活力,也可以提升产品的品质。

                  。惊喜的力量

                    惊喜会为用户增添一份特殊的喜悦与乐趣,还可以引发用户的好奇心,增强他们的探索欲望。

                  。情境的烘托

                     为产品设计一个故事情节,通过视觉、动画和音效的烘托,把用户带入一个情境中。很适合用在活动页面的设计中。

· 快速表达我的想法—纸面原型

。纸面原型的目的

沟通、测试,尽快解决那些不确定的问题。纸面原型具有可塑性,可以快速修改和重建,帮助设计师探索尽可能多得想法并否定掉那些不靠谱的想法。当已经通过纸面原型确定了大致的方案时,也就同时确定了产品的框架、主要流程、基本信息和功能等。

。工具

纸面原型,购买成套出售的纸面原型工具,包括绘图模板、设计绘画本、图标模具、标准交互组件等。

。表达什么

串联需求、任务、信息、操作等。

界面关系可用绘制的深浅和颜色来表现。

对于移动应用,可用纸面原型来表达动效。通过纸张的折叠和左右移动,可以模仿手机中的下拉、滑动分层等各种动效。

APP   “POP-Prototyping on Paper”和“快现”表现动态效果。

· 设计标准——好的设计需要表达

。原型

经过设计规划阶段,通过设计加工,形成最终的结果。

理想情况下原型的由来
现实情况下原型的由来

原型是项目开发的重要标准和依据。

低保真原型:与最终产品不太相似的原型。可以是纸面原型(草图),也可以是用软件绘制的线框图。

         鼓励使用:纸笔。

         较大团队:用专业软件Axure、Visio来设计原型,并向团队成员展示设计成果。使用Axure可以制作一些复杂的动态效果。

         移动端产品,推荐使用PowerPoint绘制原型。强大的动画功能可以掩饰各种逼真的动态效果。

高保真原型:在外观、操作上与最终产品基本一致。

。原型内容

 1)简要说明与信息结构

变更日志:同需求文档一样,原型设计也不可能一次到位,一般都需要经过沟通、评审后略做调整。更新日志,可以方便项目组成员看到每次更改的内容,然后重点关注这部分内容就行,大大提高工作效率。

更新日志示例

版本说明:适合快速迭代且迭代周期较固定的项目。

版本说明实例

信息结构:产品内容都有什么,是如何组织的,页面层级是如何分部等等。(被设计加工过的产物,是综合考虑产品逻辑结构和用户习惯而得到的结果)

信息结构示例

 2)任务流程与页面流程

任务流程:用户使用产品时,它的每一步操作会遇到什么结果、系统会如何反馈等。关注用户如何操作、页面如何反馈等,从而引导用户完成目标。

用户任务流程示例

页面流程:更清晰、具体。可以看到具体的页面,以及用户如何通过操作,从一个页面跳转到另一个页面的完整过程。

页面流程示例

3)线框图&交互说明

线框图:原型图里的静态部分

交互说明:原型图的动态操作效果。

交互说明示例

交互说明——建议采用说明与动态效果相配合的方式。

交互说明类型:

(1)限制:包含范围值、极限值等。

范围值:数据的取值范围。比如,当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时,你必须标注清楚它们的选择范围,否则开发人员就不清楚该如何设定。

范围值说明示例

极限值:数据的显示限制。比如,最多应该显示多少字数,超过时如何显示,是否折行等。

极限值说明示例

(2)状态:包含默认状态、常见状态、特殊状态等。

默认状态:默认显示的文字、数据、选项等。需要注明,否则开发人员可能难以意识到这是用户填完的结果,还是默认就有的。

默认显示部分文字
搜索框内预置文字

常见状态:主要针对某一个模块,经常遇到的一些状态。

签到模块常见状态示例

特殊状态:非正常情况下的样式、文案、说明等。

特殊状态说明示例

(3)操作:包含常见操作、特殊操作、误操作、手势操作等。

常见操作:主要指正常操作时得到的反馈状态。

翻页控件常见操作状态示例

特殊操作:一些极端情况下的操作。

误操作:尽量避免用户犯错的机会。

误操作示例

手势操作:用户使用移动产品时的操作方式。

手势示例

(4)反馈:用户操作后得到的反馈动作,包含提示、跳转、动画等。

提示:操作后系统反馈给用户的文字说明

提示反馈示例

跳转:需要说明跳转时是“原页面刷新”还是“新页面打开”。

移动应用转场示例

              此外还需要注明在界面的不同位置以不同手势操作时,会跳转到哪里。

移动应用跳转说明示例

动画:给人感觉比较友好、趣味性强。

移动应用动画反馈示例

。你真的会画线框图吗

1)通过明暗对比表达,界面元素的优先级关系更直观。

明暗对比

2)不要用截图与颜色

3)合理的布局(尽量保持简单的结构,最好不要出现2列和3列混排的设计)

4)遵守栅格规范

5)标记第一屏高度

6)表达清楚UI逻辑

【整理优先级。一般来说,操作的优先级大于链接,链接的天优先级大于文本。】

最重要的操作:一般用按钮来表现。比如收藏夹中的“加入购物车”按钮。

下来是普通操作,如“对比”等。

最后是消极操作,如“删除”等。

如此,就相当于提前定义好了一套规则,它可以用在不同的表单页面上。通过这个细致的规则,可以保证最终的字号及颜色符合逻辑,减少了视觉设计师的工作成本。

界面逻辑清晰的线框图

7)考虑视觉实现后的效果

8)了解视觉趋势

UI风格每年都在变化

上图可看出,目前视觉趋势如下:

~宽度变宽,留白增多。

~渐变减少,视觉风格更加扁平化,整体感觉更清爽。

~通过空隙和留白来分割区域,而不是用线来分割。

~布局更规整。

~去掉不必要的视觉元素。

。写交互说明的诀窍

1)尽量使用真实、符合逻辑的数据内容

2)不遗漏特殊状态的描述

3)避免过长的说明

            ~需求或设计方案有问题,导致逻辑异常复杂。

            ~这个方案的开发成本是否很高,有没有这个必要(有些异常情况出现频率极小,可以适当舍弃,保证体验和开发成本之间的平衡性)。

            ~如果需求和设计方案都没问题,是否表达方式有问题?应尽量避免文字堆砌。

            ~避免流水账式的说明。

流程图代替文字说明,并将各种状态罗列出来。

巧妙组织文字说明。(if/else/case等)

制作动态效果。

4)关于重复出现的模块,尽量用模块化的思维方式来处理较复杂的问题。

5)如原型有修改,不要口头沟通,而要更新交互说明并告知大家。

。关于设计规范

1)设计规范

是对设计的具体细节、技术要求,是设计工作的规则和界限,是一种模块化应用的方法……

包含很多内容,比如交互规范、色彩规范、logo规范、UI图标规范、空间规范等。

设计规范示例

2)没有规范容易出现什么问题?

       ~不同频道/模块独立设计。

       ~同类功能组件存在多种样式。

       ~同类元素多样性。

       ~设计效率低下。

       ~设计质量难以把控。

3)规范解决了什么问题?

       ~“一致性”形成鲜明的产品特征,增强用户粘度。

       ~提高易用性。

       ~满足团队协作需求。

4)设计规范的分类

       ~纵向:交互规范+视觉规范。交互规范优先与视觉规范。

       ~横向:产品战略级方向的大规范+耽搁项目的小规范。

5)什么时候开始设计规范?

       ~大型且重要的产品。

       ~产品结构、页面类型、UI组件相对较单一,可复用的内容较多。

       ~项目人手充足、时间较充裕。

       ~品牌风格、主题风格已确定完毕,品牌备忘和梳理势在必行。

       ~产品线日益丰富,后续设计一致性和可循环的要求被提高。

       ~产品结构壮大,新人不断涌入,沟通和执行效率亟待提高。

6)制定原则

       先制定大的设计方向,再制定项目中单个的详细说明。先制定团队合作的规范,再制定个人操作上的规范。

· 项目跟进——保障设计效果的实现

评审前要做充足准备
主导评审流程
收集有价值的反馈
勤于沟通
在视觉稿上标注具体尺寸

设计师在标注页面时,一定要与前端采用相同的规范和标准。如果设计师标注行高时,标注的是文字之间的距离,而前端写页面时,行高的标准是文字高度+上下空隙高度,那么前端在看到设计师标注的尺寸时,还要换算成自己需要的尺寸,标注的意义就会大打折扣。

设计与开发需要最终确认


设计走查

· 成果检验

检验设计成果的方法

1)可用性测试

通过观察用户使用产品,发现产品中存在的问题的一种方法。

可用性测试的流程

       ~给出使用目标,而不是直接地操作。

       ~尽量选择最重要、最频繁的任务进行测试。

       ~符合正常的操作流程。

可用性测试考量标准
可用性准则
严重等级评估标准
可用性问题的量化评估表

2)A/B测试

定量分析,样本量大,但结果较为客观。

A/B测试示意图

(1)设定衡量标准

(2)对同一个用户呈现相同的页面

(3)保证两个版本同时测试

(4)单一变量

(5)A/B测试的眼神——灰度发布。

将旧版本作为方案A,新版本作为方案B,让一部分用户继续使用旧版本,一部分用户切换到新版本,然后观察用户反馈和产品数据。

3)定性的用户反馈和定量的产品数据

(1)收集和独栋用户反馈

移动应用在应用市场收集用户反馈。App Store,安卓的Google Play,又或者是豌豆荚、应用助手等第三方应用市场,都可以找到大量的评分、评论信息。

分析用户反馈。从内容、功能、使用流程、设计、新功能建议和现有Bug等几个方面对问题进行归纳。

(2)用数据检验产品目标

五、设计师素养

如何思考和分析
品牌的作用
提升品牌形象的一些设计准则
不同沟通方式的特点
不同沟通方式的适用环境
设计流程
完整的项目流程
小功能的项目流程
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,898评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,401评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,058评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,539评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,382评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,319评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,706评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,370评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,664评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,715评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,476评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,326评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,730评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,003评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,275评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,683评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,877评论 2 335

推荐阅读更多精彩内容