首页 > 网页教程 > 设计分享 > 正文

网页设计的文字色彩与可读性分析

2010-06-12 12:20:47 作者：不详来源：互联网

一、饱和度与易读性

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

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

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

结论一：

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

二、关于视觉神经兴奋临界值

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

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

结论二：

同等饱和度的颜色，红色和紫色最易产生视觉神经兴奋，其次是黄色和蓝色，再次是绿色和青色。
因此从单纯的色彩来讲，在设计中应：

尽量使用低饱和度的红色，紫色；
禁止使用高饱和度的红色，紫色；
少量使用高饱和度的黄色，蓝色。

相关热词：文字色彩用户体验网页配色网页设计

分享到：

更多...

收藏至我的帐号

教程排行榜: 30个基于jQuery框架的幻灯滑块特效设计的网站实例; 30个基于jQuery滑动门技术的网站欣赏; 38款网页设计应用的JS拉洋片幻灯效果欣赏; 10个优美精致简约风格的导航菜单欣赏及点评; 最新收集的50多个专业设计公司网站欣赏; 40+设计独特超漂亮的水平导航网站欣赏; 全球65个设计出众的设计师个人博客欣赏; 35套精美绚丽的创意酷站设计欣赏; 国外颇具特色的电子商务网站设计欣赏(上); 20个设计精致漂亮的Photoshop网页设计教程; 国外颇具特色的电子商务网站设计欣赏(下); 21个精美漂亮的网页幻灯片应用案例欣赏; 网页UI之Banner广告条设计案例赏析; 2011年网站设计的新趋势; 手绘风格的15款超级漂亮网站欣赏; 24个很漂亮用CSS3实现的文本效果演示及教程推荐

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 能沿多个方向滑动切换的jquery幻灯代码; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...