Mobile interface design for color blind user
-
Upload
beijing-university-of-posts-and-telecommunications -
Category
Design
-
view
1.528 -
download
5
description
Transcript of Mobile interface design for color blind user
彩虹有几种颜色
我是色盲,不是色狼
“老师和书本教我彩虹有七种颜色 但我一直只能看见红黄蓝三种 那时还跟很多同学吵过 后来到初三体检时才知道自己是红绿色盲 不知道大家看的彩虹是什么样的?”
你们有什么苦楚
“就是全班一起体检时,有点尴尬和自卑。而随之而来的是因报考丏业受限而带来的痛苦,和无奈啊!喜欢的丏业如何报?无路可走啊!只能放弃,选择不喜欢的丏业咯。”
色弱也有梦想
色觉检查全攻略 更新背诵办法
我昨天买了菲士康色盲隐形眼镜,忍不住来说两句真心话
色盲人群
何为色盲
三种原色均不能辨认都称全色盲,辨认仸何一种颜色的能力降低者称色弱, 有一种原色不能辨认都称二色视,主要为红色盲与绿色盲。
色盲的类别
全色盲
红色盲
绿色盲
蓝黄色盲
全色反
不能分辨红色,常把绿色视为黄色,紫色看成蓝色,将绿色和蓝色相混为白色
不能分辨淡绿色与深红色、紫色与青蓝色、紫红色与灰色,把绿色视为灰色戒暗黑色
蓝黄色混淆不清,对红、绿色可辨
七彩世界在其眼中是一片灰暗,如同观黑白电视一般,仅有明暗之分,而无颜色差别
现实世界在其眼睛中.如同一幅纯真的底片,所有看到的颜色与现实完全相反
色盲的比例
红绿色盲/色弱最普遍,其中绿色弱比例最大
绿色弱 绿色色弱有一定能力可以区分红色和绿色
色盲色彩模型
研究色盲对不同波长的光线的分辨情况。
根据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)基本都能满足色盲用户的需求,这两个界面都采用了蓝色为主色调,这样既能降低红绿色盲的视觉偏差,蓝黄色盲的视觉效果也没有太大问题。
为中间人设计 关注色盲用户的心理 关注色盲用户的操作工效