设计理论:文字色彩与可读性分析

一.饱和度与易读性:
上周在做F同学的一个项目时,涉及到较多列表性的文字链接。
目前除去频道和首页,全站文字链接使用一致的蓝色,色值为#014ccc,饱和度较高,在用户浏览时更易于吸引注意,但同样也容易引起视觉疲劳,高饱和度的文字并不易于阅读。

上图中,下半部分的文字降低了饱和度,是不是比上半部分读起来更舒服?

其实,大多数门户类的网站也是使用低饱和度的蓝色作为列表链接颜色的:

结论一:
颜色饱和度达到一定值,视觉神经对此颜色就会产生兴奋,就容易在阅读中产生疲劳感。

二.关于视觉神经兴奋临界值:
因为每一种颜色的光因主波长不一样,所以造成人眼神经兴奋的饱和度临界值也不一致。
在光谱中,红橙黄绿青蓝紫,波长依次减小,眼部神经兴奋所需要达到的饱和度呈先增后减的弧状:
波长较长的颜色和波长较短的颜色,相对较低的饱和度都就能够刺激视觉神经兴奋,而波长处于中间的绿色青色,则需要相对较高的饱和度才能刺激视觉神经兴奋。

由图中可以看出,蓝色也属于饱和度兴奋临界点比较低的颜色,所以,应该慎用高饱和度的蓝色。

结论二:
同等饱和度的颜色,红色和紫色最易产生视觉神经兴奋,其次是黄色和蓝色,再次是绿色和青色。
因此从单纯的色彩来讲,在设计中应:
1.尽量使用低饱和度的红色,紫色;
2.禁止使用高饱和度的红色,紫色;
3.少量使用高饱和度的黄色,蓝色。

三.关于明度,色相,饱和度之间的关系。
1.名词解释:
 a)先说说明度:就是明暗程度,也有叫亮度的,计算机把明度分成256级色阶,黑得伸手不见五指就是0级,白茫茫的一片什么都看不见就是255级:
 
 b)再说说色相:就是平时所说的哪种颜色,光谱中的红橙黄青蓝紫,以及千千万万种组合都是不同的色相。
 
 c)最后说说饱和度:就是通常所说的颜色纯度,鲜艳程度等等。
2.与Red,Green,Blue单色光之间的关系:
 a)先弄清计算机中色彩生成的几点规则:
  i.RGB三种原色光,同时以1:1:1比例混合,就能产生1份白色的光;
  ii.RGB中的任意两种原色光,混合只能产生另一种色相的光,而不是白色的光;
  iii.任意一种原色光,对明度色阶的影响为其数值的一半,转换成色阶均不会超过127级;
    因为任意两种有色光混合产生的颜色,色阶均不能超过255级即白色光。
    比如#000002的蓝色图片,在其蓝色通道的色阶是2级,但将其转换成灰度图片,色值为#010101,说明此图片的明度色阶为1级。
  iv.下面提到的RGB数值,是指的各颜色通道十六进制数值:
    
 b)明度与RGB中最小值,最大值有关,计算方法如下:
  
  i.RGB中最大值越小,意味着有色光越少,则明度越低;
  ii.RGB中最小值越小,意味着生成的白色光越少,则明度越低
 c)相同明度下,色相与RGB中最大值,最小值的位置,以及中间值的大小有关:
  
  i.在相同明度下,不同色相的颜色RGB最大值和最小值始终保持恒定;
  ii.RGB中最大值和最小值的位置会影响色相,例如#775533和#557733;
  iii.变换RGB的中间值可以影响色相,例如#FF0055和#FF0088;
 d)饱和度与RGB中最大值,最小值之间的差值有关:
  
  i.RGB中最大值,最小值之间的差值越大,饱和度越高;
  ii.RGB中当最小值趋于00,或者最大值趋于FF后,饱和度不能再提高。
结论三:
1.在颜色较暗时(即RGB没有一项数值达到FF),增加明度可以起到增加饱和度的目的,降低明度就会降低饱和度;
2.在颜色较亮时(即RGB没有一项数值达到00),增加明度可以起到降低饱和度的目的,降低明度反而会增加饱和度;
3.颜色饱和度越大(即RGB中最大值与最小值差值越大),在相同明度下的光谱范围越大(即可变换的颜色种类越少);
4.颜色饱和度越小(即RGB中最大值与最小值差值越小),在相同明度下的光谱范围越小(即可变换的颜色种类越少);
5.色相的变化不会影响到明度和饱和度;

四.根据这些研究,我们能够得到什么可以运用的东西?
1.高饱和度的红色(#FF0000),紫色(#FF00FF)推荐不使用;
2.高饱和度的蓝色(#1834D1),橙色(#FF4E00),可以用于少量的文字可以更好地吸引视觉注意,但最好不要用于列表中的链接;
3.根据前面的分析,我们得出调制可以用于列表链接蓝色的方法:
通过降低蓝色通道色阶来降低颜色整体的饱和度(例如将#0000FF调整为#000099),为避免过暗,和黑色混淆,我们还可以增加其他原色通道的色阶,调整其明度(例如将#000099调整为#005599)。
4.颜色不协调,可以通过降低饱和度来达到协调,也可通过采用调整色相来达到目的:

一个现成的例子就是我们网页中采用的#FF4E00色值,和#FF0000的饱和度其实是一致的(不信可以变成灰度图看看),之所以色值为#FF0000的颜色显得更刺眼,是因为在同样的饱和度下,红色比橙色更让视觉神经敏感,还记得这张图么?

参考文献:
《基于色度学的人眼彩色探测特性分析》张建勇 等……北京理工大学……2003年
《计算机求解颜色刺激的主波长和兴奋纯度》周丰崑 等……长春光学精密机械学院……1990年

时间: 2025-01-30 22:29:08

设计理论:文字色彩与可读性分析的相关文章

文字色彩与可读性分析

一.饱和度与易读性: 上周在做F同学的一个项目时,涉及到较多列表性的文字链接. 目前除去频道和首页,全站文字链接使用一致的蓝色,色值为#014ccc,饱和度较高,在用户浏览时更易于吸引注意,但同样也容易引起视觉疲劳,高饱和度的文字并不易于阅读. 上图中,下半部分的文字降低了饱和度,是不是比上半部分读起来更舒服? 其实,大多数门户类的网站也是使用低饱和度的蓝色作为列表链接颜色的: 结论一: 颜色饱和度达到一定值,视觉神经对此颜色就会产生兴奋,就容易在阅读中产生疲劳感. 二.关于视觉神经兴奋临界值:

探讨文字色彩与可读性:高饱和度不易于阅读

一 饱和度与易读性: 上周在做F同学的一个项目时,涉及到较多列表性的文字链接. 目前除去频道和首页,全站文字链接使用一致的蓝色,色值为#014ccc,饱和度较高,在用户浏览时更易于吸引注意,但同样也容易引起视觉疲劳,高饱和度的文字并不易于阅读. 上图中,下半部分的文字降低了饱和度,是不是比上半部分读起来更舒服? 其实,大多数门户类的网站也是使用低饱和度的蓝色作为列表链接颜色的: 结论一: 颜色饱和度达到一定值,视觉神经对此颜色就会产生兴奋,就容易在阅读中产生疲劳感. 二 关于视觉神经兴奋临界值:

浅谈网页设计中的色彩理论

无可争议的是,色彩是任何设计领域中最重要的一方面. 设计师在决定了一个网站风格的同时,也决定了网站的情感,而情感的表达很大程度上取决于颜色的选择.颜色是很有力的工具,所有设计师在设计网页时就应该明白这一点. 一.颜色术语 你们当中很多人可能已经在学校学过一些色彩基础知识,让我们快速回顾一些术语,来更好的把握色彩和运用色彩. 色轮的主要组成 所有的色彩能在一个色轮中呈现.在这个色轮中,我们能把颜色分成3大块:原色,辅助色和第三颜色. 三原色分别是红色,蓝色和黄色.这些色彩是基础色,他们组成了色轮上

网页设计理论:漂亮而不空洞的极简网站设计

作为设计师,我们都知道,一个极简的设计可以实现漂亮的效果. 然而,很多设计师在实现上有些麻烦:要么是没有时间让使用如此少的元素制作的页面看起来漂亮,要么就是最终的结果只是看起来"不完美". 网上有很多关于极简主义设计的文章,而本文的目的是帮你实现一个漂亮而不空洞的极简网站设计 最重要的是,我们将展示一个小的极简网站设计画廊,这样你就可以分析为什么一些设计可以而其它的则不可以. 什么是极简主义设计 极简主义设计已经被描述为最基本的设计,剔除了多余的元素.色彩.形状和纹理. 它的目的是使内

如何保证网站文字内容的可读性

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网站做的多了,便有了预感,可以比较准确的看出一个网站的良莠与发展.优秀的网站,通常在客户体验上非常用心(当然这是废话),而网站良好的客户体验除了优秀的界面设计.合理简介的框架布局,还有一点至关重要--文字内容的可读性.这一点,往往是被很多站长忽略的.这也成了网站运营良莠的分水岭. 提及文字内容,很多站长都会用"内容建设"这

用户体验:关于设计理论和设计术语

网页制作Webjx文章简介:关于设计理论和设计术语. 这几日的工作,涉及到很多会议. 也就涉及到很多人,很多意见,很多碰撞,很多思辨. 关于项目本身的不再多说,目前也不适合分享. 倒是有一些题外话,虽然和具体项目无关,但是会影响我们工作和沟通的效率.据我来看,也是很有意思的话题. 其中有些话: 功能性导航.全局性导航,我们是不是太扣字眼了?用户真的会关心什么是功能性导航,什么是全局性导航吗? 我们用这些原则来指导我们的工作,是不是太僵化了? 我们为什么先分析别的网站去找出这些规律,真的有用吗?我

在PPT中如何设计凸凹文字

  在PPT中如何设计凸凹文字         虽然动画效果很难仿制,但这种文字的静态效果还是很容易用PPT来实现的,今天本文就图文详解使用PPT制作凸凹文字的设计. 做凸凹文字的关键点:字体顶部内阴影,字体使用中间色,底部高光. 1.使用文本框工具输入文本,并为其设置内阴影; 2.设置渐变线文本轮廓,打造底部高光; 3.依字体大小调轮廓宽度; 补充中间色设置 1.仿照已有的平面设计的配色. 2.选取跟PPT幻灯片背景颜色一致的色彩,在"其他颜色"设置中用HSL方式,调节明度和色度选取

photoshop设计理论让背景突显主体分享

给各位photoshop软件的使用者们来详细的解析分享一下设计理论让背景突显主体. 解析分享:   @豪斯K先生 :在平面设计中主体与背景就像是主角与配角的关系,可以说一部好的电影一定是主角与配角相互搭配共同完成的,同样道理,设计中的主体与背景就是这样的关系,背景烘托主体,主体映衬背景,那么怎样利用背景让主体明显,就是我们这篇文章所要阐述的内容. 第一部分:背景的大致分类 设计中的背景大致可以分为纯颜色.场景.渐变.肌理.图形五大类别,下面我就针对这五大类分别举例说明.   纯颜色背景不是指纯度

艺术设计理论:字体设计三步搞定

文章描述:艺术设计理论:字体设计三步搞定. 字体设计三步搞定: [1] [2]  下一页