18f015892382ab3237fc0bd12b96cfe8
交互设计知识体系

本文部分内容来自网易 UEDC 交互设计师「崇书庆」的文章《入门交互设计的4个步骤
(6000字长文)》。我结合自身经验,对内容进行了精简和再编辑,并补充了信息。

很多人入门交互设计的方式是:看书,比如《交互设计精髓》,然后借鉴各个产品画交互稿,慢慢好像也入门了。但是看这种大部头很容易就放弃了,最终也落不到实处。跟着成型产品学交互,也很难领会到交互的体系和核心。那么有何体系化的入门方法呢?用「学武功」来做类别,就是:

对应到交互设计 T 型能力图谱上,如下图:

界面基础

界面基础指的是:控件、布局、流程 ,也就是在交互稿上肉眼可见的部分。

1. 控件

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

了解控件比较系统的方法是阅读各个主要平台的官方设计规范
- 苹果各设备设计规范:Human Interface Guidelines
- 谷歌设计规范(安卓适用):Material Design
- 安卓开发平台规范:安卓开发者文档
- 微软设计规范:Microsoft Design
- 蚂蚁金服设计规范:Ant Design
- 微信小程序设计规范:微信小程序

后面我会把这些平台的设计规范写成文章。

很多控件都是带交互的,包含了非常多细节。比如文本框(可参考下图流程):“用户点击文本框后,会出现光标,且弹出键盘。输入第一个字符后,会出现“清空按钮”。输入很多字符后,会有截断效果。输入错误时,会报错……”

学习控件的交互流程,可以在做交互稿时考虑得更细致,帮助开发工程师更好地理解稿子和实现效果。学习方法是观察对控件的每个动作会发生什么,并且临摹下来,比较推荐临摹「微信」的控件(公认比较全面且讲究)。

除了了解控件本身的流程,交互设计师还要知道在什么情况下使用哪种控件是合适的,所以我们还需要知道控件的属性。举个例子(如下图),当用户输入手机号错误的时候,需要给用户一个错误提示,提示方式所用的控件可以有很多种:弹窗、toast、行内提示、气泡提示。那么用哪一种最好呢?

答案是“不一定”,比如“弹窗”的缺点是打扰性很强,但优点是可以承载大段文字,用户到达率也更高。Toast 的打扰性很小,但只能放很短的文字,用户很容易忽略。具体要看当时的情况是怎样的,设计师想要什么样的效果。

组合控件和界面元素时经常需要定义一些规则,比如对于设计“用户列表”,交互设计师就需要定义它们的排序规则、加载规则、刷新规则、截断规则等。

了解控件属性和排列规则需要我们平时多观察和体会,慢慢就能形成比较准确的判断。

2. 布局

布局就是把“控件”和“内容”放到界面上合适的位置并赋予合适的视觉重量。

网页时代的布局设计是非常重要的,但手机端的屏幕很窄,所以没有太多布局限制。

布局设计的基本理论有以下几种:格式塔原理、网格系统、7±2法则、席克定律、费茨定律、奥卡姆剃刀原理、复杂性守恒定律

设计布局的步骤可以简单分为 4 个步骤:
1. 列举界面所需元素,比如:商品图片、商品标题、价格、优惠券、收藏、分享……;
2. 将列举的元素进行归类,每一类是一个模块,比如:“收藏、购买、加入购物车”可以归为“操作模块”;
3. 将归类好的模块进行排序,排序是需要考虑元素的重要性、业务的期望、用户的使用习惯等;
4. 综合其他因素对布局进行调整。

学习布局可以通过“默写产品法”进行练习。比如把淘宝商品详情页的元素摘录下来,然后自行排布。最后和淘宝的设计进行对比,思考淘宝为何这么设计,自己是否有思考疏忽。

3. 流程

流程主要是指由交互行为引发的页面跳转,交互稿中往往是通过描述交互流程来展示功能。比如在聊天 App 中“接收文件”的交互流程可以描述为:点开消息 → 看到文件 → 点击下载 → 下载完成并打开(如下图)。

流程设计的步骤分为 3 步:1. 确定“任务”;2. 从”任务“推导”动作“;3. 将”动作“对应成页面元素。举个例子,假设要做“群聊中添加群成员”的小功能,我们就可以把“添加一个群成员”作为“任务”。用户要完成这个任务,就需要有一系列“动作“:

拆解出动作后,就可以针对每个动作设计对应界面,这就得到了交互流程。

这是一条主流程,但是实际的交互中还会有很多支流程。比如:用户找到群的方式有很多,可以通过搜素,可以通过消息列表,也可以通过通讯录。

对于复杂的交互流程,需要在开始绘制界面前搭建流程图。流程图的绘制相对比较复杂,在很多公司是产品经理完成的。

设计内核 + 专业能力

“设计内核”是交互设计的“内功心法”,包含用户、目标、场景。这部分比较虚,但本质是考验设计师的产品思维,所以能很大程度划分交互设计师的水平。

1. 用户

用户的年龄、地域、阶层、文化水平等通常差异性是很大的,真正了解用户其实非常难。但每个产品都是在为目标用户提供服务,从而实现商业变现,所以积极了解目标用户又很重要。

了解用户的方式就是做调研,常见的调研方方法包括:观察法、问卷法、深度访谈。通过这些方法可以收集到用户的基本信息、对产品的期待和反馈等,我们对其进行整理总结之后,就可以制定用户画像。

用户画像本质是把“一群人”抽象为“一个人”,在做产品设计时就可以把自己带入这“一个人”,去体会“一群人”的想法。一个产品的目标用户可能是覆盖了多种属性的人群的,所以可能也不止一个用户画像。

学习用户调研和用户画像的基础知识可以去看一些相关的书籍,比如:《设计调查》《赢在用户》,也可以去找一些课程。要洞察用户不能光听用户怎么说,而是要看用户怎么做,还要能洞察到用户怎么想。为了真正了解用户,建议再去学一点心理学,比如:《设计心理学》《社会心理学》《乌合之众》。但最重要的是“泡在用户里”,也就是需要真正去接触用户,积累足够的用户样本

2. 目标

同样是聊天,在“微信”了解和在“钉钉”聊天的体验差异就很大。这是因为,“微信”的目标是“熟人间的生活沟通”,所以功能比较简单,打扰性小,而“钉钉”的目标是“工作中的高效沟通”,所以功能复杂,打扰性大。

目标可以分为用户目标和产品目标。产品目标可能是商业目标、品牌识别、成功标准,用户目标包括用户的功能需求、情感需求和社会需求。

理解用户目标同样可以通过用户调研和学习心理学,希望更进阶的还可以学习数据分析,从大数据的角度去分析用户行为。理解产品目标则需要对商业和产品有更深入的认知,建议多做竞品研究,多看商业类的书籍,比如:《定位》《创新者的窘境》《浪潮之巅》等。

3. 场景

场景是用户使用产品时所处的情况,有什么用呢?上面说到,理解用户目标需要感同身受,但凭空想象或者单纯以自己的角度来感受,是很难建立真正的“同理心”的,而“场景”就能起到很大的帮助。

一般我们都会将“场景”和“用户”、“目标”整合到一起描述,也就是常说的“用户场景”。用户场景通常需要交代清楚是谁?在什么情况下?想要什么?做了什么?结果如何?他的想法如何?举个例子感受一下:

当设计师将自己代入到场景中,思考每一个场景,过程中便能产出大量的想法,设计的创新/细节就都出来了,且最终的结果往往也是相对符合用户真实需求的。

小结

总结一下上面提到的专业能力,主要指的是:用户研究、竞品研究、设计理论、设计方法、用户测试、数据分析。下图中将这些专业能力按照产品的研发流程做一下归类(红色是优先学习的,橙色是建议学习的,灰色是选择学习的):

赋能业务

交互设计是一个业务属性很强的学科,设计师只是把交互本身做好是远远不够的(尤其对于2年工作经验以上的设计师而言)。交互设计师想要赋能业务,或者是获得比较好的成果,必须要了解横向领域的知识:商业、产品、用研、视觉、技术、运营、市场、销售

举个例子,某设计师小B接到了一个“改版商品详情页”的需求,业务目标是提高购买转化率。小B便找出了原来商品详情页中的很多体验问题,把购买体验、购买效率提高了很多,但最终的购买转化率并没有提高多少,只是略有增长。后来业务方提出了一个点,将商品包邮这个信息添加到界面中明显的位置(本身商品也是包邮的,只是没有明确展示),结果转化率一下子提高了很多。究其原因是今年业务的策略是要做拉新,于是市场同学在各个渠道中投放了很多低价引流商品,且这些商品都是包邮的。用户在决策购买这些低价商品时会担心是否包邮,当明确告知他们包邮后,转化率便自然而然地提升了。如果小B比较了解业务的策略、市场投放规则,就可以把包邮信息放到界面明显位置,从而赋能业务,取得成绩。

最后

我将以上内容汇总成了一张知识体系思维导图:

交互设计是一个知识体系非常丰富且完善的学科,对于设计师而言这是一件幸福的事情,因为只有完善的知识体系才能让“个人成长”更有保障。另一方面,交互设计也是一个门槛很模糊的学科。有些人学了几年才开始做,有些人上了 1 个月培训班,甚至看了 2 本书就开始做。交互稿都能正常输出的,只是质量有所差异,就像每个人都能烧饭一样。
每个人入行的姿势各异,自带知识体系因而不同。但不论如何,都建议大家能孜孜不倦地学习基础知识,成为一名专业性强的交互设计师,共勉!

原文链接:《入门交互设计的4个步骤》

© 著作权归作者所有
这个作品真棒,我要支持一下!
核心内容:梳理总结交互设计从入门到进化的知识体系,对照体系解锁每一项技能 适合读者:零基础学交互的每个人
0条评论
top Created with Sketch.