SlideShare une entreprise Scribd logo
1  sur  25
Télécharger pour lire hors ligne
色盲人群

  彩虹有几种颜色

“老师和书本教我彩虹有七种颜色 但我一直只能看见红黄蓝三种 那时还跟很多同学吵过
后来到初三体检时才知道自己是红绿色盲 不知道大家看的彩虹是什么样的?”



  你们有什么苦楚

“就是全班一起体检时,有点尴尬和自卑。而随之而来的是因报考丏业受限而带来的痛苦,和
无奈啊!喜欢的丏业如何报?无路可走啊!只能放弃,选择不喜欢的丏业咯。”


                           色觉检查全攻略 更
 我是色盲,不是色狼                   新背诵办法



         我昨天买了菲士康色盲隐形眼
          镜,忍不住来说两句真心话                 色弱也有梦想
何为色盲
三种原色均不能辨认都称全色盲,辨认仸何一种颜色的能力降低者称色弱,
有一种原色不能辨认都称二色视,主要为红色盲与绿色盲。


色盲的类别
        不能分辨红色,常把绿色视为黄色,紫色看成蓝色,将绿色和蓝色相
 红色盲    混为白色



        不能分辨淡绿色与深红色、紫色与青蓝色、紫红色与灰色,把绿色视
 绿色盲    为灰色戒暗黑色




 蓝黄色盲   蓝黄色混淆不清,对红、绿色可辨




        七彩世界在其眼中是一片灰暗,如同观黑白电视一般,仅有明暗之分,
 全色盲    而无颜色差别



        现实世界在其眼睛中.如同一幅纯真的底片,所有看到的颜色与现实完
 全色反    全相反
色盲的比例




红绿色盲/色弱最普遍,其中绿色弱比例最大




                       绿色弱   绿色色弱有一定能力可以区分红色和绿色
色盲色彩模型


         研究色盲对不同波长的光线的分辨情况。




  根据RGB色彩模型,建立不同色盲类别的色彩模型。
色盲配色




       针对各类色盲色彩模型,研究不同配色对
       色盲的辨识性、功能性,并建立色盲色彩
       系统
针对色盲的设计方法研究

                     开始


先搭配明度           色彩明度配色方案

再搭配色相         普通人     方案一
              色彩模型
色盲用户评价方案
              绿色色盲          色彩
调整设计方案                方案二
              色彩模型          色相
                            配色
              红色色盲
                      方案三   方案
              色彩模型
              蓝色色盲
                      方案N
              色彩模型

                     评价


                     结束
针对色盲的界面设计


       网站设计      明度搭配


                 色相搭配
     数字产品界面设计
                元素形态差异


      游戏界面设计      声标
针对色盲的色彩视界数字化系统


                                 用户界面
 关键技术
                                针对色盲的      色盲色彩转换
 真实色彩与色盲人群所见色彩的映     自主选色模块
                                对比选色模块       模块
  射;

 基于HSV色彩模型的自由选色工具;      面向色盲人群的色彩设计树模块
 面向色盲人群的选色算法;

 色盲人群色彩视界的转换与显示               数据交互与通信模块


                               产品三维设计平台
移动设备界面的特点


      屏幕尺寸     界面元素组件的尺寸、细节…


      设备多样化    分辨率、屏幕尺寸、系统…


     设备处理器限制   速度、动画、声音、电量…


     用户富情境化    光线、心情、繁忙、行走…
移动设备界面的设计

   模块划分


   尺寸设计


  视觉配色设计
移动设备界面的细节设计

  Icon 设计




              界面总体设计
设计流程                        界面区块划分

                           界面元素形态设计

设计过程中需要考虑:                  元素形态设计
 移动设备分辨率、屏幕尺寸、分辨
  密度                       色彩明度配色方案

 移动设备处理器能力         普通人
                           方案一
                    色彩模型
 色盲用户的使用情境                                 动
                    绿色色盲           色彩   声   态
                           方案二
                    色彩模型           色相   标   效
                    红色色盲           配色   设   果
                           方案三     方案   计   设
                    色彩模型
                                            计
                    蓝色色盲
                           方案N
                    色彩模型

                              评价

                              结束
具体细节设计方法

           提供适合色盲用户的学习通道


       依据适合色盲人群的色彩空间设计媒体界面


            面向色盲人群的设计评价


           善用亮度弥补色彩构图的不足
辅助工具介绍

Color Oracle   即时模拟常见的色盲:红色色盲,绿色色盲,和蓝色色盲,但不能模拟各种色弱和全色盲




 Vischeck      可以模拟常见的色盲:红色色盲,绿色色盲,和蓝色色盲,但不能模拟各种色弱和全色盲
辅助工具介绍
 Coblis-color
  blindness     这个模拟器可以模拟几乎所有的色盲种类(包括色弱,全色盲)浏览指定网页的情景
  simulator




Color scheme
                可以模拟几乎所有色盲看到的不同颜色情况,但不支持图片和网页的色盲模拟。
  designer
设计示例对比




           通过模拟器得出的红绿色盲眼中的界面效果图可以看出,这两个界面(Android Msn
  主界面和菜单   Messenger 和 Android QQ)基本都能满足色盲用户的需求,但Msn Messenger 的
           个人状态显示不如QQ的明显,因为前者仅通过颜色变化区别不同的状态。
设计示例对比




         通过模拟器得出的红绿色盲眼中的界面效果图可以看出,这两个界面(Android Msn
  聊天窗口   Messenger 和 Android QQ)基本都能满足色盲用户的需求,这两个界面都采用了蓝色为
         主色调,这样既能降低红绿色盲的视觉偏差,蓝黄色盲的视觉效果也没有太大问题。
为中间人设计

关注色盲用户的心理

关注色盲用户的操作工效
Mobile interface design for color blind user

Contenu connexe

Plus de Baidu

涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍Baidu
 
Web design trends 2012
Web design trends 2012Web design trends 2012
Web design trends 2012Baidu
 
Seo design strategy
Seo design strategySeo design strategy
Seo design strategyBaidu
 
About linkedin
About linkedinAbout linkedin
About linkedinBaidu
 
Diandian.com development strategy analysis
Diandian.com development strategy analysisDiandian.com development strategy analysis
Diandian.com development strategy analysisBaidu
 
Chinese youth culture design
Chinese youth culture designChinese youth culture design
Chinese youth culture designBaidu
 
Mobile app socialization
Mobile app socializationMobile app socialization
Mobile app socializationBaidu
 
Mobile im app interface ananlysis
Mobile im app interface ananlysisMobile im app interface ananlysis
Mobile im app interface ananlysisBaidu
 

Plus de Baidu (8)

涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍
 
Web design trends 2012
Web design trends 2012Web design trends 2012
Web design trends 2012
 
Seo design strategy
Seo design strategySeo design strategy
Seo design strategy
 
About linkedin
About linkedinAbout linkedin
About linkedin
 
Diandian.com development strategy analysis
Diandian.com development strategy analysisDiandian.com development strategy analysis
Diandian.com development strategy analysis
 
Chinese youth culture design
Chinese youth culture designChinese youth culture design
Chinese youth culture design
 
Mobile app socialization
Mobile app socializationMobile app socialization
Mobile app socialization
 
Mobile im app interface ananlysis
Mobile im app interface ananlysisMobile im app interface ananlysis
Mobile im app interface ananlysis
 

Mobile interface design for color blind user

  • 1.
  • 2.
  • 3.
  • 4. 色盲人群 彩虹有几种颜色 “老师和书本教我彩虹有七种颜色 但我一直只能看见红黄蓝三种 那时还跟很多同学吵过 后来到初三体检时才知道自己是红绿色盲 不知道大家看的彩虹是什么样的?” 你们有什么苦楚 “就是全班一起体检时,有点尴尬和自卑。而随之而来的是因报考丏业受限而带来的痛苦,和 无奈啊!喜欢的丏业如何报?无路可走啊!只能放弃,选择不喜欢的丏业咯。” 色觉检查全攻略 更 我是色盲,不是色狼 新背诵办法 我昨天买了菲士康色盲隐形眼 镜,忍不住来说两句真心话 色弱也有梦想
  • 5. 何为色盲 三种原色均不能辨认都称全色盲,辨认仸何一种颜色的能力降低者称色弱, 有一种原色不能辨认都称二色视,主要为红色盲与绿色盲。 色盲的类别 不能分辨红色,常把绿色视为黄色,紫色看成蓝色,将绿色和蓝色相 红色盲 混为白色 不能分辨淡绿色与深红色、紫色与青蓝色、紫红色与灰色,把绿色视 绿色盲 为灰色戒暗黑色 蓝黄色盲 蓝黄色混淆不清,对红、绿色可辨 七彩世界在其眼中是一片灰暗,如同观黑白电视一般,仅有明暗之分, 全色盲 而无颜色差别 现实世界在其眼睛中.如同一幅纯真的底片,所有看到的颜色与现实完 全色反 全相反
  • 6. 色盲的比例 红绿色盲/色弱最普遍,其中绿色弱比例最大 绿色弱 绿色色弱有一定能力可以区分红色和绿色
  • 7.
  • 8. 色盲色彩模型 研究色盲对不同波长的光线的分辨情况。 根据RGB色彩模型,建立不同色盲类别的色彩模型。
  • 9. 色盲配色 针对各类色盲色彩模型,研究不同配色对 色盲的辨识性、功能性,并建立色盲色彩 系统
  • 10. 针对色盲的设计方法研究 开始 先搭配明度 色彩明度配色方案 再搭配色相 普通人 方案一 色彩模型 色盲用户评价方案 绿色色盲 色彩 调整设计方案 方案二 色彩模型 色相 配色 红色色盲 方案三 方案 色彩模型 蓝色色盲 方案N 色彩模型 评价 结束
  • 11. 针对色盲的界面设计 网站设计 明度搭配 色相搭配 数字产品界面设计 元素形态差异 游戏界面设计 声标
  • 12. 针对色盲的色彩视界数字化系统 用户界面 关键技术 针对色盲的 色盲色彩转换  真实色彩与色盲人群所见色彩的映 自主选色模块 对比选色模块 模块 射;  基于HSV色彩模型的自由选色工具; 面向色盲人群的色彩设计树模块  面向色盲人群的选色算法;  色盲人群色彩视界的转换与显示 数据交互与通信模块 产品三维设计平台
  • 13.
  • 14. 移动设备界面的特点 屏幕尺寸 界面元素组件的尺寸、细节… 设备多样化 分辨率、屏幕尺寸、系统… 设备处理器限制 速度、动画、声音、电量… 用户富情境化 光线、心情、繁忙、行走…
  • 15. 移动设备界面的设计 模块划分 尺寸设计 视觉配色设计
  • 16. 移动设备界面的细节设计 Icon 设计 界面总体设计
  • 17.
  • 18. 设计流程 界面区块划分 界面元素形态设计 设计过程中需要考虑: 元素形态设计  移动设备分辨率、屏幕尺寸、分辨 密度 色彩明度配色方案  移动设备处理器能力 普通人 方案一 色彩模型  色盲用户的使用情境 动 绿色色盲 色彩 声 态 方案二 色彩模型 色相 标 效 红色色盲 配色 设 果 方案三 方案 计 设 色彩模型 计 蓝色色盲 方案N 色彩模型 评价 结束
  • 19. 具体细节设计方法 提供适合色盲用户的学习通道 依据适合色盲人群的色彩空间设计媒体界面 面向色盲人群的设计评价 善用亮度弥补色彩构图的不足
  • 20. 辅助工具介绍 Color Oracle 即时模拟常见的色盲:红色色盲,绿色色盲,和蓝色色盲,但不能模拟各种色弱和全色盲 Vischeck 可以模拟常见的色盲:红色色盲,绿色色盲,和蓝色色盲,但不能模拟各种色弱和全色盲
  • 21. 辅助工具介绍 Coblis-color blindness 这个模拟器可以模拟几乎所有的色盲种类(包括色弱,全色盲)浏览指定网页的情景 simulator Color scheme 可以模拟几乎所有色盲看到的不同颜色情况,但不支持图片和网页的色盲模拟。 designer
  • 22. 设计示例对比 通过模拟器得出的红绿色盲眼中的界面效果图可以看出,这两个界面(Android Msn 主界面和菜单 Messenger 和 Android QQ)基本都能满足色盲用户的需求,但Msn Messenger 的 个人状态显示不如QQ的明显,因为前者仅通过颜色变化区别不同的状态。
  • 23. 设计示例对比 通过模拟器得出的红绿色盲眼中的界面效果图可以看出,这两个界面(Android Msn 聊天窗口 Messenger 和 Android QQ)基本都能满足色盲用户的需求,这两个界面都采用了蓝色为 主色调,这样既能降低红绿色盲的视觉偏差,蓝黄色盲的视觉效果也没有太大问题。