记笔记的阿晴（notebyaqing）独家文章，转载需署名。今天总结一下交互设计原则中的一致性。案例和个人所思都会在每个案例下方说明。

目录一、一致性是什么
二、为什么要遵循一致性？
三、一致性的运用四、总结

一、一致性是什么？

相同功能在不同的页面，要保证相同的、或者类似的交互操作体验。二、为什么要遵循一致性？1.降低用户对界面的学习成本。由于页面中使用一致的元素或者交互形式（比如点击右上角三个点出现的是分享到其他平台的功能），用户形成了稳定的预期，学习成本不高，用户就会更容易沉浸该产品。反之，如果一款APP从一开始用户使用时，在同类型的页面下设置了很多不同的交互，相当于在提高门槛和学习成本，用户不断受挫，若不是必须要用的产品，可能用户会选择其他同类型产品，从而导致该产品的用户流失。2.加强对产品的辨识度

可口可乐、麦当劳的logo深入人心，同理，一款产品，一致性的交互可以加深用户的印象。就像上英语课，一个语法如果老师在每次讲题都讲同一个知识点，很容易就会记住，但如果老师说：这个之前讲过就不讲了，就不那么容易记住。

3.提高设计师工作效率例如界面一致。团队里多位设计师团队协作的话，可以保证不同设计师的方案一致，新人也容易快速上手，并且同类型的资源可复用，以提升设计效率就能早点下班。同时也方便开发的工作。
三、一致性的运用

• 案例1：界面保持一致

潮汐APP中，无论是同一页面的内容还是不同页面的内容，都保持了一致性。

上图中画了三种颜色的矩形，分别对应不同页面的同一样式。基本上每个切换的分段控件页和底部标签栏所对应的内容区，都是遵循了一致性。

一致性也可以使页面看上去整齐有序。

• 案例2：交互控件

陌陌APP中，他人的动态页面在不同的地方，只要点击右上角的三个点，出来的控件内容基本是一样的。反之，如果同样的功能，假设举报功能在“附近动态”的页面右上角点击可以出现，但点开该条动态，点击右上角又没有举报功能。若用户遇到了不友好的人发布的内容，想要举报，就会出现因为非一致性导致用户一直在找举报功能在哪。

反例：

不知道大家有没有遇到过这样的情况：上厕所，有三个坑位门，其中一道门要推开，其他两道门是拉开，如果没有保持一致的打开方式，上厕所的人就会很懵。

• 案例3：多终端的统一

上图列举时光序这款产品分别在ios系统、iPhone、网页端的“我的一天”的展示。基本是保持了一致，像这样的产品还有滴答清单、有道云笔记、印象笔记等等。在多平台保持了一致的使用操作方式，用户在不同平台适应的话，因为功能位置都基本是一样的，可以快速熟悉和上手。

不过，做到多平台一致性的是笔记效率型的APP和需要输入表单的一些后台系统在多平台上操作更需要位置功能保持一致，像一些社交、娱乐的产品并不是基本保持一致性的，比如爱奇艺、知乎、简书等产品。所以在设计的时候我们要根据自身的产品，考虑多平台的设计规范进行适配和是否需要适当增删一些内容。

举个例子，爱奇艺网页端的泡泡圈，这一功能在网页端和APP端的内容一致性上就基本是不一样的。

在APP的底部标签栏有个“随刻视频”分类的内容，网页端却没有。（见下图）根据自身产品进行了内容一些增删。类似的还有淘宝的投诉商家功能，必须用网页才有该功能，APP端就没有。

• 案例4：文案的一致性

哔哩哔哩面对的用户人群是广大年轻人，所以在文案上也会显得比较年轻，在很多方面，甚至是浮层的提示文案，都保持了俏皮年轻的一致性。

不过在哔哩哔哩中也有反例，上图中间那张无网络情况下的提示，跟其他提示相对比，就略显正经，没那么俏皮。

最后。

都说设计来源于生活，我想到我们操作的win系统和mac系统，其实也是有包含一致性。我认为一致性是最基础也是最重要的一条原则，在工作中帮客户切图我也一直遵循同一类型用同一尺寸来进行切图。只有遵循规则，才有可能打破规则。守破离，先遵守再破最后建立新的更好的规则。人生和学习亦如此，但互联网高速发展的时代让人们在任何方面都追求快速。扯远了，再说一下操作系统的一致性的方面。

第一点，Mac系统下所有应用程序的关闭全是在左上角。

第二点，Mac系统交互控件和手机iOS系统的交互控件也是保持一致

就拿弹窗来说，上图是关闭软件时跳出的弹窗，mac系统。存储在最右边，不存储在左边。iPhone的设计规范手机也遵循了这样的规则——弹窗删除，确认按钮在右边，取消在左边。而安卓则正好相反。

假设用户使用iPhone手机的某个APP删除内容，一直都是弹窗跳出的确认在右边，突然到了某个位置，删除的按钮变成左边，用户下意识的会继续点击右边按钮。这时最后的结果可能会因为没有保持一致性从而使用户心理预期不符，用户就会不爽。说到这大家有没有想起一些杀毒软件，当你要卸载的时候，一路提示点击下一步，按钮位置都是在右边，到了最后一步，弹窗再次提示你是否确认卸载，按理来说卸载按钮位置应该也是和之前操作过程一样在最右边，却突然变成了左边位置且被弱化，右边的按钮则赫然引人醒目的颜色和小小的字写着：取消。

由于之前的操作一直都是点击最右边的“下一步”按钮，大部分用户到了这里不注意看就很容易点了“取消”按钮。

四、总结

• 为什么要保持一致性?

1.降低用户对界面的学习成本。

这也是上瘾模型中的其中一环，上瘾必须满足：触发、行动、多变的酬赏、投入这四个阶段，缺一不可，学习成本太高，用户丧失学习欲望，就无法行动，这个产品也就不会让用户上瘾。无论是产品使用还是生活中的场景，保持一致性可以降低用户的学习成本，提升用户体验。

2.加强对产品的辨识度。

保持一致性的交互，更利于用户形成记忆点，提升品牌形象

3.提高设计师工作效率。

组件复用，提高多人协作效率，也方便开发同学

• 一致性的运用

1.界面排版

2.交互控件

3.多终端体验4.文案

• 何时不遵循一致性?

个别页面除非有充分的理由，否则还是建议保持一致性。

-   E N D   -