


下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、编辑导语:随着互联网的发展,更多人会使用电子产品获取信息;很多产品开始没有意识障碍群体庞大的用户量,往往到了使用环节才出现问题,所以信息无障碍功能已经成为了产品必要的考虑环节;本文作者分享了关于信息无障碍的研究与应用,我们一起来看一下。信息无障碍,是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息和利用信息。随着互联网覆盖越来越广,对于身体有局限的群体而言,更加迫切通过互联网获取信息,而这就需要互联网产品进行信息无障碍的优化。在我国其受益人群至少包括:8500多万残障人士,2 亿多 60岁以上的老年人,数量庞大;率先考虑信息无障碍能为产品增加优势而带来更多用户。如今智能手机掀起了一场无
2、障碍辅助工具的革命,而站在这个关键点的互联网设计师,也要开始行动起来,先从以下这几个容易实现的事情开始着手进行无障碍的优化吧。对视障用户来说,是用听取读屏语音来了解你设计的界面信息的。读屏软件就像他们了解互联网世界的眼睛,它的原理是直接读出界面里的文字,如果icon 按钮未加无障碍标签读屏会读为 “无法发音” ,那么视障者就无法获取这些信息,自然也就无法使用你设计的功能。解决的办法是:并且最好由设计师进行语义的标注,因为设计师才是对页面里图形应用最了解的人。避免出现 搜索”被写成 放大镜”、或者是“searchBtn_12交类的情 况。颜色可以用来区分信息数据的类别和维度,也可以帮助传达情绪等
3、重要信息;然而,世界上有超过8%的男性和 0.4%的女性都被色觉障碍的问题困扰;我们通常笼统的称这类人群为 “色盲” ,他们是典型的识别颜色有问题的群体。“色彩 ”的目标是 “易于感知 ”,指的是互联网产品的内容信息的色彩对任何人来说,都应该拥有足够高的辨识度和舒适度,我从以下 4 个方向进行介绍。色盲人群设计师在进行设计配色时应时刻自测,避免明度相似的橙黄绿两两配色和明度相似的红绿配色,因为这样的配色势必会造成色盲用户的可读性问题;并且,红色在红绿色盲眼中并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深,而暗红色则几乎接近黑色;因此色盲人士很难分辨出文章内的深红色的强调字,从而遗漏关键
4、信息(设计时,可利用此插件模拟色盲眼中的颜色:Color Oracle)。文化差异因为色彩在不同国家文化中代表不同含义,所以对于国际用户来说也是存在障碍的;在西方文化里,红色通常用于表示消极趋势,而绿色则表示积极趋势,但在东方文化中却正相反。特殊群体临床医学研究表明对于部分自闭症患者来说,高饱和高对比度的颜色,甚至只是黄色都会让他们感到不舒服和不安,因此在自闭症康复中心是不会出现过于对比刺激的颜色的。另外,老年群体随着年龄的增长,晶状体变黄变浑浊,会选择性的吸收蓝光,从而导致老年人对蓝色的鉴别能力下降明显;如果你的主流用户是老年 人,请尽量避免将蓝色运用到重要的按键中去。文本对比度与可读性息息
5、相关,它测量的文本颜色和背景色之间的明度差。WCAG AA对于文本对比度的规范是:4.5:1,若字号够大(18pt,或粗 体14pt)时,标准可降到3:1;如果满足4.5:1这个标准会让你的页面视觉看起 来不那么优雅,可以尝试局部加强可视性的方法:关于可读性其他需要注意的点:尽量不要在图片上叠加文字,除非你能保证图片背景颜色单一且对比度足够高。Material Design设计规范建议,需要淡淡的遮罩确保上层文字的可读性;并且不建议极高对比度的文本,因为这样会使一部分视障者看到的字旋转模 糊。颜色是数据可视化中最常用的视觉变量之一;但是对于无法辨别颜色的用户,如果颜色作为的唯一的提示信息,他们
6、可能将无法理解你传达的信息。那么有什么改善的方法呢 ?不让颜色成为唯一的视觉变量除颜色外,我们可以追加图标、纹理或者文字来加以标注。色盲模式Trello 作为一款工具产品,在标注信息时,提供色盲模式可打开和关闭,并用不同纹理加以区别,色盲友好模式是一个很好的范例,它可以有效帮助色 盲,又不会妨碍非色盲用户。以明度饱和度为度量虽然色盲人士对色相的辨识能力较弱,但却对明度、饱和度非常敏感。我们可以使用明度或饱和度区分信息。看这个例子:传统热力图习惯用暖色代表热力高冷色代表热力低, Google Analaytics 的热力图采用深蓝色显示热度高的时段、浅蓝色显示热度低的时段,简单有效。控件可以是按
7、钮、链接、输入框或任何带有事件监听器的 HTML 元素,控 件太小或彼此太靠近可能会给用户带来糟糕的体验问题。比如对于无法用指尖精确定位的用户(有颤抖疾病的用户),或因年龄而导致灵活性降低的老年用户,都会难以点击过小控件。为了给用户足够的间距来准确选择控件,Material Design建议至少48 M8dp, iOS设计系统将目标热区尺寸最小值定为44 x 44pt,而WCAG对WEB的规范则建议至少44M4px。一个控件可以在视觉上是24 x 24px,但是在所有边上都会有一个额外的填 充使它达到44必4px;并且太靠近的控件可能会因误点击而带来挫败感,所以 同时还建议控件之间的空间足够远
8、以减少误触。Microsoft给pc的建议是至少有 8Px的间距,而 Material Design推荐的控件 至少间隔8dp。我们可根据以上规范来审视自己设计的控件。有视觉障碍的用户可能会把字号调得很大,你需要保证你的设计在大字号的情况下内容不会溢出或排版错乱,做设计的时候,可以使用 2 倍以上的字体测试你的设计。在互联网早期,设计了字号在 9-14px之间的网页,如今已与20年前不同,浏览器已经可以在任何尺寸设备上使用,小到智能手表大到 4K 荧幕,我们不能再使用固定的字号来设计产品了;字号应该与设计本身一样具有响应性,例如可以允许用户自定义字号、行高或字间距等以达到舒适的阅读水平。文字作
9、为传达信息的重要载体,对于许多用户来说,装饰字体或草书字体都是比较难阅读的;且用过细的、过小的、斜体和全大写文本,也会降低识别度。有效的动画可以给页面带来生命感,但如果滥用动效不仅会分散用户注意力,严重的话对某些用户来说来说可能是致命的(光敏性癫痫的临床诱因之一就是闪光图像的刺激)。1997年的一天,日本电视台正在播放精灵宝可梦第38集 “电脑战士 3D龙 ”,但就在这天晚上发生了 600 多名儿童昏倒在家中集体送医事件,轰动了动画界,任天堂的股价也随之大跌。原来,为了达到震撼效果, 3D 龙的背景运用了“蓝-红-蓝”的快速闪烁来表现爆炸,这样高频率的闪烁刺激了孩子们脆弱的眼睛,导致他们集体患上了急性光敏症;也因为这件事日本开始着手对动画片的制作制定规范; Twitter 在2019年为了保护对闪烁图像敏感的人员安全,也采取了禁用 APNG 动图格式的措施。另外 WCAG 2.3.3 官方说明,一些用户会因滚动页面的动效(例如缓动和视差滚动)而触发大脑前庭疾病从而产生头晕的症状,所以 iOS、 Mac、Windows 10都具有关闭动效的功能。
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 集中培训的收获与体会
- 多元化备考CFA试题及答案
- 英语 第四册(五年制高职)3教学实施建议 Unit3 AI in the Workplace
- 杀菌设备操作程序
- 特许金融分析师考试市场趋势分析题及答案
- 餐饮业网络安全规定
- 不容错过的2024年CFA试题及答案
- 高校师德教育培训
- 食药安全小知识
- 就餐人数限制政策
- 招标代理机构选取突发情况应急处理预案
- 伦理审查表(一式三份)
- HCCDP 云迁移认证理论题库
- (完整版)六宫格数独100题
- 摄影基础入门—摄影教学课件ppt课件(带内容)
- 苏教版五年级劳动与技术下册《7挂钩关注“星星的孩子”》集体备课教案
- 宿舍卫生检查评分表
- 幻想水浒传2怪物掉落
- 国内外城市流动摊贩研究综合述评
- 康复治疗师考试历年真题附带答案
- 检验科停电应急预案
评论
0/150
提交评论