第三集!值得每个设计师收藏的《完美像素使用手册》之易用性篇 - 优设网 - UISDC

第三集!值得每个设计师收藏的《完美像素使用手册》之易用性篇

2016/08/07 14128评论区

pixel-perfect-precision-usability-1

这本纪念碑谷团队出品的《完美像素使用手册》,有设计师说是她见过的最全面,最毫无保留,最生动有趣的界面设计指南,而且不止是设计,还包括和程序员的合作经验,AI、PS的操作小技巧等等。现在终于有中文版了,强烈建议收藏阅读。

虽然这个册子确实出来挺久了,大概14年的时候优设网就有推荐过它:http://www.uisdc.com/pixel-perfect-precision-handbook(内附PDF英文原版),但里面的知识依然没有过时。

前两集回顾:

  1. 《值得每个设计师收藏的《完美像素使用手册》之原理篇》
  2. 《中文版来了!值得每个设计师收藏的《完美像素使用手册》之细节篇》

关于设计指南,这里有一个绝对不能错过的:

  1. 《中文版来了!新版Material Design 官方动效指南》
  2. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(二)》
  3. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(三)》

今天是第三章节:易用性篇

易用性

易用性并不意味着设计时,要专门为那些有身体不便的人做让步妥协,而是说,好的设计应该是适合每个人的。不需要为了让一切合乎标准,而额外花费大量的时间、金钱,或者牺牲视觉效果。就像完美像素手册一样,如果这些原则在你的设计过程中,从一开始就贯彻,你会发现易用性水到渠成,一点也不费劲。

mxtt201608071

损伤类型

大约10%的英国人有某种身体缺陷,这意味着存在很多身体不便的潜在用户。通常影响到数码产品使用的有四种:视力、听力、触觉和感知(就是加工信息的能力)。所以不要单纯依赖一种感官去设计你的产品,而要考虑多种交互,比如给视力不好的人设计一个从文本到语音的转换功能。

mxtt201608072

清晰

设计尽量清晰、简洁,不给用户造成大量的信息负担。可以只向用户展示和TA相关的信息,再按照用户需求逐步展示更多信息。同时也要确保内容适配移动终端——比如说图片大小不能太大,免得刷得不顺畅。

mxtt201608073

一致性

设计在很多方面都需要从头至尾保持一致,比如设计风格、导航、排印、语言的选用。界面元素不管什么时候出现,都要有一定的标准,这样用户使用时就能根据习惯预测要怎么用。大部分的设备对设计和交互模式都有一套规范,要看仔细哦~

mxtt201608074

导航

像上一页说的,导航设计也要保持一致,用户才不会感觉摸不着北。所有导航页的元素都要在相同的位置,风格和标签也要一致。这也适用与其他元素,比如,如果一个按钮在app里这个地方的功能是这个样子的,那换个地方按应该也是这个样子的。

mxtt201608075

导航(内容结构)

设计页面布局时,想想用户到底需要什么。基于这个,设计师就要把用户最看重的内容放在最方便的地方。

mxtt201608076

导航(减少步骤)

虽然把所有信息都塞到一个页面不太好,但是也不要把步骤分得太多,用户会炸的!

所有信息一定要在四个页面内表达完,再多就会炸了!

mxtt201608077

导航(标题栏 )

每个页面要写清楚标题栏,这样用户就知道这页是什么,想要表达什么信息。

mxtt201608078

导航(合适的页面大小)

页面大小要适中,中间还要留点空。这样信息展开或者翻页都容易点。一页不要太长,往上翻滚动条都翻累shi了。

mxtt201608079

导航(滚动要朝着一个方向)

确保你设计的内容只往一个方向滚,对用户来说省力又省脑筋。

mxtt2016080710

导航(列表要编号)

如果列表超过三四点,那就要编号,而不是敲个点就算完事儿。编号可以让结构感更强。

mxtt2016080711

导航(标签)

写标签本身就是个艺术。描述要清楚、简洁。让用户一看就知道是怎么回事了。

mxtt2016080712

导航(输入栏上方标签)

标签放在输入栏上面而不是里面。因为如果标签在输入栏里面,那屏幕朗读的意义就不大了。因为它只会读出输入的内容,就读不出标签了。

mxtt2016080713

交互(触摸对象、目标)

给触屏设备做设计时,要考虑到手指使用起来方便。最小的触摸块差不多是7mm×7mm,每个间隔至少2mm,免得不小心两个都按到了。如果是给大拇指设计的,那就要宽点,成人拇指一般25mm宽。

mxtt2016080714

交互(按钮)

在应用里,一般开始进程都是用按钮,要是用超链接,用户就会凌乱了。

mxtt2016080715

交互(超链接)

说到超链接,不是超链接就不要随便用下划线了,免得误导用户。

mxtt2016080716

错误操作预防(设计)

力图通过设计把产品使用时可能发生的错误降到最少。

有很多方法,比如把有用的放在前面,没用的或者是不小心就会误操作的隐藏起来;(删除时)使用警示语或者让用户再确认,或者做个可以自动防止出现故障的补救系统。在关键时刻,要提醒用户,知道自己在做什么,而不是放任TA自己瞎弄。

mxtt2016080717

错误操作预防(数据确认)

移动设备太小了,搞不好信息就输错了,所以要提示用户输入的东西是否正确。

mxtt2016080718

错误操作预防(自由文本)

提供默认值选项,不要全让用户自己输入,减少错误率。

mxtt2016080719

错误操作预防(检查、确认、修正)

让用户在输入数据后,检查一遍再提交,必要时还可以再重来一遍修正自己的选择。

mxtt2016080720

预防错误(提交信息可撤回)

如果你的app会产生很不好的东西,比如删除内容,那就要设计逆向操作。比如,一周自动清空一次回收站,或者一键还原之类的。

mxtt2016080721

文本内容

设计格局重要但是信息也很重要。不清楚的标签或者指示会让用户产生混乱,所以花点时间想想你究竟要表达什么,是不是做到位了。左下这个例子,用户按cancel是取消命令,还是取消取消命令呢?

mxtt2016080722

文本信息(大块信息要拆零)

大块信息要拆分,用户才好理解。最多用五句话。

mxtt2016080723

文本信息(把文本转成图形)

有些用户,比如说有阅读障碍的,他们的组织能力不太好,所以可以把大段的文字转成图表,信息就能变小块一点,也有序一点。

mxtt2016080724

文本信息(缩写)

如果使用缩写,确保第一次使用的时候要让用户知道缩写代表什么,就是完整的词长什么样子。当然最好就是不用缩写,对于有的用户来说,记缩写的意思也不容易!

mxtt2016080725

文本信息(链接)

“Click here(点这里)”是个好的超链接符号吗?错!因为这个没有显示任何关于链接内容的有价值的信息,而且用触屏的人压根就没鼠标能够“click(点击)”。要起到导航作用,超链接的字必须清晰描述指向什么。这样用户眼睛扫过一个页面就能看到想找的内容的链接。有时候还可以顺便把链接的文件大小也写上,万一需要下载呢?

mxtt2016080726

反馈

执行任务过程中不时给用户一些反馈,让TA安心一点。你想,万一执行任务时app卡住了,或者按了按键什么反应都没有,你是不是很火大?

mxtt2016080727

反馈(多种感官)

提供反馈可以是多种形式的。比如,设置声音提醒对失聪者来说就没意义,或者如果用户在很嘈杂的环境里,提示音似乎也起不到任何作用。

mxtt2016080728

反馈(错误信息)

如果出现错误了,要让用户理解,到底出了什么问题,还要提供解决方案,给TA指出解决的途径。

mxtt2016080729

反馈(错误邻近)

设计时,把错误信息放在相关的位置,这样能帮助用户明确比对,找出问题所在。

mxtt2016080730

排印

排版很重要,影响到产品是不是好用。尤其是对视觉或者感知有障碍的用户,文本长度和是否容易理解会直接影响用户体验。

mxtt2016080731

字体大小

至少是12pt字号,16pt读起来就比较舒服了。字太小看起来很费劲,万一屏幕分辨率再低点,就更累了。

mxtt2016080732

单句长度

每句差不多80个字母。再长点,用户可能就辨不清句子开头和结尾了。一般设计在45-75个字母,最好是66个字母(含空格)。

mxtt2016080733

排版间距

间距合适这样才能看得清。推荐字符行距是1.5倍。段落间距再是行距的1.5倍。这样每个段落看起来就很清晰了。

mxtt2016080734

排版(对齐)

多行文本一般左对齐。空格大小要一致,不要乱用居中对齐,免得没几个字的都要占一行。

mxtt2016080735

排版(格式)

格式简单才好认。Serif格式对于有阅读困难的人就不方便,斜体或者下划线也会有模糊焦点的作用。整句或者整段都大写不仅读起来不方便,而且给人一种咆哮体的感觉。

mxtt2016080736

排版(格式)

避免动态,或者闪烁的文本设计,照顾一下阅读困难的人呐。这很容易让人崩溃!

mxtt2016080737

格式(信息截断)

除非必要,不要随便截断信息,后面隐藏的内容都是有用的呢。

mxtt2016080738

排版(图文结合)

不要图文混一块,除非用代码。把这两个分开意味着:声音朗读软件能辨识出文字并读出来,然后字号和颜色可以根据用户喜好而改变——如果把文字嵌进图像里,上面两个都实现不了了。

mxtt2016080739

颜色(视觉辅助)

用图标和颜色帮助用户辨别页面上的内容。特别是对于感知能力不太好的用户。当然,用什么颜色得前后保持一致。

mxtt2016080740

颜色(不要只依赖于颜色)

不要单独只依赖颜色来传递信息。有些移动端颜色分辨率不好,或者使用时光线不好,两者都会减弱颜色的效果。差不多8%的男人是色盲呢!傻傻分不清楚!

mxtt2016080741

颜色(选择

如果用颜色来呈现信息,比如说用柱状图,那可以在柱状图上加些纹理来区分。

mxtt2016080742

颜色(对比)

文字和背景色明确的颜色对比,能够确保用户看得清。而且要确保,即使在光线不是特别充足的时候,颜色对比度也足够用。

mxtt2016080743

颜色(对比格子)

有很多可以用来测颜色对比的软件。比如说Color Contrast Analyser和Jonathan Snook的网上测试工具,只要输入两个颜色就可以对比出来。最低标准是AA,AAA更好,对比度更大,但是太大对设计就不好了。这些测试也要区分是正文字体还是“超大”文本(18pt或者14pt粗体字)

mxtt2016080744

颜色(ADD)

如果必须要描述颜色,而且还不能用文字,你可以用ColorADD,它可以用符号代表颜色。这些符号不仅可以表示颜色,还能表示颜色的深浅呢。

mxtt2016080745

ColorADD

ColorADD网站上内容更多,还有针对色觉障碍的人群的符号。

mxtt2016080746

闪烁

设计里有一闪一闪的东西可能会令人崩溃。所以屏幕上最好不要有一秒内闪烁超过3下的东西。

mxtt2016080747

运动

会动的设计对有学习障碍或者无法集中注意力的人可能产生困扰,阅读速度不快的人也希望页面能静止不动,这样才能够把东西看完。所以,如果设计中如果确实需要移动某些内容,不要设置成自动运动,还要提供暂停和停止按钮,这样方便用户选择。

hb20160807

测试

测试看看你的设计是不是好用,比如说黑白颜色、放大缩小、或者文本朗读的功能。要在真实的东西上,找人尝试,不要总是模拟。

mxtt2016080748

测试(Adobe预览——色觉障碍)

隐藏在View>Proof Setup Menu下拉菜单里面就是最常见的帮助有色觉障碍人群的工具,可以快速检测你的选色,对于有色觉障碍的人来说是否会造成困扰。

mxtt2016080749

测试(红绿色盲)

Sim Daltonism也可以用来做上面的事。不仅适用于PS,整个OS系统都适用,无论光标停留在什么地方,都能提供一个大小可调的悬浮窗来过滤。

mxtt2016080750

休息一下,未完待续。期待第四章喔

pixel20160803131

欢迎关注译者微信公众号:UIBANG

uibangqr

译文地址:uik.me

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量160万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/pixel-perfect-precision-usability

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里