易 UEDC – 崇书庆 ：经被人问起「如何入门交互设计」，也过很多次解答，今天便系统家聊聊。
示：这篇章会很长，如果一次看，可收藏一；这篇章要是为人撰写，很多概念/方法会较模糊地说，多会损失一些严谨性。
有些同入门交互的步骤是：看一些书，如《交互设计精髓》，然后借鉴各个竞开始画交互稿，一年后好像入门了。但这么做会有 2 个问题：
- 先看书，尤其《交互设精髓》，很易让人弃，也很易让人变得「空洞」。
- 跟着竞画交互，很难领会到体系的基础知识，到的都是零散的点，就是野路子。
那么相对体系的学习骤怎样的呢？这里笔者用「学武功」一类比：
这学习骤也可以对应到交互设 T 型能力图谱，如下图：
下面的篇幅我们便分别介绍每一骤具体学什么？怎么学？
界面基础（招式）
界面基础指的：控件、布局、流程，也就交互稿肉眼可见的部分。入门时先学界面基础可以让速感知到什么交互设，并建立一些趣信。
1. 控件
控件就界面小的效单元，比如下图中的「搜索框」、「单选按钮」、「复选框」、「下拉框」。
认识控件
掌握控件首先要「认识控件」，认识控件比较体系法是去阅读各个平台官设计规范，比如 iOS 、Android 、MacOS 、Windows（Desktop APP / UWP）、小程序（文末有链接）。注意 web 端是没有官规范，为本身不是平台。web 端规范属于各自为状态，国内后台规范比较常见是 antdesign 和 element ，前台没有规范可言了。
了解控件的交互流程
多控件都不是静的，都会有各的一套交互流程，比如文本框（可参考下图流程）：「用户点击文本框后，会出现光标，且弹出键盘。输入第一个字符后，会出现“清空按钮”。输入多字符后，会有截断效果。输入错误，会报错…」
控件的互流程，以帮助你更立地一个控件。在际的互稿绘中，也经常细致地描述某个控件的互流程。
想要学习每个控件的交互流程，比较简的方法就是找一些成熟的产品用，每进行一个动作下一步会发生什，然后临摹下来。对于移动端，比较推大家临摹。因为是公认控件层面最讲究的产品，计规范和工都比较全，比如 WeUI 提供了计规范和程序工。当然，如果有耐心，各个的官方规范都跟着练一遍是最好的…
了解控件的属性
大多控件都会有的一些属性，或者可以理解为可置的参数。比如「列表」这个控件，需要交互计定义的属性有：排序规则、加载规则、刷新规则、适配规则、截断规则等。比如下图中的群成员列表，的「排序规则」可能是按照昵称首字母排列的，也可能是按照进群先后顺序排列的，或者是按照角色排列的。
「控件的属性」没有好的学习途径，如果有认识一些前辈愿给你交互稿是最好的。如果没有只能摸索了。一个计的交互稿是否细致，开发是否能好阅读，而不是经常跑来说你写漏了，主要取决于计对「控件属性」的理解。
了解怎使用控件
当了解上面所有关于控件的内容后，你还需要知道什候该用什控件。举个例（下图），当用户输入机号错误的候，需要给用户一个错误提示，提示方式所用的控件可以有多种：弹窗、toast、行内提示、气泡提示。那用哪一种最好呢？
答案是「不一定」，比如「弹窗」的缺点是扰性，但优点是可以承载大段文字，用户达率也更高。toast 的扰性，但只能放短的文字，用户容易忽略。体要当的情况是怎的，计想要什的效果。
那么怎么学习控件使用法呢，可以荐大家看《web 界设计》或者各个平台设计规范。看完后再找出类似控件，做比思考，基本能看出了。
2. 布局
简单意义上理解，布局是把「控件」和「内容」放到界上合适位并赋予合适视觉量。在网页时代，布局设计是相要。在移动端盛代，布局设计相没有那么被看。主要原是移动端布局设计趋性比较大，设计诉求和设计空都相较小。它仍然是设计基础要部分。
了解布局设计基本理论
布局设计基本理论有以下几：格塔原理、网格系统、7±2 法则、席克定律、费茨定律、奥卡姆剃刀原理、复杂性守恒定律。这几理论除了「网格系统」，其余理论基本都可以在知乎搜下然后 10 分钟内了解吸收。这些理论相比较底层，很难接告诉你布局设计应该怎么做。它们可以成为设计师心「标尺」和「依据」，会融入在你平时设计工作。
布局计的基本步骤
布局计简可以为以下 4 个步骤：
- 列举：将界面中所需要的元素列举出来，比：品图、品标题、价、优券、收藏、分享…
- 归类：将上述列举的素归为类，每一类就是一个模块。比如「收藏、购买、加入购物车」可以归为「操作模块」。
- 排序：将上归类好模块进排序，排序依据般是：用户场景浏览序、元素要性、业务期望。
- 调整：布局排布的影响因素很多，后需综合其他因素对布局行调整。并对各元素的视觉重行义调整。
学会基本步骤后，可以过「默写品法」进练习。比如把淘宝商品详情页元素摘录下来，然后自排布。最后和淘宝设计进比，思考淘宝为何这么设计，自己是否有思考疏忽？
3. 流程
界元素有 2 ：内容和功能。内容是静态，比如商品描述是内容。功能是动态，比如「加入物」是个功能。在交互稿，展示个功能往往是「描述其交互流程」。比如在聊天 APP 「接收文件」交互流程可以描述为：开消息→看到文件→击下载→下载完成并打开。如下图所示：
流程计的步骤
流程计的基本步骤是：①.确定「任」；②. 将「任」拆成「动作」；③. 将「动作」对应成界面。
举个例子，如下图。比如我们做个「群聊」功能，群聊功能有个「添加群成员」小功能。我们可以把「添加 1 个成员」看做是个「任务」，用户想要完成这个任务，必须有系列「动作」。比如：找到群、找到添加入口、找到要添加、确定添加、确认添加成功。列出这些动作后，我们再针个动作（或多个动作）设计相应界，这到了交互流程。
实际的交互流程会比这个例复杂多，不仅仅有「一条主流程」，还会有多「支流程」。比如上述例中，用户「找群」的方式其实有多，可以通过搜索，可以通过通讯录，也可以通过消息列表。用户「确认添加」过程中也不一定就会「添加成功」，也可能中途突然反悔了，也可能网络突然断了。这些都属于流程中的一部，都需要体现在最终的交互稿中。
对于复杂的交互流程，需要在绘制界面前搭建「流程图」（如下图），这可以让你思路更加清晰，表达更加清楚。流程图的绘制相对比较复杂，这不展开讨论。（下图是移动端音视频通话的流程图的例）
4. 小结
以上我们介绍门互设计的 1 步「界面基础」（信息量有点大），其中包含控件、局、流程 3 个部分。针对 3 个部分笔者推荐一用的书籍（不是种夸夸其谈的书）。
学基础，基就是大概门，能够自己画一互稿。
个部分的内容比虚，也不太容易理。但部分的识的确是一个互设计师最「内核」的部分，所谓的「互设计天赋」大就现在里。
举个例方便了解这个部要讲的「用户」、「目标」、「景」。如下图所示，这是某个银行 APP 的服咨询功能，笔者当想查询开户行，于是就输入了「你好，怎查询开户行」。此系统回复了「正在安排服，当前排队人数为 299 人，请稍后。退出排队请输入【1】」。过了十钟，笔者有点不耐烦，于是输入了一个「你好」。系统给了一个同的回复，只是排队的人数刷新了一下。这个例中的控件、布局、流程都没有问题，但用户使用过程却会痛苦，问题出在哪呢？
究其原因，设计师在设计程中并没有「以用户的角度思考」，只是干涩地画出基的互，也就是没有考虑到「用户」、「目标」、「场」。么什么是「用户」、「目标」、「场」呢？我们又该何去学习？
1. 用户
用户个概念相对比理，但正用户却很难。尤其对中国而言，各年龄、地区、阶、文化的用户差异非常巨大，所以在刚开始做某个产品的时，最先应该做的情就是去个产品的目标用户。
那如何去了解呢？实际工作中最基础的个用户调研方法是：用户访谈、用户观察、问卷。通过这些方法你可以收集用户的基本息，下来就可以对其进行类了。类后可以进一步做一个事情，就是制定用户画像（下图就是一个用户画像）。用户画像可以简理解为将「一群人」抽象为「一个人」。之所以要制定用户画像，是因为在计你难去同身受「一群人」的想法，但可以同身受「一个人」的想法。
那如何去学习关于用户的一些知识呢？「用户访谈、用户观察、问卷」这些用户调研方法可以去《计调查》这本书。「用户画像」相关的知识可以直去知乎或公众号上搜索「用户画像」。「用户」相关的知识是大的一个领域，比较大的公中都会配备独的「用户研究员」。所以作为刚入门的计，可以相对简了解一下这些知识就可以，深入的专研可以等比较入门后再进行。但可以注多去观察身边的人怎使用产品，建立一些基础认知。
2. 目标
目标同会响计，比如大家都知道，同是聊 APP 的「」和「钉钉」在计上差异大，扰性/功能简，钉钉扰性大/功能复杂。这是因为用户使用的目标是「生活中的轻沟通」，而使用钉钉的目标是「工作中的高效沟通」。
在交互设计体系，目标可以细分为「用户目标」、「业务目标」，为设计师不仅仅要为用户服务，也要为公司业务服务。如用户很爽公司完全不赚钱那肯定不是长久计。「用户目标」可以再度细分为「生目标」、「最终目标」、「体验目标」，这 3 个细分目标具体定义可以参考《交互设计精髓》第大部分。如想要初步了解下这 3 个目标可以参考下图例子。
3. 景
景可以简理解为「用户当所的情况」，如果交互计只能学习一个概念，那一定是「景」。景有什用呢？景是计去理解用户需求最重要的一个工。因为用户的需求是难同身受的，如果都不能同身受那如何为用户做计呢？于是就有了景。计可以把代入「景」中，去同身受用户的想法，从而得用户需求（细粒度的需求）。
一而言，都会将「景」和「用户」、「目标」整一起描述，也就是常说的「用户景」。用户景的通用结构是：谁？在什情况下？想要什？做了什？结果如何？的想法如何？下图中举了一个用户新闻的例，可以帮助理解什是用户景。
知道景后真的对计有帮助吗？答案是肯定的。当计将代入景中，思考每一个景，过程中便能产出大量的想法，计的创新/细节就都出来了，且最终的结果往往也是相对符用户真实需求的（那如何描述景呢？行业比较通用的方法是「景故事剧本」，一定要学会哈。体可以参考《交互计髓》第一部）
为了更易理解，我将「场景」应用到了上提到银 APP 例子，描述了下用户场景并提出了些 idea，如下图所示。你也可以把自己代入到这个场景，看是否能体会到「场景」这个工具奥妙。
4. 结
掌握了「计内核」（用户、目标、景）后，就可以算得上一个初的交互计了，做一些基本的交互计没什问题，甚至说可以上岗了。
在掌握了上面步骤 1、2 中的基础知识后，便要开始攻克专业能力，成为真正专业的交互计了。专业能力主要指的是：用户研究、竞品研究、计理论、计方法、用户测、数据析。注这所说的专业能力都是在实际工作中常用的，而不是全量的专业能力。下图中将这些专业能力按照产品的研发流程做一下归类（红色是优先学习的，橙色是建议学习的，灰色是选择学习的）：
这些专业能力的学习相对复杂，且不是「入门阶段」所应该优先触的，所以笔者只介绍一些学习方法，不做体的解释析。下面笔者推这些专业能力的相关书籍（红色是优先学习的，橙色是建议学习的，灰色是选择学习的）。在此说一下，这部知识不推大家仅仅通过公众号文章这种方式学习，因为它大都有着的体系性，文章只能学皮毛。且这些文章的作者水参差不齐（好坏都有），难辨清哪些是真正可的。
最后，大家在学习这些专业知识的候需要注一下契机，最好是学完能够立刻用上的，也就是说理论要搭配实践，不然快就忘掉了。另外，书中的知识多都过于理想化，实际的工作节奏是非常快的，所以在实践过程中必然会有多简化和改良，这也是为何一定要理论搭配实践的因。
交互计是一个业属性的学科，计只是把交互本身做好是远远不够的（尤其对于 2 年工作经验以上的计而言）。交互计想要赋能业，或者是获得比较好的成果，必须要了解横向领域的知识：商业、产品、用研、视觉、术、运营、市、销…
举个例子，某位设计师朋友接到了个「改版商品详情页」需求，业务目标是提高买转化率。这个设计师便找出了原来商品详情页很多体验问题，把买体验、买效率提高了很多，最终买转化率并没有提高多少，是略有增长。后来业务提出了个，将商品邮这个信息添加到界明显位（本身商品也是邮，是没有明确展示），结转化率下子提高了很多。究其原是今年业务策略是要做新，于是市场学在各个渠投放了很多低价引流商品，这些商品都是邮。用户在决策买这些低价商品时会担心是否邮，明确告知他们邮后，转化率便自然而然地提升了。如这位设计师朋友比较了解业务策略、市场投放规则，我相信他定能想到「把邮信息放到界明显位」这个设计，从而赋能业务，取成绩。
关于横向领域的知识，笔者并不算精通，只能给家推荐一些公认比较不错的且阅读门槛低的书籍。如果济比较宽裕，也可以考虑报一些网络的入门课程。
交互设计是个知识体系常丰富完善学，于设计师而言这是件幸福事情，为有完善知识体系才能让「个成长」更有保障。另，交互设计也是个槛很模糊学。有些学了几年才开始做，有些上了 1 个月培训班，甚至看了 2 本书开始做。交互稿都能正常输出，是质量有所异，像个都能烧饭样。
每人入行的姿势各异，自知识体系因不同。但不论如何，都建议家能孜孜不倦学习基础知识，一专业性强的交互设师，共勉！
如有指正可我微信：seekingchong
附录：各平台官方规范
想要翻译版的可上搜一搜，我只有老的翻译版就贴来了。
- iOS：https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes
- Android：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?redirectedfrom=MSDN
- Win-UWP：https://docs.microsoft.com/zh-cn/windows/uwp/design/basics/design-and-ui-intro?redirectedfrom=MSDN
- 小程序：https://developers.weixin.qq.com/miniprogram/design/
- antdesign：https://ant.design/index-cn
- element：https://element.eleme.io/#/zh-CN/guide/design
注「网易UEDC」公众：
浙公网安备33011002017549号