助你轻松做好无障碍的15个UI设计工具推

—为什么要在设计过程中考虑到无障碍?关于无障碍设计的重要性,我已经在这篇文章、这篇文章、和这个讲座等等讲过很多次了,相信大家都不想再听我唠叨,但为了照顾新读者,还是重申一下最重要的几点:无障碍设计对所有人都更友善

不只是残障人士,每个人每天都会遇到很多残障瞬间,比如:

在户外用手机、阳光很强看不清,符合无障碍标准的高清晰度文字就更容易阅读

在颠簸的地铁上用手机会手抖,那么符合标准的大尺寸按钮就不容易误触。

越早做无障碍,工作就越轻松如果等到整个产品都开发完毕、再去做无障碍测试,那时发现问题就为时已晚了。在策划和设计阶段就考虑好无障碍适配,是最省时省力的。互联网产品被现代人高度依赖、应当有服务所有人的社会责任引用VictorPineda(城市规划师、无障碍权益运动人士)的一段话:你设计的工具,会直接决定我能做出多少贡献。请你移除那些障碍,让我能够以我的才华回报社会。你能改变游戏的规则,让这个游戏中有我、有我的才华。VictorPineda访谈:希望设计师们做出能解锁人类潜力的设计,这不只会让那个软件或者学校对更多人来讲更加实用,它(也)能改变那些人们、因此改变社会

很多设计师问我,"我没有时间做无障碍怎么办?"、"老板觉得无障碍改善太费事了不支持,怎么办?",但其实在设计过程中运用一些小工具,做好无障碍友善的设计一点也不费时,也压根不需要专门找老板汇报批准哒~!

下面分享一些我自己平时常用的宝藏工具和工作流程,望广泛扩散~

—检查色彩对比度

色彩对比度,指的是前景中文字/图片的颜色和背景颜色之间的对比度,简单来说就是背景越淡、前景越深,内容的清晰度就越高,反之亦然。把色彩对比度量化的话,可以计算出比例,最低1:1(黑底黑字)、最高21:1(白底黑字)。

最权威的互联网无障碍规范—WCAGAA规定,所有重要内容的色彩对比度需要达到4.5:1或以上(字号大于18号时达到3:1或以上),才算拥有较好的可读性。

白底黑字(对比度21:1)符合标准白底深灰字(5.74:1)符合标准白底浅灰字(1.35:1)不符合标准

色彩对比度是设计师最经常踩雷的无障碍规范。很多我们认为“看得清”的设计,其实只是“一个视力良好的年轻人、坐在光线良好的办公室里、使用高质量的显示器的时候看得清”而已。

在设计过程中使用色彩对比度检查工具,可以快速查询你的配色是否符合规范、及时修正。

#1:Stark

个人的最爱,在设计软件里选中两个图层就能快速计算出色彩对比度、告诉你是否负责无障碍标准。

不达标的时候,它还会推荐最接近当前颜色并符合标准的色彩建议、一键替换,非常方便(这个功能只能免费用3次,之后需要订阅)。

Stark也可以生成不同色盲情况的预览,帮助你挑选色盲友善的配色。




转载请注明:http://www.aierlanlan.com/tzrz/751.html