1.6万字诚意之作｜如果你想成为一名交互设计师，这篇文章值得慢读

关于交互设计，这是1篇很全很全很全（重要事情要说3遍）的科普文章。作者写了1.6万字，实在是诚意之作。如果你打算走进交互，此文值得真的真的真的（重要事情要说3遍）值得1读^_^ by 小编

 

目录导读：

1. 交互设计概念

2. 交互设计输出物

3. 交互设计相干理论

4. 交互设计流程及方法

5. 交互设计常见案例分析

6. 交互设计规范及趋势

7. 交互设计师进阶之路

1. 交互设计概念

1.1 交互设计定义

（1）甚么是交互设计？

这里比较偏向于优设网的回答：“你来我往”谓之”交互”；这里的”你来”指的是”输入（input）”，”我往”是”反馈（feedback）或输出(output)”。

交互可能存在于人与人之间，也可能存在于人于物之间。

（2）交互设计和视觉设计有甚么区分？

交互设计偏向于用户目标的实现，让任务行动变得更简单；视觉设计偏向于美化和外显表达，让产品变得更好看，二者的侧重点不同。

例如，微信抢红包页面，交互设计让用户更容易达成“抢红包的目标”，只需点击“拆红包”便可以抢红包，点击后有反馈（要末抢到红包，显示抢到多少金额，其他人抢到多少金额；要末抢不到红包，手慢了，抢光了。）视觉设计则让界面像看起来像真实的红包，中间的黄色按钮更明显，提示可以点击。

 

（3）交互设计3要素是甚么？

交互设计3要素是目标、任务、行动。所有的交互设计都是围绕完成用户的目标进行服务的，不能顺利完成用户目标的交互，都是没成心义的。

怎样理解这3要素的区分？

举个例子就是：小明饿了，他需要填饱肚子（目标），他跑到楼下的餐馆进行点餐、吃饭、结账（任务），吃完了出门的时候推门（行动）出去，然后过马路回家。

1.2 认识交互设计师

（1）甚么是交互设计师？

交互指的是产品与它的使用者之间的互动进程，而交互设计师则是秉持以用户为中心的设计理念，以用户体验度为原则，对交互进程进行研究并展开设计的工作人员。——百度百科

（2）交互设计师与产品经理、视觉设计师有甚么区分和联系？

1般的公司很少设有交互设计师的职位，交互设计的功能1般由产品经理或视觉设计师兼任，所以很多人都认为，产品经理能干交互设计师的活，但是产品经理干的活交互设计师干不了，这类理解是带有偏见的，由于很多人毛病把交互设计师理解为画流程图或原型图的职位。

它们3者的职位有本质的区分，产品经理更关注产品的业务方向、产品计划、生命周期等大方向，而交互设计师更侧重与让用户使用产品时更好的完成目标任务，并且在进程中得到情感上的满足，最后，视觉设计师更关注产品的外在表达。交互设计师在产品团队中处于中游的位置，上游为产品经理，下游需要对接视觉设计师，所以大家之间的理解和沟通10分重要。

（3）交互设计师的职业发展路径如何？

首先，任何职位都有高低能力的区分，能力就会体验为职位、待遇的不同，所以交互设计师较为简单的职业发展路径为：

①低级交互设计师<10k：俗称「线框仔」，出没于小公司和外包公司，没有设计决策权，专门配给不会画图的产品经理使用。门坎低，只需要熟练使用原型软件，会看着其它APP抄设计便可。无发展前程，看到此类岗位请阔别。

②中级交互设计师10k⑴5k：除画线框图外参与1定的产品层面的工作，有1定设计决策权，通常为知名院校应届毕业生，可以对设计决策提出异议，但不1定被接受。

③高级交互设计师15k⑵5k：通常可以参与全部产品的概念进程，工作职能与产品经理更加接近，有更多的设计决策权，通常工作经验超过2年，可以和产品经理、视觉设计师、用户研究员及开发人员进行「剧烈讨论」，并有能力保护设计师的尊严。

④资深交互设计师>25k：通常出没于BAT、财大气粗的创业公司及设计咨询公司。有着丰富的成功设计案例，通常工作经验超过5年，有主流大公司工作经验，有大型项目的设计管理经验，业内有1定名望。

——以上分级，参考寺主人在知乎的回答《如何成为交互设计师？》

上面的发展路径属于职业的纵向发展，固然交互设计师也能够横向发展，例如，转产品经理，但产品经理一样有高低能力差异，其实不代表你本身是高级交互设计师，转到产品经理就是高级产品经理。对当前产品职位入门门坎愈来愈低，细分能力要求愈来愈高的情况下，建议交互设计师选择纵向的反正方向，并且深耕1个行业领域。

1.3 交互设计师需要具有哪些素质？

这是1个交互设计师面试必考题，它能反应我们对交互设计师的岗位的理解，并且检测你是不是合适成为1名交互设计师。其实，这些素质都是可以通过后天训练而成，如果想要成为1名交互设计师，可以从这些方面进行刻意训练。

（1）全局观

交互设计师需要全程参与产品的讨论，与产品团队的人员达成共鸣，我们的交互设计水平到达所有人的认可；另外一个方面，我们要对产品的全局了如指掌，产品的现状特性，产品的目标，产品的设计流程等。

（2）关键思考能力

如果有看过NBA的人都应当知道，关键球，都是掌握在关键角色手里，一样，产品的具象化，一样掌握在交互设计师手里。交互设计师作为中游职位，会面临来自上游产品经理的挑战，一样会面临下游视觉设计师、开发人员的挑战。所以关键思考能力就变得尤其重要。

关键思考能力体现在两个方面：1方面是我们的设计是经过深入的思考，并且经得起考验，要深入到业务逻辑和商业价值进行思考，而不是停留在产品功能设计表面，同时，在用户体验和开发本钱之间到达1种平衡，这样我们才能在设计评审上能坚定自己的立场；另外一个方面，作为“设计师”，永久别想着1套方案就能够解决所有的问题，要有备胎方案为关键时刻做准备，正如NBA关键先生被防死了以后，还有planB。

（3）细节

2016年、2017年的交互设计趋势中都有提及，交互会更比拼细节，设计稿不能马虎了事，1个流程细节，1个字段，乃至是像素上的差异，都有可能造成严重的后果。重视细节习惯的养成，交互设计师才能对产品负责，对其他同事负责，对用户负责。

（4）审美能力

相当1部份交互设计师，在画原型的时候，为了寻求速度，都会东拼西凑地组成1个原型，致使视觉设计师或开发的同事都很难看懂原型，更不用说，需要摹拟出真实的产品是甚么模样。所以，交互设计师还必须晓得审美，在页面具体化的时候就知道最后的页面是大概甚么模样，否则，视觉设计师重新把我们的设计稿改1遍，改成了终究产品上线的模样，我们画原型还有甚么意义？

另外1点，具有审美能力的交互设计师，他流程图、原型、交互说明文档等交互设计输出物，必定是竹苞松茂的，从外观看起来就是高质量的东西，给其他团队同事1种更好的浏览感受，大大提高工作效力。

（5）同理心

同理心，我们更多知道的是产品经理要有同理心，要站在用户的角度去思考问题，这个产品的需求是不是满足用户的需求？用户用得爽不爽？一样，交互设计师也需要同理心，明确用户的目标是甚么，让用户使用产品的时候不要做过剩的操作，更好的完成目标。

对交互设计师来讲，同理心不光是针对用户，也针对所在产品团队。1个交互设计的产出，都有视觉设计师或开发团队工作量在里面，所以从交互设计的岗位来看，要晓得换位思考，珍惜开发工程师和设计设计师的劳作成果，不做高本钱低产出的需求，晓得谢绝业务方不公道的需求。

（6）创新能力

资深交互设计师和普通设计师之间的差异在于创新能力的差异，资深交互设计师总能在设计中找到可以创新的点，把它改进，并能大大提高产品的受欢迎程度（转化率、保存率）。不要临摹他人的产品，需要时刻保持创新的精神，我们可以做得更好。

（7）逻辑思考能力

把逻辑思考能力放到最后来说，其实不意味着它不重要，相反，逻辑思考能力是最基础需要具有的能力。其实，不光是交互设计师，放在任何1个职位都是1样的，逻辑思考能力强的人，适应1个岗位更快，思考比他人更深远，工作效力比他人更高。

1.4 交互设计师的职责是甚么？

了解交互设计师职责的最快方法是招聘网站，我们先来看看3个公司对交互设计师的职责要求。

唯品会（高级/资深交互设计师）

1. 负责唯品会移动端及相干延伸产品的交互设计，参与产品的整体设计计划；
2. 分析业务需求，履行具体的交互设计，并推动设计落地与验证；
3. 对现有产品的进行可用性测试和评估，提出改进方案，延续优化产品的用户体验。

阿里巴巴（高级交互设计师）

1. 负责国际利用发行产品的功能需求优化、产品流程梳理、交互设计等工作；
2. 与产品、运营团队合作，分析业务需求，归纳及设计产品交互页面，优化用户体验流程。

网易（高级交互设计师）

1. 参与公司的邮箱系统或相干产品的计划构思和创意进程；
2. 与产品人员沟通，分析业务需求，并加以分解，归纳产品人机交互界面需求；
3. 设计产品人机交互界面结构、用户操作流程等；
4. 与视觉设计师密切配合，产生美观易理解的界面；
5. 跟踪产品开发流程并推动落实，制定并输出相干设计规范；
6. 优化产品可用性，不断地改良用户体验；
7. 宣扬和推行”以用户为中心”的设计理念；
8. 参与部门内外的用户体验概念和流程的普及工作。

所以，基本上是大同小异，我们总结1下职责要求就是：

1. 参与产品的整体设计计划，输出交互设计产出物，推动产品的落地实现；
2. 对产品进行延续性的设计优化，输出相干设计规范，提升用户体验；
3. 调和和推动“已用户为中心”的设计理念，在公司范围普及用户体验概念和流程；
4. 负责设计前瞻性的研究工作。

所以，不要再以为交互设计师只是画原型的线框仔了，我们如果想要成为交互设计师，就要明确交互设计师的职责所在。

1.5 交互设计师有甚么专业背景要求？

虽然说人人都能成为交互设计师，但是专业科班出身的同学，无意是企业最早青睐的对象。以下这些专业是最贴合的：

（1）交互设计

（2）艺术设计

（3）工业设计

（4）心理学

1.6 交互设计师需要哪些知识体系？

本段内容可以参考文章《腾讯高级交互设计师：甚么是优秀的设计思惟与方法？》总结得比较到位。

（1）商业（帮助寻觅切入角度和决策）

所有设计都是为商业而服务的，没有产生利润的设计都是毫无意义的，即便是早年宣传“免费”的360卫士，一样也反思免费的模式已走不通。互联网的发展趋势、产品的商业模式、所在的行业知识、当前的政策背景、新技术的发展趋势，这些都是需要首先了解的，这样才能设计出有价值的好的产品。

（2）思辩（提高逻辑分析能力和解读视角）

如果有读过《交互设计寻思录》1书的人，应当知道，设计方法不过就能够分为两种：感性设计，设计只是灵光1闪；理性设计，通过设计方法论或大量用户验证来进行设计。对大多数交互设计师来讲，理性设计应优于感性设计，这就需要交互设计师去训练自己的思辩能力。这个设计好在哪里？不好在哪里？我能做到哪方面的改进？

（3）设计（设计思惟和设计表达）

说白了就是看设计的专业书，深入学习设计知识。例如《用户体验5要素》、《交互设计4策略》、《交互设计寻思录》、《认知与设计》等等。

（4）人性（对人性和社会的理解）

如果说中级交互设计师与高级设计师的差距在哪里，那末对人性的理解是其中的1个重大的差距。交互设计基本是以用户为中心的设计，如果对人性的了解更深入，设计水平一样会突飞猛进。

看看这些经典的心理学书籍吧，《心理学与生活》会告知我们人的知觉组织是如何对分组起作用的——格式塔原理；《社会心理学》告知我们好评如何影响人的购买行动——从众心理；《设计师要懂心理学》则告知我们用户认知会比视觉耗费更多的脑力资源——人如何思考。

（5）艺术（提高审美能力）

提高审美能力就不用多说了，可以大致去学习1下视觉设计的知识，例如最基本的栅格理论、色采原理（色调、饱和度和明度）；同时，可以关注1下时尚杂志、家具设计等，能显著提高自己的审美能力。另外，每一个设计师最好都计划好自己的作品集，把作品集做得漂漂亮亮也是1种审美的提高进程。

（6）技能（创新工具的使用）

很多入门的新人应当都会听过1句话：Axure只是最基本的工具，交互设计其实不是Axure画原型那末简单。这句话是对的，但是同时也是毛病的，所谓的毛病就是，交互设计师的设计落地都要通过工具进行表达，工具就是技能。犹如Photoshop成为视觉设计师的代名词1样，交互设计师一样也需要有技能傍身——Mindnode Pro、Axure、Visio等等。

另外，交互设计师不能满足于用1种工具去表达，这就需要交互设计师发掘学习更多的技能，例如摹拟真实的动效，让开发工程师更好的理解，让交互设计让用户用起来更愉悦。

1.7 交互设计师经常使用的工具有哪些？

（1）思惟导图

Mindnode Pro、xmind等，经常使用思惟导图，会让你的设计灵感得到公道的释放，最好的移动端也能用的思惟导图，所有的灵感都是1瞬间，我们可以用手机随时随地记录灵感。

（2）流程图

Visio，或在线的流程图工具ProcessOn。画好流程图，其实不比划原型图更容易，对开发工程师来讲，流程图比原型图更重要。

（3）线框图

Axure，看个人喜好或团队协助要求，最少会1种，建议学习Axure，对大多数公司都适用。

（4）视觉设计/界面设计

Sketch，交互设计师如果本身没有Photoshop基础的话，不建议学习Photoshop进行界面设计，Sketch入门简单， Symbol复用、切图简单的特性会让交互设计师爱上它的，唯1的缺点就是，它只能运行在mac上面。

（5）交互说明文档

Word、PPT乃至Axure等，随便选择，但是要注意1点，1定是可以生成目录进行索引的，修改更新方便的。

2. 交互设计输出物

2.1 设计思考

（1）设计目标

在项目1开始时，交互设计师就必须参与其中，切记，切记，切记，重要的事情说3遍！不然终究只能沦为画原型的工具，设计方案也容易偏离目标。交互设计师参与项目时，必须弄清楚下面3件事情：

1. 我们的业务诉求是甚么？
2. 我们的产品方向是甚么？
3. 用户希望用产品达成甚么样的目标？

把这3者归纳起来，构成我们的设计目标，终究得出设计方案。前面的步骤1般都会酝酿在设计师的脑海中，很少有设计师会通过书面去表达出来，或设计师认为根本没必要要去表达。但是，如果设计师可以把这部份思考进程放进交互设计输出物当中，就会让设计变得更加透明，在设计提案时更有说服力，同时，也记录当时的设计思考进程，便于往后追溯修正。

 

（2）用户

这个需求针对的目标用户群有哪些？了解用户才能更好地对用户想要达成的目标进行，1般可以3个方面对用户进行了解。

1. 用户目标：用户希望用产品达成何种目标，例如用户能用订餐APP吃饱饭。
2. 用户特点：包括生理特点（年龄、性别），社会特点（收入、学历），了解用户的特点可使产品设计更贴适用户，例如针对老人的手机，字体会设计得更大，这样方便老人浏览；针对儿童的产品，首先要斟酌安全性，锋利、细小的物品是严禁使用的。
3. 用户权限：常见于后台产品设计，弄清楚用户角色所具有的不同菜单权限、数据权限。例如总部人员能看到所有分公司的数据，而分公司人员只能看到所属分公司的数据。

（3）场景

场景的作用是解决甚么人在甚么情形下会使用到产品或功能的问题，我们阅读1个网页，下拉后会出现回到顶部按钮，这就是1个比较经典的场景。基于场景进行设计，可以从以下3个因素进行斟酌，见《阿里设计师分享设计方法：如何基于场景做设计？》1文，对场景化的介绍和利用论述得比较详细。

1. 时间因素：斟酌用户在甚么时候会使用该产品，是工作的时候，上班的路上，与情人约会的时候，睡觉前，朋友集会，还是锻炼的时候。例如，微信的勿扰模式，开启后，可以指定某时间段内不会收到消息推送。
2. 地点因素：斟酌用户在甚么地点会使用该产品。在家，在学校，在办公室，公交车上，打的的时候，地铁里还是饭馆里。例如，在户外阳光直射后，手机屏幕会自动调剂亮度，以便用户能更好的看清屏幕内容。
3. 人物因素：斟酌使用该产品的人群会有怎样的特点，通过数据的积累勾画用户的标签，到达千人千面的个性化服务。例如电商经常使用的推荐商品模块“猜你喜欢”，都是根据用户的喜好推荐相应的产品。

2.2 主要交互产物

（1）信息架构

设计web、APP产品，常常要进行信息架构设计，复杂的信息架构，对交互设计师的业务理解能力、产品的全局把控能力、用户场景的设定提出更高的要求。在描绘信息架构图时，不但要输出架构层级，而且要清晰注明他们之间的相互关系。

 

（2）流程图

流程图（Flow Chart），是流经1个系统的信息流、观点流或部件流的图形代表，简单来讲就是把1个流程用图形化来表达出来，方便他人了解。交互输出物中常见的流程图是任务流程图和页面流程图。

1）任务流程图

任务流程图可以直接展现1个或多个角色从1开始到结束的所有任务流程步骤，和与各角色之间、各系统之间、各页面之间的关联。做任务流程图输出物的时候，不但要交付流程图，还要交付针对流程图的必要说明，例如流程说明，图例说明，让浏览对象能“读懂”流程图。

 

2）页面流程图

页面流程图可以清晰表达用户在使用产品进程中的页面间上下游关系及跳转页面逻辑，同时也帮助设计师梳理产品整体页面层级，通常作为中大型项目输出物产出。（PS：利用axure自带生成流程图的功能，可以很方便生成页面流程）

 

3）异常流程

异常流程通常是流程图输出物中疏忽的1个点，异常流程可以不用画流程图，但是需要注明异常流程的处理方法。针对项目的不同，异常流程也复杂多样，下面是部份举例：

1. 用户网速缓慢、超时、乃至无网状态时，流程上如何引导用户正确地返回、自动保存已输入信息或检查网络环境？
2. 服务器无反应时，如何引导用户进行下1步操作？
3. 页面加载为空白内容时，如果引导用户重新尝试或放弃等待？
4. 上传进程中网络中断，是不是提示用户检查网络环境，重新进行上传？

（3）线框图

线框图是交互设计师的主要交互输出物，主要以黑白的字体、控件和块填满全部页面，线框图1般不寻求华丽的表达，但要满足以下要求：

1. 能体现界面的大体结构和布局
2. 表达内容的模块位置摆放公道
3. 能展现界面的主要交互元素，例如按钮，链接跳转，输入框等元素

 

• 常见输出物问题：交互设计师是不是需要输出高保真的原型？
• 答：视项目需求和交互设计师个人时间效力，1般不太建议输出高保真的原型，由于制作本钱和保护本钱都很高，除非制作、保护高保真原型的效力能抵消这类本钱。

（4）交互说明文档

交互说明文档又可以称为交互注释，图例展现和文字注释是主要的手段，交互注释应包括以下的内容：

1. 链接指向：点击XX跳转到哪一个页面？是在当前页面打开、新窗口打开还是弹框显现？
2. 内容展现
3. 内容输入
4. 交互样式
5. 特殊状态
6. 动效说明
7. 手势说明
8. 提示文案

 

2.3 项目管理

交互设计师的项目管理跟传统意义的项目管理不1致，交互设计师的项目管理主要是为了沟通上下游，确保项目依照设计目标进行推动，项目管理主要包括以下内容：

（1）业务/产品的原始需求

记录项目的原始业务/产品需求，对比项目实行是不是和预期需求偏差

（2）项目评估

项目开始前的可能性评估，包括项目实行周期，项目实行难度，可能性的潜伏风险评估

（3）大致进度计划

和产品经理、项目经理沟通，落实项目大体的进度计划，确保项目如期交付

（4）评审记录

每次交互设计评审，都应有记录，主要记录实行细节和优化点

 

2.4 设计发现

设计发现，是指为交互设计服务的输出物，交互设计师也需要竞品分析，必须要时需要协助用户研究的同时展开用户研究工作。

（1）竞品分析

竞品分析有多种方法，有简单的功能对照法、SWOT法、用户体验要素法等等。

例如，可参照经典的《用户体验要素》1书，可以下面几个维度进行切入：

1. 战略层（产品定位、用户需求）
2. 范围层（主要功能）
3. 结构层（信息架构）
4. 框架层（交互设计）
5. 表现层（视觉设计）

另外，可以增加运营推行、商业模式等维度。

 

（2）用户研究

推荐交互设计师必须掌握和输出的1项产品，或协助用户研究人员输出的产物，通过用户研究，不但可以发掘可能性的需求，还可以验证交互设计方案。

 

2.5 设计资源库

设计资源库1般指工具的元件库，例如Axure的元件库，Sketch的组件库，交互设计师产出设计资源库，能让后续交互设计快速地复用样式，后续的交互设计师能快速上手；同时也能够统1项目的交互设计规范，注意，网络上分享的元件库东拼西凑其实不能很好地规范项目。

1般建议产出两套组件库，1套为Axure的，1套为Sketch的（仅针对mac用户）。Sketch的组件库可以参考《微信小程序的组件库》。

 

 

3. 交互设计相干理论

3.1 需求理论

（1）需求发掘

需求发掘是产品从业人员常常需要面临的困难，交互设计触及的需求发掘，与产品经理同理，可以采取一样的方式和方法，依照发掘的对象不同，我们可以分为外部发掘和内部发掘两种。

1）内部发掘

针对公司内部，常见理论是：头脑风暴。即组织群体决策，交互设计师以明确的目标方式组织大家参加会议，自由发言，让大家提出更多的可能性问题或方案。

另外，内部发掘的需求还可能来源于：业务需求、运营反馈、产品经理

 

2）外部发掘

针对外部用户，或是产品的真正使用者。常见理论是：用户研究。用户研究是用户中心的设计流程中的第1步。它是1种理解用户，将他们的目标、需求与您的商业主旨相匹配的理想方法。用户研究重点工作在于研究用户的痛点。

用户研究常见的方法有：可用性测试、焦点小组、问卷调查、A/B测试等，每个方法都可以深入展开，有兴趣可以深入了解1下，此篇章不展开详述。

另外，外部发掘的需求还可能来源于：竞品分析、行业分析、社交平台。

 

（2）需求分级

需求分级是指发掘完需求后，对需求进行公道的分解，去除伪需求，实现那些真正对产品或设计目标有帮助的需求。常见理论有以下3种：

1）通用4象限法

适用处景：交互设计师收到很多需求时。

4象限最早是用于时间管理的方法，目的是解决时间不足，但是需要完成的事情又很多的情况。该方法理论一样适用于需求分级，帮助交互设计师进行需求管理。方法是将需求划分到4个象限当中，依照落在各个象限的处理方式进行处理。

①重要且紧急的需求：立即弄定

例如，微信的抢红包功能需求，需要在春节前上线（紧急），关乎到微信的战略定位（重要）。

②重要但不紧急的需求：排期实现

例如，产品的运营统计需求，能帮助分析产品的运营情况（重要），但其他功能都优先于统计前实现（不紧急）。

③不重要但紧急的需求：需要斟酌

例如，刚开会老板说了，这个按钮的色彩不好看（不重要），想今天调1下（紧急）。

④不重要且不紧急：不用实现

例如，产品能否增加1个国际版本，方便我们这些歪果仁（不重要，不紧急）。

 

2）kano模型

适用处景：搜集到的需求当中，哪些需求能显著提升用户的满意度？

KANO 模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具，以分析用户需求对用户满意的影响为基础，体现了产品性能和用户满意之间的非线性关系。

①必须具有的（Must-have）

例如，1款美颜工具产品，拍照是必须具有的基本功能。

②所期望的（Linear）

例如，1款美颜工具产品，使自己变得更漂亮——美颜，是用户比较明确“提出”的，否则为何要下载使用。

③超越预期的（Exciter）

例如，1款美颜工具产品，竟然可以1键美颜，自动帮你P成大眼、小脸、巨乳、蜂腰的大长腿女神，远超预期。

 

3）马斯洛需求层次理论

适用处景：需求实现的价值有多大？

该理论是由美国心理学家亚伯拉罕·马斯洛在1943年在《人类鼓励理论》论文中提出，人类需求像阶梯1样从低到高按层次分为5种，分别是：生理需求、安全需求、社交需求、尊重需求和自我实现需求。

①生理需求

最基本的生存需求，例如，利用产品能最基本的生存需求：点外卖。

②安全需求

人身财产安全有保障，例如，在线支付安全。

③社交/情感需求

例如，给最爱的人买1份保险，满足情感上的需求。

④尊重需求

产品给予用户带来的成绩感，常见例子是游戏升级。

⑤自我实现需求

用户通过产品实现了人生寻求，例如，利用股票软件赚取了第1桶金。

注意：位于金字塔顶真个需求，能使利润最大化。

 

3.2 框架设计理论

（1）用户体验5要素

适用处景：采取5要素的方法，从不同层次指点产品的框架设计。

来源经典的著作《用户体验的要素 -以用户为中心的Web设计》，用5个要素：战略层、范围层、结构层、框架层、表现层来论述以用户为中心的设计方法。

1. 战略层：产品目标及其目标用户（做甚么、为谁而做？）经营者和用户分别想从网站得到甚么。
2. 范围层：功能及其内容需求整合（需要做哪些？）
3. 结构层：交互设计及其信息架构（怎样做？）
4. 框架层：界面设计、导航设计和内容（信息）设计（要做成甚么模样？）
5. 表现层：功能及内容的视觉显现（做成了甚么模样？）

 

（2）奇异7±2

适用处景：规范导航或选项卡的数量，例如，我们网站的菜单最好数量是多少个？

人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5⑼ 项信息后人类的头脑就开始出错。

假设你的短时记忆像1般人那样,你可能会回想出5~9个单位,即7±2个，这个有趣的现象就是奇异的7±2效应。这个规律最早是在19世纪中叶,由爱尔兰哲学家威廉汉密尔顿视察到的。他发现，如果将1把子弹撒在地板上，人们很难1下子视察到超过7颗子弹。

7±2法则对我们设计上的启示：

• 导航或选项卡尽可能不要超过9个
• 如果导航或选项卡内容很多，可以用1个层级结构来展现各段及其子段，并注意其深广度的平衡

 

（3）卡片分类法

适用处景：为我们设计导航、菜单和分类提供帮助，例如，银行APP转账和查询余额两个功能是不是放在1起？资金归集呢？

卡片分类法是1种计划和设计互联网产品或软件产品的信息构架的方法。它属于用户研究中的1种方法，简单来讲就是用户来对信息卡片（或是菜单卡片）进行归类，从而得出信息关联性的1种方法。我们最后把关联性更强的菜单放在1起，就构成了较为科学的1套信息分组。

 

3.3 界面设计理论

（1）格式塔心理学

适用处景：界面设计时，选择有容易理解的形状，把相干联的元素组织在1起。

人在视察和理解时，被视为有组织和结构的整体时才可以得到理解。简单来讲就是人们首先会注意到1个有整齐、规律的整体，或说，人们会自动把所见的事物在人脑中加工为1个整体。

格式塔理论开创人提出的5项基本法则：

 

（2）交互设计4策略

适用处景：界面设计元素组织

出自《简约至上-交互设计4策略》1书，4策略分别为：删除、组织、隐藏、转移，几近任何界面设计都适用这4个策略。

1）删除-去掉没必要要的的按钮，直至减到不能再减。

例如iPhone只有1个home键，其他按键都删除。

 

2）组织-依照成心义的标准把按钮划分成组。

例如，手机设置中，把同类的设置都归在同1个组别。

 

3）隐藏-把那些不重要的功能隐藏，避免分散用户的注意力。

例如，微信聊天界面，删除、置顶等功能都隐藏起来，需要左滑或长按才会出现。

 

4）转移-只在主要界面/装备保存最基本功能，将其他控制转移到其他界面/装备/用户里。

例如，行程定制，计算机没法为每一个不同喜好的用户提供个性化的行程，所以只提供编辑行程功能，剩余的控制转移到用户上。

 

（3）尼尔森可用性10大原则

适用处景：产品设计与用户体验设计的重要参考指标。

尼尔森可用性10大原则是由web易用性大师人机交互学博士Jakob Nielsen于1995年提出的，主要有10大原则。

1）Visibility of system status 系统可见性原则

系统应当让用户知道产生了甚么，在适当的时间内做出适当的反馈。 大多数流通的翻译是针对网页的：用户在网页上的任何操作，不论是单击、转动还是按下键盘，页面应即时给出反馈。

 

2）Match between system and the real world 匹配系统与真实世界（环境贴切）

系统应当用用户的语言，用词，短语和用户熟习的概念，而不是系统术语。遵守现实世界的惯例，让信息符合自然思考逻辑。

 

3）User control and freedom用户的控制性和自由度（撤消重作原则）

用户常常毛病地选择系统功能而且需要明确标识离开这个的“出口”，而不需要通过1个扩大的对话框。为了不用户的误用和误击，要支持撤消和重做的功能。

 

4）Consistency and standards1致性和标准化（1致性原则）

用户没必要怀疑是不是不同的语言，不同的情形，或不同的操作产生的结果实际上是同1件事情。遵守平台的惯例。也就是，同1用语、功能、操作保持1致。

 

5）Error prevention 防错原则

比出现毛病信息提示更好的是更用心的设计避免这类问题产生。在用户选择动作产生之前，就要避免用户容易混淆或毛病的选择。

 

6）Recognition rather than recall 辨认比记忆好（易取原则）

尽可能减少用户对操作目标的记忆负荷，动作和选项都应当是可见的。用户没必要记住1个页面到另外一个页面的信息。系统的使用说明应当是可见的或是容易获得的。

 

7）Flexibility and efficiency of use使用的灵活高效（灵活高效原则）

系统可以满足有经验和无经验的用户。 允许用户进行频繁的操作。

 

8）Aesthetic and minimalist design 审美和简约的设计（易扫原则）

对话中不应当包括无关紧要的信息。在段落中每增加1个单位的重要信息，就意味着要减少相应的弱化1些其他信息。互联网用户阅读网页的动作不是读，不是看，而是扫。易扫，意味着突出重点，弱化和剔除无关信息。

 

9）Help users recognize, diagnose, and recover from errors 帮助用户辨认，诊断，并从毛病中恢复（容错原则）

毛病信息应当用语言表达（不要用代码），较准确地反应问题所在，并且提出1个建设性的解决方案。

 

10）Help and documentation  帮助文档（人性化帮助原则）

如果系统不使用文档是最好的，但是有必要提供帮助和文档

 

（4）费茨定律

• 适用处景：菜单的设计，可点击对象的尺寸设计
• 定律内容：从1个起始位置移动到1个终究目标所需的时间由两个参数来决定，到目标的距离和目标的大小（上图中的 D与 W），用数学公式表达为时间 T = a + b log2(D/W+1)。

 

它是 1954 年保罗.菲茨首先提出来的，用来预测从任意1点到目标中心位置所需时间的数学模型，在人机交互（HCI）和设计领域的影响却最为广泛和深远。

这就很容易解释了为何菜单都要设置在边沿，手机的实体键放置在边沿，可点击的按钮尺寸要尽可能大。等等。

（5）其他理论

交互设计的理论还有很多，时间有限，就不逐一枚举，有兴趣可以继续了解，例如：奥卡姆剃刀原理、席克定律、泰思勒定律、新乡重夫：防错原则等。

4. 交互设计流程及方法

4.1 设计流程

我们接触的产品1般从计划到上线的流程是以下图这样的，先从目标用户开始，1直到开发实行，然后上线。

 

作为交互设计，一样有属于自己的1套设计流程，注意，这些是通用的流程，但具体交互设计师的习惯或具体的项目，用的流程其实不1致：

1. 需求分析：即业务诉求、用户目标、产品方向综合1起，终究得出主要的设计需求。产出物1般为需求文档或需求列表。
2. 概念设计：这个时候，发散我们的思惟，包括感性和理性，和设计需求1起，构成终究的设计目标。
3. 框架设计：包括导航菜单的设计、页面整体框架和层级等等，输出物1般为草图。
4. 流程设计：产品中的页面流程、功能流程、任务流程等等，主要输出物为流程图。
5. 界面设计：具体的页面设计，主要是把抽象化的设计目标具体化，用线框图表达出来。
6. 验证设计：把我们所学的交互理论代入到交互稿中进行验证，或通过潜伏用户来进行摹拟验证，如可用性测试。
7. 交互说明：所有设计稿定稿以后，编写通俗易懂的交互说明文档，方便与视觉设计、开发同事沟通。

 

4.2 设计方法

“你在设计的生涯中，有无用到或总结出哪些设计方法？”

作为交互设计师小白的时候，这个问题是断然答不上来的，由于那个时候还没接触到这么“精深莫测或不明觉厉”的东西。

设计方法的作用是甚么？主要有两个方面的作用：1方面，设计方法能指点交互设计师更好的进行设计；另外一个方面，经过设计方法包装后的设计，能让交互设计师安然面对产品经理、项目经理、开发同事的质疑。

那末设计方法有哪些呢？设计方法究竟是怎样对交互设计起作用的呢？我们用英国设计协会的“双钻模型”为例来进行说明。来源于IDEO的以人为本的设计思想，和@d.school的设计流程。

 

双钻模型主要分为两个阶段，4个步骤：

第1阶段——为正确的事情做设计（designing the right thing）

第1步：探索（Discover）和调研（Research），此步是发散型的思考，探索和研究问题的本质。

1. 质疑 rip the brief：对需求质疑，对商业模式质疑，对用户质疑，质疑1切不公道的事情。
2. 故事/场景 cluster topics：罗列用户可能遇到的真实场景元素：地点、时间、人物、故事，梳理全部交互流程和节点。
3. 研究 research：针对问题进行研究，例如用户访谈，问卷调查，竞品分析，行业分析等等，终究得到1系列的研究结果。

第2步：定义（Define）和聚焦（Synthesis），此步是将第1步发散的问题进行思考和总结，把问题集中起来解决。

1. 洞察（insights）：把存在的问题、研究结论看透彻，这是1个深入视察的进程。
2. 主题（themes）：把问题归类成为1个主题，或说是把问题归类成为1个系列。
3. 机会领域（opportunity areas）：把之前的行业分析、竞品分析和存在的问题1起比较，发现可能存在的机会突破点，例如这个设计能给用户带来甚么？
4. how might we…HMW：我们在有关的领域应当怎样做，能解决甚么问题？

 

第2阶段——将设计做正确（designing things right）

第3步：发展（Develop）和构思（Ideation），此步是开始真实的交互设计构思。

1. 构思ideation：把问题具体化，我们可以参考流行的设计趋势、好的设计网站或好的交互效果，构思自己的交互设计应当如何做。
2. 评估evaluation：如果构思的进程产生了很多的想法方案，那末我们应当先评估1下可行性。
3. 想法ideas：经过评估以后，终究选择了2~3种ideas

第4步：转达（Deliver）和实现（Implementation），此步等于终究用线框图解决了之前的问题了。

1. 制作原型，测试，迭代（build，test，iterate），重复3次以上。便可以简单理解为线框图的评审（自己把关、产品经理把关、评审把关），反复迭代原型。
2. 淘汰out：淘汰中间不公道的想法和设计，终究保存精华设计。

 

5. 交互设计常见案例分析

交互设计平常需要注意积累案例，并从案例中学习总结，只有案例积累得越多，才能构成质变。本章只是简单示意1下交互可以从哪些案例入手。

5.1 导航

导航包括：左边导航、顶部导航、面包屑导航、电梯导航、搜索等。

 

 

 

 

5.2 流程

常见1个完全功能流程：

 

 

 

5.3 表单

表单包括表单的展现、输入和数据校验。

 

 

 

 

5.4 反馈

有反馈的交互才是交互，甚么时候用轻反馈，甚么时候用重反馈？

 

5.5 场景

离开场景来谈交互，都是耍流氓。

 

 

 

6. 交互设计规范及趋势

6.1 栅格规范

首先，我们要明确1个观念：交互设计师和视觉设计师是密切配合的，所以交互设计师也需要学习1些视觉设计的知识，以避免双方沟通出现问题。栅格化就是视觉设计中的比较基本有用的知识，最少可以规范交互设计师画的原型，没有超过视觉设计师所能承受的“界限”。

我们在设计中经常使用的是：网页栅格系统，百度百科给出的解释是：

“以规则的网格阵列来指点和规范网页中的版面布局和信息散布。对网页设计来讲，栅格系统的使用，不但可让网页的信息显现更加美观易读，更具可用性。而且，对前端开发来讲，网页将更加的灵活与规范。”

栅格系统详细的利用，可以看这篇文章《腾讯高手教你靠谱的布局设定方法》，介绍得10分详细，本文不再累述。

这里只简单总结1下学习栅格规范对交互设计的意义：

1. 和视觉设计师1起，达成页面宽度的共鸣，而不是超越视觉设计的“边界”；
2. 在交互设计时，用栅格化规范模块的布局，整齐的分为N栏，让原型变得更美观；
3. 公道利用栅格，产出“黄金比例”的效果图，例如制作简历或作品集。

 

6.2 平台设计规范

交互设计师必须掌握的知识点，也是面试必考题：平台设计规范。由于，我们所有的设计，几近都是基于这些平台来进行设计。

但要注意，不要过度在乎平台的设计规范，有1些规范也有自相矛盾的地方，举例摘自：崇书庆发表于妖鹿山设计屯的《【交互小零食】- Ser.02》在iOS9规范中，

“关于弹窗中的“推荐选项”应当放在左侧还是右侧，分了两种情况：如果推荐选项有破坏性，那末应当放在左侧。如果没有破坏性，则应当放在右侧。但到了iOS10的时候，却变成了推荐选项都应当放在右侧。”

以下是1些交互设计师常见需要掌握的规范举例，详细规范需要自行去了解。

（1）IOS10设计规范

（2）Material Design

喜欢Andriod和Material Design风格的，不容错过。

（3）Window10 UWP

来自微软的UWP设计规范，参考官网《设计和UI》

（4）微信小程序

新的热门，了解大平台是怎样做设计规范的。参考微信小程序官网给的规范《微信小程序设计指南》

 

6.3 设计趋势

作为1名优秀的交互设计师，当前的时尚流行元素，和设计趋势，也是需要了解的，不要让自己的设计跟不上时期。

建议交互设计师了解两方面的设计趋势：交互设计趋势，和视觉设计趋势。在年初或年末的时候搜索最新的看便可。

2017年设计趋势文章推荐：

（1）交互设计趋势：《2017年度交互设计趋势》

（2）视觉设计趋势：《8个你需要知道的2017年UI设计流行趋势》

7. 交互设计师进阶之路

7.1 突破瓶颈

每一个交互设计师通过努力都能成为高级交互设计师的水平，要想成为优秀的资深交互设计师或业内有影响力的设计师还需要突破1个瓶颈。那末所谓的瓶颈期是指？这里可以参考《腾讯高级交互设计师：甚么是优秀的设计思惟与方法？》1文便可。

依照惯例，总结了1下需要突破瓶颈的3大必要条件：

（1）知识的积累到达1定的程度，1般是由量变转为质变

（2）有个人的设计方法体系

（3）长时间的经验积累，最少需要5年以上

 

7.2 进修

交互设计师职位发展的时间不长，大多数的交互设计师都是基本靠自学成才，那末对入门或想要更近1步的交互设计师，有甚么样的进修渠道推荐呢？

不建议报读培训班，不建议报读培训班，不建议报读培训班。重要的事情说3遍，报培训班不如自学。

推荐渠道1：进培训体系完善的公司，接受培训

最直接最节省本钱的方法，有老司机带领。条件是，我们要上1辆好的车。1⑵年学成出师，比自己自学效力要快N倍，少走的弯路能绕地球1圈。

推荐渠道2：报读设计类学校

刷资格首选，进入知名企业必备敲门砖头，系统的知识体系和方法论学习。缺点是学习周期长，本钱高，同时，院校的可选择范围也很小。推荐院校：清华丽院、江南京大学学、中山东大学学、广州美院。

7.3 作品集

人靠衣装，交互设计师靠的是作品，好的交互设计师一样需要好的作品衬托。作品集也是交互设计师总结沉淀、自我提升的重要方法。

把自己的项目包装成1个个作品集，展现出来吧，在作品集里面回答以下问题（面试必考题）：

（1）这个作品的亮点在哪里？解决了甚么样的问题？

（2）这个作品存在甚么样的不足？可以怎样改进？

（3）这个作品遇到了甚么难点？终究是如何克服的？

（4）这个作品的设计进程是怎样样的？

（5）这个作品的终究成果如何？

大神们作品集推荐：

• Mike
• Melanie Daveid
• Jenny
• 人人都是产品经理社区作者：Qinsman
• Dine

8. 参考文献

8.1 图书类

1. 《交互设计寻思录》-Jon Kolko-机械工业出版社
2. 《简约至上 : 交互式设计4策略》-Giles Colborne-人民邮电出版社
3. 《设计师要懂心理学》-Susan Weinschenk-人民邮电出版社
4. 《用户体验的要素 : 以用户为中心的Web设计》-Jesse James Garrett-机械工业出版社
5. 《心理学与生活》-Richard J.Gerrig、Philip G.Zimbardo-人民邮电出版社
6. 《社会心理学》-戴维·迈尔斯-人民邮电出版社

8.2 网站类

1. 人人都是产品经理
2. 优设网
3. 站酷网
4. 英国设计协会
5. IDEO
6. 知乎
7. 36kr

 

作者：WensenCen