经常有人问我“交互设计怎么入门”，我回答了很多次。今天我就系统的跟大家聊聊~

提示:这篇文章会很长。如果不能一次性完成，可以收藏。这篇文章主要是写给新人看的，所以很多概念/方法会比较模糊，会失去一些严谨性。

一些同学开始交互的步骤是:看一些书，比如《交互设计的本质》，然后借鉴各种竞品开始画交互稿。他们似乎是一年后才开始的，但这样做有两个问题:

先看书，尤其是《交互设计精髓》，很容易让人放弃，也很容易让人变得“空洞”；跟着竞品学画交互，很难领会到体系的基础知识，学到的都是零散的点，也就是野路子。

那么有哪些比较系统的学习步骤呢？这里作者用“学武术”作为类比:

这个学习步骤也可以对应交互设计T型能力图，如下图所示:

在接下来的几页中，我们将介绍每一步并学习什么？怎么学？

步骤1:界面基础(移动)

界面基础指的是控制、布局和流程，即交互稿上肉眼可见的部分。学习界面的基础知识可以帮助你快速感知什么是交互设计，建立一些兴趣和信心。

1.1控制

控件是界面上最小的有效单元，如下图中的搜索框、单选按钮、复选框和下拉框。

1.1.1了解控制

要掌握控制，首先要“认识控制”。了解控件对比系统的方法是阅读各种平台的官方设计规范，比如iOS、Android、MacOS、Windows(桌面APP/UWP)和applets。注意web端没有官方标准，因为不是平台。Web端规范处于独立状态。antdesign和element是国内最常见的后台规范，前台没有规范。

1.1.2了解控件的交互过程

很多控件不是静态的，会有自己的一套交互过程，比如文本框(参考下面的流程):“用户点击文本框后，光标出现，键盘弹出。输入第一个字符后，将出现“清除空按钮”。输入很多字符后，会有截断效应。当您输入错误时，您将报告一个错误……”

理解控件的交互流可以帮助您更加立体地理解控件。在实际的交互式草图绘制中，通常会详细描述控件的交互流程。

如果想学习每个控件的交互流程，简单的方法就是尝试一些成熟的产品，看看每个动作之后接下来会发生什么，然后复制。对于移动终端，我们建议复制微信。因为微信在控制层面被公认为最精致的产品，所以它的设计规范和工具比较全面，比如WeUI提供设计规范和小程序工具。当然，如果你有耐心的话，最好去实践一下各个平台的官方规范...

1.1.3了解控件的属性

大多数控件都有自己的属性，或者可以理解为可设置的参数。比如交互设计器需要定义的属性有:排序规则、加载规则、刷新规则、适配规则、截断规则等等。例如，在下图的组成员列表中，他的“排序规则”可能是根据昵称的首字母、进入组的顺序或角色来排列的。

“控制的性质”没有好的学习方法。如果你认识一些前辈，最好给你看互动稿。如果没有，那你就得自己摸索了。设计师的交互稿是否细致，开发是否能读好，而不是经常说你错过了，主要看设计师对“控件属性”的理解。

1.1.4了解如何使用控制

在学习了上面所有关于控件的内容后，您还需要知道何时使用以及使用什么控件。比如(下图)，当用户输入了错误的手机号码，需要给用户一个错误提示。提示模式下使用的控件有很多种:弹出、吐司、内嵌提示、冒泡提示。那么哪个最好呢？

答案是“不一定”。比如“弹出窗口”的缺点是侵入性很强，但优点是可以携带大段文字，用户到达率更高。吐司很有侵入性，但是只能放简短的文字，容易被用户忽略。要看当时的情况，设计师想要什么效果。

所以如何学习如何使用控件，我们可以推荐阅读网页界面设计或每个平台的设计规范。看完之后找出类似的控件，做对比思维，基本就看到门道了。

1.2布局

简单来说，布局就是把“控件”和“内容”放在界面上适当的位置，给予适当的视觉权重。在网页时代，版面设计非常重要。但是在移动终端普及的当代，版面设计相对不那么受重视。主要是移动终端的布局设计有很大的趋同性，设计诉求和设计空比较小。但它仍然是设计基础的重要组成部分

1.2.1了解布局设计的基本理论

版面设计的基本理论有:格式塔原理、网格系统、7 ^ 2法则、席克定律、菲茨定律、奥卡姆剃刀原理、复杂性守恒定律。在这些理论中，除了“格子系统”之外，其他的理论基本都可以在知乎里搜索，然后在10分钟内吸收。这些理论都比较低级，很难直接告诉你布局设计应该做什么。但它们可以成为设计师心中的“标尺”和“基础”，会融入到你平时的设计工作中。

1.2.2布局设计的基本步骤

简单的布局设计可以分为以下四个步骤:

列举：将界面中所需要的元素列举出来，比如：商品图片、商品标题、价格、优惠券、收藏、分享……归类：将上述列举的元素归为几类，每一类就是一个模块。比如“收藏、购买、加入购物车”可以归为“操作模块”排序：将上面归类好的模块进行排序，排序的依据一般是：用户场景中的浏览顺序、元素的重要性、业务期望调整：布局排布的影响因素很多，最后需要综合其他因素对布局进行调整。并对各元素的视觉重量进行定义调整

学完基本步骤后，可以通过“听写写产品”来练习。比如从淘宝产品详情页提取元素，自己整理。最后和淘宝的设计做个对比，想想淘宝为什么这么设计，是不是疏忽了。

1.3流程

界面中有两种元素:内容和功能。内容是静态的，比如商品描述就是一种内容。函数是动态的，比如“加入购物车”就是一个函数。在交互式草稿中，显示一个函数的方式是“描述它的交互过程”。比如聊天APP中“接收文件”的交互过程可以描述为:点击打开消息→看到文件→点击下载→下载打开。

如下图所示:

1.3.1工艺设计步骤

工艺设计的基本步骤是:

确定“任务”；将“任务”拆成“动作”；将“动作”对应成界面。

比如如下图。比如我们做了一个“群聊”功能，里面有一个“添加群成员”的小功能。我们可以把“添加成员”想象成一个“任务”，用户必须有一系列的“动作”才能完成这个任务。例如:查找群组，查找要添加的条目，查找要添加的人，确认添加成功。在列出这些动作之后，我们为每个动作(或者多个动作)设计相应的接口，然后我们得到交互过程。

实际的交互过程会比这个例子复杂得多，不仅有“一个主过程”，还有很多“分支过程”。比如上面的例子，用户“找群”的方式有很多种，可以通过搜索，通讯录，或者消息列表。用户可能在“确认添加”的过程中不一定“添加成功”，也可能中途突然悔悟，或者突然断网。这些都是过程的一部分，需要在最终的交互式草稿中反映出来。

对于复杂的交互过程，在绘制界面之前，需要先构建一个“流程图”(如下图所示)，这样你才能想得更清楚，表达得更清楚。流程图的绘制比较复杂，这里就不讨论了。(下图是移动终端上音视频通话流程图示例)

1.4步骤1总结

以上，我们介绍了交互设计的第一步，“界面基础”(信息量有点大)，包括控制、布局、流程三个部分。

针对这三个部分，作者推荐一些实用的书(不是那种夸的书):

学完这些基础，基本就可以入门了，自己画一些交互稿。

第二步:设计内核(内功)

这部分内容会比较空洞，不容易理解。但这部分知识确实是一个交互设计师最“核心”的部分，所谓的“交互设计天赋”一般都体现在这里。

让我们举一个例子来理解本节中的“用户”、“目标”和“场景”。如下图所示，这是一个银行APP的客服咨询功能。想查询银行，就输入了“你好，怎么查询银行”。这时系统回复:“正在安排客服，当前排队号299。请稍等。请输入[1]退出队列。

十分钟后，作者有点不耐烦了，于是输入了一个“你好”。系统给了同样的回复，但是排队的人数刷新了。这个例子中的控件、布局和流程没有问题，但是用户使用起来会很痛苦。有什么问题？

原因是设计师在设计过程中没有“站在用户的角度思考”，而是干巴巴的画出基本的交互，即没有考虑“用户”、“目标”、“场景”。那么什么是“用户”、“目标”、“场景”呢？应该怎么学？

2.1用户

用户的概念相对容易理解，但很难真正理解用户。特别是对于中国来说，不同年龄、不同地域、不同阶层、不同文化的用户之间有很大的差异，所以开始一个产品首先要做的就是了解该产品的目标用户。

那么如何理解呢？实际工作中最基本的用户调查方法有:用户访谈、用户观察、问卷调查。通过这些方法，可以收集用户的基本信息，然后进行分类。分类后，还可以做一件事，就是做一个用户头像(下图是一个用户头像)。用户画像可以简单理解为将“一群人”抽象为“一个人”。

之所以要做用户画像，是因为你很难感同身受“一群人”的想法，但你可以感同身受“一个人”的想法。

那么如何学习一些关于用户的知识呢？

“用户访谈、用户观察、问卷调查”可以在《设计调查》一书中使用。与“用户画像”相关的知识可以直接在知乎或微信官方账号搜索“用户画像”。与“用户”相关的知识是一个很大的领域，相对较大的公司会配备单独的“用户研究者”。

所以作为一个初学设计师，可以对这方面的知识有一个比较简单的了解，比较后可以进行深入的专门研究。但可以多注意观察周围人如何使用产品，建立一些基本认知。

2.2目标

目标也会影响设计。比如大家都知道，同样是聊天应用的“微信”和“钉钉”，在设计上有很大的不同。微信在功能上侵入性/流线型较小，而钉钉在功能上侵入性/复杂性非常高。这是因为使用微信的目标是“生活中的轻松沟通”，而使用钉钉的目标是“工作中的高效沟通”。

在交互设计的系统中，目标可以细分为“用户目标”和“业务目标”，因为设计师不仅要为用户服务，还要为公司的业务服务。如果用户很开心但公司根本不赚钱，肯定不是长久之计。“用户目标”可以细分为“生活目标”、“终极目标”和“体验目标”。关于这三个细分目标的具体定义，请参考《交互设计的本质》第一部分。如果你想对这三个目标有一个初步的了解，可以参考下面的例子。

2.3场景

场景可以简单理解为“用户当时的情况”。如果交互设计师只能学到一个概念，那一定是“场景”。

场景有什么用？

场景是设计师了解用户需求最重要的工具。因为用户的需求很难感同身受，如果不能感同身受，我们该如何为用户设计？于是有了一幕。设计师可以把自己代入到“场景”中，去感同身受用户的想法，从而得到用户的需求(细粒度需求)。

一般来说，我们会把“场景”、“用户”和“目标”放在一起描述，也就是常说的“用户场景”。用户场景的一般结构是:谁？什么情况下？你想要什么?你做了什么？结果呢？他有什么想法？

下图是一个用户看新闻的例子，可以帮助我们理解什么是用户场景。

了解场景后再设计真的有帮助吗？答案是肯定的。当设计师把自己代入场景，思考每一个场景的时候，在这个过程中可以产生很多想法，设计创新/细节就出来了，最终的结果往往也是比较符合用户真实需求的。

为了便于理解，我将“场景”应用到上述银行APP例子中，描述了用户场景并提出了一些想法，如下图所示。你也可以把自己代入这个场景，看看自己是否能理解工具“场景”的奥秘。

2.4步骤2总结

掌握了“设计内核”(用户、目标、场景)之后，就可以算是初级交互设计师了，做一些基本的交互设计没有问题，甚至可以去工作。

第三步:职业能力(武功秘籍)

掌握了以上第1、2步的基础知识后，我们就开始攻克专业能力，成为真正专业的交互设计师。专业能力主要指:用户研究、竞争性产品研究、设计理论、设计方法、用户测试、数据分析。

注意我这里说的专业能力都是在实际工作中常用的，不是专业能力的总量。下图中我按照产品开发流程对这些专业能力进行了分类(红色优先学习，橙色推荐学习，灰色选择学习):

这些专业能力的学习比较复杂，对于“入门阶段”来说并不是优先考虑的。所以作者只介绍了一些学习方法，没有具体的讲解和分析。

下面，作者推荐这几本与专业能力相关的书(红色优先学，橙色推荐学，灰色选学)。这里解释一下，这部分知识不建议大家只通过微信官方账号的文章学习，因为大部分都是高度系统化的，看文章只能学到一点。而且这几篇文章的作者水平不同(有好有坏)，很难区分哪些是真正可信的。

最后，在学习这些专业知识的时候，要注意机会，最好是学完就马上用，也就是说理论要和实践相匹配，不然很快就忘了。另外，书中很多知识过于理想化，实际工作节奏很快，所以在实践过程中会有很多简化和改进，这也是为什么要理论联系实际的原因。

第四步:授权业务(漫游江湖)

交互设计是一门商业属性很强的学科，设计师要做好交互本身是远远不够的(尤其是有2年以上工作经验的设计师)。想要增强业务能力或取得更好成果的交互设计师必须了解横向领域的知识:业务、产品、研究、愿景、技术、运营、市场、销售...

比如某设计师朋友收到一个“修改产品详情页面”的需求，业务目标是提高购买转化率。这位设计师在原产品详情页中发现了很多体验问题，让购买体验和购买效率提高了不少，但最终购买转化率并没有增加多少，只是略有提高。

后来业务方提出了一个观点，把商品包邮的信息加到界面的明显位置(商品本身也是包邮，只是没有显示清楚)，转化率一下子提高了不少。原因是今年的经营策略是创造新产品，所以市场学生在各种渠道投放了大量低价引流产品，这些产品都是邮寄的。

当用户决定购买这些低价商品时，他们会担心是否要发布它们。当明确告诉他们贴的时候，转化率自然会提高。如果这位设计师朋友对商业策略和营销规则有更深入的了解，我相信他一定能够想到“把包装信息放在界面上明显的位置”的设计点，从而赋予企业权力，取得成功。

作者对横场的知识并不精通，只能推荐一些公认好的，阅读门槛低的书。如果经济比较富裕，也可以考虑申请一些互联网的入门课程。

最后

交互设计是一门知识体系丰富完善的学科，对于设计师来说是一件很开心的事情，因为只有完善的知识体系才能保证“个人成长”。另一方面，交互设计也是一门门槛非常模糊的学科。有的人学了几年才开始做，有的人上了一个月的培训班，甚至读了两本书才开始做。交互稿可以正常输出，但是质量不一样，就像大家都会做饭一样。

每个人的入门姿势不一样，所以自己的知识体系也不一样。但无论如何，建议大家可以孜孜不倦地学习基础知识，成为一名专业的交互设计师。

附录:每个平台的官方规范

如果你想要翻译的版本，你可以在网上搜索。我只有旧的翻译版本，不贴了

IOs:https://developer . apple . com/design/human-interface-guidelines/IOs/overview/themes

安卓:https://material.io/design/introduction/#principles

MacOS:https://developer . apple . com/design/human-interface-guidelines/MacOS/overview/themes

win-desktop app:https://docs . Microsoft . com/zh-cn/windows/win32/uxguide/guidelines？重定向自=MSDN

win-UWP:https://docs . Microsoft . com/zh-cn/windows/uwp/design/basic/design-and-ui-intro？重定向自=MSDN

小程序:https://developers.weixin.qq.com/miniprogram/design/

蚂蚁设计:https://ant.design/index-cn

要素:https://element.eleme.io/#/zh-CN/guide/design