Mobile interface design for color blind user
- 4. 色盲人群
彩虹有几种颜色
“老师和书本教我彩虹有七种颜色 但我一直只能看见红黄蓝三种 那时还跟很多同学吵过
后来到初三体检时才知道自己是红绿色盲 不知道大家看的彩虹是什么样的?”
你们有什么苦楚
“就是全班一起体检时,有点尴尬和自卑。而随之而来的是因报考丏业受限而带来的痛苦,和
无奈啊!喜欢的丏业如何报?无路可走啊!只能放弃,选择不喜欢的丏业咯。”
色觉检查全攻略 更
我是色盲,不是色狼 新背诵办法
我昨天买了菲士康色盲隐形眼
镜,忍不住来说两句真心话 色弱也有梦想
- 8. 色盲色彩模型
研究色盲对不同波长的光线的分辨情况。
根据RGB色彩模型,建立不同色盲类别的色彩模型。
- 9. 色盲配色
针对各类色盲色彩模型,研究不同配色对
色盲的辨识性、功能性,并建立色盲色彩
系统
- 10. 针对色盲的设计方法研究
开始
先搭配明度 色彩明度配色方案
再搭配色相 普通人 方案一
色彩模型
色盲用户评价方案
绿色色盲 色彩
调整设计方案 方案二
色彩模型 色相
配色
红色色盲
方案三 方案
色彩模型
蓝色色盲
方案N
色彩模型
评价
结束
- 11. 针对色盲的界面设计
网站设计 明度搭配
色相搭配
数字产品界面设计
元素形态差异
游戏界面设计 声标
- 12. 针对色盲的色彩视界数字化系统
用户界面
关键技术
针对色盲的 色盲色彩转换
真实色彩与色盲人群所见色彩的映 自主选色模块
对比选色模块 模块
射;
基于HSV色彩模型的自由选色工具; 面向色盲人群的色彩设计树模块
面向色盲人群的选色算法;
色盲人群色彩视界的转换与显示 数据交互与通信模块
产品三维设计平台
- 14. 移动设备界面的特点
屏幕尺寸 界面元素组件的尺寸、细节…
设备多样化 分辨率、屏幕尺寸、系统…
设备处理器限制 速度、动画、声音、电量…
用户富情境化 光线、心情、繁忙、行走…
- 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)基本都能满足色盲用户的需求,这两个界面都采用了蓝色为
主色调,这样既能降低红绿色盲的视觉偏差,蓝黄色盲的视觉效果也没有太大问题。