• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 用超多案例,带你学会经典的尼尔森十大交互设计原则

用超多案例,带你学会经典的尼尔森十大交互设计原则

作者:熊猫小生 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含交互设计,经验分享,设计原则等相关知识,熊猫小生希望在学习及工作中可以帮助到您

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)

通过把组件

您可能想查找下面的文章:

  • 交互设计和心理学之间的18条奇妙联系
  • Apple Watch 交互设计中四个全然不同以往的经验揭密
  • 资讯类产品阅读列表的交互设计思考与经验分享
  • 163邮箱登录框交互设计的改进经验与分享
  • 超全面!Android 应用与iOS 应用之间的设计差异对比
  • 超全面的设计异常情况和处理方式汇总
  • 以Apple Music为例,为你解读格式塔7大法则
  • 界面设计中,交互方式是选择滑动还是点击呢?
  • 新手交互设计师如何迅速成长?爱彼迎高手来教你!
  • 在开始 VUI 设计之前,你需要做些什么?

相关文章

  • 2017-08-06前端开发大众手册(包括工具、网址、经验等)
  • 2018-08-23如何设计优秀的弹出框?这儿有一份全面总结!
  • 2017-09-11webpack从入门到放弃
  • 2018-08-23如何让交互稿的体验更好?网易设计师总结的10个知识点
  • 2017-08-06html5中几个不容错过的api或者tips小结
  • 2018-08-23收福利!5个不为人知但干货超多的交互设计公众号
  • 2018-08-23为什么39%的设计工作可能被人工智能取代?
  • 2018-08-23还有这种操作?这10个导航栏设计技巧别错过了
  • 2017-08-06深入理解HTML5在移动开发方面的发展现状
  • 2018-08-23零基础必备:详解十种常见的水彩基本技法+问题总结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 想让你的网站看起来专业?搞定下面9件事情就行!
    • 复制和粘帖是封装的大敌
    • 使用谷歌网页字体无限制的添加字体到您的网站
    • Airbnb团队负责人:硅谷新兴的产品内容策略分析师是什么
    • 赶紧收下!连BAT设计师都在使用的视觉动线技巧(上)
    • 我们在囧途之UI工程师职业感慨
    • 2018年高手总结了21条最值得掌握的移动App 设计基本原则
    • 这5种字体设计策略,帮你创造精彩出挑的网页视觉体验
    • 实战经验!两个大招帮视觉设计师高效完成工作
    • 从设计默认值开始,让你的产品体验更优秀

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有