交互设计案例:面向色盲人士的友好设计

文章描述:信息图形中的颜色探讨—面向色盲人士友好的设计解决方案。

颜色可以用来区分信息图形上的数据类别和维度,是数据可视化中最常用的视觉变量之一。然而,世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰——他们在识别部分或者全部颜色时有困难。我们通常笼统的称这类人群为“色盲(Color Blindness)”(也称为道尔顿症、色觉缺失、色觉辨认障碍、色弱等)。面对如此庞大的特殊受众,设计师理应关注他们的需求。信息图形设计本是以向用户传递精准数据为目标,也不能忽视了这部分群体。

一. 了解色盲
“色盲能看到颜色吗?”“他们只能看到黑、白吗?”——人们常误以为色盲视觉所见的景象只有灰阶分布,其实不是的。色盲并不意味着色觉的完全丧失,而是指部分色觉受损,因此无法正确感知和分辨某些区域的颜色。色盲可以分为:红色盲(P)、绿色盲(D)、蓝色盲(T)和全色盲。其中红色盲和绿色盲最为普遍,合称为红绿色盲。全球大约2亿人都患有色盲,它的普遍程度甚至高于AB血型的人群。下面我们感性的看看色盲人眼中的世界:

从上面模拟色盲色觉的图片来看,我们可以感受到色盲人士能够辨识的色相较为有限。红色盲和绿色盲的色觉较为近似。由于红绿色盲人数占到了色盲总数的99%,我们需要更多地理解他们能看到的颜色。以下列举了红绿色盲容易混淆的颜色,以及色觉上的一些规律:

  1 ) 红绿色盲难以分辨两种差别只在红色或绿色元素的颜色。如红色和绿色;蓝色和紫色(蓝+红);绿色和棕色;红色和棕色等。

2 ) 红绿色盲人士对蓝色更为敏感。举例来说,他们会把红色和绿色、或黄色和黄绿色混淆,但却能清楚的分辨绿色和蓝绿色(翠绿色)。

3 ) 红绿色盲眼中的红色并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深,而暗红色则几乎接近黑色。因此色盲人士很难分辨出文章内的深红色强调字。

4 ) 虽然色盲人士对色相的辨识能力较弱,但却对明度、饱和度非常敏感。

5 ) 相比高饱和度的颜色,低饱和度的颜色更难辨认。如天蓝色和粉红色。

也许以上的分析还是太抽象,为了更直观的看到色盲人士眼中的颜色,下面介绍几种模拟色盲色觉的工具,方便设计师们设计和检验:

Adobe自带的校样设置

Photoshop CS4和Illustrator CS4及以上版本提供了模拟红色盲和绿色盲的校样设置,对于每天都在Photoshop/Illustrator中拼搏的视觉设计师来说,这是最简便的一种方法了。选择“视图—校样设置—红色盲型/绿色盲型”

Color Oracle:http://colororacle.org/

网站Color Blind Web Page Filter:http://colorfilter.wickline.org/

[1] [2] [3] [4]  下一页

时间: 2025-01-14 19:37:08

交互设计案例:面向色盲人士的友好设计的相关文章

移动UI/UX交互设计案例:50个精美移动UI设计

文章描述:50款拥有超赞用户体验的精美移动UI设计. 实际上用户界面(UI)和用户体验(UX)就如同硬币的两边,两者同等重要.他们在用户跟他们的产品之间都保持着紧密的联系.用户界面(UI)描述的是面对XX以及产品,而用户体验(UX)面对的则是用户的体验和对产品的洞察力.除此之外,简单来说用户界面(UI)面对的是技术以及整个网站的表现形式,用户体验(UX)面临的则是用户的理解和反应. 最漂亮.时尚.超赞的移动UI设计都在这儿了.今天,我们从behance和dribbble挑选了50款拥有超赞用户体

设计案例分享:腾讯手机令牌的设计过程

文章描述:QQ安全我做主-手机令牌2.0设计分享. 一款小小的工具软件,如何赢得  iPhone app store4星级+评价:Android 电子市场4.5星评价,让我与您一起分享手机令牌的设计过程 什么是手机令牌? 手机令牌是通过6位动态密码保护QQ帐号.Q币和游戏装备等虚拟财产安全的手机软件.手机令牌每30S更换一次动态密码,用户在敏感操作的时候验证动态密码,以此保障自己的帐号安全.简单的说:手机令牌是一个动态密码的生成软件.是我们专为保护用户QQ帐号安全设计的手机APP. 设计工作主要

qzone相册照片编辑器设计案例:减少用户思考的简洁设计

网页制作Webjx文章简介:设计案例:简化用户界面,别让用户思考. ·介绍QQ空间相册的个性化利器,能对照片进行效果的优化.文字编辑等等. 从设计上使用了创新的手法,尽量减少用户的思考.其中,通过界面的特殊表现,让用户更容易学会使用.在使用的过程中,也避免了复杂的操作方式,降低使用门槛. ·定位 了解用户需求·用户期望照片编辑工具拥有"玩"照片的成分:·大多数用户反映,最需要的功能是旋转.裁剪.添加照片的边框:·能给照片添加文字.装饰品:·对照片进行颜色或其他效果优化.- 分析用户需求

单页网站设计案例:非常棒的用户界面细节设计

文章描述:本文中我们来看一些精彩的单页网站设计,它远比你想象要流行.在你欣赏这些网站的外观的同时,不妨点击访问,体验一下网站中这些非常棒的用户界面细节. 不是每个网站都要很复杂或包含很多页内容信息,有时候一个页面就足够了.不过你打算用一个页面来创建网站,并不意味着它会很轻松.开发一个单页网站布局所需要的思考与规划,不比某些更加复杂的网站少.它需要将所有相同的基础元素整合成一个更大的站点,还要让人看起来印象深刻,你得照着预期进行并且怀揣明确的目标. 有数不清的酷炫招式可以帮助你充分设计好单页网站.

网页设计案例分析:客户是不是要你设计的

文章描述:要做一个篮球专题页的时候,我们脑海里通常是这样的:它是篮球赛专题,背景很重要.能说明他的性质,动感激烈.方向就更简单了,直线型,沉重又明快的对撞色应该是主要考虑的地方. 要做一个篮球专题页的时候,我们脑海里通常是这样的:它是篮球赛专题,背景很重要.能说明他的性质,动感激烈.方向就更简单了,直线型,沉重又明快的对撞色应该是主要考虑的地方. 唯一的疑问是?客户是不是要这东西.一般,做之前,会先问问客户有没有参考的资料.客户方很爽快的扔了个前一个团队交付给他们的设计稿,他们只说了不满意.具体

信息图形中的颜色探讨—面向色盲人士友好的设计解决方案

颜色可以用来区分信息图形上的数据类别和维度,是数据可视化中最常用的视觉变量之一.然而,世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰--他们在识别部分或者全部颜色时有困难.我们通常笼统的称这类人群为"色盲(Color Blindness)"(也称为道尔顿症.色觉缺失.色觉辨认障碍.色弱等).面对如此庞大的特殊受众,设计师理应关注他们的需求.信息图形设计本是以向用户传递精准数据为目标,也不能忽视了这部分群体. 一. 了解色盲"色盲能看到颜色吗?"&quo

信息图形中的颜色探讨:面向色盲人士友好的设计方案

颜色可以用来区分信息图形上的数据类别和维度,是数据可视化中最常用的视觉变量之一.然而,世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰--他们在识别部分或者全部颜色时有困难.我们通常笼统的称这类人群为"色盲(Color Blindness)"(也称为道尔顿症.色觉缺失.色觉辨认障碍.色弱等).面对如此庞大的特殊受众,设计师理应关注他们的需求.信息图形设计本是以向用户传递精准数据为目标,也不能忽视了这部分群体. 一. 了解色盲 "色盲能看到颜色吗?"&qu

触屏版网页交互设计:体现少即是多的设计精髓

文章描述:触屏版网页应用,实现移动场景用户需求.体现少即是多的设计精髓并表现主流的触屏界面气质,可算初步达标.在设计过程中需不断打磨细节,提升体验,令设计日臻完美. 触屏版网页应用,实现移动场景用户需求.体现少即是多的设计精髓并表现主流的触屏界面气质,可算初步达标.在设计过程中需不断打磨细节,提升体验,令设计日臻完美.下篇将结合案例讲述其中的故事.  >>提升体验的细节   让消息更随手  翻页大讨论  重要数字了然于胸  关于软键盘  大话横竖屏切换  让界面更"可触模"

交互设计案例:突出重点一目了然,简单而不简陋

文章描述:交互设计案例:突出重点一目了然,简单而不简陋. 看到这张照片,我们一眼能够看到天宏(图中这位UED俊男)的眼睛.我们能从他的表情里读出一些他的性格.一张好的摄影作品,最重要的一点,就是这个照片是否有焦点,照片的主题是否一目了然.而摄影作品的用光.构图.景深等等手法,其实就是在让一个照片能够有其焦点,并且利用这些艺术手法来烘托气氛,提升主题. 一个优秀的页面亦如此:应当突出重点,一目了然.相信大家也知道,一个用户在浏览网页的过程中,只是扫描页面,而不会像是在看书似的阅读每一处地方,每一行