02月11日, 2020 1,080次
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的一部分
一些小思考：
并不是要求设计能够被每个人使用，而是至少先认识到用户群体的多样性，将其拓展至一个相对的「能够受益于此设计的最大化用户群体」。希望在设计的过程和结果中减少对用户产生无意识的排除。我们可以以关注主流健全用户为前提，同时有意识地提升设计对于特殊用户群体的适用性。
