恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
“尼尔森用户体验原则”如何引导视觉设计?
0.0°
2018-04-04 原创文章 经验/观点 举报 2121 19 9 0

本文旨在探讨“尼尔森用户体验原则”之于视觉设计的引导作用,达到在实际工作中以理论平衡设计执行的目的。

Image title

写在前面:


       在互联网产业大行其道的今天,“用户体验”一词几乎贯穿了产品生命周期的始终。当用户使用某一类互联网产品时,在了解了其服务性质、可解决什么问题的基础上,排除“价格因素”,在同类型产品的选择阶段,他们更多地开始关心产品的自身表现。而在用户体验的整个环节中,视觉呈现是用户接触一款产品的第一印象,是用户能否更深入地进行产品和交互体验的前提。


       作为视觉设计师,在保证界面美观与统一的同时,也应列举出在整个设计执行过程中用来支撑自己观念的理论依据。以何据论?那我们便要了解评判用户体验是否合格的关键 —— 尼尔森用户体验十大原则( Nielsen's Ten Usability Heuristics )。


【 1 】尼尔森是谁?尼尔森用户体验十大原则具体包含哪些内容?(1/3)


       雅各布 · 尼尔森( Jakob Nielsen ),用户体验原则的创始人之一,哥本哈根丹麦技术大学的人机交互学博士 ,诺曼 · 尼尔森集团( Norman Nielsen Group )的主要负责人。他拥有 79 项有关“使互联网产品更易用”方面的专利(美国),被《美国新闻与世界报道》杂志誉为“ Web可用性方面的世界顶尖专家 ”。


       以他为主创立的用户体验原则,让企业满足偏好与性格捉摸不定的用户群有了一个标准化的参考,帮助含互联网在内的多个行业领域创建了系统的体验与优化准则,以此提升产品的人性化程度,更好的为用户提供服务。


其十条原则具体如下:

Image title

【 2 】尼尔森用户体验原则中与视觉设计相关的有哪些?(2/3)


       显然,原则中更多的是倾向对于人机交互方面的要求,但也有对视觉设计做出的明确建议。除既定的与视觉设计有关的原则外,我们还能从其他人机交互相关条目中映射出哪些视觉设计准则?


1. 系统状态可视化


—— 通过适时且适当的反馈,帮助用户快速感知“我在哪( 位置 / 阶段 )”、“发生了什么”、“我该做什么”,强化用户心理预期。


【 视觉映射 】

· 在系统状态发生改变(如加载、无网络连接、更新、点赞、关注、勾选等)时,采用情感化的设计以减小用户的焦虑感( 图 1-1 );采用趣味性的设计以增添用户的愉悦感。( 图 1-2 )

· 利用更改颜色,或采用特殊颜色(如提醒色)来告知用户当前系统状态的变化。( 图 1-3 )

Image title

2. 不脱离现实


—— 使用用户熟悉的语言和概念进行设计;遵循现实生活中的基本规律,信息的显示自然而有逻辑。


【 视觉映射 】

· 图标、插图等设计应是较为具像化的,以便于用户识别其含义。( 图 2-1 )

· 相关联的内容在排版上应互相靠近(就近原则)。( 图 2-2 )

· 字体和颜色等元素的使用应符合常规。( 图 2-3 )

Image title

3. 用户有自由控制权


—— 在合理的范围内用户可以自由的选择操作任务;操作进行时应顺畅的引导,出错时用户可以方便的回退。


【 视觉映射 】

· 确认 - 取消、购买 - 收藏、发送 - 撤回等需要用户进行自主选择操作的按钮,应进行差异化的样式设计。( 图 3-1 )

· 如需要,用户应可对界面文字大小、颜色(如白日模式与夜间模式的切换)等元素进行更改。( 图 3-2 )

Image title

4. 一致性


—— 功能名称、状态显示、操作方式等均要保持一致;开发平台有设计规范时要遵循该规范。


【 视觉映射 】

· 行业规范和公司规范(如有的话)应在产品中被贯彻始终。( 图 4-1 )

· 界面中的图标、字体、文字对齐方式、间距等排版方式应一致。

· 界面中的颜色使用方式(字体颜色、背景颜色、图标颜色等)表达含义应一致(例如在不同的地方红色代表“错误”)。( 图 4-2 )

Image title

5. 帮助用户发现、诊断和纠正错误


—— 出错提示需用简洁明了的语言,不得包含技术性词语。


【 视觉映射 】

· 错误提示应使用较为明显的提醒色以标示其错误内容及位置。( 图 5-1、图 5-2 )

Image title

6. 预防用户出错


—— 通过合理的设计实现预防用户出错,比好的出错提示更有效。


【 视觉映射 】

· 可导致严重后果的功能键与常用功能在排版上应有一定距离而不是相邻。( 图 6-1 )

· 可导致严重后果的功能键在布局上应占据更小的版面。 ( 图 6-2 )

· 在用户进行破坏性操作前应以明显的颜色给予提醒。

Image title

7. 帮助用户识别,而非回忆


—— 减少用户记忆负担,操作对象和选项明确可见;用户无需记住具体内容便可以流畅的重复之前的操作;帮助信息容易获取。


【 视觉映射 】

· 按钮需要考虑多种状态(例如激活、常规、点击、不可点击)的显示。( 图 7-1 )

· 留白的设计应恰当协调,并正确的引导用户的目光注视正确的方位。( 图 7-2 )

Image title

8. 灵活性和使用效率


—— 界面中的功能引导必须简单方便,不能要求用户付出太多精力。


【 视觉映射 】

· 主要按钮的位置排布应在用户易触范围内。( 图 8-1 )

· 用户经常使用的功能应以直截了当的方式进行设计排布。( 图 8-2、图 8-3 )

Image title

Image title

9. 美观和极简的设计


—— 不相关和不必要的信息不显示;不做过多影响信息传递的额外设计。


【 视觉映射 】

· 视觉设计的用色与排版应简洁明了,并适当贴合流行趋势。( 图 9-1 )

· 如有渐变、描边、阴影等样式,应与整体视觉保持比例平衡,不强调,不突出。( 图 9-2 )

· 文字信息的字体大小、间距应适度把控,便于用户阅读内容。( 图 9-3 )

Image title

10. 帮助和说明文档


—— 若需要提供便利的检索或指引帮助功能,内容需向用户详细描述,列出具体实现步骤,并且不要太冗长。


· 帮助文档的设计排版应具有清晰明确的引导说明作用。

Image title

【 3 】尼尔森用户体验原则在实际的视觉工作中还有什么其他作用?(3/3)


       除对我们的设计进行引导外,其原则还主要应用于“启发式评估”。在了解“How”之前,我们先了解一下“What”。

Image title

       就“启发式评估 (Heuristic Evaluation) ”,雅各布·尼尔森作出如上释义。


       通俗意义上讲,启发式评估是由若干位用户体验专家,以一套较为简单且通用,同时具有启发性的规则,对软件、网站等产品进行可用性、易用性的一种测试评估方法。最终汇总评估结果,找出产品中存在的问题或潜在问题,确定问题严重等级,并提出解决办法,从而达到优化产品用户体验的目的。


       在产品的成长过程中,用户痛点的转移或升级是持续性的。同时也因产品运营、体验优化等原因需要不断地进行版本迭代,尤其是较大版本升级前较为长期的准备工作。在做这些工作前,我们需要对产品进行各方面问题的收集与总结,启发式评估便是一个非常不错的方法选择。但启发式评估在发掘产品可用性问题的同时,也具有其自身的局限性。


其主要优缺点总结如下:

Image title

       即使利弊并存,但启发式评估几乎涵盖了用户体验的各个方面,仍是我们在做阶段性项目评估,帮助产品进行升级的优选方法。而体验环节中视觉设计的优化,参考尼尔森用户体验十大原则,也不应只是单单从产品的用色、图标、字体大小、基础信息层级的展现上进行整理分析。


结语:


       由于设计风格的流行与影响,让我们的设计产出增加了许多不必须的元素,在一定程度上会对用户的使用过程造成额外的视觉负担。在了解了这十大原则及其视觉方向的映射后,我们可以基本保证设计工作在良好的用户体验准则下进行,做到用科学的方法、以用户为核心进行设计,而并非是以设计师的个人风格或喜好作为主导。


       愿与各位视觉设计师共勉。





更新:2018-04-04

收藏

19人已收藏

二十二匹青年

捕风 / 喂马 / 念你

  • 2

    作品

  • 4

    粉丝

  • 19

    关注

  • 城市之光 City Lights

    猜你喜欢

      2018-04-04 原创文章 经验/观点 举报 2121 19 9 0

      “尼尔森用户体验原则”如何引导视觉设计?

      0.0°

      你确定要举报“尼尔森用户体验原则”如何引导视觉设计?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年04月03日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      9
      19
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录