​本次分享的是在界面设计中最长实用也最容易被忽略的十个原则,就是尼尔森十大可用性设计原则,这是十分基础且重要的原则。原则是死的,如何正确的结合到实际运用中才是关键。接下来我会通过对每一个原则的理解和现在移动端产品和结合进行分析,希望可以更深入的记住他们。

什么是尼尔森

尼尔森(Jakob Nielsen)是一位人机交互学博士,于1995年1月1日发表了「十大可用性原则」。1995年以来,他通过自己的 Alertbox 邮件列表以及useit.com 网站,向成千上万的 Web 设计师传授 Web 易用性方面的知识,尽管他的一些观点可能带来争议,至少在 Web 设计师眼中,他是 Web 易用性领域的顶尖领袖。

十大原则解析与案例

一、状态可见原则

用户在手机上的任何操作,上下滑动刷新,点击跳转,页面都应该即时给出馈。“即时”是指,页面响应时间小于用户能忍受的等待的间。

案例1_改变颜色状态:

如下图微信中点赞的样式,手指触碰到按钮时,颜色加深,通过改变颜色告知用户目前按钮的状态已被激活。

案例2_形状改变:

如下图网易云音乐中,当我们点击添加关注时,界面会中关注标签的状态会及时更新为“对号”展示给用户,通过点击后的形状的改变告知用户操作已完成。这种状态可见性可以清晰的让用户感受到页面即时给出的反馈。

案例3_添加动效:

如下图,当我们下拉界面刷新时,界面上方会出现动画加载的效果。这种状态可见性是最明显的,可以清晰的让用户感受到页面即时给出的反馈。

上面是关于状态可见性原则在产品中的常见案例,当然除了这三个还有很多,例如点击列表时,界面横滑时等。我们在设计实际界面中,一定要谨记设计出对应的可见状态,避免用户使用时以为操作无效。

二、环境贴切原则

简单的说就是产品设计符合真实世界中用户的使用习惯和思考逻辑,尽可能贴近用户所在的环境(年龄、学历、文化、时代背景),而不要使用第二世界的语言,应该使用易懂和约定俗成的表达。

案例1_产品风格定位:

如下图DaDaBaby和TutorABC同是学英语的产品,由于产品所对应用户的年龄,学历,文化不同,界面的风格也会发生改变。DaDaBaby是针对幼儿学英语,所以界面风格活泼可爱,颜色鲜艳;而TutorABC是针对成年人学英语,界面简洁,严肃。这就是产品风格的环境贴切。

案例2_产品换肤:

如下图优酷为视频类产品和饿了么为外卖类产品,虽然他们的定位不同,但是在世界杯期间,都替换了界面的皮肤,例如优酷底部标签栏的图标,饿了么中间分类入口的图标。这就是环境贴切原则的体现。在特殊的时间里我们也可以通过改变界面的皮肤增加产品与当下环境的贴切性。

上面是关于环境贴切原则的案例,我们在设计界面时必须知道产品的使用人群,产品的类型,例如商务类产品和娱乐类产设计出来就会截然不同。这是产品风格的环境贴切。除了产品大方向要贴切,我们也可通过一些特殊的节日改变产品的皮肤,让用户在短时间内加强和产品的共通性。

三、撤销重做原则

给用户更多自主操作权,当用户在使用产品过程中产生错误的操作时,应提供用户更多的解决方案,比如撤销或重做等功能。

案例:

如下图微信中我们需要考虑到用户的出错的情况,例如在用微信拍照时,如果效果不够理想就可选择左侧的撤销按钮,在未发送情况下进行重新拍照;另外一种情况就是发送后也可以通过长按当前发送的图片,在出现的功能菜单中选择撤回。

上面是撤回重做原则的案例,我们在做界面时要根据不同阶段以及产品给用户添加该功能,如果是一次性考试类型的产品就不适合加入该功能,需要用户填写时更加小心谨慎。

四、一致性原则

产品的功能操作、模块样式、页面布局、信息提示、颜色运用的一致性,避免用户突然跳转后感觉在另一个产品中的错觉,影响用户对产品的整体体验。

案例1:主色调一致

如下图鲨鱼记账,从产品的LOGO到闪屏界面再到里面的主页界面、图标、按钮等颜色都用的是统一的黄色作为主色,加深用户对品牌色的记忆。

案例2:交互一致

产品或者系统内部的交互方式应该一致,这会让用户对产品产生信赖感和控制感。例如下图微信会遵循在不同系统中的交互方式,iOS系统中删除列表的交互方式是向左滑动。而在Android系统中则是长按需要删除的列表。这就是遵照已有的系统交互方式交互的一致性。

一致性原则除了上面说的还有语言的统一,功能的统一等等。对于我们来说,设计上的统一是必须要做的,但是往往我们在追求视觉效果的时候却忽略了这些细节的问题。

五、防错原则

比出现错误信息提示更好的是更用心的设计防止这类问题发生。在用户选择动作发生之前,就要防止用户容易混淆或者错误的选择。对产品进行不同的操作、重组或特别安排,防止用户出错。

案例:

如下图马蜂窝的选择日期功能,为了防止用户错误的选择错误,把当天日期之前的日期都设定为不可选择。再比如很多表单页,当内容信息未填写完时,按钮为灰色不可点击的样式。避免用户在未填写完之前就点击提交按钮。

六、易取原则

尽量减少用户对操作目标的记忆负荷,动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的。

案例:

为了让大家更好的理解什么是易取原则,我更改了京东的弹窗界面,(如下图)京东到家为发现新版本的弹窗提示,在弹窗描述中告知用户需要通过去App Store进行操作更新,点击确定后返回首页。导致用户需要记住路径和方法,然后再去操作,如果流程复杂,用户需要反复切换确认。​

接下来我们在看看正确的姿势是什么。(如下图)当选择立即下载时会自己跳到App Store的更新界面,只要点击更新即可,不需要用户记录整个过程。当更新完成后,App Store中的更新按钮变成打开按钮,可以直接打开京东到家的首页,这个流程不需要用户提取任何记忆。

七、灵活高效原则

中级用户的数量远高于初级和高级用户数。为大多数用户设计,不要低估,也不可轻视,保持灵活高效。

案例:

这个原则就是告诉我们每个产品针对的用户不可能是所有用户,都会有自己的适用人群,我们需要针对主要的用户去设计,而不能仅仅为了一小部分用户进行极端设计,满足大部分用户的使用需求才是最重要。

八、易扫原则

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

案例:

如下图网易新闻的详情页,很多设计师对于这类纯文字的界面总是不削一顾,感觉没有什么难度,也不需要什么设计,那么我在左侧放置了一篇无设计,只是文字排列的一个界面。右侧则是网易新闻的设计界面,可以明显看出,左侧的界面找不到重点内容和标题,没有主次。而右侧的界面通过文字变化,段与段的间距等设计手段让用户在读文时可以很容易的扫视通篇的主要内容。

九、容错原则

帮助用户从错误中恢复,将损失降到最低。如果无法自动挽回,则提供详尽的说明文字和指导方向,而非代码,比如404。

案例:

为了避免造成用户的损失,我们需要在重要事件中给出合理的文字说明和指导,比如有道云笔记中告诉用户“文件删除后将无法恢复”,就给用户一次思考的时间,避免一时误删,造成损失。iPhone自带的备忘录给用户的容错空间更大,删除后可以在30天内找回。另外,对于容错程度的大小还是取决于产品用户群的需要,并不是越大越好。

十、人性化帮助原则

帮助性提示最好的方式是:1、无需提示;2、一次性提示;3、常驻提示;4;帮助文档。

案例:

如下图对于初次使用产品的用户来说,可能不知道表单里面需要填写什么,如果没有帮助性文档的提示,很容易出现错误。因此我们可以增加一些填写前的文档帮助,如每日优鲜的截图。还有在我们刚下次一款产品时,如DaDaBaby的截图,会提供帮助界面,帮用户在最短的时间内了解产品的主要功能及用法。

如果在使用产品时存在一些使用户困惑的敏感信息时,我们需要对其进行提醒说明,甚至要做出教学类的界面进行辅助。

总结

十大原则很容易记住,但我们的目的绝对不是简单地记住它,我们要在实际设计中有效的运用才是关键,无论是产品、交互还是设计,在设计产品方面如果拿捏不准都可以回想一下这是个原则,也许会有很大的帮助。

编辑:千锋UI设计

来源:UI中国

UI交互设计教程分享:提高界面交互体验的“葵花宝典”的更多相关文章

  1. UI设计教程分享:6个不能错过的UI设计网站

    Ui设计学习的人越来越多了,想要找到合适的学习资料很难,很多才接触ui设计且没有基础的同学也不知道去哪里找学习资料,虽然现在百度上很容易搜到ui设计的学习资料,但是一看不难发现,很多都是过时的学习资料 ...

  2. UI设计教程分享:Ps合成炫酷机械姬

    本次给大家分享一个通过PS合成一个炫酷的机械姬,在这个教程里给大家展示图像的色彩处理.人物光影塑造和创意实现及细节处理,教程比较简单,创意十足,看过<机械姬>电影的同学们一定知道这个有多炫 ...

  3. ui设计教程分享:关于Logo设计要素

      1. 视觉上”一语双关 我最喜欢的一些Logo在视觉设计上”一语双关”,将两张图片.两张意象巧妙结合,合二为一. WinePlace 的Logo就是一个绝佳的案例 这个Logo看起来像图钉,暗喻着 ...

  4. UI设计教程分享:关于海报的合成过程

    一张好的产品创意合成海报,能瞬间提升商品价值感,同时场景和相关元素的融入,让消费者瞬间明白商品属性及内涵.同时为商品营造的使用场景拥有更强的代入感,从而刺激转化.好的创意合成海报能为消费者带来视觉冲击 ...

  5. UI设计教程分享:banner设计

    我们都知道在一个网站中,banner图片对于浏览者来说是非常重要的,尤其是电商banner,它的最主要目的是营销,是要让消费者有冲动去购买,这对设计的要求也就更高了.而企业网站也一样,一个合适的ban ...

  6. UI设计教程分享:电商网页页面设计常见表现手法

    1.手绘插画  场景.人物以及加上故事的创意绘画 会给人梦幻若隐若现的感觉,留下深刻的印象,适合做活动页面以及宣传自已的品牌 2.简约 颜色少于三色,背景以明度偏低的颜色为主,在信息大爆炸的时代,我们 ...

  7. UI设计教程分享:设计一个高质量的logo要从哪方面入手呢?

    有的人觉得logo只是一个简单的图形,对品牌影响无关紧要:但有的人却觉得logo对品牌有较大的影响.其实logo承载着一个公司的品牌形象.公司背景.公司理念等.就像Landor往往给一个企业做logo ...

  8. UI设计教程分享:让你彻底读懂字体

    一份普普通通.规规矩矩的设计 一份让人印象深刻.新颖有趣的设计 差在哪?其实就差在三个字上! “优秀的设计不是每一个细节都有亮点,而是弱化其他元素,让某一个亮点最大化.” 今天“骉叔的设计心得”就来总 ...

  9. UI设计教程分享:字体变形—阴阳收缩法

    阴阳师中国古代对自然规律发展变化基础因素的描述,是古代美学逻辑思维.推理分析的核心要素,也是描述万物基本要素和成因的概念之一.阴阳代表事物的对立关系,它是自然界的客观规律,是万物运动变化的本源,是人类 ...

随机推荐

  1. mysql Date查询当天、本周,本月,上一个月的数据

      出自:http://www.cnblogs.com/benefitworld/p/5832897.html 今天 select * from 表名 where to_days(时间字段名) = t ...

  2. 温故而知新复习下PHP面向对象

    面向对象在PHP中是以类的形势展示的 PHP中的类是单继承的,用关键字extends来实现继承父类, 关键字public protected private 第一个是公开的 谁都可以访问,第二个只能本 ...

  3. linux运维工程师工作中的一些常见问题解决方法

    http://blog.sina.com.cn/s/blog_b9fe247a0101anoe.html 1.shell脚本死活不执行 问题:某天研发某同事找我说帮他看看他写的shell脚本,死活不执 ...

  4. springboot整合ribbitMQ

    参考:https://blog.csdn.net/a13627210064/article/details/82348059 参考:https://blog.csdn.net/u010288264/a ...

  5. php缓存类

    <?php /* * 缓存类 cache * 实 例: include( "cache.php" ); $cache = new cache(30); $cache-> ...

  6. Tomcat 多项目管理

    有时我们会在一个服务下存在多个项目的情况,为了统一管理和服务运行安全考虑,有时候我们需要重新部署一个项目但又不能停掉其它项目,就可以用manager进行管理. Tomcat manager和Root访 ...

  7. eclipse 注释字体不一致的问题

    eclipse中 1.解决注释的文字大小不一的情况 2.想让注释和代码大小不一样 3.win10系统下,设置Text Font时找不到Courier New字体 1.解决注释的文字大小不一的情况 打开 ...

  8. 控制html元素的隐藏问题

    控制元素隐藏的方式,有display:none.visibility:hidden以及不透明度设置. 一.display:none 被隐藏的元素,在页面中不占位,空出的位置会被相邻的元素占用. < ...

  9. Python 3 学习笔记(1)

    Python 3.6 运算符 + - * / 四则运算 % 求余 **乘方 // 用于整除 字符串 字符串用单引号或双引号括起来. 三引号(单引号或双引号均可)表示多行字符串,行末加反斜杠表示换行不算 ...

  10. COM组件三大接口IUnknown、IClassFactory、IDispatch。

    转自:http://blog.csdn.net/chenyujing1234/article/details/7753863 (1)COM组件有三个最基本的接口类,分别是IUnknown.IClass ...