给小白看的交互设计启蒙帖(一)

通常来说，拥有成熟产品的大型互联网公司都会设有交互设计岗位，这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示，交互设计师的工作大多无法直观可视化或出于保密性难以对外展示，所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。

文章的目的是帮助对交互设计不太了解，但工作相关或对此感兴趣的人对交互设计进行基础入门的了解，所以采用了尽量平实简单的描述方式，以帮助大家快速理解。如果有不严谨的地方或表述不清晰的地方，欢迎各位大大们指出。

什么是交互设计

1.什么是交互

交互设计顾名思义就是交互的设计，所以解决这个问题的关键在于，首先要知道什么是交互。

交互，即交流互动，其实这个词语离我们的生活很近，例如中国式打招呼：

简单几个字的你来我往，搭配眼神和动作，传递出了礼貌、亲近、尊敬等诸多丰富含义。

人和人之间的交互我们很好理解，那么人和机器间的交流互动是什么呢？举个例子，如果你想解锁一个手机，你与手机的交流可能是下面这种情景：

--按home键（嗨，手机，好久不见啊！）

--屏幕亮了没解锁，弹出输入密码页面（哎？是小明来了么？）

--输入密码（是啊！）

--解锁（哦哦，欢迎欢迎快请进~）

所以简而言之，当人和一件事物（无论是人，机器，系统、环境等等）发生双向的信息交流和互动，就是一种交互行为。

要注意的是，这种交流和互动必须是双向的，如果只有一方的信息输出，而没有第二方的参与，那么只能是信息展示而不是交流互动。例如，图左的包装是单方面的信息展示，只能让人从中获取信息，而不能反过来接收信息并作出反馈，所以智慧信息展示而不是交互。

图右输入框会根据输入的内容作出正确和错误的反馈，有信息的交流，所以是一种交互。

2.什么是交互设计

词条给出的解释是：“交互设计，是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。”

我们来做一个精简：”交互设计，是交互行为的外在表现的设计“。其实可以简单的理解为，交互设计把一个或者一系列交流互动，用文字、图像或文档等方式，从交流的内容、方式、规则等维度进行统一的设计。

用一个不算太恰当但是很形象的例子来比喻：那就是交互设计就是给一个或一系列交互行为设计一个剧本。

就像之前例子中提到的输入框，输入的字数限制是多少，什么情况是正确的，什么情况是错误的，在正确的时候有什么反馈，在错误的时候有什么反馈，这些都会像是剧本里的故事情节和台词一样被提前设计好，并由演员（图形界面）来表演出来，用户在这个过程中，既是观众（观看情节发展）也是演员（与图形界面互动，触发情节）。

3.交互设计的范畴

交互设计涉及到人与人、机器、环境等等，其实是一个很宽泛的概念。

上图我们可以看出，交互设计跟工业设计、建筑学、信息架构、视觉设计和人机交互都有相重叠的部分，或者换言之，但凡是涉及到与人产生交流互动的领域都可能涉及到交互设计的部分。

今天我们讨论的在互联网行业内大热的交互设计，其实主要是人与互联网产品（网站、App、智能手表等）的交互行为的设计。例如，跟手机淘宝App进行交流从而买到一款心仪的鞋子；跟大众点评App交流让它推荐一个附近性价比高的川菜馆； 跟支付宝交流让它给你刚买的一瓶矿泉水付账...

4.常见缩写

UI (User Interface)：用户界面。

UE或UX (User Experience)：用户体验。通常国外和国内的的外企叫UX，国内叫UE。

IxD (Interaction design)：交互设计。区别于工业设计，加了个”x”。

UID(User Interface Design)：用户界面设计，现在一般很少用到。

UED (User-Experience Design)：用户体验设计。

UCD (User-Centered Design)：以用户为中心的设计

其实交互设计准确的说法应该是IxD，但是在国内，似乎已经约定俗成为“UE”，所以为了便于大家理解，下文我都以UE指代交互设计。

什么是交互设计师

1.交互设计师是做什么的

如果你已经大致明白了什么是交互设计，那么交互设计师的工作内容也就呼之欲出了。简单来说，如果交互设计是给交互行为写剧本，那么交互设计师就是编剧，负责构思、撰写和修改这个剧本。

例如：你想让大众点评App给你推荐一个附近性价比高的川菜馆，那么剧本大概包括以下这些

【主线】打开 App-搜索关键词-筛选-查看详情-导航到达-评价

【剧情】在哪个页面找到搜索，搜索在什么位置，点击哪个按钮进入搜索，App 在什么情况下给出怎么样的提示...

【分支剧情】插播一条广告，推荐给你相似的商家

【大结局】你最终找到了符合你要求的餐厅。

有人理解交互设计师，就是个画流程图、线框图的。这种说法有点片面，但也不是全错，因为流程图线框图确实是交互设计师进行设计的一种产出方式。但这种说法忽略了在这些可视化产出物之外，设计师所进行的思考工作。

思考是不易于可视化的，即便是有思考过程的产出，也很少被大众看到；即便是被大众看到，除了同行交流学习外，很少有人会耐心研究。所以有这样的误解也是情理之中。那么如何判断一个交互设计师发挥了怎样的价值呢？

就像是编剧的能力有差异，写出来的剧本可能是神剧，也可能是烂片。一个交互设计方案可能会让用户爱不释手，比如探探的左划右划挑选聊天对象，一度风靡陌生人社交圈；反过来一个糟糕的交互设计也能让用户万分沮丧，被用户打入冷宫，你可以回想一下在最早期12306网页买车票的经历。

2.交互设计师的上下游合作伙伴

用一张图来描述交互设计师的上下游合作伙伴们

如图所示，交互设计师UE最主要的三位小伙伴主要是产品经理PM，视觉设计师UI，用户研究UR。这种配置比较完善的团队，一般出现在比较成熟的中大型互联网公司，对于创业公司或者微型公司，通常来说进行一些精简或合并。最先被精简掉的一般来说都是UR岗位，在公司初期阶段可能并没有足够的成本预算来设立这样一个岗位，所以很多公司是没有UR的；其次就是UE，很多公司是由PM或者UI兼做UE的工作。

UR和UE之所以可以被替代，并不是因为这两项工作不重要，而是因为不同的阶段公司有不同的诉求。在产品初期，最先要解决的是”有没有“的问题，其次才是”好不好“的问题，而UR和UE解决的正是”好不好“，所以在早期是可以暂时不设立专门的小组的。但是，观察实际案例你就可以发现，大凡是产品发展到一定阶段的公司，一定会增设UE和UR岗位，这恰恰说明了这两个职位的重要性。简单来说，PM和UI决定了产品走多快，UR和UE决定了产品走多远。

有人可能会问，既然PM和UI都能把UE的工作兼掉，那是否说明PM与UE、UI与UE的工作是有重叠之处呢？他们之间是如何划分岗位职责的。

1）UE vs. UI

常见的错误理解方式有：

       ①UE是UI的概念炒作，其实是一样的

       ②UE是高级UI

       ③会画线框图的UI就是UE

这是最容易被混淆的两个岗位，特别是一些外行人员或初学者，但真实的情况是，这两个是完全不一样的。之前我们把UE设计类比为写剧本，我们继续沿用这个比喻。

如果说做一个产品就是拍一部电视剧的话，UE就是编剧，负责脚本的撰写，而UI的岗位其实就是剧组里面的”服化道+灯光+布景“，主要负责剧中所有视觉呈现的工作。在剧组急着开拍的时候，等不及编剧到位，如果对剧本质量没有什么要求，服化道负责人承担起写剧本的职责，也是可以接受的。不过为了电视剧长期的口碑，等条件允许了，剧组还是会请专业编剧的。

所以，回到实际工作中，UE负责交流互动的设计，而UI负责产品的视觉表现设计，可以说是完全不相同的领域。比如当你在浏览手机淘宝App时，弹出一个广告弹窗，这个弹窗是在什么时候出现，以什么方式出现，以什么方式消失，是否还会再出现...这是交互设计师来设计的；这个弹窗是什么颜色，什么形状，什么尺寸，有什么配图...这是UI设计师来设计的。

2）UE vs. PM

常见的错误理解方式有：

       ①UE是PM分离出去的

       ②UE是PM的画图助理

       ③PM和UE是一样的

因为在很多初创公司都是由PM承担UE的工作，所以对PM和UE的岗位职责很多人都难以分辨。

让我们再次回到剧组，如果要给PM安排一个角色，那应该是制片人，他需要发掘市场需要什么样的作品，制定计划，寻找投资，组织生产，最后还要持续跟进发行后续工作，并对结果负责。类比到实际工作中，PM要做的是深度挖掘市场需求，制定产品计划，提出需求，并组织和协调后续的设计与开发过程，并且对结果负责。

有人可能会问，既然PM是产品的总负责人，那么是否意味着PM是UE、UI的领导部门？

这就像是制片人是编剧的领导么？其实并不是，三者是合作关系，而没有领导关系。UE对交互设计结果负责，UI对视觉设计结果负责，PM对产品成长负责，UE和UI的产出物可以接受PM的建议进行调整，但并不意味着是服从关系。

总结

如果看完上面的介绍，你还是有点困惑的话，那么就这样简单来记：PM负责“该做什么”，UE负责“怎么做最好”，UI负责“长什么样子”

以下列举一个简单的例子，仅做参考，让大家对三者工作有个比较直观的感受，强调！仅是示例，并不是实际中工作形式。

交互设计师的一般工作流程

先来看一下一个产品需求是怎么实现的：

通过上图我们可以看出一个产品需求的实现是PM/UI/UE/RD通力配合的结果，当然这中间也有UR的研究支持。UE主要参与产品需求评审、交互设计、视觉评审、开发验收这四个阶段，其中交互设计阶段是交互设计师的主要工作范畴。

1.需求评审

需求评审阶段通常来说是PM内部的评审，由PM发起，UE参与讨论，最终的评审决定人是全体PM或者PM负责人，最终输出的产物是PRD文档和项目的时间排期。如果是从UED内部发起的需求，不涉及产品功能，那么需求评审可能会在UED内部进行，需求文档和排期表也可以是UED内部制作的。

在这个阶段，虽然UE是参与，但并不意味着只是被动接受结果，而是需要积极参与到需求的分析和评审过程中。如果UE在评审之前就已经对项目相关的用户需求、市场需求有所了解并有理有据，应该主动和需求方从专业角度进行讨论、研究需求的合理性、可行性。

2.设计阶段

设计阶段是交互设计师的主要战场，过程可以拆解为分析-初稿-评审-终稿四个阶段，最终的产出物是产品原型图、交互说明文档和视觉排期表。

1）分析：这个阶段是花费时间最长，也最为重要的阶段。在这个阶段我们要研读PRD文档、收集历史信息，考察竞争产品、并结合行业现状、公司现状等各客观条件，对项目相关数据做详尽的收集和分析，明确最终的目标；同时借助用研方法（有用研支持可以直接发布用研需求）对用户需求进行深度挖掘，找寻同时满足业务需求、产品需求和用户需求的最佳解决方案，对达成目标所涉及的重点突破点有理性的分析判断。在此阶段，竞品分析报告、用户需求分析报告和可能性方案是交互设计师专业度的重要表现。

2）初稿：根据上个阶段产出的分析结果，从几个可能性方案中优选出最佳方案，并落实到交互流程图与原型图上。这个阶段可以不必输出详细的交互说明文档，只需要有必要的说明让流程图和原型图便于理解即可，详细的交互逻辑和状态可以在评审通过后予以补充。

3）评审：PM发起并从需求角度对方案初稿进行评审，UI参与了解。若未通过，则需要对方案进行重新调整和评审，直至通过。

4）终稿：若评审通过，UE可以补全交互说明文档并推进到UI进行视觉设计。

3.视觉评审

设计评审阶段由PM发起，UE和UI参与，最终的评审决定人是PM和UE。最终输出的产物是产品设计稿。这个阶段UE主要从交互需求角度对设计稿进行评审，给出合理化建议。

4.研发验收

研发验收阶段由PM发起，UE和UI参与，最终的评审决定人是PM、UE和UI。UE主要从交互设计还原度进行评审，审查流程、状态、交互方式等是否符合交互说明文档，如果有缺失或错误的地方，要根据公司内部的反馈流程，向研发提出修改需求。

有条件的公司，在研发上线产品之前，会先研发一个仿真Demo，以供PM、UE、UI做第一步的测试和修正，之后才会开发正式上线的版本。不过这种方式成本更高，周期也更长，所以初创型和小型公司可能会跳过demo，直接开发上线版本。

交互设计师的常用工具

1.原型工具

是交互设计师必备的工具，流程图、原型图、交互说明都靠它。

Axure

必要性 ✭ ✭ ✭ ✭ ✭

难易程度 ✭ ✭ ✭

特点：主流、功能强大、多人协作、版本管理

官网： https://www.axure.com/

墨刀

必要性 ✭ ✭ ✭

难易程度 ✭ ✭

特点：操作简单、快速预览、界面美观、支持Sketch导入

官网： https://modao.cc/

2.脑图工具

分析阶段你需要用脑图工具整理你的思路，协助制定方案。

XMind

难易程度 ✭

掌握需求 ✭ ✭ ✭

特点：国产、有免费版，界面友好

https://www.xmind.cn/

MindManager

难易程度 ✭

掌握需求 ✭ ✭ ✭

特点：功能强大

http://www.mindmanager.cc/

3.动效工具

页面交互动效让你的交互方案更加直观，现在市面上有很多这类型的工具创新，选择你用着最顺手的吧

墨刀

必要性 ✭ ✭ ✭ ✭

难易程度 ✭ ✭

特点：操作简单、内置丰富的页面切换方式、交互手势及动画

官网： https://modao.cc/

Principle

必要性 ✭ ✭ ✭ ✭

难易程度 ✭ ✭ ✭

特点：功能强大，质感好，速度快，支持OG和Sketch素材导入

官网： http://principleformac.com/

Flinto

必要性 ✭ ✭

难易程度 ✭

特点：操作简单

官网： https://www.flinto.com/

4.文档工具

文档工具是撰写分析报告、梳理状态等必备工具，重要性自不必说

Office/WPS 三件套

掌握需求 ✭ ✭ ✭ ✭ ✭

难易程度 ✭ ✭

交互设计师资源网站推荐

1.英文类网站

https://uxdesign.cc/

UX Collective：Curated stories on user experience, usability, and product design.

http://uxmag.com/

UX Magazine：A free community resource exploring all facets of experience design.

https://uxmastery.com

UX Mastery：We write articles, ebooks, newsletters, host podcasts, and teach in-person workshops that are fun, practical, and highly regarded by industry.

http://uxmovement.com/

UX Movement： A user experience blog that publishes articles showing how good and bad design practices affect user behavior. 

https://www.uxmatters.com/

UX Matters：Insights and inspiration for the user experience community

https://uxplanet.org/

UX Planet：One-stop resource for everything related to user experience

https://www.smashingmagazine.com/

Smashing Magazine： Deliver reliable, useful, but most importantly practical articles to web designers and developers.

https://www.nngroup.com/

Nielsen Norman Group：Evidence-Based User Experience Research, Training, and Consulting

2.中文类网站

http://uxren.cn/

UXRen：用户体验人专业社区，提供公开课、文章、招聘、培训、翻译、会议及外包等服务，翻译200多篇优质UX外文

https://www.jianshu.com/

简书，国内优秀的创作社区，任何人均可以在其上进行创作。用户在简书上面可以方便的创作自己的作品，互相交流。

https://www.zhihu.com/

知乎，国内优秀的网络问答社区，连接各行各业的用户分享着彼此的知识、经验和见解。

总结

以上是关于交互设计与交互设计师的基本信息分享。我本人在交互领域也只是经验尚浅，谈不上登堂入室，所以写的很多内容也是我站在交互这个领域的大门前的所见所感，希望能让后来的小伙伴对前面的路有个提前的预知与参考，也让隔壁间感兴趣的小伙伴做一个简单的了解。这写内容还较为基础，还有很多重要的部分例如交互设计师的产出物、必备能力等会在之后继续完善。欢迎大家随时提出意见或建议。