美文网首页
2018-12-03UI设计学习培训大纲分享深度解析交互设计原则

2018-12-03UI设计学习培训大纲分享深度解析交互设计原则

作者: 纤纤郡主 | 来源:发表于2018-12-03 16:22 被阅读0次

    尼尔森(Jakob Nielsen)是一位人机交互学博士,于1995年1月1日发表了【十大可用性原则】。

    1995年以来,尼尔森向成千上万的 Web 设计师传授 Web 易用性方面的知识,尽管他的一些观点可能带来争议,至少在 Web 设计师眼中,他是 Web 易用性领域的顶尖领袖。

    尼尔森十大可用性原则是产品设计与用户体验设计的重要参考标准,值得深入研究与运用。

    目录:

    原则一:状态可见原则;

    原则二:环境贴切原则;

    原则三:用户可控原则(撤销重做原则);

    原则四:一致性原则;

    原则五:防错原则;

    原则六:易取原则;

    原则七:灵活高效原则;

    原则八:优美且简约原则(易扫原则);

    原则九:容错原则;

    原则十:人性化帮助原则。

    原则一:状态可见原则

    用户在网页上的任何操作,不论是单击、滚动还是按下键盘,页面应即时给出反馈。"即时"是指,页面响应时间小于用户能忍受的等待时间。

    1、当用户触发了操作时,需要即时给出用户操作的反馈,能够让用户知道发生了什么,当前操作是否成功、是否有效。操作因为网络原因或者其他一些因素导致操作失败时,是否继续进行请求,还是直接给出操作失败的提示?

    如果说操作成功,但是需要进行一段时间才能加载出结果,此时则需要让用户知道操作已经成功,比如通过进度条、旋转的菊花,或者其他一些动画效果来让用户知道正在加载。

    比如今日头条的下拉刷新功能:刚开始下拉的时候显示下拉推荐,下拉一段距离时显示松开推荐,松开时显示推荐中,刷新完成时显示有10条更新。

    2、用户当前所处的位置是否明显?比如在导航栏的中间的标题会标注出来用户当前所在的位置,而在底部的Tab中则会通过交互后的另一种样式来让用户知道当前的位置。通过这些提示能够让用户知道当前位于产品中的位置,防止用户迷失。

    比如左图中iOS11的风格,把标题加大,让用户更清楚的知道当前位置。右图将附近商户标红并加上下划线来标注出用户所在位置。

    原则二:环境贴切原则

    网页的一切表现和表述,应该尽可能贴近用户所在的环境(年龄、学历、文化、时代背景),而不要使用第二世界的语言。《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践。此外,还应该使用易懂和约定俗成的表达。

    1、所用图标和界面表达的意思与本身意思和环境是否贴切,是否会有歧义。

    比如左图iPhone的计算器界面,与现实生活中的计算器的样式差不多,右图中的微信的红包设计,根据中国人的传统文化习俗来进行设计,与现实生活中的纸质红包一样,都符合环境贴切原则。

    2、应用是否根据用户定位来做相应的设计。(根据用户人群来进行页面风格的确定)

    比如微博的国际版页面风格会比国内版的简洁很多,结构和交互方式都会不一样,另外国际版界面的布局使用的设计风格完全遵守谷歌的设计规范。

    3、应用所用语言是否通俗易懂

    如下面左图中,用户会疑惑自适应窗口和最佳比例的差别,改成有图的自适应宽度,给予用户通俗易懂的语言。

    原则三:用户可控原则(撤销重做原则)

    为了避免用户的误用和误击,网页应提供撤销和重做功能。

    比如微信的聊天可以撤回,还有重做功能,这样发现写错的字以后就可以直接修改,而不用去全部写一遍了,还有些软件里的删除功能是直接弹出一个toast提示已删除,是否撤销。

    原则四:一致性原则

    同一用语、功能、操作保持一致。同样的语言,同样的情景,操作应该出现同样的结果。

    1、结构一致性

    保持一种类似的结构,新的结构变化会让用户思考,规则的排列顺序能减轻用户的思考负担;

    比如美团的个人中心都是卡片,支付宝的个人中心都是列表。

    2、色彩一致性

    产品所使用的主要色调应该是统一的,而不是换一个页面颜色就不同;

    3、操作一致性

    能让产品更新换代时仍然让用户保持对原产品的认知,减少学习成本;

    比如QQ的消息列表都是通过点击的操作方式进入聊天窗口。

    4、反馈一致性

    用户在点击按钮或者条目的时候,反馈效果应该是一致的;

    比如QQ的消息列表,点击邮箱提醒,服务号和消息聊天的页面都是由右往左滑出,点击顶部左上角的返回按钮都是从左往右滑回。

    5、文字一致性

    产品中呈现给用户阅读文字的大小、样式、颜色、布局等都应该是一致的;

    原则五:防错原则

    通过网页的设计、重组或特别安排,防止用户出错。这里的防错是在错误发生之前进行的,用心设计来防止用户出错,而不是出现错误之后再给出提示。

    1、如果某些操作不能进行,那就置灰或隐藏,不要在用户点击后才提醒不能操作。

    比如用户未填写信息的时候按钮给予置灰。

    2、用户进行不可逆操作时给出提示。

    比如微信和QQ发状态时,点击返回按钮出现的提示弹窗。

    原则六:易取原则

    尽量减少用户对操作目标的记忆负荷,动作和选项都应该是可见的,即把需要记忆的内容摆上台面。

    1、二次确认对话框出现可以很好地减少用户前后的记忆。

    比如左图简书文章删除时二次确认删除内容,右图天猫的付款前确认订单内容。

    2、别让用户去回想我刚才做了什么选择,让他随时能知道自己做了什么选择。

    比如饿了么筛选以后知道自己做了什么筛选,而不用去记忆自己做了什么筛选。

    原则七:灵活高效原则

    为大多数用户设计,不要低估,也不可轻视,保持灵活高效。也就是永远为中间用户进行设计,同时也要注意新手用户和专家用户,能够引导新手用户成为中间用户,同时也不要阻碍中间用户成为专家用户。

    比如刚下载一个app的时候,特别是刚玩一款游戏的时候,会有新手引导,这时也要允许已经会的玩家跳过引导。

    比如微信首页是给大多数用户设计使用的,同时也有给专家用户使用的发现页管理,专家用户可以用来订制发现页的内容。

    原则八:优美且简约原则(易扫原则)

    互联网用户浏览网页的动作不是读,不是看,而是扫。易扫,意味着突出重点,弱化和剔除无关信息。

    比如支付宝的页面,从上到下,重要程度递减,并且突出了收付款等常用功能,在新版的页面将服务提醒的功能转移到二级页面。

    原则九:容错原则

    错误信息应该用语言表达(不要用代码),较准确地反应问题所在,并且提出一个建设性的解决方案。

    比如airbnb登录时手机号位数不对时,后面没有打勾的标志,并且不能点下一步的按钮,这就准确的反应出问题所在了。

    比如在简书上,点击一个链接,偶尔会出现下图的情形,即页面找不到。简书提供了详尽的说明文字和指导方向,而非直接使用404代码。

    原则十 人性化帮助

    如果系统不使用文档是最好的,但是有必要提供帮助和文档。任何信息应容易去搜索,专注于用户的任务,列出具体的步骤来进行。帮助性提示最好的方式是:1、无需提示;2、一次性提示;3、常驻提示;4;帮助文档。

    如新手引导页,常驻提示,个人中心的帮助入口。

    以上就是我对尼尔森的十大交互设计原则的理解,如有觉得不对的地方欢迎斧正,谢谢阅读。

    相关文章

      网友评论

          本文标题:2018-12-03UI设计学习培训大纲分享深度解析交互设计原则

          本文链接:https://www.haomeiwen.com/subject/mznycqtx.html