1、状态可见原则
（Visibility of system status ）
系统对于任何操作应当给予即时反馈，让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解，一般的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。
用户每次操作，系统都给他即时的反馈，（“即时”是指，页面响应时间小于用户能忍受的等待时间）提示他操作成功或是失败，如果需要继续等待，最好能够让用户知道还需等待多久。
【不好的体验】用户在操作后系统毫无反应，让用户去猜：对了？错了？有bug？
【自查清单】
导航是否明显？导航可以让用户知道自己当前在哪个位置，否则他们就会在产品里迷路。
标题栏是否明确？文章的标题是一篇文章的招牌，而标题栏就是一个页面的招牌，一个页面如果连标题栏都没有，或者标题栏和内容不符，那用户体验也是极差的。
数据加载是否有进度提醒
各种操作之后是否有反馈
提交某信息后是否有反馈（浮层或弹窗或颜色图标改变）
各种异常情况是否有反馈（用户出错、软件出错、超时、断网等）
各种空页面设计（如断网时、求职APP用户没有填写简历时的简历页、购物APP用户没有填写地址时的地址页、卡片中某个地方没有用户信息时怎么显示）
不同状态是否有不同显示来区分（已读信息和未读信息是否有区别，或文章、资讯、通知等；已登录和未登录时；）
【正例】
卡片中的通勤耗时项要根据用户的住址来计算时间，当用户没有给软件提供位置时无法计算，此处需要给予用户提醒，帮助用户去设置住址以便于显示时间。为了提高用户体验，要特别注意卡片中某个地方没有用户信息时怎么显示。
【正例】
这是微软Bing搜索的首页，我把它设置成了浏览器主页。正常情况下它每天会更新一张图片，一个故事，（如左图）但是当手机网络不好时，页面就只是纯色背景，并在顶部告知用户当前网络不好，处于极速版，背景图就不加载了，你直接搜索吧（如右图）。
有了这个反馈，纯色背景时我就不会疑惑是不是没有加载完毕，是不是网站出问题了。
【正例】
去年苹果发布的IOS11系统，一个大改变就是导航栏的标题变得又大又粗。为什么要这样呢？现在手机屏幕越来越大，当你切换底部tab时，顶部有一个很明显的大标题出现，告诉你当前所处的位置，就相当于店铺的招牌。之后你在当前界面滑动或点击进入下一层级时，标题会自动缩小，不会干扰你浏览主要内容。
大标题的好处就是更快速帮助用户明确自己当前的状态，而UI设计的首要目标也是要快速准确的传达信息。 
【正例】
很多APP都会有下拉刷新功能，阅读界最近的网红软件：网易蜗牛读书的首页也是一样，当用户下拉时顶部会出现一排小字提示用户正在刷新加载更多内容，刷新完毕，会有一个显眼的绿色文字区域明确告知用户新增了几条内容。
【反例】
有部分APP的空白页面根本没有设计，用户进去后，一脸茫然，是不是还没有加载完才空白的，不对呀，我明明网速很快的，一定是这个APP出现bug啦，这个APP真差劲。。。
其实只要设计者在空白页面多花一点心思，提示用户为什么空白，用户就不会有上述疑惑啦。
【反例】
在网站输入密码时，很多网站都没有切换键盘大小写的提示，假如我密码中既有大写又有小写（有些网站强迫用户这样设置密码，呜呜呜，好反感），我可能需要切换几次Caps Lock键，我会经常怀疑有没有生效，以及我是否输入正确，但是密码都是不显示的，我只能先登录让网站帮我判断，一旦错误，挫败感很强。有的网站在输入密码后会提供小眼睛按钮查看密码，有的网站会提供大小写切换提醒，这些都改善了体验。
如果可以在键盘上面增加反馈就再好不过了，这样所有网站都有反馈了，按了大写后会有小绿灯提示你。
二、环境贴切原则
（Match between system and the real world）
说得简单直白点就是几个字：说人话，符合场景
系统应该使用用户熟悉的语言、语句，图标、概念，或者其他用户熟悉的概念，而不是陌生的专业术语。用最简单直白的语言描述状况，就好比现实世界里，和他人说话的时候必然使用简单的白话文进行直白的沟通以保证交流顺畅。提供更易学习和使用的交互方式（手势、语音）。软件中的信息和动效应该遵循现实世界的惯例，贴近用户所在的环境（年龄、学历、文化、背景、使用场景），让信息更自然，逻辑上也更容易被用户理解。
《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践。此外，还应该使用易懂和约定俗成的表达。
【不好的体验】软件中的文字或图标或交互动效让用户产生疑惑和误解。
【自查清单】
所有的图标或者术语或者文字描述是否都在用户的理解范围内？他们是不是能够马上读懂，明白其正确的含义？（可以进行简单测试和反推：要测试者说出图标的含义）
有没有容易产生歧义的图标？
3.转场动画或交互动效是否符合逻辑（自然）和用户习惯，动效时间是否合适？
4.文案是否清晰易懂，是否会产生歧义？
5.用户会长时间浏览时是否有夜间模式？（阅读类APP和百度贴吧有）
【正例】
苹果手机经典的解锁方式：向右滑动解锁，这个交互手势就是根据现实世界中人们熟悉的开门方式设计而来，向右拉动门栓就可以打开门进入房间，类比到手机上，向右滑动就可以打开手机，这种方式让一个从来没有用过手机的人也能理解并轻易地解锁。
【正例】
现在的定位图标大家一眼就能知道它的含义：确定地理位置，是一个好的设计，符合环境贴切原则。那它为什么会这样设计呢？在古时候打仗，将军们会用模拟沙盘来预演战争形势，通过在沙盘上安插旗子表示军队位置，这个图标正是根据人们的习惯设计而来。
【正反例】
看用红色矩形框选部分，
爱厨房的界面设计非常好，导航栏的图标虽然没有文字描述，但是一眼就能知道它的作用，如框选的那个图标就是添加好友。下方的头像处我没有设置过头像，软件默认显示“有头像更礼貌”；下方我还没有上传过一个菜谱，软件默认显示“创建菜谱的人是厨房里的天使”，这两处文案的设计让我体会到了软件设计者的用心，提醒的方式非常亲切友好。
某视频编辑的APP（名称AndroidVid Pro），这是它的首页，没有任何文字描述，我框选了3个图标，请问大家能够一眼看出这3个图标分别代表什么功能吗？这样的设计让我很崩溃。不熟悉这个软件的人看这三个图标不都是代表视频吗？？？把差不多的图标放在了同一个界面。。。
三、用户可控原则
（User control and freedom）
操作后可回退、可撤销、可重做
用户常常会误触到某些功能，我们应该让用户可以方便的退出。让用户对当前的情况很好地了解和掌控，足够自由。软件应该给用户提供合适的选择项而不要替用户选择，应该让用户有权自主中断后续进程，可以方便的回退到上一个界面，操作之后应该符合用户预期，让用户觉得软件是在自己的控制下运行。为了让用户可以方便的退出，这种情况下，我们应该把“紧急出口”按钮做的明显一点，而且不要在退出时弹出额外的对话框。很多用户发送一条消息、总会有他忽然意识到自己不对的地方，这个叫做临界效应；所以最好支持撤销/重做功能，来避免用户的误用和误击。
【不好的体验】不能方便的回退；软件的反应不符合用户预期，让用户感觉软件失控
【自查清单】
1.大部分界面是否有返回按钮？图标是否明显？退出时最好不要弹出额外的对话框
2.功能性界面是否支持撤销或者重做？
【正例】
我们日常使用的浏览器或者Word都会提供撤销或重做按钮，因为用户的操作次数多且功能繁杂，提供这2个操作能让用户随时回退，降低用户的出错成本。
PC端浏览器在工具栏都会有两个箭头按钮，分别为“转到上一页” “转到下一页”
【正反例】
在浏览网页时，有时候不小心关闭了某个网页，关闭后马上又想再次打开，我经常遇到这样的情况，这时只能重新从别的地方再次找到那个网页，或者到历史记录中去寻找，非常麻烦，大部分国产浏览器（如遨游浏览器、360浏览器等）在工具栏有一个“恢复关闭的标签页按钮”，使用起来非常方便，按一下就可以不断恢复已关闭的标签页。但是谷歌浏览器却没有这个按钮，用起来总会有一丝不便，不知道你遇到这种情况没？后来我找到了相关插件解决了这个问题。火狐浏览器自带这个按钮。
四、一致性原则
（Consistency and standards）
同一个产品中使用同一套设计规范和逻辑
对于用户来说，同样的文字、状态、按钮，都应该触发相同的事情，遵从通用的平台惯例；也就是，同一用语、功能、操作保持一致。软件产品的一致性包括以下五个方面：
结构一致性：保持一种类似的结构，新的结构变化会让用户思考，规则的排列顺序能减轻用户的思考负担；
色彩一致性：产品所使用的主要色调应该是统一的，而不是换一个页面颜色就不同；
操作一致性：能让产品更新换代时仍然让用户保持对原产品的认知，减小用户的学习成本；
反馈一致性：用户在操作按钮或者条目的时候，点击的反馈效果应该是一致的；
文字一致性：产品中呈现给用户阅读的文字大小、样式、颜色、布局等都应该是一致的；
软件应该建立自己的交互设计和UI设计规范。同样的文字、状态、按钮，都应该触发相同的事情，遵从设计规范；也就是，同一用语、功能、操作保持一致。
【不好的体验】在功能、交互和视觉上不一致，增加了用户的学习成本
【自查清单】
1.是否有设计规范？是否遵循了设计规范？
2.同一个含义的功能是否是同一个称呼或者同一个图标？
3.返回和前进按钮的位置是否都保持不变？有没有出现有的页面有而有的页面没有的情况？
4.图标风格是否一致？line icon还是flat icon还是realism icon
5.相同模块的布局和交互动效是否一致
【正例】
下厨房APP在多个界面的左侧顶部放置了一个加号图标，表示发布功能，每个页面放置的位置和图标都相同，符合一致性原则，可以方便用户找到该按钮，在想要发布菜谱时可以迅速发布。
【反例】
在社交产品中，关注你的人会被称为『粉丝』，在另一个页面又变成了『关注者』；在一些提醒对话框中，确定按钮有的时候在左侧，有的时候又在右侧；在工具类操作中，红色有时候表示正确，有时候又表示警告和提醒，等等。这些细节之处没有统一，会给用户造成混乱感。
五、防错原则
（Error prevention）
用足够的提醒和设计来防止用户犯错和产生混淆
比提示用户出错信息弹窗更好的方式是，用合适的设计来避免错误的发生。在用户选择操作之前，通过用心的设计（重组、隐藏、置灰、特别安排），避免出现用户容易混淆或者错误的选择。特别要注意用户在操作具有不可恢复的毁灭性功能时（如删除功能）一定要有提示文字，给他一个确认的选项，防止用户犯不可挽回的错误。
【不好的体验】经常出现错误提示弹窗；在重要且不可撤回的操作之前没有提示确认
【自查清单】
在容易犯错的重要操作前是否有二次确认？（比如取消订单，删除记录，退出操作等）
在做出删除等不可恢复的操作之前，有没有文字提示？
对于新用户来说，是否有合适的引导来确保操作顺畅
暂时不可操作的按钮或文字图标是否置灰处理（如没有填写完账号密码前的登录按钮、发表说说页面没有输入文字前的“完成或提交”文字）
填写表单时有没有文字提示规则（格式和要求）
注册时填写用户名和密码是否可以即时检测不符，不要等到提交后才说不符
【正例】
lofter和知乎在发布页面，没有输入任何文字前，发布按钮或图标做了置灰处理，不可点击，点击没有任何反应，只有当软件检测到输入文字后，发布按钮和图标变成可点击状态，点击后才会发布。这样设计可以防止用户出错。但是我觉得lofter的置灰按钮在手机上看起来也是有颜色的，不熟悉时会认为它可以点击，应该把颜色变淡点，像知乎那样。
六、易取原则
（Recognition rather than recall）
提供必要的可视化信息提示，而不是让用户去回忆
通过把组件、按钮及选项可见化，来降低用户的记忆负荷。用户不需要记住各个对话框中的信息。内容、按钮、动作和选项都应该是可见的，尽可能减少用户的记忆负担，把需要记忆的内容直接显示在界面上。软件的使用指南应该是可见的，且在合适的时候可以再次查看。
【不好的体验】需要用户去回忆之前填写的内容或选择来进行确认，而不是可以直接看到内容
【自查清单】
已填写的内容，是否在最终确认时向用户再次展示以示确认？
已选择的商品和数量在最终下单前有没有和用户再次确认？
引导信息是否清晰可见，用户是否需要去寻找按钮位置等？
填写表单时，软件已保存的用户信息是否自动填写好，减少用户输入？（注册时填写个人资料出错，页面应该保存正确的信息而不是全部清空）
【正反例】
PC端QQ的登录页，会自动填写上次登录的账号，并且还可以选择历史登录账号，减少用户输入和记忆负担。但是PC端的网易云音乐登录页没有自动填写功能，我尝试先登录账号，然后退出登录，再回到登录页，需要我重新输入账号和密码。我想这并不是网易不知道这点，应该与网易云音乐和QQ的定位不同，QQ是社交聊天的，并且允许用户有多个QQ号，这就会让用户频繁登录，所以有了自动填写账户和账户历史记录功能。但是网易云音乐主要是听歌的，绝大部分用户只有一个账号，登录后也不会轻易退出登录，故自动填写账户功能没有必要。但为了举例，我还是截了网易云音乐的图来对比。
七、灵活高效原则
（Flexibility and efficiency of use）
高频操作使用最短的流程
软件可以同时满足有经验和无经验用户使用，中级用户的数量远高于初级和高级用户数量，所以软件应该为大多数中级用户设计，不断优化操作流程，减少不必要的操作和干扰；允许用户频繁操作，不能出现卡顿，优化代码，保持灵活高效。对于高频操作有快捷方式，允许用户定制常用功能。
汽车油门—新手用户常常看不见，而且对于高手来说可以通过它快速与汽车互动。这样的系统可以同时满足有经验和无经验的用户。
【不好的体验】软件卡顿，操作繁琐
【自查清单】
加载速度够不够快？页面响应时间够不够短？
用起来是不是能快速上手？
功能有没有过于复杂不好理解？
所有能点击的地方，指向性是否明确？有没有让用户迟疑的点击事件？
最重要的是，软件中级用户都明白如何使用吗？
有经验的用户是否会显示新手引导？是否给他们提供了跳过的按钮？
高频操作是否有快捷方式或按钮
需要填写信息或选项时，是否有默认机制
能让用户点击选择就尽量不要文字输入
搜索界面是否有常用关键词、热门关键词和历史记录
【正反例】
移动端的浏览器，QQ浏览器在底部提供了工具栏，有“转到上一页” “转到下一页”按钮，但是火狐浏览器隐藏了工具栏，需要点击顶部的三点，才能弹出工具栏，使用起来非常不方便，而这2个按钮在浏览网页的过程中使用频率挺高的。
【正例】
简书网站，在阅读文章时，写文章和收藏、分享等按钮都放在了右侧，方便用户用鼠标点击操作，如果放在左侧，操作没那么方便。当向下滚动网页时会出现一个回到顶部的按钮，方便用户快速回到网页顶部。
八、优美且简约原则
（Aesthetic and minimalist design）
界面易扫，重点突出
对话中的内容应该去除不相关的信息或几乎不需要的信息。任何不相关的信息都会让原本重要的信息更难被用户察觉。
用户浏览界面的动作不是读，不是看，而是扫。易扫，意味着突出重点，弱化和剔除无关信息。也就是说，要让界面足够简单清晰，以便于用户可以快速发现自己想要的信息；同时，还要保证阅读时的可读性、易读性。界面不应该包含无关紧要的信息。每增加一个重要信息，就意味着要减少或弱化一些其他信息，因为人的大脑能够同时处理信息的能力是有限的，我们要把用户的注意力放在重要信息上。
【不好的体验】界面信息过载；没有重点，排版混乱
【自查清单】
重要的功能、内容是否突出？
不重要的功能、内容是否隐藏或转移或弱化？
版面划分是否清楚、好看？
某处文字过多有没有做截断处理（如朋友圈，需要点击才能查看全文）
UI设计是否合理，色彩和视觉复杂度是否合适？
【正例】
移动端QQ浏览器在底部放置了工具栏，保留了几个频繁使用的按钮，更多的工具按钮被隐藏起来啦，需要点击才能出现，保证了界面的简洁美观。
【正例】
移动端QQ浏览器打开网页后，当你向下滑动浏览网页时，顶部的地址栏会自动隐藏，只有当你向上滑动时才会出现，符合用户使用场景。浏览网页时用户最关注的是网页内容，隐藏地址栏可以为内容留出多一点空间，减少干扰，让界面更简洁。
九、容错原则
（Help users recognize, diagnose, and recover from errors）
清楚的告诉用户出错的原因并提供高效的解决方案
给用户明确的错误信息应该使用简洁的文字（不要用404等代码），指出错误是什么，准确的告知用户出错原因，并提供高效的解决方案，帮助用户从错误中恢复，减少挫败感。也就是在用户出错时如何为出错的用户提供及时正确的帮助？即要帮助用户识别出错误、分析出错误的原因、然后再帮助用户回到正确的道路上。如果真的不能帮助用户从错误中恢复，也要尽量为用户提供帮助即详尽的说明文字和指导方向，让用户损失降到最低。
【不好的体验】出错的文字提示用户看不懂，出错后用户不知道原因，没有给出解决方案
【自查清单】
如果出现了错误，是否有提示出错原因？文字描述是否清晰易懂？而不是只有404
出错时，是否有人性化的提示告诉用户怎么办，并提供快捷的解决方案
会不会有异常操作导致应用崩溃的情况发生？怎么解决
【正反例】
我们在电脑插入U盘要安全退出时，会先点击“安全删除硬件并弹出媒体”，win系统经常出现一个弹窗，告诉我们现在退出不了。
看到这个提示，心中一万个草泥马，为什么我不能退出U盘呢？你倒是告诉我呀，算了，直接强行拔出来吧。
现在win10系统这个提示发生了一些变化，但是还是没有明确告知哪个程序或文件正在使用，问题仍然没有得到解决。
如果你电脑安装了腾讯电脑管家或者360安全卫士，当出现这种情况时，它的弹窗是这样的，明确告知哪个程序正在使用U盘里的文件，并提供了解决方案，点击“解决占用并退出”就行啦。
十、人性化帮助原则
（Help and documentation）
在用户需要帮助的时候即时给予提示
即使系统不适用帮助文档是最好的，但我们也应该提供一份帮助文档。任何帮助信息都应该可以方便地搜索到，以用户的任务为核心，列出相应的步骤，但文字不要太多。
正常操作或者用户已经熟悉软件中的操作和术语时，提示当然是没有必要的。但实际情况是，任何用户会在任何时候都产生疑问，需要得到帮助。除了在产品里放一个几乎不会有人点进去看的帮助文档之外，最好的方法就是在当下进行提示。帮助性提示最好的方式是：无需提示 > 一次性提示 > 常驻提示 > 帮助文档。在帮助文档中，任何帮助信息都应该可以被方便地搜索到，以用户的任务为核心，列出具体的步骤，文字不要太多。
【不好的体验】遇到疑惑时没有帮助或者找不到帮助
【自查清单】
简单的功能、文字是否不需要文档就能看懂？
陌生的功能、文字是否有新手引导和解释？（如软件新增功能）
困难的功能是否有帮助文档？
常见问题、复杂问题和特殊问题是否有帮助文档？
客服电话贴上了吗？
表单或搜索框中是否有文字提示规则
【正例】
石墨文档网页版编辑器会在页面右侧显示提示信息，告知用户可以对文档内容进行评论，方便讨论沟通。在下方的评论输入框中，有规则和常用操作的说明，让用户一目了然，使用顺畅。
【正例】
网页版易观千帆指数在查看相关指标数据的页面，当把鼠标放在指标名称上时，会自动给出一个浮层，里面有关于该指标的解释，这样当用户不明白该指标时，可以非常方便的得到帮助。
若有收获，就点个赞吧
0 人点赞
