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…

禁用磁盘检查_如何在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. 只要计算机上任何分区的剩余空间…

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…

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…

连续对焦 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…

spotify能免费下歌吗_Spotify免费版与高级版:值得升级吗?

spotify能免费下歌吗Spotify offers two tiers: a free, ad-supported plan and a $9.99 per month Premium plan. But what are the differences between the two and is it worth upgrading? Let’s find out. Spotify提供两个等级&#xff1a;免费的广告支持计划和每月9.99…

BZOJ4012 [HNOI2015]开店

BZOJ4012 [HNOI2015]开店 这道题因为太多人拿这个题卡$BZOJ$&#xff0c;于是成了权限题。。。 本蒟蒻表示没钱氪金。。。 无奈&#xff0c;拿出了洛谷&#xff1a;P3241 [HNOI2015]开店 还有$LOJ$&#xff1a;#2116. 「HNOI2015」开店 这里附上洛谷的题面&#xff1a; 题目描述…

ElasticSearch实战-入门

1.概述 今天接着《ElasticSearch实战&#xff0d;日志监控平台》一文来给大家分享后续的学习&#xff0c;在《ElasticSearch实战&#xff0d;日志监控平台》中给大家介绍一个日志监控平台的架构方案&#xff0c;接下来给大家分享如何去搭建部署这样一个平台&#xff0c;给大家做…

macos 版本_如何检查您使用的macOS版本

macos 版本Apple releases new versions of the macOS operating system about once per year. Here’s how to check which release of the macOS operating system is installed on your MacBook, iMac, Mac Mini, or Mac Pro. 苹果大约每年发布一次新版本的macOS操作系统。 …

第十四周作业

2019春第二次课程设计实验报告 一.实验项目 贪吃蛇游戏 二.实验功能描述&#xff1a; 存储数据&#xff0c;实现wasd控制蛇方向&#xff0c;吃到食物就增加长度&#xff0c;最后按长度算分数&#xff0c;撞到障碍物则死亡&#xff0c;计算积分 三.项目模板结构介绍&#xff1a;…

java语言不用担心内存吗_不用担心智能手机的电池,只需使用它

java语言不用担心内存吗When you’re trying to get the most life out of your device, it’s easy to overthink batteries. Don’t. Plug in your devices when possible, carry a battery pack with you, and get on with your life. 当您试图充分利用设备的使用寿命时&…

asp.net core结合NLog搭建ELK实时日志分析平台

0、整体架构 整体架构目录&#xff1a;ASP.NET Core分布式项目实战-目录 一、介绍ELK 1、说明&#xff08;此篇ELK采用rpm的方式安装在服务器上&#xff09;-牛刀小试 承接上一篇文章的内容准备部署ELK来展示asp.net core 的数据。目前此篇文章只用到单台服务器&#xff0c;等下…

Rhel7 设置目录权限,acl权限

Rhel7 设置目录权限&#xff0c;acl权限 改变用户和组的所属 Getfacl 取得 Setfacl设置 [rootdesktop0 tmp]# setfacl -m u:natasha:rw fstab [rootdesktop0 tmp]# setfacl -m u:harry:- fstab [rootdesktop0 tmp]# setfacl -m o::r fstab [rootdesktop0 tmp]# getfacl fstab #…

IT兄弟连 JavaWeb教程 AJAX定义以及解决的问题

2019独角兽企业重金招聘Python工程师标准>>> Ajax是"Asynchronous JavaScript And XML"的缩写(即&#xff1a;异步的JavaScript和XML)&#xff0c;是一种实现无页面刷新获取服务器数据的混合技术,Ajax这个概念的最早提出者是Jesse James Garrett。我们知道…

echo和@echo_如何在Echo Show和Echo Spot上切换到24小时时钟

echo和echoIf you prefer the 24-hour clock format instead of the usual 12-hour format, Amazon recently (and quietly) added the ability to switch between the two on the Echo Show and Echo Spot. 如果您希望使用24小时制而不是通常的12小时制&#xff0c;那么Amazon…

生信入门-爱课程上的华中农业大学

1.生物大分子序列分析 2.主要技术 3.生物信息学的应用 4.应用2 转载于:https://www.cnblogs.com/BlueBlueSea/p/9610313.html