前言

提到交互设计，很多人可能觉得它是设计师的活，跟我们产品无甚关系。实际上在设计原型的过程中，我们已经无形地将交互考虑进去了，这无可避免，毕竟产品是我们的娃，他长成啥样我们得上心。遵从一些交互设计原则，这样使得我们的产品设计更加规范，也更少和UI小姐姐（也可能是giegie）吵架哦。

交互设计是什么？

在设计部门我们经常听到UID、UED、IxD，那他们分别代表什么呢？
UID： User Interface Design 用户界面设计
就是我们常说的UI，广义来说UI设计会包含交互设计，和一些动效设计。不过现在拆分得比较细的岗位，会有专人来只设计用户界面，就是考量怎样将界面设计得漂亮，易用。

UED： User Experience Design 用户体验设计
用户体验是个人主观感受，但是共性的体验是可以经由良好的设计提升的，用户体验设计旨在提升用户使用产品的体验。

IxD：Interaction design 交互设计
交互设计的对象主要是人机界面，是人和机器互动的过程。交互设计需要了解人的心理、行为、使用目标和期望。不仅设计界面，还要使流程清楚，使得产品的易用性更好。

交互设计原则

1. 一致性原则

之所以将一致性放在最前面来写，因为它是你还未开始设计时就应该定下的风格，是产品的调性。不仅是设计上的，包括运营推广，都应该遵从一致性，是你产品的基因。
一致性可以给我们带来的好处：

• 外部：降低用户学习成本，给用户树立品牌形象，增强易用性。
• 内部：资源复用性更高，提高工作效率，也能确保大家朝着一个方向发力。

本文既然是交互设计，那么在交互设计上从哪些方面可以做到一致性呢？

• 视觉：配色、字体、图标、页面布局、插画、操作流程
• 交互：页面加载、动画专场、人机交互反应

来看个大厂的例子：
**网盘

百度网盘首页 同步空间

整体界面风格清新简洁，icon和按钮配色圆角规范，让人一看就知道是一个系列的产品。

2. 界面清晰

2.1 信噪比

来源于通信，指一个电子设备在一个电子系统中，信号与噪声的比例。通常，信噪比越大，表示噪声混在信号中的比例越小，声音越清晰。
对应到设计中，信号就是重要信息，噪声则是干扰项即不重要信息。提高重要信息占比，突出重点，能帮助用户快速定位有效信息。

2.2 几何法则

在界面设计中，我们通常遵从几何规律，任何控件，都有其相关的几何形象。

引用自知乎@酸梅干超人

在几何形中，识别的符合大致为：圆形≈矩形≤凸多边形＜凹多边形。

2.3 临近性原则

彼此靠近的元素倾向于被视为一个组。

***音乐

这样的布局我们就可以简单分组，顶部导航栏、二级导航栏、歌单、广告等。
在设计时，适当对元素进行分组，使得界面清晰有规律。

2.4 相似性原则

（1）相似的元素被认为是一个组。
图片已删除
功能相同的商品卡片，样式都一样，上图下文。如果每一个商品的卡片有上文下图，上图下文，左图右文，浏览起来就很困难。因此一个模块的样式应该是一种风格。

（2）但需要注意的是，相似并不等于高度重复。
如在一些文字类APP中，使用高度重复的样式，会增加阅读的压力，可读性很差。

密密麻麻

（3）异常突出，表示不同
那么反面来说，相似性被归为一个组，那么需要突出某个元素，就是让他脱离这个相似性。如激活的颜色，一般与周围不相同，引起用户注意。

激活

2.5 米勒定律

我愿称之为“组块”定律，这个定律讲的是在短时记忆中，人平均只能记忆7 (±2) 个项目；即：人们最多只能够记住 7(±2) 个项目组成的一组。
（1）入口的选项不超过9个

• 顶部或底部的tab
  在IOS官方建议中，一行tabbar最多只有5个。

  
  米勒定律的影响

手机的收藏夹也遵从着这样的设计

手机收藏夹

（2）信息组块处理
有些文字信息，如地址、银行卡号、电话号码这类比较长的，需要进行分块组合。

收货地址分块

（3）选项分块
常见在个人中心或者下拉菜单中有许多操作，如果不分块，就是以下这样：

很多选项

分块的选项：

分块的选项

2.6 费茨定律

与操作难度有关，定律中有三个关键参数，时间、距离、大小。任意一点移动到目标位置所需要的时间，与目标距离正相关，距离越长所需时间越长，与目标大小负相关，体积越大越宽所需时间越短。

费率定律 地图应用

在这类地图应用中，搜索和选项都集中在底部靠近手的好操作的位置。

2.7 奥卡姆剃刀定律

定律的内容是：如无必要，勿增实体。
本意是删繁就简，剔除界面中误用的杂项，或者把一些项收起来。
比较著名的例子是iPhone的设计，最开始时iPhone是有一个Home键实体的，后来把这个实体也拿掉了，通过手势来控制回到主页的操作，后来许多手机厂商都使用了这样的设计。

2.8 系列位置效应

用户更容易记住系列中的出现的第一项 (首因效应) 和最后一项 (近因效应)。
这让我想起了上学的时候，老师总让我们早上起来读书，晚上睡前复习。因为早上起来没有前置影响，睡前没有后置影响。当然，这和首因效应或者近因效应也许无关，就是想到了随口一提。

有个例子，在大多数网页和APP的设计中，logo总是放在第一屏，最左边的位置，比如简书的logo：

首因效应

正是对首因效应的运用。
再比如近因效应，文章看到这，你不一定记得中间讲了什么内容，但你一定知道刚刚那点讲的是首因效应，因为你最后看到的是它，如果记不住，那当我没说。

3. 让用户少思考

3.1 席克定律

简单来说就是让选择更少，它具有数量和时间两个参数，当面临的选项越多，需要作出决策的时间就越长。
帮助用户精简选择，减少用户的反应时间。一个最明显的变化就是遥控器，曾几何时，我们的遥控器还是布满了各种功能键，现在已经精简到只有一些基本的操作。

一代遥控器 二代遥控器 三代遥控器

3.2 易学性

功能简单易用，用户群体可以快速上手。
如果具有一定专业性，则需要做新手教程，确保新用户来有地方下手。

3.3 符合用户操作习惯

有些时候说起来有点抽象，比如一个产品刚设计时怎么能够知道用户习惯呢？如果行业已经成熟，是会有成熟的竞品的，参考他们的操作习惯即可。
或者参考实物操作，如现实中转转盘是先用手转动转盘，指针会停在某一格，那设计时就需要一个触发转动的按钮和一个指针。

3.4 使用用户能懂的词

我们在思考时，可能站在自己的角度上，觉得自己能懂某些用词，但是用户可能根本不理解意思。
避免使用专业用词在系统中，使用更加简单易懂的词，用户使用起来会更加简单。

3.5 步骤提示，减少焦虑

为了让用户对自己的行为有个预期，将需要进行的步骤展示出来是有必要的。最初的设计许多要填写的信息都在一个步骤里面，看着密密麻麻的输入框，瞬间丧失继续下去的动力。将步骤拆分后，每个步骤都只需要填写部分信息。

填写步骤

说句题外话，如果哪个不是必须用的C端有这么多步骤，用户早不知道在哪步就流失了。

4. 掌握

用户在使用产品时，分为主导型和被动引导型，不管是哪种类型，都需要让用户感受到产品是在自己的操作掌握中。

4.1 及时有效的反馈

用户在产品中的操作是一个流程，从上一个流程到下一个流程，每个流程都有状态。用户需要知道自己的操作状态，上一个操作有没有成功，当前正在做什么，接下来要做什么。
简单举一个例子：

提交按钮的变化

在提交按钮中，不同状态下给用户的反馈不同，让用户知道自己的操作结果如何。

4.2 避免干扰和打断

看到干扰和打断，我总想起无数的弹窗，或者浮动窗口，小气泡之类的。每当我正开心地浏览时，突然一个诱导弹窗弹出，我又不小心点击了，此时我就会问候产品经理。
当然，很多营销手段要靠这样的弹窗达成，但我个人不喜欢这样的设计，对用户的体验太不友好了。

4.3 容错

生活中经常没有后悔药可以吃，但是在产品中，可以满足这样的想象。好了扯远了，那么在产品中容错主要需要做到“预防”+“撤销”，即可提升产品的容错率，给用户一种包容性很强的感觉。
（1）预防
在一些重要步骤之前，给出二次，或者反复提示。比如，支付，我们一般都会要求安全验证和身份认证以确保用户真实支付意愿和支付安全。类似的二次操作还有，修改、删除等。

（2）撤销
在有一些操作为了减少用户操作麻烦，或者这个操作本身就不重要，没有进行二次确认。用户可能会误操作，那么此时，就需要给用户提供“后悔”的选项，比如撤销。这类场景经常用在，取消收藏，如一个用户将一篇文章误取消收藏了，会有一行小toast提示，并附带撤销操作，让用户方便地回退。

撤销

写在最后

在产品经理生涯中，最开始，我们常拘泥于设计细节，认为自己可以创造出独一无二的交互，甚至不屑参考别人的设计，认为那是抄袭。但是最后用户可能并不买账，因为他们已经习惯了大众的操作。大多数的设计都是服从用户，当然也有敢为人先的设计，他们创造了用户习惯！
说这么多，其实想引用一句话，誉为交互设计之父的阿兰·库珀(Alan cooper)说过的：除非有更好的选择，否则就遵从标准。这些被前人总结出来的定律，或者经验，都将成为我们的基础储备，在以后的设计中融会贯通。

阿兰·库珀

参考文档

http://www.woshipm.com/ucd/4838200.html
http://www.woshipm.com/pd/4449756.html
https://www.zhihu.com/question/19812118
http://www.woshipm.com/pd/4505156.html