那么多设计原则如何快速掌握？试试我这个方法！

之前写过一篇《零基础如何成为交互设计师？聊聊我的学习三步法！》，通过该方法，我们可以对交互设计有个整体的了解，比如，知道了交互设计师的工作流程、需要掌握的技能、交互设计师的日常产出等等。

零基础如何成为交互设计师？聊聊我的学习三步法！

背景介绍 我是从测试被动转交互的（转岗原因不是这次的重点，就不在这里描述了），以前工作的公司是家小公司，没有所谓的交互设计岗位，所有我对交互设计一窍不通，以至于画了一段时间的线框图之后，依然没有找准个人定位，走了不少弯路，浪费了不少时间。

可是，纸上得来终觉浅，绝知此事要躬行，在我们了解那么多的理论知识，知道了交互设计师需要掌握的众多技能后，又该从哪里开始，该如何快速掌握这些理论，并应用于实际工作之中呢？

还记得上高中那会，有一种英语练习题叫做“各个击破”，比如我在“完形填空”方面比较薄弱，那么就买一本完形填空的练习题，每天晚上睡觉前练习 2~3 篇；又或者我在“阅读理解”方面比较薄弱，那么就买一本阅读理解的练习题，用同样的方式去练习，这种有针对性的练习就叫做“各个击破”，我当时的英语成绩就是通过这种方法提升上来的，练习效果可谓是立竿见影。

既然这种方法效果很好，我们可不可以把它应用在“交互设计技能”的掌握上呢？答案是肯定的。

下面，我就以交互设计原则为例，讲述一下，在了解了这些设计原则之后，怎么做才能更快的掌握这项技能，实现各个击破。

首先，总结“设计原则全家桶”

交互设计原则有很多，为了能够更快、更全面的掌握这项技能，我们需要将设计原则进行汇总，整合为“设计原则全家桶”（总结方法我就不在这里赘述了，感兴趣的同学可以查看上文）。

这里我汇总了四个常用的设计原则，古腾堡原则、格式塔原则、尼尔森十大可用性原则、交互设计 5 大原则（这里简单说明一下，本来是交互设计 7 大原则，其中“接近性原则”在格式塔原则中已包含，“防错原则”在尼尔森原则中也已包含，所有我把这两个原则去掉了，一来可以简化原则，二来可以减轻记忆负担）。我们可以通过提取关键词的方式，把这些原则的“主要内容、在设计中的应用”通过“关键词+图片”的形式提炼出来，然后汇总为“设计原则全家桶”。（全家桶相关文章见文末）

其次，强化练习

“设计原则全家桶”就像是武功秘籍，有了武功秘籍，我们还需要勤加练习才能掌握，可是，该怎么练习呢？如果手上有项目的话，可以通过项目实战进行巩固。如果手上没有项目，我们该怎么进行巩固呢？

我的方法是，找几款常用的产品，然后对这些产品进行分析，分析这些产品，都应用了哪些设计原则，它们是如何应用这些原则的，有没有不符合设计原则的地方，不符合设计原则地方背后的设计目的又是什么？

下面，我以淘宝 APP 为例，来简单说一下该如何强化我们学习到的这些设计原则。

我们先来看下淘宝首页都应用了哪些设计原则？

顶部导航栏只有“订阅、推荐”2 个 tab 页面，底部导航栏有“首页、逛逛、消息、购物车、我的淘宝”5 个版块，这两个导航栏应用到了交互设计 5 原则中的“米勒定律”，也就是 7±2 原则。

签到、会员码、搜索栏等，应用的是“格式塔–主题/背景原则”，即当主题和背景重叠时，人们倾向于把大的元素当做背景，把小的元素当做主题。所以“签到、会员码、搜索栏等”被看做为主题，而后面灰色的部分被当做了背景；同样的，我们再看常用功能栏，后面的白色卡片会被当做背景，而中间的功能图标被当做主题。

再看下面的产品展示区，应用的是“格式塔–闭合性原则”，因为手机屏幕有限，无法展示全部的内容，所以最下面仅展示了部分图片，以提示用户下方还有更多的内容。

继续向上滑动，可以看到这里的图片摆放样式采用了“格式塔-对称性原则”，而且这里对展示样式进行了优化，采用了瀑布流的样式，可以防止视觉疲劳，展示效果更胜一筹。

点击首页上方的搜索框，进入搜索页面，搜索框下方展示了历史搜索数据，且按用户的搜索信息倒序排列，最后搜索的内容展示在最前面，很明显这里使用的是“尼尔森-灵活高效原则”。

再来看产品详情页，该页面使用了“古腾堡原则”，最重要的两个信息（产品信息、购买按钮），一个展示在左上，一个展示在右下；其他信息分别展示在中间、右上及左下方位置。同时这里也使用了“交互设计 5 大定律中的费茨定律”，把“购买”按钮放在距离用户手指最近的位置，并占据底部导航栏三分之一的面积，这样的设计，既方便了用户的操作，又提升了产品的购买率，一举两得。

淘宝关于其他原则的应用示例还有很多，比如淘宝首页的“下拉刷新→松手刷新→正在刷新”，应用的是“尼尔森–状态可见原则”；用户购买商品后发现不合适，可以申请退货或换货，应用的是“尼尔森–用户可控原则”；淘宝客服功能，可以在线为用户答疑解惑，应用的是“尼尔森-的人性化原则”，等等，这里我就不再一一举例了。

强化练习的目的就是为了加深记忆，形成条件反射。以后，不管是做竞品分析，还是自己设计原型，就能快速想到这些设计原则。遵循这些原则，即使我们没有太多的实战经验，也可以设计出符合基本规范的原型图，减少低级错误的可能性。

最后，实战练习

武功秘籍我们已经练习的差不多了，可是威力如何还需要进一步的检验。如何检验学习的效果呢，那就是通过项目实战。

《刻意练习》中作者说“人的学习受到情景的制约或促进，你要学习的东西将应用在什么情境中，那么你就应该在什么样的情境中学习这些东西。比如，你要学习编程，就应该在 GitHub 里学习，因为你以后编程就是通过 GitHub”。同样的，我们想掌握交互设计原则，那么就需要在交互设计中学习，也就是结合实际项目进行实践。

这里我通过一个实际案例，来简单介绍一下，在实际项目中该如何应用这些原则。

现在有个功能优化的需求，给“党费缴纳”增加一个“待缴费用户查询以及发送短信提醒”的功能，那么我们在设计原型的时候会应用到哪些设计原则呢？

先看原型图，下面这两个页面应用到了“状态可见、接近性、相似性、奥卡姆剃刀原则、一致性原则，以及古腾堡原则”。

其中，查询记录为空和查询记录不为空，应用到了“尼尔森–状态可见原则”；

查询条件（快速查询、精确查询）和下面的查询结果，应用的是“格式塔–接近性原则”；

查询结果中，人们倾向于把“选择框、姓名、联系方式”联系在一起，这里应用的就是“格式塔–相似性原则”。

快速查中的“近一月、近三月、近半年”快捷操作按钮，应用的是“奥卡姆剃刀原则中的减少用户操作次数，给出合理选项原则”；

再看有查询结果的这个页面，这个页面和手机通讯录页面是不是很相似？所以这里应用的是“尼尔森–一致性原则”；

还有右下角的「发送短信提醒」按钮，应用的是“古腾堡原则”。

我们再看下面两个页面，这两个页面主要应用的是“尼尔森–状态可见原则”，当点击用户前面的按钮时，左下角会实时显示“已选中 xx 项”，然后点击「发送短信提醒」按钮时，会弹出“发送成功”的 toast 提示。

上面考虑的都是正常的情况，假如用户未选择任何选项，直接点击了「发送短信提醒」按钮，这个时候该怎么处理呢？这时“尼尔森–容错原则”就派上用场了，增加一个“请选择您要提醒的用户”toast 提示就可以啦。

总结

《刻意练习》的作者告诉我们，“1 万小时定律”是个伪命题，学习需要讲究方法，同时也是有方法可寻的。通过“总结归纳→强化练习→项目实战”的方式，我们就可以将交互设计必备的技能在较短的时间内各个击破。

设计原则全家桶参考链接：

用超多案例，帮你掌握交互设计心理学的古腾堡原则

写在前面 在平时的设计过程当中，你是否有这样的疑惑？

近万字干货！带你全面了解格式塔原则

好的设计师理解心理学在视觉感知中的强大作用。

用超多案例，带你学会经典的尼尔森十大交互设计原则

Jakob Nielsen（雅各布·尼尔森）的十大交互设计原则。

万字雄文！超多案例帮你读懂交互设计7大定律

在交互设计领域，有很多经过时间检验过的定律及法则，来作为设计的指导原理，它能够帮助产品设计者对界面上的各种视觉元素进行合理评估，从而发现一些使用过程中的可用性问题，还可以根据这些法则从界面的维度来改善操作效率和使用满意度。

用超多实例，解析「交互设计七大定律」在设计中的应用（上篇）

交互设计之父阿兰·库珀说过这样一句话：“除非有更好的选择，否则就遵从标准”。