为Color Blind设计實用原則

Sha
Sha
Feb 23, 2017 · 3 min read

#废话 最近风靡的Pokemon-go,我老公自然是疯玩了起来,但是我发现每每老公没法分清楚那个Poke stop到底是已经转过的还是没转过的,Pokestop有几种状态,范围外的,立方体态,范围内,可旋转奖牌态,还有lure mode下的花瓣状态,这些都很好辨识,唯独已转过和未转过由蓝色和紫色进行区分,这就是老公的痛处了,他是一枚色弱!这个问题是我未考虑过的,然后今后是我设计中必须考虑的部分,不能再让心爱的人受苦!

#实际操作

1.以明度的差异取代色相的差异,设计稿以灰度来看仍需能够识别;

2.辅以形状,材质来增加区分度

3.避免恶意组合:蓝&紫 红橙黄 黄绿 &绿

4.谨慎使用红色作为指示色,对于色盲者,红色就像蓝或深绿,所以不要在黑色上使用红色

Instead of pure dark red (RGB=100%, 0%, 0% or #FF.) , please use vermilion (yellowish red with shorted wavelength: RGB=100%,32%,0% or #FF2000 ), or light red (mixed with white: RGB=100%,8%,8% or #FF1414 ).

5.适合色盲的色板

#趣味知识

Facebook’s logo and notorious blue color scheme was specifically chosen since Mark Zuckerberg is red-green color blind and sees blue the best.“Blue is the richest color for me. I can see all of blue.”

在PS的proof setup中可以选择查看色盲视图

#案例

#参考资料

http://jfly.iam.u-tokyo.ac.jp/color/

http://wearecolorblind.com/

#引申

还是由宝可梦引申而来的,老公告诉我我们收集不到的那只3D龙宝可梦在动画播出时,因为要追求数码的效果,采用红蓝色频闪的效果出场,结果造成六百多名观众癫痫症状送医….

所以,做动态效果,不要频闪,会诱发癫痫症。

    Sha

    Written by

    Sha

    官能创作人

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade