APP下载

网页设计中的色彩运用

2012-11-22王娟

电影评介 2012年4期
关键词:网页静态页面

网页是现代人上网接受信息最主要的载体, 它以数字技术为依托,用文字、图片、声音或视频等形式承载信息,通过页面排列展示给浏览者。 一个制作精美的网页可以吸引人们多次光顾,可见,网页的设计很重要。网页的色彩设计是网页设计的重要方面, 一张优秀的网页,它的色彩搭配必定和谐、得体,令人赏心悦目。 网页的色彩设计也是产品色彩设计的一个门类分支。在网页中要运用好色彩,主要从以下几个方面入手:

1、主题色和辅助色的合理运用

1.1 主题色的运用

主题色是代表站点形象的最主要的色彩。它可以是一种或一组色彩。不同的主题色定位不同的色彩格调。选择何种颜色作为主题色, 需要视网站的具体情况而定。

1.1.1 要确定一个网页用什么色彩合适, 必须要先弄明白该网站的主题和它的服务对象, 以及通过色彩希望达到的目的。如 http://www.barbie.com网站的服务对象主要是儿童, 其网页设计不仅采用卡通和声音等众多形式, 还选择了非常鲜艳活泼的色彩。如餐饮业网站的设计也是很特殊的一类,餐饮网站多以橘红、橙黄系色彩为主色调,这种色调很容易让人产生食欲, 并且食物通常让人感受到的是实实在在的体贴,所以用些让人温暖的颜色。

1.1.2 根据企业形象决定主题色

对于很多企业、机构及团体来说,他们的网站形象实际上是自身整体形象的一部分,这类站点的主题色一般可用公司的标准色,这符合公司的形象战略,可以提升公司形象。如http:/ /www.mcdonalds.com网站的色彩就是其公司的标准色红和黄。再如可口可乐公司的网站选用的是大红色, 因为可口可乐给人的一贯形象就是大红色,红色产生的激情也正如其公司推出的产品可乐,让人兴奋, 与消费者产生共鸣。

1.2 辅助色的运用

在建设网站、组建页面的过程中, 经常要使用主题色以外的其他色彩,用来增加页面的色彩层次或帮助实现某项功能, 这就需要定义辅助色。辅助色的面积虽小, 却起着缓冲和强调的作用。辅助色能让页面有生气、有趣味,使主色调流畅, 辅助色与主色调搭配合理,可使整个页面特色鲜明,引人入目。

1.2.1 辅助色的取用要与主题色和谐

辅助色的取用应当建立在与主题色有内在规律的关联上, 既要保持相互之间和谐,又要辅助主题色的统帅地位。辅助色与主题色共同构成站点的标准色彩, 其基调则决定网页的整体色彩风格。

1.2.2 根据主题色选择辅助色彩

主调色确定后, 可选一至两种辅助色配合使用, 整个网页的色彩最好控制在三色之内。网页的辅助色可用主调色的邻近色,也可用对比色。如http://www.allrecipes.com是一个烹饪网站,网站的主色调采用黄色调, 辅助色用其邻近的红色, 给人香甜的感觉,符合烹饪网站的特色。

2、静态色和动态色的合理运用

在一个完整展现的 web页面内, 大多包含静态和动态两类元素。以其呈现方式是否包含变化为依据, 可以将网页中的色彩分为动态色和静态色两类。动态色彩又可分为以时间为条件变化的色彩和以交互因素为条件变化的色彩共两类。

2.1 动态色的运用

2.1.1 以时间为条件变化的动态色闪烁

排除动画因素外,网页中以时间为条件变化的色彩主要指闪烁。闪烁是一种色彩的动态效果, 能够有效引起注意与烘托气氛。闪烁分为单色闪烁和颜色闪烁, 前者指单一色彩的亮度变化。后者指不同颜色形成的动态变化。闪烁主要用来吸引注意,低频率、小色彩范围的闪烁也被用来活跃画面。决定闪烁效果的因素首先是闪烁的频率。越快速的闪烁吸引视线的能力越强,急促和不安的感觉也相应增强, 缓慢的闪烁则具有柔美和抒情的意味。其次是闪烁色彩变化的幅度。闪烁色彩明度越大越引人注目, 在页面中的跳跃度也高, 明度变化越小的闪烁相对含蓄柔和。在颜色闪烁中, 两极色彩在色环上的夹角越大,闪烁越引人注目。临近色的闪烁优美、内敛, 原色和补色闪烁则最为强烈。闪烁的色彩为红、黄系的暖色时, 其热门、突出的感觉强,为冷色时则可能有神秘感。在网页中使用闪烁效果时, 需注意闪烁频率、色彩的明度和色相变化范围与整个页面内容、风格的协调性。闪烁无论出现在何种位置都会不断吸引视线, 因而在使用时要格外注意闪烁范围与周围其它元素的平衡关系。

2.1.2 包含交互因素的动态色

网页中包含交互因素的动态色常见于按钮、热区、超文本等具有交互功能的屏幕对话构件中, 常用的色彩变化包括亮度、反色和特殊颜色。例如当光标移至感应区域时, 按钮或文本变为较之前明亮、高饱和度的色彩或对比色以吸引注意。对于已点击过的内容, 则以区别于未点击色彩, 但亮度、饱和度较低的颜色显示, 既可有所区别,又不至于造成过度的视觉干扰。

2.2 静态色的运用

静态色主要指静止不动的颜色, 静态色又以静态文本的颜色为主。静态文本是功能相对单纯的阅读型文本, 在网页中常以大段文字的形式出现。对于感兴趣的文字内容, 浏览者需要集中注意力和花费时间, 因此这类文本与背景的颜色搭配应以易于提取信息、利于减小视觉疲劳为原则。若眼睛同时聚焦于两种对比明显的鲜艳彩色上, 眼睛周围的肌肉会特别紧张。一些鲜艳补色、准补色的组合方式是不利于用户阅读的,例如紫色为背景的黄色显示, 绿色为背景的紫红色显示, 以及纯红与纯蓝色的组合。相对于注视无彩色, 人们持续注视鲜艳的彩色更容易疲劳和厌烦。一般而言, 底色与文字色的色彩跳跃度越低, 即越接近无彩色,越有利于长时间阅读。越高明度差的色彩搭配, 越具有高认识度, 用户也就越易于从中获取信息。低纯度、高明度对比的文本与背景搭配, 是适用于静态文本的显示色彩。在无彩色的搭配中, 白底黑字的显示方式可读性更强。

3、结语

总之,网页色彩设计方法多种多样,需要考量各方各面的东西。它不是简单的色彩排布, 而是以人的尺度去设计,以满足人的不同需求为任务,同其他的产品色彩设计一样, 最终是以人的满意为目的的。作为新媒体中的信息载体的一种,网页色彩设计通过发挥数字化制作的优势,并结合传统的色彩设计的理论方法,可以制作出任何想要的美丽页面。

[1]郭洁恩.网页色彩表现研究 [D].西安美术学院, 2007.3 ,P28- P30.

[2]王庆斌, 张福昌.现代网页色彩设计 [J].无锡轻工大学学报, 2001.6 , 2( 2): P26.

[3]张秀杰.个性化网页设计技巧 [J].黑龙江畜牧兽医职业学院学报, 2006.12., P59-P60.

[4]董海斌, 王家民.网页界面中的色彩设计 [J].艺术理论,2007.11 , P78- P79.

[5]李立伟.浅谈网页色彩设计 [J].郑州轻工业学院学报.

猜你喜欢

网页静态页面
刷新生活的页面
最新进展!中老铁路开始静态验收
猜猜他是谁
基于CSS的网页导航栏的设计
基于URL和网页类型的网页信息采集研究
网页制作在英语教学中的应用
具7μA静态电流的2A、70V SEPIC/升压型DC/DC转换器
10个必知的网页设计术语
50t转炉静态控制模型开发及生产实践
网站结构在SEO中的研究与应用