不要仅为85%的用户设计:关注无*杓

发布时间:2021-10-16 03:00:56

?点击关注异步图书,置顶公众号



每天与你分享 IT好书 技术干货 职场知识?



?作为设计师,我们更倾向于设计是以解决问题为基础的。尽管我们会因为博物馆没有规划轮椅坡道而毫不犹豫地抗议,但是对界面上的一些明显缺陷却视而不见,尤其是糟糕的视觉设计,可能会成为良好用户体验的*>」芤恍┤顺て谝岳匆恢敝铝τ诎镏屑踩擞没视φ庵智榭觯颐且丫锍晒彩叮愦笥没诖攵杂没枨蠼杏呕牟贰


世界卫生组织(WHO)统计,全球人口中视力受损的为4%,弱视为4%,盲人为0.6%。 如果你的产品忽视了无*杓疲谐5亿人无法使用你的产品。 2017年,无*肪秤戳斯丶淖鄣恪U獠糠止楣τ谒咚-自2015年以来,已有超过240家美国企业因为网站的可访问性被起诉(华尔街日报,付费专区),多元化和包容性已成为许多大公司优先考虑的事情。如果公司希望产品为广泛的受众提供服务,那么作为一名设计师,你应该关心你的用户,在设计中有同理心和人性化。


可视化界面是深入无*杓频囊桓銮腥氲恪 本文中,我们将讨论一些最常见的视觉*ㄓ绕涫巧ぃ胖靥致廴绾挝⒌鞴ぷ髁鞒毯筒方缑妫员Vに杏没Ф寄苷J褂谩


1. 无*杓朴跋焖杏没

一个无*牟凡唤鼋鲈旄S8.6%的有视觉*挠没АP矶嗤竞陀τ贸绦蚬诟丛樱扛鋈硕蓟峄蚨嗷蛏俚赜龅揭恍┙缑嫖侍猓旱蔽颐瞧1沟氖焙颍坏蔽颐潜孔镜爻⑹员咦呗繁咴亩潦只畔⒌氖焙颍坏蔽颐峭砩厦凶叛劬雌聊坏氖焙颍坏蔽颐且皇帜米殴何锢海皇帜米攀只氖焙颉


即使是具有标准视力的大部分人对色彩也有不同的感知方式,所以,无*圆唤鼋龉睾跏恿κ芩鸬娜巳骸 每个人都有身体和精神上的局限,我们只需在工作中想得更周到一些就可以有效地帮助他们。然而无*杓朴惺币馕蹲旁谧罴咽导臀拚*灾溲扒*衡,创造一个两者兼顾的产品。


2. 视觉*绾斡跋焯逖

为了创造一个无*牟罚颐鞘紫刃枰私馐恿κ芩鸬娜巳绾慰词挛铩


根据世界卫生组织(WHO)统计,屈光不正(*视、远视、散光和老视)占视力受损总人数的43%,白内障占33%,青光眼占2%,仅色盲一项就占全球总人数的4.5%,严重影响了用户对设计的体验。


让我们来看看这些问题是如何体现的,如图1所示。



?图1 对某些色盲用户而言,红绿色的用户界面信息传达不佳


主要的色盲类型有以下3种。
(1)单色视觉(全色盲)
虽然并不常见,但是全色盲的人看不到任何颜色。例如,那些只依靠细微颜色渐变来区分元素的界面的人,对于他们来说是非常难以识别的,操作按钮可能都很难找到。


(2)双色视觉(双色视觉)
对于只能看见两种颜色的人来说,色彩缤纷的调色板看上去是由同一种颜色的不同色调组成的。 如果APP通过颜色来表示不同的标签或频道,那么,这类用户不一定能够从该设计中受益。


(3)异常三色视觉(色觉异常)
色觉异常的人,是指眼睛里3种视锥细胞中的一种出现了不同程度的损伤。色觉异常涵盖的范围很广,轻者可能色觉接*正常,严重的话也可能是双色视觉。在你的logo或界面设计中,如果颜色是主要因素,那么有异常三色视觉的用户可能会欣赏不了,尤其是当你的按钮和其他界面元素用了相同的字体和图标时,用户体验会更差。


问题的关键是你不能假设用户都会看到同样的事物。 那么,我们如何优化设计来满足每个人的体验呢?


3. 颜色只是个工具,并非万能钥匙

颜色不仅在很大程度上决定了界面外观,而且在组织内容、定义层次结构、传达界面行为和流程中也起到了重要作用。 这是一个强大的设计工具,但为了有效地使用它,你需要了解其功能和限制。下面我们来讨论一些关键的规则。


? 在选择和使用颜色时,应考虑色盲用户,我们在后面的内容中会展示。
? 避免仅用颜色来传达重要信息??使用图标,最好是文本来阐释颜色信息。
? 确保文字链接从周围的内容中脱颖而出。


由于视觉*没ё畛<睦咽鞘侗鹧丈奶囟ㄉ鳎虼擞Ω酶嗟乩枚员榷壤辞衷兀蛊淝逦锥粒缤2所示。



?图2 深色和浅色在一起的对比度较高


图3为高对比度颜色提供了基本的指南。下半部分的深色与*氩糠值那成纬上拭鞫员龋苊馐褂孟掳氩糠值慕锨逞丈蜕*氩糠值慕仙钛丈亩员取



?图3 深色和浅色提供强烈的对比,而两种深色搭配会混在一起


如果色环中的邻*色在亮度上没有差别,那么请避免使用两者的对比色,如图4所示。



?图4 互补色对比强烈,而邻*色对比差异较小


不要单靠颜色来传达信息。缺乏对颜色的描述可能会误导用户,耐克的搜索栏就是一个例子,如图5所示。应该在颜色板上添加颜色名来帮助用户理解颜色,用户就无需一遍遍地使用鼠标悬停来确认自己选对了颜色。



?


图5 颜色板可能会让网上购物的顾客感到困惑


避免单独使用颜色来指示用户如何操作或者要传达的信息,而是将颜色作为用户的辅助信息。


你在设计上使用的颜色越多,混淆色调的概率就越大。因此要限制调色板。下面的15色调色板为常见的色盲类型提供了良好的辨别方案。患有第三色盲的人不能区分如图6中的标有圆点(●)的颜色搭配以及标有三角形(?)的颜色搭配。



?图6 色盲人群无法区分某些颜色


使用纹理和图案来强化对比。例如,色盲用户可能很难识别图形和图表。在这种情况下,可以使用图案来增强对比,可能的话,也可以直接使用文字说明。当然,是否用不同颜色还取决于你所显示的数据系列,如图7所示。



?图7 纹理可以更好地区分颜色


按钮的目的是引起用户注意并直接操作,在设计按钮时请避免使用容易给色盲用户造成混淆的颜色组合(如红色和绿色,蓝色和黄色)。


此外,请确保这些元素包含清晰可见的文字或图标,使目标明确,如图8所示。



?图8 操作按钮更不应该通过容易混淆的颜色组合来误导用户


4. 创建无*腢I设计

将你的设计去色处理,是一个很好的功能性测试。如果完全依赖于颜色的界面,在去色之后逻辑上的问题会被放大,如图9所示。例如,只用颜色的话,去色后界面上各元素的易用性可能会很差,但如果使用形状、颜色和对比来区分关键元素,界面就会非常清晰。



?图9 界面去色可以暴露设计的缺陷


如果使用细微的阴影来创造对比度,就可以保持品牌颜色的一致性和品牌辨识度,如图10所示。



?图10 想要保持品牌颜色的一致性,不妨尝试用阴影来提升对比度


与其把力气花在设计花哨不切实际的界面上,不如设计美观功能实用的用户界面。用不同的颜色来标识悬停(用于非触屏设备)、点击、激活和错误状态,并用图标来辅助颜色和文本,使用标准的组件或者常规的设计样式可以帮我们做到这些。图11是一个不切实际的UI示例,去色后的界面只剩下一连串文字。



?图11 谨防严重依赖红色文字作为唤起动作的标识


对于网站内容,万维网联盟(W3C)的《Web内容无*改2.0(WCAG 2.0)》详细介绍了使网站更易用的建议。级别A是最低要求,级别AA要求音频和视频配有字幕,级别AAA是无*罡呒侗鸬钠兰兑蟆


许多元素都很简单:为图片使用替代文本,已验证的会话过期后仍然保留表单信息。 WCAG 2.0提出的最重要但基本的建议之一是对比度,尤其是关于文本与背景颜色的对比度,如图12所示。



?图12 正如Web无*蠥AA级别的建议,文字和背景颜色的强对比有利于用户识别


5. “但Dribbble①不喜欢!”

作为设计师,我们希望做出最有创意的解决方案,对吧?


虽然,无*杓频娜坊嵩黾右恍┥杓粕系南拗疲阋丫诟髦痔蹩蛳拗浦薪猩杓屏耍庑┫拗迫繁A瞬返墓δ苄裕拚*皇瞧渲械囊惶跸拗啤


无*杓撇唤鼋稣攵杂惺泳跽*娜耍扛鋈硕际芤嬗谖拚*哪谌荨N蘼凵杓剖κ欠裼懈呱械纳竺滥勘辏庑┥杓贫脊菇艘桓鲆怨δ芪〉拿篮檬澜纭N拚*杓撇唤鲋苯樱叶杂谀恪⒛愕睦*濉⒛愕目突Ш湍愕挠没б埠苤匾S辛宋拚*幕≈叮约拔颐橇谐隼吹氖导侗荆阍贒ribbble上的作品可能会被广泛流传。


6. 设计师实用工具

了解别人如何看待你的设计是为每个人提供最佳体验的关键。幸运的是,有一些简单的方法可以帮你利用WCAG 2.0确保自己的设计无*


(1)Sketch

Stark是一个出色的Sketch插件,提供各种类型的色盲窗口模拟效果。它还提供了两个选定图层之间的对比率。


建议使用Sketch自带的Symbol②功能来创建UI元素,这样可以很方便地检查所有变量及其状态,不然很容易忘记在哪些地方用了什么,同一元素在不同地方使用的时候也不便于同步。


(2)Photoshop

Photoshop自带颜色色盲检查工具,如图13所示。



?图13 使用Photoshop的校样设置来模拟色盲


(3) 网上工具

? Tanaguru
用这个颜色工具取两个颜色值,它会计算出这两个颜色之间的对比度,也可以给出与所输入颜色相*的颜色和对比度,提高了无*浴


? Colorblind Web Page Filter 色盲网页滤镜
该工具可以在网页上模拟不同类型的色盲看到的状态。


? NoCoffee
这个“视觉模拟器”插件可以识别网页上的问题,如敏感度低、对比度低和颜色依赖。


(4)IOS应用程序

Felipe Elioenay开发的Colorblindness App③是我们的最爱之一。用户将手机摄像头对准日常物体,点击想要了解的部分,它就会描述该物体的颜色,用户界面超级简单。


(5)其他工具

Color Oracle是一个mac OS的实用程序,它可以模拟各种类型色盲所看到的屏幕。


7. 自己编写无*逖椋焊⒄叩奶崾

好的设计和好的用户体验可以在很大程度上提升网站无*裕惺蔽颐腔剐枰徊浇⒁材扇肟悸欠段А


(1)语义HTML

像屏幕阅读软件这样的辅助技术需要编写符合标准的语义HTML,以提高无*浴


HTML5元素是语义HTML,它提供了页面的结构。使用屏幕阅读器的盲人需要在页面中做到选择性阅读,而不是从头到尾听完整个页面。适当地使用标题级别(h1~h6)可以更容易地满足这一需求,用户可以听所有的章节标题,然后有选择性地阅读他们感兴趣的部分。


保持内容和样式的分离也是非常重要的。HTML用于内容和结构,CSS用于表现和设计样式。


(2)图片

对于具有视觉*挠没В计闲枰由咸婊恍缘谋昵├唇馐屯计惨渖媳晏夂捅昵├唇馐腿笔У挠锞场N计砑诱庑┬畔⑹保Σ嘀孛枋銎涔δ堋@纾巴计北取巴计备杏谩


(3)视频和音频

使用HTML5视频和音频标签可以让浏览器知道哪里有什么内容,并默认使用系统播放界面,系统自带的播放界面对用户来说既熟悉又无*


(4)表单

对于使用屏幕阅读器的用户来说,如果你不能确保他们能够访问填写表单所需要的所有信息,那么他们填写表单时会有问题。


使用屏幕阅读器的人需要知道每个字段应该输入什么内容,因为他们无法看到字段旁边的标签。 现有的解决方案是标签元素,它将标签文本与表单字段相关联。


HTML5有一个新功能是指定输入字段的数据类型。通过标记预期的数据类型,浏览器将为该数据类型提供最佳的输入类型(例如,数字对应数字键盘或日期对应日期选择器)。


(5)iOS和Android

苹果公司一直以来都支持无*杓疲缢南允舅醴殴δ堋T诠ゼ改辏还窘徊降胤⒄沽苏庖坏悖玦OS中动态字体(见图14)、自动布局以及UI堆栈视图等特性结合在一起,形成了高度响应式UI的基础,并且所有的开发人员都能轻松地使用,如图14所示。



?图14 苹果公司在最新的全球开发者大会上推出了动态字体


在2017年全球开发者大会上,苹果公司鼓励更多的第三方开发者支持动态字体;iOS11支持自定义字体,以满足用户对动态字体④大小的偏好。


Android有自己的响应式布局和动态字体解决方案。你可以指定以dp(密度独立像素)和sp(可缩放像素)为单位的度量,根据用户的设置自动进行调整。


8. 无*杓谱罴焉杓凭

? 色彩对比是一种强大的设计工具,也是AAA级无*杓频闹е


? 不要仅仅依靠色彩和图标,文本标签会明确告知用户他们看到的选项。


? 填充的图标比线型图标更清晰(苹果公司也这么认为)。如果一定要用线性图标的话,粗线条比细线条更容易识别。


? 用不同的填充图案来增强对比给人一种质地感,也可以帮助用户区分不同的元素。


? 点击区域周围要有足够的留白,以便于用户能够定位和点击它们。


? 可识别的剪影图标效果好于圆圈中带符号的图标。


? 语言要精确,例如在按钮上的动词要让用户明确知道他们可以点击“继续”,而不是笼统的“是”和“否”选项。


? 字母基本高度较小的字体更容易阅读(Brandon Grotesque字体是一个很好的例子),但也要避免使用花体字(比如Lobster字体)。


? 确保文本链接明显可见,例如使用下画线将文本链接和普通文本区分开。


? 确保你的JavaScript和CSS技术不会屏蔽高亮显示。很多用户会高亮显示部分文本来增加对比度。


? 熟悉性和一致性使用户有一个良好的开端。我们应该知道什么时候使用规范的设计样式、常见的交互模式以及原生组件。


? 图标与按钮应方便点击,但不必过大。将它们放在低对比度的容器中,或者增大它们周围的留白,以便于视觉*衡并且方便点击。


? Random A11Y凝聚了一群人的努力,它致力于创建对比度高且好看的色彩搭配。


??????????


本文来源于异步社区,作品《不要仅为85%的用户设计:关注无*杓啤罚淳谌ú坏米亍


?


延伸推荐


2018年2月新书


2018年1月重磅新书


小学生开始学Python,最接*AI的编程语言:安利一波Python书单


政策升温:大家都在学大数据,一大波好书推荐


8本新书,送出一本你喜欢的


AI经典书单| 入门人工智能该读哪些书????



?长按二维码,可以关注我们哟


每天与你分享IT好文。




在“异步图书”后台回复“关注”,即可免费获得2000门在线视频课程;推荐朋友关注根据提示获取赠书链接,免费得异步图书一本。赶紧来参加哦!


点击阅读原文,查看更多内容


阅读原文



相关文档

  • Nginx报502错误,日志connect() failed (111: Connection refused) while connecting to upstream的个人有效解决方案
  • 计算机光驱和打印机常见词汇
  • 读《此地无银三百两》有感
  • 以假如风有颜色为题的作文
  • wps怎么把链接输入密码
  • 结婚不拿结婚证怎么办
  • 2020销售人员激励口号大全
  • 如何吃自助不伤胃及养胃秘诀
  • 一碗阳春面的做法
  • 女人结婚一个月想离婚怎么办
  • 青春励志广播稿件500字
  • 申请新加坡出国留学流程
  • ESXi主机遗忘密码重置密码
  • 物联网的几大开源操作系统
  • AI 换脸?除了
  • 四督四查标语
  • 珍惜青春的优秀作文6篇
  • 牛客高级项目课(仿牛客网)笔记
  • Java_scaner用法
  • 皮秒需要做几次才有效皮秒祛斑几次能有效果
  • 在阿姨家玩的一天
  • windows7 64位机上安装配置CUDA7.5(或8.0)+cudnn5.0操作步骤
  • Jmeter分布式部署测试-----多台电脑做压力性能测试
  • 军训会操的小学作文
  • 大学生在商贸局的实习报告范文
  • 《草房子》人物简介重赏
  • 新浪微博客户端怎么扫描二维码?微博二维码扫描教程
  • 2020年山西运城永济市公立医院招聘公告93人
  • 机械表表把断了怎么办
  • 晨会励志故事
  • 猜你喜欢

  • 2014版概论第六章社会主义本质和建设中国特色社会主义总任务
  • 2018年春沪科版八年级物理导学课件10.第四节 做功的快慢
  • 精选ppt模板课件_中国风端午节活动策划PPT课件
  • 续写《鹬蚌相争》_续写作文300字
  • 为什么老人喜欢抢购老年人抢购是喜欢便宜吗
  • 在初中田径体育教学中实施愉快教学的建议
  • Transferrable Prototypical Networks for Unsupervised Domain Adaptation读书笔记
  • 江苏先开逃?氨赣邢薰?鲸企业信用报告)- 天眼查
  • 坚持伴我前行作文1000字
  • 电工实*报告范本册3000字3篇
  • 20XX年市人大机关扶贫工作计划经典范文
  • 伊川县瑞杰不锈钢门窗加工部企业信息报告-天眼查
  • 新设融资性担保公司股东资格的有关规定
  • 导学教程2017届高三英语二轮复*第二部分语法知识讲练篇专题二十三三大从句
  • 哪些食物含铁
  • 2018年高考科语文——习题 考点滚动练十二:基础知识+论述类+小说+文言文+作文 Word版含答案
  • 2019年小学四年级作文-雨【秋天】
  • 2019年员工周工作总结及工作计划表1.0-word范文 (1页)
  • 父母的爱作文5篇
  • 江苏省2019高考数学二轮复*专题五函数、不等式与导数5.2小题考法—不等式课件
  • 2019课题二:乘法结合律和简便算法精品教育.doc.doc
  • 我校应用型制药工程专业实践教学体系的探索与构建
  • 河南省鹤壁市淇滨高级中学2016-2017学年高一6月月考数学试题(无答案)
  • 为灾区小朋友写的一封信
  • 三招缓解开车族腰背痛
  • 幼儿园中班数学教案《变成一样多》含反思
  • 2019年创建市级安全社区工作计划
  • 俯拾味道新川菜(一).doc
  • 【最新】公司内部管理制度-推荐word版 (18页)
  • 抖空竹_1_
  • 浅谈怎样培养中学生英语交际能力
  • 描写青年外貌的句子
  • 【精编范文】关于描写春景作文600字-实用word文档 (1页)
  • 高考作文指导:如何准备高考作文材料
  • 2018年党委工作计划表格与2018年党委工作计划表格1汇编.doc
  • 模块六专题1教学中如何把握“四基”的拓展性阅读
  • 广西农村土地调查完成城镇地籍调查正式启动
  • 我最敬佩的一个人450字
  • 2018年青春与责任演讲稿-易修改word版 (2页)
  • 【精选】高中政治专题7.2收入分配与社会公*试题含解析新人教版必修1
  • 汽车解码器使用性能的研究
  • 2020七年级下册英语作业本答案(外研版)
  • 电脑版