Jakob Nielsen（弗兰克·安德森）的五大可视化结构设计准则。它被称作“分析方式”，因为它是广泛的经验法则，而不是某一的易用性辅导准则。因此，他们不能把它上升为一类标准，而是如果当作一类经验来学习，然后跟现实中的结构设计结合来采用。接下去，作者通过一些具体的示例来跟大家广度导出安德森五大可视化结构设计准则在结构设计中的用语～

一、Jakob Nielsen（弗兰克·安德森）概要：

Jakob Nielsen（雅各布·安德森）是毕业于斯德哥尔摩的瑞典技术大学的人机可视化教授 ， 他拥有79项英国专利权,专利权主要涉及让网络更容易采用的方式。安德森在2000年6月,入围了北欧交互媒体全明星,2006年4月,并被列入英国计算机系统专业委员会人机可视化大学，被突显人机可视化课堂教学的终生荣誉奖 。他还被华盛顿邮报称作“Web 易用性巨匠”，被 Internet Magazine 称作 “功能强大之王”。

二、安德森五大可视化结构设计准则广度导出：

准则一：状况由此可见准则（Visibility of system status ）

系统如果让采用者关键时刻清楚现阶段出现了什么事情，也是快速的让采用者介绍自己处于哪种状况、对过去出现、现阶段目标、以及对未来图伦区有所介绍，一般的方式是在最合适的时间给采用者适当的意见反馈，防止采用者采用再次出现严重错误。

事例一：

比如说本周一头条新闻的沙莱县创下机能：头条新闻网页的创下机能采用的是沙莱县创下的可视化方式，当采用者沙莱县网页时，网页状况栏跟内容区尾端会再次出现“林慕德”的提示信息，当我缩回网页尾端会再次出现“所推荐中”的静态提示信息，读取完后尾端再次出现一条“本周一头条新闻所推荐发动机有8条预览”的文本提示信息；这一系列的提示信息是他们所言的静态由此可见准则，如下表所示图：

事例二：

比如说安心记上工中高度关注和中止圈子里机能：当采用者点选高度关注按键后，网页尾端会再次出现一个“高度关注成功”的提示信息，逗留2S后消失；类似这种，操作后的提示信息也是状况由此可见准则的二中，如下表所示图：

准则二：环境贴切准则（Match between system and the real world）

软件系统如果采用采用者熟悉的语言、文本、语句，或者其他采用者熟悉的概念，而非系统语言。软件中的信息如果尽量贴近真实世界，让信息更自然，逻辑上也更容易被采用者理解。

事例一：

比如说计算机系统的软件界面结构设计：现在他们手机中的计算器软件结构设计界面，基本上跟他们现实中采用的计算器的样式差不多，下图左一是他们现实中是采用的计算器，左二、三依次为锤子手机和苹果X自带计算器软件的界面，真的是很相似，这样结构设计能让采用者很快上手，易于操作，因为现实生活中采用者已经很熟悉计算器的采用方式了，这是环境贴切准则：

事例二：

比如说新浪微博安卓的中文版和国际版：微博的中文版和国际版的logo和内部网页风格、语言、结构布局包括可视化方式也不一样；考虑到国外采用者的采用，软件的语言默认为英文，当然还支持各种语言版本，可以根据所需在设置中调整，另外国际版界面的布局采用的结构设计风格完全遵守谷歌的结构设计规范，这是环境贴切准则，具体看下图：

准则三：采用者可控准则（User control and freedom）

采用者常常会误触到某些机能，他们如果让采用者可以方便的退出。这种情况下，他们如果把“紧急出口”按键做的明显一点，而且不要在退出时弹出额外的对话框。很多采用者发送一条消息、总会有他忽然意识到自己不对的地方，这个叫做临界效应；所以最好支持撤销/重做机能。

事例一：

比如说微信聊天中的撤回机能：两个人在微信中聊天的时候，我发了一条消息或者表情，突然觉得不最合适，我可以在长按这条消息或者表情，在再次出现的选择框中选择撤回，然后重新编辑发送，来避免一时没想好而错发消息可能给对方或者自己造成困扰，这就是采用者可控准则，具体看下图：

事例二：

比如说谷歌相册删除照片后的撤销机能：在采用谷歌相册的时候，他们会对照片做一些操作，比如说照片的删除，当我在谷歌相册中删除一张照片的时候，它会在底部再次出现一条提示信息框，框内后边就会再次出现撤销的提示信息，这也是采用者可控准则的体现，具体看下图：

准则四：一致性准则（Consistency and standards）

对于采用者来说，同样的文本、状况、按键，都如果触发相同的事情，遵从通用的平台惯例；也是，同一用语、机能、操作保持一致。软件产品的一致性包括以下五个方面：

（1）结构一致性：保持一类类似的结构，新的结构变化会让采用者思考，规则的排列顺序能减轻采用者的思考负担；

事例：

例如微信每个模块的条目布局：微信中每个模块的条目都有统一的“图标+文本信息”的结构样式，能让采用者快速介绍朋友圈、扫一扫、摇一摇、看一看、搜一搜、附近的人、漂流瓶、购物、游戏及小程序等机能都是作什么的，这是结构一致性的体现，如下表所示图：

（2）色彩一致性：产品所采用的主要色调如果是统一的，而不是换一个网页颜色就不同；

事例：

例如网易云音乐的颜色：网易云音乐的图标颜色与界面的主色均为红色，也包括其中一些标签和强调的文本颜色都是红色，整个界面除了图片的有效信息外，都通过灰、白、红色来呈现，界面保持了很好的一致性，这是色彩一致性准则，如下表所示图：

（3）操作一致性：能让产品预览换代时仍然让采用者保持对原产品的认知，减小用户的学习成本；

事例：

比如说安卓版微信、支付宝和钉钉APP中左上角的返回操作：它三个安卓版的应用内返回上一级操作，都是通过顶部左侧的返回按键进行的，当然也可以通过安卓的物理返回键，这是操作一致性的体现，如下表所示图：

（4）意见反馈一致性：采用者在操作按键或者条目的时候，点选的意见反馈效果如果是一致的；

事例：

比如说安卓版手机QQ信息列表的打开方式：它的信息都是列表式结构，不管你点选那一行条目，下一级界面都是由右往左滑出，点选顶部左上角的返回按键会从左往右滑回，体验相当一致；这是意见反馈一致性的体现，如下表所示动图：

（5）文本一致性：产品中呈现给采用者阅读的文本大小、样式、颜色、布局等都如果是一致的；

事例：

例如微信几个关键界面的字体：下图我用红色框框起来的条目部分的文本，三个主界面不尽相同，但是，字体大小、颜色、布局的样式都一样，这样让整个APP视觉上看起来很舒服，这是字体一致性，因此，他们在做视觉结构设计的时候尽量采用同意风格的文本。

准则五：防错准则（Error prevention）

比一个优秀严重错误提醒弹窗更好的结构设计方式，是在这个严重错误出现之前就避免它。可以帮助采用者排除一些容易出错的情况，或在采用者提交之前给他一个确认的选项。在此，特别要注意在采用者操作具有毁灭性效果的机能时要有提示信息，防止采用者犯不可挽回的严重错误。

事例一：

比如说知乎安卓版本的登录操作：当采用者在知乎中登录时，在没有填写完手机号码和密码前，底部的登录按键是置灰不可点选的，只有两项都填写完整底部的登录按键才会变为可点选状况，也就会蓝色的，这是为了防止采用者犯更多严重错误，也是防错准则的一类体现，如下表所示图：

事例二：

比如说安卓版微信发朋圈静态时，点选返回按键再次出现的提示信息弹窗：弹出框方式会增加不可逆操作的难度，当采用者发一条静态一半的时候，因为误操作或者其它退出现阶段状况的时候，采用弹窗是是个不错的选择，因为采用者这个操作会让之前辛苦编辑的内容删除找不回，想要再发只能从头开始，对采用者造成损失比较大；这是防错准则的另外一类体现，如下表所示图：

准则六：易取准则（Recognition rather than recall）

通过把组件、按键及选项由此可见化，来降低采用者的记忆负荷。采用者不需要记住各个对话框中的信息。软件的采用指南如果是由此可见的，且在最合适的时候可以再次查看。

事例一：

比如说谷歌相册中的删除照片操作：用一个类似垃圾桶的“图标”标识删除机能，对于采用者来讲是有一定的认知负荷的，且点选“删除”后采用者对于造成的后果及影响也不清楚，因此，删除后再次出现弹窗提示信息很有必要，此弹窗清除的写明了删除后的影响、后续的帮助说明以及操作的选项，弹出框的再次出现很好的减少了采用者前后的记忆，这是易取准则的体现，如下表所示图：

事例二：

比如说安卓版爱奇艺预览后的新机能引导：预览完APP后，当采用者触发到这些机能时，会再次出现下图类型的遮罩类的提示信息，这些提示信息告诉采用者机能所在的地方以及机能的作用；这种做法在很多APP中都会再次出现，这也是易取准则的一类体现，看下图：

准则七：灵活高效准则（Flexibility and efficiency of use）

汽车油门—新手采用者常常看不见，而且对于高手来说可以通过它快速与汽车交互。这样的系统可以同时满足有经验和无经验的采用者。允许采用者定制常用机能。

事例一：

比如说安卓版本支付宝中的编辑应用机能：支付宝首页的应用是可以根据自身喜好自定义的，包括定义常用应用、排序、删除、新增等等；这样采用者可以根据自己的个人兴趣定制自己适合的应用分布方式，这就叫做采用者定制常用机能，也是灵活高效准则的一类体现，如下表所示图：

事例二：

比如说安卓版QQ聊天常用表情模块：安卓版本的QQ聊天界面表情弹窗中会有一个“常用表情”的模块，它把个人平时采用频率或者次数最多的表情进行归类，当采用者采用的时候能很快的找到自己喜欢或者常用的表情，提高了聊天效率，体验很好，这也是灵活高效准则的体现，如下表所示图：

准则八：优美且简约准则（Aesthetic and minimalist design）

对话中的内容如果去除不相关的信息或几乎不需要的信息。任何不相关的信息都会让原本重要的信息更难被采用者察觉。

事例一：

苹果手机中自带的软件（IOS11结构设计规范）：在新版本的苹果手机中自带的软件中标题都属于字体放大，界面简洁的结构设计风格；还有苹果自带的音乐软件中，段落中的标题和正文区别是很明显的，标题明显很大，而正文部分相对较小，这是优美简约准则的体现，如下表所示图：

事例二：

例如安卓版网易云音乐及QQ音乐播放网页：网易云音乐和QQ音乐APP音乐播放界面，从视觉及机能布局上面做的相当不错，美观简约、机能主次分明、采用者体验不错；也是优美且简约准则的一类体现，如下表所示图：

准则九：容错准则（Help users recognize, diagnose, and recover from errors）

严重错误信息如果采用简洁的文本（不要用代码），指出严重错误是什么，并给出解决建议。也是在采用者出错时如何为出错的采用者提供及时正确的帮助呢？即要帮助采用者识别出严重错误，分析出严重错误的原因再帮助采用者回到正确的道路上。如果真的不能帮助采用者从严重错误中恢复，也要尽量为采用者提供帮助让采用者损失降到最低。

事例一：

比如说网易邮箱PC端的注册界面：采用者在网易163电脑端注册邮箱时，在输入出错时不但会再次出现严重错误的提示信息，还会给出相应的建议，帮助采用者进行正确的抉择，这样就避免采用者再次出现更大的失误并且提高了注册的效率，这是一类相当好的采用者体验，也是容错准则的一类体现，如下表所示图：

事例二：

例如Twitter注册网页的严重错误提示信息：采用者在注册Twitter账号时，第一步要输入名字和手机号码，当采用者输入正确的时候，输入框后边会有绿色的对勾圆圈，提示信息采用者输入正确，可以进入下一步操作了，而当采用者输入严重错误的时候，输入框会变为红色并且在下方再次出现红色字的严重错误提示信息，这样让采用者很清楚的知道采用者输入严重错误以及严重错误的原因，这样采用者就知道怎么修改了，这也是容错准则的一类体现，如下表所示图：

准则十：人性化帮助准则（Help and documentation）

即使系统不适用帮助文档是最好的，但他们也如果提供一份帮助文档。任何帮助信息都如果可以方便地搜索到，以采用者的任务为核心，列出相应的步骤，但文本不要太多。

事例一：

例如淘宝APP和知乎APP登录网页的帮助入口：在比较重要的机能入口处有必要提供相应的帮助入口，来解决采用者在操作机能过程中遇到的问题或者意见反馈问题的入口，不要让采用者在再次出现问题时手足无措，不知道怎么办，具体看下图：

事例二：

比如说mac上一些常用的大型软件：原型制作工具Axure RP 8软件、图像编辑软件Photshop CC以及mac上的Safari浏览器，在顶部状况栏上都有有一个“帮助”的入口，也体现了帮助文档的必要性，所以，不管是什么样的产品都要给采用者提供一个帮助的入口，用来解决采用者操作过程中遇到的问题，如下表所示图：

三、总结

以上是我对Jakob Nielsen（弗兰克·安德森）的五大可视化结构设计准则的理解和示例解读，从中学习到了很多的结构设计经验和技巧，希望对大家有所帮助。

最后，谢谢大家的阅读，喜欢就点个赞哦～～笔芯～～

参考文献：

作者：熊猫小生，可视化结构设计师，4年网络产品结构设计经验，曾主导多个网络产品的结构设计工作。

本文由 @熊猫小生 原创发布于人人都是产品经理。未经许可，禁止转载