关注色盲人群

1,468 views
1,381 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,468
On SlideShare
0
From Embeds
0
Number of Embeds
228
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

关注色盲人群

  1. 1. 设计同理心 —— 关注色盲人群<br />
  2. 2. 什么是色盲<br /><ul><li>色盲也称“色觉辨认障碍”,与视神经和脑的病变有关
  3. 3. 全球人数约8.5%(男性有8%,女性约0.5%)
  4. 4. 大部分的色盲为部分色盲,只有仅少数的色盲为全色盲。
  5. 5. 轻度的色觉异常称为色弱</li></li></ul><li>色盲产生原因<br /><ul><li>三种能辨色(蓝、绿、红)的 椎状细胞
  6. 6. 色盲可分为先天性色盲和后天性色盲
  7. 7. 先天性色盲多为红绿色盲</li></li></ul><li>三种锥状细胞<br />
  8. 8. 红绿色盲<br /><ul><li>红绿色盲症又称道尔顿症
  9. 9. 男性多于女性,这是因为红绿色盲是X染色体隐性遗传病</li></li></ul><li>蓝绿色盲,全色盲<br /><ul><li>蓝黄色盲更准确的来说应该是蓝绿色盲,他们没办法挑选熟香蕉
  10. 10. 全色盲是指眼球中椎状细胞缺少,对于亮度非常敏感</li></li></ul><li>他们眼中的世界<br />
  11. 11. 他们眼中的世界<br />
  12. 12. 他们眼中的WEB<br />
  13. 13. 他们眼中的WEB<br />
  14. 14. 他们眼中的WEB<br />
  15. 15. 他们眼中的WEB<br />
  16. 16. 小实验<br />
  17. 17. 一些Tips<br />
  18. 18. 一些规则<br /><ul><li>物体尽可能越大越好
  19. 19. 避免让用户识别或比较颜色
  20. 20. 不是每个人都有19寸显示器。在低配的显示器下颜色会色偏
  21. 21. 考虑在主设计之外提供特殊的色盲模式</li></li></ul><li>一些案例<br />问题:<br /><ul><li>很难表别,造成混淆颜色
  22. 22. 很难比较,色彩组合的感觉很弱</li></li></ul><li>一些案例<br />Twitter<br />用户可以通过调整使用的颜色外观<br />
  23. 23. 一些案例<br />微软<br />
  24. 24. 一些案例<br />改进方案一:提供鼠标悬停颜色命名<br />
  25. 25. 一些案例<br />改进方案二:显示所选择的颜色名称<br />
  26. 26. 一些案例<br />改进方案三:提供预先选定的颜色选择<br />
  27. 27. 一些案例<br />好例子<br />
  28. 28. 一些案例<br />状态图标<br /><ul><li>红色和绿色用在同一页上
  29. 29. 分隔的图标没有对比
  30. 30. 相同的颜色图标在每个不同的背景颜色下看起来不同。
  31. 31. 形状差别很微小的图标很难辨识</li></li></ul><li>一些案例<br />MSNMensenger9.0<br />
  32. 32. 一些案例<br />Cool-Prices<br />
  33. 33. 一些案例<br />方案一:使用说明操作或状态图形图标<br />方案二:使用不同的形状<br />方案三:提供鼠标悬停图标解释<br />
  34. 34. 一些案例<br />方案四:使用很容易区分的颜色<br />
  35. 35. 一些案例<br />曲线图(linechart)<br /><ul><li>没有办法在曲线上直接显示所代表的类别
  36. 36. 多颜色曲线相匹配很容易眼花缭乱,形成干扰</li></li></ul><li>一些案例<br />Wikipedia<br />英国广播电视收视率<br />
  37. 37. 一些案例<br />解决方案一:并入标题<br />
  38. 38. 一些案例<br />解决方案二:鼠标悬停<br />
  39. 39. 一些案例<br />解决方案三:使用不同的形状和图标<br />
  40. 40. 一些案例<br />饼图(Piechart)<br />
  41. 41. 一些案例<br />GoogleAnalytics<br />
  42. 42. 一些案例<br />解决方案一:使用便于区分的颜色<br />
  43. 43. 一些案例<br />解决方案二:建立注释和图表的联系<br />
  44. 44. 一些案例<br />UE平台<br />
  45. 45. 一些案例<br />解决方案四:考虑使用其他的图表类型<br />
  46. 46. 参考阅读<br /><ul><li>瘾科技——《你是色弱么?》</li></ul>http://cn.engadget.com/2009/05/13/are-you-color-blindness/<br /><ul><li>Color Blind Web Page Filter
  47. 47. Wikipediahttp://zh.wikipedia.org/wiki/色盲
  48. 48. Color Theory for the Color-Blind</li></ul>http://www.digital-web.com/articles/color_theory_for_the_colorblind/<br />http://wearecolorblind.com/<br />

×