Facebook选择蓝色,只因扎克伯格是色盲

用户头像
上海/艺术工作者/10年前/536浏览
Facebook选择蓝色,只因扎克伯格是色盲

<p>眼前的红不是红,你说的绿是什么绿……

<p>

<p>

<p>世界上大概有8%到10%的男性以及0.5%的女性患有不同程度的色盲。这意味着,在你的网站的每1

眼前的红不是红,你说的绿是什么绿……



世界上大概有8%到10%的男性以及0.5%的女性患有不同程度的色盲。这意味着,在你的网站的每100个访客之中,可能就有至少10个人对于色彩的感知与你不同。那么,怎么做才能向所有的访客保证视觉上的良好体验,减小甚至消除色盲患者在色彩感知上的偏差呢?


6cb556cadf8e32f875520fb386d5.jpg


一直以来,关于如何更好地针对色盲患者进行无障碍化设计存在着很多相互冲突的观点。在这里,我们将列出一些在优化色盲用户色彩体验的设计中需要考虑到的重要事项。


 

色盲是什么


色盲是无法分辨自然色谱中的某些颜色的状态,同时,由于它的致病因是位于X染色体上的基因突变,所以它的男性患者远多于女性患者。目前存在三种主要的色盲类型:绿色盲,红色盲以及蓝黄色盲。其中,又属绿色盲最常见,红色盲次之,而蓝黄色盲较罕见。下面这张图展示了不同类型色盲患者眼中彩虹的色彩。目前,已经有一些测试(详见下文链接)和范例向我们展示了色盲患者眼中的世界;然而,想要百分之百还原他们所看到的却是不太可能的。


 950a56cadfa032f875520f8b37be.jpg

 



通过设计实现色彩无障碍化


你可能会想:我有必要为那么一小部分用户考虑吗?事实上,从长远来看,为色盲用户做一些特殊的优化设计会使得你的整体设计更为优秀。所以,优秀的网站应该是无障碍的。


d11756cadfaf32f875520f08daa7.jpg


无障碍化设计并不会妨害你的设计的整体美感。以下是当你为色彩无障碍化进行设计时需要关注的五个基本概念:



1.颜色+符号


不应该只依赖于通过颜色来传递信息。


例如,某些色盲患者有可能根本无法注意到红色的报错信息。所以,大可以同时使用颜色和符号来吸引用户的注意。例如,Facebook表单字段的红色警示符号和说明文字。


ce9956cadfbd6ac7252ce69b790a.jpg

 

有趣的事实是:Facebook的Logo以及它为人诟病的蓝色主题实际上是拜创始人马克•扎克伯格所赐——马克是一名红绿色盲患者,对他来说蓝色是最容易分辨的颜色。他曾说过,“蓝色是我生命中最丰富的颜色,我几乎可以看见这世上所有的蓝色。”

 


2.极简主义


在设计网站时避免应用过多的颜色。


ee3856cadfd132f875520ff21d8c.jpg


网站的色彩越简单,对于色盲用户来说越容易使用。极简的设计不仅在当下十分流行,同时也能让你的设计在色彩方面无障碍化。

 


3.形状/文字也可以形成反差效果


活用形状或文字,而不是仅凭各种各样的颜色来突出重点。


对于色弱或色盲的用户来说,他们很难通过颜色来分辨图示,因此,考虑使用多样化的模式会更好。

 

下面是一个绝佳范例。


f84356cadfe56ac7252ce63cb189.jpg



4.使用反差大的色彩


不应仅仅依赖黑白两色来表达抽象的内容,可以挑选更多样、明亮色彩融入你的设计。


例如,当你在设计可点击文本的应用体验时,便可以使用多样化色彩来表现。

以上是一个将抽象概念设计得很好的示例,是综合考虑色盲用户的人性化设计。


e82a56cadff46ac7252ce65abd95.jpg



5.避免糟糕的色彩搭配


色彩搭配是一件需要巧思的事情。


随着色盲对人们生活的影响越来越复杂,我们越来越难以界定在网页设计中哪些颜色的“安全”的。


这里有一些需要尽量避免的组合方案,因为他们对色盲用户来说都是噩梦:


  • 绿色&红色

  • 绿色&棕色

  • 蓝色&紫色

  • 绿色&蓝色

  • 浅绿&黄色

  • 蓝色&灰色

  • 绿色&灰色

  • 绿色&黑色


使用视觉效果模拟器,可以帮助你为设计挑选精妙的颜色组合。

 

如何检验自己是否是色盲或色弱?


很多人在很长一段时间里都不知道自己患有色盲或色弱,甚至直到他人指出问题之前他们都没有意识到色盲已经影响到了他们的生活。


以下是一个常用的检测色盲的图像,你可以试试。(文章末尾能找到相关链接)


242d56cae00b32f875520f374570.jpg




总结


UX设计师应该尽量将页面设计得人性化。


尽管这里没有统一的解决方案,但UX设计师们仍应谨记一些原则:

1.不要仅用色彩来传递信息

2.将色系控制在2至3个

3.使用文本和形状来表达抽象信息

4.使用差异性大的颜色和阴影来突出可点击的文本

5.避免使用例如红配绿、绿配蓝或蓝配灰这样糟糕的色彩组合

 

 

1.石原色盲测验:38项基础测试之后你会得到反馈。

http://www.color-blindness.com/ishihara-38-plates-cvd-test/#prettyPhoto

2.色盲检验:一款由Colorblindor设计的安卓应用,60秒内你就能得到答案。

https://play.google.com/store/apps/details?id=ch.colblindor.colorblindcheck

3.Coblis-色盲测试装置:你会看到不同色盲程度患者眼中同一张图像的不同样子。

http://www.color-blindness.com/coblis-color-blindness-simulator/

4.移动应用:推荐3款主要帮助色盲患者的安卓和iOS应用。

http://www.mobdevapp.com/iphone-and-android-app-developed-to-help-individuals-with-colorblindness/

 



翻译 | 朱婷 、花花

校对 | 心悦

文章推荐 | 王子娟

 


1
举报
|
7
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
水蜜桃和李子的平面水果图案
平面插画情侣/矢量
玄关入门地毯印花图案红地毯
牛奶乳液层次平面平铺平面
城阙凡花
平面男孩喝咖啡插画设计
课程海报,平面素材
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
平面风格黄绿色系花朵装饰
金色颗粒质地的平面
倒计时,海报,平面
平面插画设计女孩喝咖啡
金色颗粒质地的平面
空的平台平面和自然景观
空的平台平面和自然景观
学习,优惠券,平面,海报
城市园林平面布局航拍
牛奶乳液层次梯田平铺平面
平面花卉图案扁平简约无缝拼接插画
金色颗粒质地的平面
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
海底世界插画
平面设计 吊牌设计
“知识宅急送”外卖,快递,平面,海报,素材,教育
金色颗粒质地的平面
你可能喜欢
大家都在看
登录注册