UI交互设计教程分享:提高界面交互体验的“葵花宝典”

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

 

什么是尼尔森

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

 

十大原则解析与案例

一、状态可见原则

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

 

案例1_改变颜色状态:

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

Image title

案例2_形状改变:

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

Image title

案例3_添加动效:

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

Image title

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

 

二、环境贴切原则

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

 

案例1_产品风格定位:

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

Image title

案例2_产品换肤:

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

Image title

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

 

三、撤销重做原则

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

 

案例:

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

Image title

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

 

四、一致性原则

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

 

案例1:主色调一致

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

Image title

案例2:交互一致

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

Image title

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

 

五、防错原则

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

 

案例:

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

Image title

六、易取原则

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

 

案例:

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

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

 

Image title

七、灵活高效原则

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

 

案例:

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

Image title

八、易扫原则

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

 

案例:

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

Image title

九、容错原则

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

 

案例:

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

Image title

十、人性化帮助原则

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

 

案例:

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

Image title

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

 

总结

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

 

编辑:千锋UI设计

来源:UI中国

转载于:https://www.cnblogs.com/leolei/p/9591220.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/279467.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

window专业版激活

1、管理员权限进入命令行 2、安装密钥 slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX 3、设置kms服务器 slmgr /skms zh.us.to 4、查看是否激活 slmgr /ato 转载于:https://www.cnblogs.com/Edward-Yue/p/10942884.html

csv文件用什么打开_什么是CSV文件,如何打开它?

csv文件用什么打开A Comma Separated Values (CSV) file is a plain text file that contains a list of data. These files are often used for exchanging data between different applications. For example, databases and contact managers often support CSV files. 逗号…

Python连续攀升,其他的脚本语言去哪了?

Python在TIOBE排行榜排名连续攀升,它的优势掩盖了一个严肃的问题:其他的脚本语言去哪儿了?据2017年11月的TIOBE指数显示,其他语言(如Perl,PHP和Ruby)排名正在缓慢下滑。 不久之前,脚本语言风靡一时。动态类型语言不仅…

div水平垂直居中

水平垂直居中 效果 html <div class"m-box"><div class"m-temp"><div class"m-item">fsdafsfasdf</div><div class"m-item">fsdafsfasdf</div><div class"m-item">fsdafsfasdf&l…

【C】C语言结构体指针的语法

#include <stdio.h> #include <string.h> #include <stdlib.h>struct AGE {int year;int month;int day; };struct Student {char *name;int num;struct AGE birthday;float score; };int main() {// 注意写法1与写法2 不能混用// 写法1struct Student* stu …

禁用磁盘检查_如何在Windows上禁用“磁盘空间不足”警告

禁用磁盘检查Windows displays “Low Disk Space” notifications whenever any partition on your computer has less than 200 MB of space remaining. Here’s how to get rid of the notifications, even if you can’t free up the space. 只要计算机上任何分区的剩余空间…

java根据身份证号码计算年龄的方法(精确到日)

/*** 根据身份证号码计算年龄** param psptNo* return*/public int getAgeByPsptNo(String psptNo) {if (StringUtils.isEmpty(psptNo)) {return 0;}String birthDay psptNo.substring(6, 14);String time new SimpleDateFormat("yyyy-MM-dd").format(new Date());…

ZT:CSS实现水平|垂直居中漫谈

有篇博客园网友‘云轩奕鹤’的文章不错&#xff0c;转载在这里以供需要时查阅。 http://www.cnblogs.com/jadeboy/p/5107471.html 本文转自张昺华-sky博客园博客&#xff0c;原文链接&#xff1a;http://www.cnblogs.com/xiandedanteng/p/6271281.html&#xff0c;如需转载请自…

facebook数据_Facebook的“下载数据”功能遗漏了很多

facebook数据Facebook lets you download a ZIP file with all of your data—in theory. Turns out a lot of information isn’t included. 从理论上讲&#xff0c;Facebook可让您下载包含所有数据的ZIP文件。 事实证明&#xff0c;其中不包含很多信息。 Here’s Nitasha Tik…

直播源码中有哪些网络协议需要注意?

在当今的直播平台中&#xff0c;对直播源码越来越注重。那么直播源码中有哪些网络协议需要注意的呢&#xff1f; 1.TCP&#xff1a;TCP为点对点的协议&#xff0c;虽然能保证了数据传输的可靠性&#xff0c;但是对服务器资源耗费较大&#xff0c;在数据流大的场合难以保证数据流…

tomcat一闪而过

JAVA_HOME should point to a JDK not a JRE |vista tomcat 有的朋友在启动Tomcat的时候会出现问题。 1例如&#xff1a; 手动点击startup.bat 后 &#xff0c;一闪而过 2例如&#xff1a;在cmd下 进到tomcat的bin目录 运行 startup.bat &#xff0c;然后输出 了JAVA_HOME shou…

Shell 快速指南

███████╗██╗ ██╗███████╗██╗ ██╗ ██╔════╝██║ ██║██╔════╝██║ ██║ ███████╗███████║█████╗ ██║ ██║ …

UmiJS CDN 部署之 publicPath

为什么80%的码农都做不了架构师&#xff1f;>>> 静态资源在非根目录或 cdn 这时&#xff0c;就需要配置 publicPath。至于 publicPath 是啥&#xff1f;具体看 webpack 文档&#xff0c;把他指向静态资源&#xff08;js、css、图片、字体等&#xff09;所在的路径。…

check corners_免费下载:将Mac样式的Hot Corners添加到Windows 10

check cornersWindows: Move your mouse to any corner to quickly see all your open windows, your desktop, or even start your screen saver. Windows&#xff1a;将鼠标移到任意角落可快速查看所有打开的窗口&#xff0c;桌面&#xff0c;甚至启动屏幕保护程序。 It’s c…

centos

1. ssh 登录 centos 服务器 引用: https://www.cnblogs.com/loseself/p/9599745.html 2. ssh 登录 失败: WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! 引用: https://blog.csdn.net/xlgen157387/article/details/52669709 3. 编译安装 git 引用: https://git-scm.com/bo…

网易前端面试题总结,你见过几个?

划重点 很幸运地能收到网易的面试通知&#xff0c;就毫不犹豫去面试了~三点的面试&#xff0c;因为从来没去过那个中关村西北旺区&#xff0c;吃完饭早早就去了,想象中那里应该是繁华的地方&#xff0c;到了发现都在建设中&#xff0c;很多还在建设中&#xff0c;看到了…

webpack 配置详解

最近在学习webpack&#xff0c;边学边练习&#xff0c;下面是对一些应用到的属性、插件记录分享出来&#xff0c;也方便以后查找与复习&#xff0c;过程中碰到了一些坑&#xff0c;在注释中有说明&#xff1a; const path require(path) const webpack require("webpack…

连续对焦 auto对焦_如何在Windows 10上使用对焦辅助(请勿打扰模式)

连续对焦 auto对焦Windows 10’s “Focus Assist” feature is a “Do Not Disturb” mode that hides notifications. Windows automatically activates it when you’re playing PC games or mirroring your display—and you can have Windows automatically activate it on…

小米品牌

对于现阶段的小米公司来说&#xff0c;他们的策略是行走在钢丝上的。为什么这么说呢&#xff1f;原因是营销策略的优势和劣势都很容易被人翻转。换句话来说就是优势的稳定性不够&#xff0c;劣势的方面又很容易崩盘&#xff0c;这两个方向的丝毫失误都会带给小米公司严重的打击…

wepy学习笔记之环境搭建

写了近两年小程序了&#xff0c;越来越发现原生小程序有太多鸡肋的地方。所以今天准备尝试一下wepy&#xff0c;正好最近手上有个外包&#xff0c;可以拿来练手。如果可以的话&#xff0c;或许会出一系列wepy相关的文章&#xff08;偏实战&#xff09;&#xff0c;欢迎大佬们指…