交互设计入门指南，系统讲解新人学习步骤与方法

hwyzw

    常常有人询问“如何踏入交互设计领域”，我对此问题解答过多次，今日便打算系统地与大家深入探讨一番。

    这篇文章篇幅较长，若未能一次性阅读完毕，建议您将其保存起来。鉴于本文主要面向初学者，其中涉及诸多概念及方法，阐述时难免会略显笼统，这或许会影响到内容的严谨性。

    部分同学在学习交互设计的过程中，会先阅读诸如《交互设计精髓》等书籍，接着参考各类竞品进行交互稿的绘制。经过一年的努力，他们似乎已初步掌握了交互设计的基本要领。然而，这种方法存在两个主要问题：

    那么，如何构建一个系统的学习流程呢？对此，作者以“修炼武艺”为例，进行了比喻。

    这个学习步骤也可以对应到交互设计T型能力图谱上，如下图：

    下面的篇幅我们便来分别介绍每一个步骤具体学什么？怎么学？

    步骤1：界面基础（招式）

    界面基础涵盖了诸如控件、布局、流程等要素，这些都是在交互稿中可以直接观察到的部分。在初学阶段，首先掌握界面基础有助于你迅速理解交互设计的概念，并且能够激发你对这一领域的兴趣和信心。

    1.1 控件

    控件是构成界面最基本的有效组成部分，它们在界面上占据最小单位，例如，图示中的“搜索框”、“单选按钮”、“复选框”以及“下拉框”等。

    1.1.1 认识控件

    要熟练运用控件，首要任务是“了解控件”，而深入理解控件体系的有效途径是研读不同平台的官方设计指南，例如iOS、MacOS、（APP/UWP）、小程序等。值得注意的是，Web端并未设立官方规范，这主要是因为其并非一个独立的平台。Web端的规范呈现出各自为政的局面，在国内，后台规范相对较多，如和等，而前台则缺乏统一的规范。

    1.1.2 了解控件的交互流程

    众多控件并非固定不变，它们各自具备独特的操作步骤，以文本框为例（流程图可参考）：用户点击文本框，光标显现，随即键盘弹出。键入首个字符，会出现“清除”按钮。连续输入大量字符，会出现文本截断。若输入错误，系统将显示错误提示信息……

    掌握控件的操作步骤，能让你更全面地认识该控件的功能。在绘制交互稿的过程中，也常常会详尽地阐述某个控件的交互过程。

    若想掌握各个控件的交互流程，一个相对便捷的途径便是挑选一些成熟的产品进行实践，观察每次操作后接下来的变化，随后进行模仿记录。特别是在移动端领域，我特别建议模仿微信进行临摹。微信在控件层面被认为是最为注重设计的，其设计规范和工具相当完备，例如WeUI就提供了详尽的设计规范和相应的小程序开发工具。当然，只要你有足够的耐心，逐一熟悉并练习各个平台的官方规范，那无疑是最佳的选择……

    1.1.3 了解控件的属性

    控件通常配备独有的属性，亦即可供调整的设定项。以“列表”控件为例，交互设计师需确定的属性包括但不限于：排序标准、数据加载策略、刷新机制、适配规范以及内容截断规则等。以图示的群成员列表为例，其“排序规则”可能基于昵称首字母顺序，亦或基于加入群组的先后顺序，甚至可能是基于成员的角色来排列。

    学习“控件属性”的相关知识缺乏有效的途径，若能遇到愿意指导的前辈并查看他们的交互稿，那将是非常有益的。若没有这样的机会，就只能自行探索。一个设计师的交互稿是否足够详尽，开发者是否能够顺畅地阅读，以及是否频繁出现遗漏问题，这些主要取决于设计师对“控件属性”掌握的深度。

    1.1.4 了解怎么使用控件

    在掌握了上述所有关于控件的相关知识之后，你还应明确在不同情境下应选用何种控件。以一个实例（见下图）为例，当用户输入错误的手机号码时，系统需向用户展示错误信息。此时，可供选择的提示控件形式多样，包括弹窗、toast、行内提示以及气泡提示等。那么，究竟哪一种提示方式最为适宜呢？

    结果并非绝对确定，以“弹窗”为例，其弊端在于干扰性极强，然而它能够容纳较多文字，且用户点击率较高；相对地，“toast”干扰性较低，但仅能展示有限文字，用户较易忽视。实际效果需根据具体情况而定，设计师追求的视觉效果亦需考虑。

    那么我们如何掌握控件的操作技巧呢？建议大家可以阅读《web界面设计》一书，或是参考不同平台发布的设计指南。阅读完毕后，尝试寻找类似控件进行对比分析，这样通常就能领悟到其中的精髓。

    1.2 布局

    在基本层面上，布局涉及将“控件”与“内容”妥善安置于界面，并给予它们恰当的视觉比重。在网页盛行的年代，布局设计显得尤为关键。然而，随着移动设备的普及，布局设计似乎不再那么受到重视。这主要是因为移动端布局设计存在较高的相似性，其设计要求和空间都相对有限。尽管如此，它依旧构成了设计基础中的关键要素。

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

    布局设计的基础理论涵盖了诸如格式塔理论、版式网格、心理学的7±2信息处理能力、席克的时间感知规律、费茨的点击距离公式、奥卡姆的剃刀原则以及复杂性保持法则等多种观点。在这些理论中，除了版式网格之外，其他多数内容通过简单的网络搜索，在短短十分钟内即可掌握其核心要义。然而，这些理论多属于较为基础的层次，它们难以直接指导具体的布局设计实践。它们能够成为设计师心中的衡量标准和参考依据，并将贯穿于你日常的设计实践之中。

    1.2.2 布局设计的基本步骤

    布局设计简单可以分为以下4个步骤：

    罗列：需在界面上展示的各项要素应详细列出，例如：商品展示图、商品名称、商品售价、折扣券、收藏功能、分享按钮等。划分：对所列举的各项要素进行分类整理，每类要素构成一个独立的模块。例如，“收藏、购买、加入购物车”等行为可归类为“操作类别”。对这些分类后的模块进行排列，其排序标准通常包括：用户在浏览过程中的顺序、各个元素的重要性以及业务目标的期望。在布局和排布方面，受到的影响因素众多，最终需综合考虑这些因素，对布局进行相应的调整。同时，还需对各个元素的视觉比重进行定义和调整。

   

    掌握基本操作流程之后，可以运用“默写产品法”来加以实践。例如，将淘宝商品详情页的各个组成部分摘录出来，并自行进行布局。最终，与淘宝的页面设计进行对照，反思淘宝为何如此设计，以及自己是否在思考上有所遗漏或不足。

    1.3 流程

    界面所包含的元素分为两类：一是内容，二是功能。内容通常是固定不变的，例如商品的具体说明便属于此类内容。而功能则是可以操作的，比如点击“加入购物车”即是一个功能示例。在交互设计文档中，通常通过描述交互流程来展示功能。以聊天应用程序为例，“接收文件”的交互过程可以这样描述：打开消息→浏览文件→点击下载→文件下载完毕并成功打开。

    如下图所示：

    1.3.1 流程设计的步骤

    流程设计的基本步骤是：

    以下是一个示例，如同图中所示。以开发“群聊”功能为例，其中包含一个“添加群成员”的子功能。将“添加1个成员”视为一项“任务”，用户若要完成此任务，需执行一系列“动作”。例如：先定位到群聊、找到添加成员的入口、挑选要添加的成员、完成添加操作、确认添加结果成功。在将这些行为一一列出之后，我们便着手为每一个行为（或若干行为）量身定制相应的界面设计，进而形成了完整的交互流程。

    实际的交互过程远比这个示例要复杂得多，它不仅仅包含一个“主要流程”，还包括众多“辅助流程”。以例子中的情形为例，用户寻找群组的方法众多，既可以是搜索，也可以是通过通讯录，甚至是通过消息列表。而在用户确认添加的过程中，结果并不总是“添加成功”，他们可能会在途中改变主意，亦或是网络突然中断。这些都属于流程中的一部分，都需要体现在最终的交互稿中。

    在处理交互流程这一复杂环节时，我们需事先构建“流程图”（见附图），这样做有助于使你的思维更加条理分明，表述更为透彻。值得注意的是，流程图的绘制过程较为繁琐，此处不予详细阐述。（附图展示了移动端音视频通话流程图的实例。）

    1.4 步骤1的小结

    我们已对交互设计的初级阶段——界面基础进行了阐述，这部分内容涵盖了控件、布局和流程三大关键要素。需要注意的是，这部分内容的信息量相对较多。

    对于这三个方面，我向大家推荐了一些实用性强的书籍（并非那些空谈理论的作品）：

    掌握了这些基础知识，基本上就可以算是初步掌握了，具备了自己绘制交互稿的能力了。

    步骤2：设计内核（内功）

    这部分内容较为抽象，理解起来可能存在一定难度。然而，这部分知识对于交互设计师而言至关重要，可以说是其“核心”所在。所谓的“交互设计天赋”，在很大程度上就体现在这一部分。

    为了让大家更好地理解本部分所涉及的“用户”、“目标”以及“场景”等概念，我们可以通过一个实例来进行说明。比如，我们来看一下某个银行APP中的客服咨询功能。当时，笔者想要查询开户行信息，因此输入了“你好，请问如何查询开户行”。随后，系统给出了相应的回复：“客服正在为您安排，目前排队人数为299人，请您耐心等待。如需退出排队，请输入数字【1】。”

    十几分钟后，笔者略显焦躁，于是再次输入了“你好”二字。系统依旧给出了相同的回应，并且刷新了排队人数。尽管在这个例子中，控件、布局、流程均无瑕疵，但用户在使用过程中却感到极度不适，问题究竟出在何处呢？

    探究背后的原因，可以发现设计师在创作阶段并未站在“用户”的立场上进行思考，他们只是机械地绘制了基础的交互设计，这表明他们并未充分关注“用户需求”、“设计目标”以及“应用场景”。那么，“用户需求”、“设计目标”和“应用场景”具体指的是什么呢？我们又应当如何去掌握这些知识呢？

    2.1 用户

    用户这一概念相对较为直观，然而深入理解用户却是一项挑战。特别是在中国，不同年龄段、地域、社会阶层以及文化背景下的用户差异显著。因此，在着手开发某一产品之初，首要任务便是深入了解该产品的目标受众。

    那么，我们该如何深入了解呢？实际上，在日常工作中最常用的几种用户调研手段包括：用户访谈、用户观察以及问卷调查。运用这些方式，我们可以搜集到用户的基本资料，随后便可以对这些资料进行分类。分类完成之后，我们还可以进行下一步工作，即绘制用户画像（如图所示）。用户画像可以通俗地理解为将“众多个体”概括为“一个典型人物”。

    之所以设立用户画像，其原因是由于在设计阶段，我们往往难以全面理解“众多个体”的共通心理，然而却能够深入体会“单个个体”的内心世界。

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

    了解用户访谈、用户观察、问卷等调研手段，可以参考《设计调查》一书。“用户画像”的相关内容，可在知乎或公众号搜索“用户画像”获取。“用户”这一领域知识丰富，多数大型企业都设有专门的“用户研究员”岗位。

    因此，对于初涉设计领域的从业者来说，初步掌握这些知识即可，而对于深入的研究，则可在入门之后逐步展开。与此同时，在日常生活中，不妨多留意周围的人们如何使用各类产品，以此建立起初步的认知。

    2.2 目标

    设计同样会受到目标的影响，例如，众所周知，即便是同为聊天应用的“微信”与“钉钉”，它们在设计上展现出了显著的差异。微信在打扰性方面相对较低，且功能较为精简；而钉钉则相反，其打扰性较高，功能也更为复杂。究其原因，在于用户使用微信的目的是为了“实现生活中的轻松交流”，而使用钉钉的目的是为了“达成工作中的高效沟通”。

    在交互设计的框架内，目标被进一步划分为“用户需求”与“商业需求”，设计师的工作不仅是为了满足用户，还需考虑到公司业务的利益。若用户感到满意而公司却无法盈利，这样的状况难以持续。“用户需求”还可进一步细分为“个人成长目标”、“终极目标”以及“体验目标”，这三个子目标的详细解释可参阅《交互设计精髓》的第一章节。如果想要初步了解下这3个目标可以参考下图的例子。

    2.3 场景

    “场景”这一概念可以被视作是对用户当时所处状况的一种概括，若交互设计师需掌握一个核心观念，那么非“场景”莫属。

    场景有什么用呢？

   

    设计师在理解用户需求时，场景分析是至关重要的手段。毕竟，用户的需求往往难以直接体会。若无法真正体会，我们又怎能准确地为用户进行设计呢？因此，场景应运而生。设计师通过将自己置于“场景”之中，得以深入理解用户的所思所想，进而把握用户需求的本质（即细致入微的需求）。

    通常情况下，我们会将“场景”、“用户”以及“目标”这三个概念合并起来进行阐述，这便是我们常提到的“用户场景”。用户场景的普遍构成要素包括：是哪个人？在何种情境中？他希望得到什么？他采取了哪些行动？最终的结果又是怎样的？他的心理感受又是如何？

    图中展示了一位用户浏览新闻的情景，这一示例有助于我们更好地把握用户的使用场景。

    了解场景确实对设计大有裨益。设计师若能设身处地，细致推敲各个场景，便能激发众多创意，从而在细节上实现创新，而且往往能更贴近用户的实际需求，最终成果也往往较为理想。

    为了便于大家理解，我以先前提及的银行APP为例，对其用户使用情境进行了详细阐述，并在此基础上提出了一些创新思路，具体内容如图所示。您不妨将自己置身于这一情境之中，感受一下“场景”这一工具的独到之处。

    2.4 步骤2小结

    一旦深入理解了“设计核心”包括的用户需求、目标定位和具体应用场景，便具备了成为一名初级交互设计师的资格。此时，进行基础交互设计将不再成为难题，甚至可以正式步入工作岗位。

    步骤3：专业能力（武功秘籍）

    在熟悉了步骤一和步骤二的基础知识之后，我们便可以着手提升自己的专业素养，向着成为真正的交互设计师迈进。这一专业能力主要包括：对用户进行深入研究、对竞品进行细致分析、掌握设计理论、运用设计技巧、进行用户测试以及进行数据分析。

    这里我要强调的是，我所提及的专业技能主要是指在实际工作中经常运用到的，并非涵盖所有专业能力。在接下来的图中，我会将这些专业技能依据产品研发的流程进行分类展示：红色部分代表需要优先掌握的技能，橙色部分则是建议学习的，而灰色部分则是可以根据个人情况选择学习的。

    这些专业技能的掌握较为繁复，且并不属于“初学者”阶段应当优先掌握的内容，因此作者仅对一些学习策略进行了介绍，并未对具体内容进行详细的解释和分析。

    笔者在此推荐了一系列关于专业能力的书籍，其中红色标注的为推荐优先阅读的，橙色标注的则是建议学习的，而灰色标注的则可供选择性阅读。需要特别指出的是，这部分知识并不建议仅通过公众号文章来学习，因为这些文章往往具有较为完整的体系，阅读文章只能获得一些表面的知识。此外，这些文章的作者水平不一，既有优秀的也有不足的，因此辨别哪些内容是真正可信的具有一定的难度。

    在学习这些专业知识时，大家需留意时机，最好选择那些学后能立即应用的内容。换言之，理论应与实际操作相结合，否则知识很容易被遗忘。此外，书中所述知识多带有理想色彩，而实际工作中节奏往往很快，因此实践中必然会出现诸多简化和优化。这便是理论必须与实际相结合的必要性。

    步骤4：赋能业务（闯荡江湖）

    交互设计是一门业务关联性极强的学科领域，单纯将交互设计本身做到位是远远不够的——尤其是对于那些拥有两年以上工作经验的设计师来说。若交互设计师希望为业务提供助力，或是取得更优异的成果，那么他们就必须掌握跨领域的知识，包括但不限于商业、产品、用户研究、视觉设计、技术、运营、市场以及销售等方面。

    某设计师好友承接了一项“商品详情页改版”的任务，其业务宗旨是提升购买转化比率。他针对原有商品详情页中存在的诸多用户体验问题进行了深入分析，并针对性地进行了优化，从而显著提升了购买过程的质量与效率。然而，尽管如此，最终的购买转化比率并未实现大幅提升，仅略有上升。

    业务方后来提出了一项建议，那就是在界面显眼位置突出显示商品包邮的信息（尽管商品本身已是包邮，但并未明确标示），这一举措使得转化率显著上升。究其原因，是因为今年业务策略的重点在于吸引新用户，因此市场团队在多个渠道投放了大量低价促销商品，而这些商品均提供包邮服务。

    消费者在考虑购买这些经济实惠的商品时，会对其是否包含邮费表示顾虑；一旦我们明确告知邮费已包含在内，他们的购买意愿便会显著增强。若我的设计师朋友对业务策略和市场推广规则有深入了解，我坚信他能够想到将“包邮”这一信息置于界面显眼位置的设计方案，进而为业务带来助力，实现业绩提升。

    在横向知识领域，笔者的造诣尚浅，因此只能向大家推荐一些广受认可、易于阅读的著作。若经济条件允许，不妨考虑报名参加网络平台提供的初级课程。

    最后

    交互设计构成了一门知识体系既丰富又完备的领域，对设计师来说，这无疑是一种幸运，因为只有具备了完善的知识体系，个人的成长才能得到充分保障。然而，交互设计在门槛上却显得较为模糊，有的人经过数年的学习才投身其中，有的人仅参加了一个月的培训课程便开始实践，更有甚者，只需阅读两本书就能着手进行。所有交互稿件均能顺利产出，不过它们的质量不尽相同，这就像每个人都能烹饪食物，但烹饪技艺各有高低。

    步入行业的姿态各不相同，各自携带的知识框架也有所区别。然而，不论采取何种方式，我们都诚挚地建议各位持续不懈地钻研基础理论，努力成为技艺精湛的交互设计师，相互激励，共同进步！

    附录：各平台官方规范

    想要翻译版的可以网上搜一搜，我只有老的翻译版就不贴出来了

    iOS：

    ：

    MacOS：

    Win- app：

    Win-UWP：

    小程序：

    ：

    ：

    崇书庆，一位来自UEDC的交互设计师，他是一位理工科背景的设计师，偏好那些能够实际应用、具有价值输出的实用设计。他对心理学、社会科学、商业领域以及工业产品和游戏《王者荣耀》都抱有浓厚的兴趣。