mobile interface design for color blind user

25

Upload: beijing-university-of-posts-and-telecommunications

Post on 22-Nov-2014

1.528 views

Category:

Design


5 download

DESCRIPTION

Mobile interface design for color blind user

TRANSCRIPT

Page 1: Mobile interface design for color blind user
Page 2: Mobile interface design for color blind user
Page 3: Mobile interface design for color blind user
Page 4: Mobile interface design for color blind user

彩虹有几种颜色

我是色盲,不是色狼

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

你们有什么苦楚

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

色弱也有梦想

色觉检查全攻略 更新背诵办法

我昨天买了菲士康色盲隐形眼镜,忍不住来说两句真心话

色盲人群

Page 5: Mobile interface design for color blind user

何为色盲

三种原色均不能辨认都称全色盲,辨认仸何一种颜色的能力降低者称色弱, 有一种原色不能辨认都称二色视,主要为红色盲与绿色盲。

色盲的类别

全色盲

红色盲

绿色盲

蓝黄色盲

全色反

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

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

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

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

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

Page 6: Mobile interface design for color blind user

色盲的比例

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

绿色弱 绿色色弱有一定能力可以区分红色和绿色

Page 7: Mobile interface design for color blind user
Page 8: Mobile interface design for color blind user

色盲色彩模型

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

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

Page 9: Mobile interface design for color blind user

色盲配色

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

Page 10: Mobile interface design for color blind user

针对色盲的设计方法研究

开始

色彩明度配色方案

普通人 色彩模型

绿色色盲 色彩模型

红色色盲 色彩模型

蓝色色盲 色彩模型

方案一

方案二

方案三

方案N

色彩 色相 配色 方案

评价

结束

先搭配明度 再搭配色相 色盲用户评价方案 调整设计方案

Page 11: Mobile interface design for color blind user

针对色盲的界面设计

网站设计

数字产品界面设计

游戏界面设计

明度搭配

色相搭配

元素形态差异

声标

Page 12: Mobile interface design for color blind user

针对色盲的色彩视界数字化系统

用户界面

自主选色模块

产品三维设计平台

关键技术

真实色彩与色盲人群所见色彩的映射;

基于HSV色彩模型的自由选色工具;

面向色盲人群的选色算法;

色盲人群色彩视界的转换与显示

针对色盲的 对比选色模块

色盲色彩转换 模块

面向色盲人群的色彩设计树模块

数据交互与通信模块

Page 13: Mobile interface design for color blind user
Page 14: Mobile interface design for color blind user

移动设备界面的特点

屏幕尺寸

设备多样化

设备处理器限制

用户富情境化

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

分辨率、屏幕尺寸、系统…

速度、动画、声音、电量…

光线、心情、繁忙、行走…

Page 15: Mobile interface design for color blind user

移动设备界面的设计

模块划分

尺寸设计

视觉配色设计

Page 16: Mobile interface design for color blind user

移动设备界面的细节设计

Icon 设计

界面总体设计

Page 17: Mobile interface design for color blind user
Page 18: Mobile interface design for color blind user

设计流程 界面区块划分

界面元素形态设计

元素形态设计

色彩明度配色方案

普通人 色彩模型

绿色色盲 色彩模型

红色色盲 色彩模型

蓝色色盲 色彩模型

方案一

方案二

方案三

方案N

色彩 色相 配色 方案

声标设计

动态效果设计

评价

结束

设计过程中需要考虑: 移动设备分辨率、屏幕尺寸、分辨

密度

移动设备处理器能力

色盲用户的使用情境

Page 19: Mobile interface design for color blind user

具体细节设计方法

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

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

面向色盲人群的设计评价

善用亮度弥补色彩构图的不足

Page 20: Mobile interface design for color blind user

辅助工具介绍

Color Oracle

Vischeck

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

可以模拟常见的色盲:红色色盲,绿色色盲,和蓝色色盲,但不能模拟各种色弱和全色盲

Page 21: Mobile interface design for color blind user

辅助工具介绍 Coblis-color

blindness simulator

Color scheme designer

这个模拟器可以模拟几乎所有的色盲种类(包括色弱,全色盲)浏览指定网页的情景

可以模拟几乎所有色盲看到的不同颜色情况,但不支持图片和网页的色盲模拟。

Page 22: Mobile interface design for color blind user

设计示例对比

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

Page 23: Mobile interface design for color blind user

设计示例对比

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

Page 24: Mobile interface design for color blind user

为中间人设计 关注色盲用户的心理 关注色盲用户的操作工效

Page 25: Mobile interface design for color blind user