交互设计有哪些原则

之前在知乎回答了这个问题「交互设计原则有哪些？」，但因为时间缘故每一条都没细说，所以就想在简书里把每一条原则好好的解释一下，这些原则主要来自于唐纳德·诺曼的《设计心理学》以及xidea的咖啡馆，大家有兴趣的话也可以看看这本书以及xidea的知乎专栏。

基于业务诉求和用户诉求

业务诉求和用户诉求是分别针对企业和用户提出的，业务诉求就是为精确定位的目标用户提供什么核心价值，价值如何变现和实施，而用户诉求就是基于用户的需求，了解用户当前诉求和潜在诉求，并设计场景化的使用流程来满足需求。简单来说，其实就是要明确“我们为什么要做这个？”以及“用户为什么要用这个？”这两个问题，虽然交互设计师不需要对产品的商业价值与变现方式负责，但明确业务诉求和用户诉求相当于有了设计指导，这可以让设计师在设计的过程中不易迷失方向，还可以避免在设计时陷入一些小细节的纠结，基于业务诉求和用户诉求其实就是为了不忘初心，是为了明确设计的初衷。所以，在做交互设计之前，一定要问自己这两个问题：“这能给我们带来什么价值？”，“这能为用户提供什么价值？”，具体这三方是怎样相互影响的则可以参考下方的五导家方法论。

五导家方法论

基于用户心理模型

基于用户的心理模型听起来比较抽象，其实就是我们常说的情感化设计，这里拿微信举例就好理解了，微信的很多设计都基于用户的心理模型，比如退出群聊不会有提示，这个设计就基于了用户的心理，考虑了用户想退出群聊但又怕影响关系的焦虑心理，而微信这种设计则有效的缓解了在这种情况下用户的社交压力。微信在处理好友关系的时候也充分考虑了用户的心理，如果单向删了对方好友，可以绕过好友申请，不制造消息提醒，直接加回，也就是删好友的时候它怕你后悔，给了一条退路。而被删的时候，它怕你伤心，不告诉你，让你自己去发现。拉黑别人的时候微信怕你后悔，让你可以在设置-隐私-黑名单中找到对方，再次添加好友还能保留原有的聊天记录，没有任何影响，而被拉黑的时候微信怕你伤心，也不告诉你，只有在发信息的时候才会显示拒收字样，这些细节的设计都考虑到各个场景下用户的心理，怕你后悔则给了你退路，怕你伤心则不主动告诉你，概括的来说就是基于用户心理模型来设计。

形式追随功能

要解释形式追随功能，要先从设计的本质说起，大多数人并不了解设计的作用，总觉得设计就是美工，就是为了美观好看，然而事实上，设计是为了解决问题，设计是有目的性的，而形式追随功能的意义就在于，设计的目的性大于美观性。

比如OS X最小化的动效就是形式追随功能的设计，可以看出这个动效有一个收缩的效果，就好比整个程序窗口收进了一个小盒子里，用户一下就明白了这是最小化的含义，这个动效的目的是为了降低用户的学习成本，将动效以隐喻的形式告知用户发生了什么变化，让用户更好的理解系统的状态。我想有人就要质疑我了，他们说：“这个最小化谁不知道啊？降低什么学习成本啊？谁还需要学这个啊？”然而，你之所以觉得最小化很简单，是因为你已经熟悉了Windows系统，你可以试想一下，假如你是第一次使用Windows，点击最小化的按钮突然窗口就不见了，这时你心里一定是恐慌的，因为你不知道系统发生了什么变化，这点在年长的用户身上最能体现，他们总是害怕点错，陷入恐慌，不知所措，原因就是系统没有很好的让他们明白发生了什么变化，而设计的作用就体现出来了，OS X这个动效设计是为了降低学习成本，很好的告知用户发生了什么，这里的设计不纯粹为了美观，而是带有目的性的，这也是形式追随功能的体现。

OS X最小化动效

一致性

一致性的本质是运用存储于外部世界和头脑中的知识，从而降低用户的学习成本，首先要说的是，知识大部分是存储于外部世界的，这点初看可能不太能接受，但其实是很好理解的，想一想，为什么人类会使用十进制呢？张开手指你发现了什么？对的，这和我们手指的个数是息息相关的，正因为人类是十根手指，所以我们的祖先才会用手指计数，进而发展为十进制，也就是说，人类的知识是来源于外部世界的，而人类通过理解和内化将知识以记忆的方式存储于自己的大脑中，而一致性正好就是利用了我们存储于外部世界和头脑中的知识，比如下拉刷新、滑动解锁，这些操作符合用户的操作习惯，极大地降低了用户的学习成本，再比如一些移动App的icon，聊天的icon是一个对话框，联系人的icon是一个人像轮廓的描边，通话的icon是一个话筒，这些都是运用了我们存储于头脑中的知识，以提示的形式来告诉我们它是什么，唤起我们头脑已有的记忆从而联想到icon代表的含义，从而让我们更易理解系统，再比如我比较喜欢的一款iOS应用Quest，就全部采用了下拉添加任务，下拉添加分类的交互设计，保持了整体的简洁易用，所以我认为一致性设计的本质就是运用存储于外部世界和头脑中的知识，再往简单里说，就是要一定程度的遵守设计规范，保持产品设计各个元素间的一致。所以这里提供一篇iOS设计规范，大家可以收藏起来看看。

Less is more

Less is more的设计原则已经被提得太多了，不过这里我有一些补充，我觉得Less is more中的Less代表的不是页面少，也不是元素少，更不是流程少，它代表的应该是认知负担少，我见过有一个原则说，一个网站中，用户找到他想要的信息应该只用点击3次，而我觉得这里的关键不在于点击次数，而在于用户每次点击所花的代价，说到底，就是用户的认知负担的多少。举个例子，足记的图片发布分为3步，第一步裁剪，第二部加字幕、滤镜、调色，最后一步再发布，但如果想页面更Less的话，完全可以变成一个页面，就在一个页面裁剪、加字幕、点击发布，把页面弄成像Photoshop那样，可是假如真这样做的话页面是变Less了，但是用户的认知负担就增加了，因为用户得处理页面海量的信息，“我先要做什么？”、“再干什么？”、“这么多按钮里哪一个是裁剪？哪一个是加字幕？”，用户就会表现得像许多人第一次打开Photoshop的时候那样，对左侧众多不认识的工具栏感到陌生和恐慌。而足记把发布流程变为3步，虽然页面变多了，但是用户的认知负担大幅降低，用户完全知道这个页面是裁剪，下一个页面是加字幕，最后发布，不会对整个流程顺序感到困惑。所以这也是我想说的Less is more的真实含义，Less既不是页面少，也不是元素少，更不是流程少，它代表的应该是认知负担少。

足记图片发布流程

可视性

可视性也就是指正确的操作部位必须显而易见，而且还要向用户传达出正确的信息，这一点我觉得其实是在保证设计模式、系统表象、用户模式的重合，这个重合度越高，那么就越可视，越好用。设计模式是对于设计人员来说的，设计人员设计产品的时候，头脑中是有一个关于想象中产品的模式的，我们叫它设计模式。而产品实际做出来后的系统表象和设计人员想象中的设计模式是存在一定差异的，而对于用户来说，这个差异就更大了，因为用户会按照自己的方式理解系统，我们叫它用户模式。而系统如果不可视的话，用户理解的用户模式则会和系统表象存在很大差异，和设计模式就差得更远了。而如果用户并不能按照实际的系统表象去理解产品，而仅凭自身经验去理解为自己的用户模式，这样的话则很容易导致误操作，所以用研方法里有一个卡片分类法，我觉得就是在探究用户模式和系统表象的重合度，通过让用户分类卡片来理解用户头脑中的用户模式是什么样的，从而分析这个偏差值进行改进与迭代。

三种模式

建立正确且自然的匹配关系

建立正确且自然的匹配关系其实就是指两种匹配，用户目的和行为的匹配，以及用户行为和效果的匹配，这里举个简单的例子，我想大家都遇到过电视遥控器按错键的情况，那到底为什么会按错呢？很大程度就是因为遥控器这个产品没有建立正确且自然的匹配关系，也就是用户目的和行为不匹配，导致了行为和结果的不匹配，比如下图这款遥控器，没错，就是我家的遥控器，我家这款遥控器下方的圆圈式按钮很容易让人误解为音量和频道的调节，而真正调节音量和频道的是上方那个小按钮，所以有客人来我家用这款遥控器的时候经常按成下方的错误按钮，更可怕的是下方的圆圈式按钮是节目信息的快进快退，所以客人点了之后画面变成了菜单式跳跃式的画面，客人一看就吓坏了，以为不小心酿成大祸，又手忙脚乱的在遥控器上找返回和退出，所以这就是一个很典型的用户目的和行为的不匹配，导致行为和结果不匹配的例子。

我家遥控器

增加反馈与限制

增加反馈与限制是为了及时告知系统状态，限制用户则是从根本上杜绝某些错误的发生，简单的说就是，避免用户犯错和不给用户犯错的机会。比如京东的注册页面，用户名已被使用的话会及时弹出提示，密码过于简单或密码重输不一致都会及时提示，这就是在增加反馈来避免用户犯错，并且反馈非常及时，不是在点击注册之后才告知哪有问题，也不是在用户刚开始输入时就显示有问题，而是在用户填完某个输入框开始填下一个输入框时，系统才会检查上一个输入框的合法性，也就是说，增加反馈是必要的，但反馈本身不应该成为体验的阻碍。再谈限制，许多游戏里都有边界限制，比如不能进入水中，有些房屋可以进有些不能进，这些限制都是为了告知系统的局限性，且不给用户犯错的机会，假如系统不增加这些限制，那玩家进入水中则可能触发某些bug，所以增加限制就直接杜绝了错误发生的可能，因此我认为从某种程度上来说，限制比反馈更能防止用户误操作。

京东注册页面

不打断任务流

考虑流程的各种情况，不让用户在任务流中返回退出。这一点其实就是对于场景和流程的全面考虑，这里拿QQ和微信来举例对比一下就很清楚了，首先看看用QQ发说说的权限设置。

QQ发说说的权限设置

用QQ发说说的时候可以选择“谁能看见"，然后就可以勾选相应的分组，或进入某个分组查看分组里具体有哪些人。可是，如果用户此时只想对某个分组里一部分人可见，或者发现有些好友分组错了，这个时候用户就得退出说说的界面，把分组重新调整一番再来发说说，这就打断了用户的任务流，体验很不好。所以，我们看看微信是怎么做的吧。

微信发朋友圈的权限设置

微信发朋友圈也可以设置权限，选择“谁可以看”就进入了选择部分，这个时候要是用户发现某个标签漏加了一个人，或者想临时把谁从某个标签里去掉，就可以直接点击“编辑标签”，对相应的标签直接进行操作，这样用户就不用退出发朋友圈的任务流，编辑好了直接返回发送即可，整个流程一气呵成十分顺畅，这点上体验比QQ好得多，所以，在场景化设计的时候一定要考虑当前场景下发生的各种情况，做到不打断用户的任务流。

自动化

自动化是指在不夺走控制权的情况下自动化系统操作，甚至是具有预见性的操作。产品设计有一个观念，就是把复杂的事情交给系统，自动化就可以很好的体现出这一点。现在很多App都有了夜间模式，但是我观察发现，基本上所有具备夜间模式的App在设置成夜间模式后，都必须要用户手动调节回来，我觉得这就并不符合自动化，既然用户在白天一定会调节回来，为什么APP不设置一个时间来监测白天还是夜晚，或者通过手机本身的光传感器来判断，自动的调节回普通模式呢？再比如，如果大家喜欢下五子棋的话，可能会有这样一种情况，就是一方达到4子后自动帮对手堵上然后接着下，为什么他会直接帮对方下而对方也没有怨言呢？这是因为对手看到他4子了肯定会堵上，否则就输了，那么我都知道他要下哪里我何不直接帮他堵上呢，还快捷一些，特别是对于上学时用纸当棋盘笔当棋子的学生来说，这样直接帮对方下了更能节省时间，好能在课间多下一局，我觉得这和预见性的自动化是一个道理，再来看看QQ里这一个设计。

QQ图片浏览设置

单看这个可能大家还不明白，其实很简单，也就是在点击了“空间动态图片浏览设置”之后进入设置页面，用户点击大图浏览后，QQ就自动返回上级页面了。一般情况都是用户点击左上角的“返回”再返回上级页面，而QQ这个细节设计就是自动化的体现，既然用户已经选择了图片浏览的质量，那么用户肯定是准备返回上级了，那么，既然知道用户现在要返回，为何系统不自动返回上级页面呢？这个小细节的设计就是提前预见用户的操作，然后对其进行预见性的自动化操作，这一点在我之前的wecoo交互设计作品集中也有体现，wecoo原型的意见反馈部分，我设计的时候就做了预见性的自动化操作，和QQ中的图片浏览设置的处理是异曲同工的。把复杂和预见的事情自动化确实能提升体验，但要注意的就是，再自动化都不能夺走用户的控制权，一定要让用户去掌控，而不是系统来掌控，即使是无人驾驶技术也只是一定程度的自动化，并没有完全夺走用户的控制权，因为用户还得选择目的地，路线，停靠点等，所以自动化要善用，要在不夺走用户控制权的情况下自动化复杂和有预见性的系统操作。