这篇内容是结合我喜欢的尤文文大神的分享和尼尔森的十大交互原则，总结出的十大原则，对网站和手机应用进行交互干预设计，使得用户在人机交互过程中获得更佳的操作体验，提升效率与产品好感度，从而扩散品牌影响力。

依据一：聚焦

目的：减少产品或页面要呈现的重点内容，聚焦价值需求点，可以大大缩短我们到达目的地的路径。

出现：APP产品/网站、首页/详情页、宣传图

产品的堆叠、内容的堆砌，信息量必然超载，让用户感到迷茫、失落、效率低。用户对产品的需求相对集中，一款产品足够的克制并足够的聚焦，专注1-3个亮点，并将心力投入到这些亮点上，这款产品也足以成为爆品。给用户的选择越多，迷失的可能性更大。

依据二：认知

目的：符合用户认知的自然交互，用户看一眼就知道是什么东西，如何操作。避免复杂界面迫使用户去解决那些无足轻重的问题，中断操作目的。

出现：按钮、图标、流程。

六个认知简化的方法：

• 简化操作动作

每执行一个动作都会破坏用户思路，因为他们的工作记忆都集中在特定目标上，多余的动作会迫使他们投入更多的精力。

例如：百度首页的光标一开始就在搜索栏

• 减少用户选择

当用户拥有的选择越多，需要做出选择的时间也会越长，避免一次性展示出多种选项，可以展示一部分，其他隐藏在菜单中。

例如：百度首页的『更多』 菜单

• 界面主题明确

认知过载最大的敌人就是混淆不清的用户界面，用户不知道该怎么来完成他们的动作，也没有脑力去破译一个图标。我们宁愿放弃标新立异，使用用户已经熟悉的形式来避免主题不明确。

• 减少界面元素

当界面上都是动画、图标、广告、字体、刺眼的亮色时，用户很难集中注意力。避免不需要的元素，减少加载时间和简化交互体验。

例如：网易云音乐app的极简UI设计。

• 减少页面内容

过多的内容会让用户的工作记忆分散到不同的岔道，可以将内容组块，讲需要展示的大量内容用可管理的方式组合起来。

例如：大量的表单信息分步骤填写。产品依类别组专题。

• 页面/功能位置明显

当用户进来产品后，用尽办法也不能找到他们想要的页面和功能时，就会直接放弃，也因此流失了一个用户。我们可以站在用户的角度整理好信息架构，进行内容归类，并通过视觉效果让他们与众不同。

依据三：自然

目的：让用户放弃思考，不需要思考这个那个是干嘛的，一切都是简单而自然的发生，跟真实生活结合，无限降低用户的学习成本。

出现：首页/详情页界面元素、操作流程

对于一款面向用户的产品，可以有差异化提效和增值思考，但大方向要融合。

鼓励每个界面尽可能有且仅有一个突出的按钮让用户不用思考就会去点击进入下一个环节，不制造多余的干扰项，让用户更快更流畅的完成整个流程动作。

例如：信息安全网站拦截异常事件的信息查看和配置是否麻烦，异常事件的处理是否完整/友好的404界面会帮助用户返回并尽快搜索到想要的东西。

依据四：防错机制

目的：预防用户出错（犯错+失误）,以及出错后支持纠正错误，减少灾难性后果的发生。

出现：用于编辑、配置等需要交互操作的页面。

十大防错机制：

• 自动原理

自动校验，自动填充，省去看、记、输、检4个步骤。

如：苹果手机短信验证码自动填充到输入框 

• 保险原理

保险装置，双重验证。

如：微信PC端登录需手机端验证

• 相符原理

通过形状、数量、声音、发音、符号检验是否符合的行为动作防止错误发生。

如：手机号码输入的位数需等于11位数

• 顺序原理
  

对于填写内容较多的表单采用分步式设计。

如：简历填写，第一步基本信息，第二步工作经验…

• 缓和原理

通过各种方法减缓错误发生后的程度。

如：保险原理、自动原理、警告原理……

• 断根原理

找出会犯错的根本原因，通过预防手段阻止错误发生。

如：自动限制日期段的选择范围

• 复制原理

同一项任务需要重复操作。

如：新增试卷，可以复制原有试卷进行修改。

• 隔离原理

保护原理，通过规划元素的形状、颜色、大小、粗细、间距等营造良好的页面层次。

如：网页不同套餐之间的展示

• 层别原理

防止不同的工作做错而设法加以区分。

如：导航的一级/二级/三级区分、密码设置复杂/一般/简单的颜色标识

• 警告原理

对容易犯错且没合适避免措施的行为提供二次确认。

如：删除/提交/确认弹框、word拼音检查下划线报错、邮件提醒

依据五：多通道交互

目的：提供不同的通道，用户可以根据自己的内在感觉和认知技巧，并行、非精确方式与计算机系统进行交互，实现目的。

出现：常用于浏览模式、配置模式。

简易模式：展示常用功能，非常用不显示

高级模式：看到的内容全面

小白用户：简单的操作指引，学习使用产品

高阶用户：不受约束的快速使用产品

依据六：一致性

目的：有规律的统一产品视觉、操作行为、产品感知，降低用户的学习成本，有利于提升品牌识别度和可信度。

出现：视觉（风格/颜色/属性）、行为（操作/各平台）、感知（位置/文案）

《写给大家看的设计书》里四个设计原则也适用在这里：对比、亲密、重复、对齐。

这一原则跟“自然”原则可以说是相辅相成的。对用户来说，TA不care你的产品是否有一致性，TA的需求是在操作过程中不要出现什么岔子，顺心顺利的完成目标是重点。而我们用一致性来规范用户体验是一种保险的方式来保证用户能顺利的达到目的。

• 视觉一致性

风格：扁平、拟物、2.5D

颜色：主色调、辅助色、点缀色、字体色、警告色等。

属性：字体、图标、图片

• 行为一致性

操作：删除、滑动、点击、下滑刷新、动作、动画

各平台：安卓和ios的 不同操作习惯

• 感知一致性

位置：相同按钮位置相似，比如确定和取消按钮的左右位置

文案：提示语、操作提示、功能按钮文本、编辑提示

依据七：反馈

目的：帮助用户随时感知系统的状态，满足用户的控制感，消减不确定性给用户带来的负面情绪。

出现：进度条、加载图标、弹窗、提示语

• 弹框

分为模态弹窗(Alert)和非模态弹窗(Toast、Snackbar)，前者在用户执行有风险且不可逆的操作下出现；后者用于提示用户当前状态的变更，对用户操作不会有影响。

• 状态/结果页面

页面与弹窗的区别在于前者的操作主体是操作流程，是流程的终点站；后者的反馈主体是操作行为，规模较小时使用。

• 功能性动画

用于展示过程，比如进度条、加载图标、鼠标经过动效，这些动画给用户的反馈是自然且及时的。

• 表单校验

主要用在表单的校验上，使用文字进行提示，当表单录入项目较多时，标签可以给予更具有指向性的提示，用户不用费力去寻找。

• 小红点

最新的提示方式，如新消息、新下载完成、新更新应用，用于缓解弹窗的压力。

• 声音

用于点击后的回应，如电话按键的声响，鼠标敲击的声响，下载完成“叮”的声响

依据八：数据墨水比例

目的：在有限的空间、有限的时间，为用户提供最有效的信息。

出现：看板图表

1.去除所有不必要的非数据元素（填充色、渐变、三维效果、网格、图表区和绘图区的边框线）；

2.淡化和统一剩余非数据（坐标轴、网格线、甜宠效果、表格边框线）；

3.避免数据系列过多，造成信息量过载，视觉焦点分散；

4.对最重要的数据元素加以强调。

依据九：情感和人文关怀

目的：情感化设计可以让产品有生命力，且拉近产品与用户之间的距离，增加用户的好感度。

出现：校验提示语、文本提示语、异常/成功提示插画

这是一个很高阶的产品设计要素，除了工业产品的设计需要考虑到特殊人群的人文关怀融入，线上产品也是一样的，这主要是大品牌、大公司面对C端的产品需要重点考虑，比如产品是否适合视觉障碍者、听觉障碍者、老年人、儿童等等。给用户提供公平、对等、有效的用户体验。

比如：腾讯QQ对盲人的设计，包括字体大小、皮肤、tab切换菜单、取消验证码等等。

依据十：商业和品牌价值

目的：产品能够提现商业和品牌的价值，需要平衡用户体验和商业价值。

出现：广告宣传、产品

商业产品是判断产品是否是有效产品的重要指标，能够带来商业价值的产品才是企业想要的。商业产品的规划和设计都是基于商业价值而制定的，也就是产品业务、用户体验设计、产品运营应该综合考虑，有时候是会存在利益对抗。我现在还没有接触到这么高水准的层级，对这一块没有发言权。根据尤文文大神指出的如何衡量，需要通过商业结果数据、用户体验指标等维度快速迭代、动态调整，找到理想的平衡点。

这十大产品用户体验的依据，优先保证的是前面的八条原则，当然，后面两条是升华，在产品设计过程中需要考虑在内的。对于自然和认知，这两个似乎有点相似，本质的区别在于前者是使用过程中的感受，后者是直观的感受。