02月11日, 2020 326次
01.考虑有视觉障碍的用户
·视觉障碍是什么?(色盲用户眼中的世界)
·设计解决方案
·典型案例·推荐工具
02.考虑不完美的使用场景·不完美的使用场景有哪些?
·设计解决方案
·典型案例·推荐工具
左边为正常人眼能看到的,右边为色盲能看到的图像。
世界上有约2亿人,超过8%的男性和0.4%的女性都被色觉障碍的问题困扰,他们在识别部分或者全部颜色时有困难。
色盲用户眼中的世界演示:
设计解决方案1 – 多样的视觉变量
避免完全依赖颜色来表达信息,可将颜色、形状、尺寸、注释等视觉变量结合,同时使用。
下图中睁着眼睛的图标代表正常视图,眼睛上一划的图标代表色盲模拟视图。
设计解决方案2 – 安全的配色方案
研究得出一组无障碍配色建议。这组配色针对色盲和非色盲人士都是易辨识的。
设计解决方案3 – 尽量避免的配色
·绿&红
·绿&棕
·蓝&紫
·浅绿&黄
设计解决方案4 – 辅助的交互手段
为了在美观和友好之间权衡,我们也可以采用辅助的交互手段,避免界面中元素太多太过杂乱。
例如仅当悬停到具体位置时,出现对应的信息注释,或者为色盲人士提供单独的色盲模式切换。
推荐工具 1 :利用Photoshop
PS:选择“视图→校样设置→红色盲型/绿色盲型”
推荐工具 2 :Color Oracle
Color Oracle: http://colororacle.org
推荐工具 3 :Colorblind Web Page Filter
Colorblind Web Page Filter https://www.toptal.com/designers/colorfilter
考虑不完美的使用场景
考虑过不完美的使用场景吗?
设计解决方案 1 – WCAG对比度无障碍标准
设计解决方案 2 – 文本用色有足够的对比度
一般文本:白背景上能用的最浅的灰色是#767676
大文本:白背景上能用的最浅的灰色是#959595
推荐工具1
对比度测试:https://leaverou.github.io/contrast-ratio/
经验证,Google在明暗两种背景下的配色是有细微差异的,且都满足WCAG标准。
经验证,iOS在明暗两种背景下的配色,几乎都满足WCAG标准。
经验证,Twitter除了蓝色差一点,几乎都满足WCAG标准。
*以下情况无需考虑对比度哦~
·未激活的部分
·表单字段的占位符
·纯粹的装饰
·文本作为logo的一部分
一些小思考:
并不是要求设计能够被每个人使用,而是至少先认识到用户群体的多样性,将其拓展至一个相对的「能够受益于此设计的最大化用户群体」。希望在设计的过程和结果中减少对用户产生无意识的排除。我们可以以关注主流健全用户为前提,同时有意识地提升设计对于特殊用户群体的适用性。