繁体中文
设为首页
加入收藏
当前位置:网页设计首页 >> 心得技巧 >> 网页设计配色应用实例剖析——橙色系

网页设计配色应用实例剖析——橙色系

2007-12-27 13:18:04  作者:  来源:  浏览次数:36  文字大小:【】【】【

色具有轻快、欢欣、收获、温馨、时尚的效果,是快乐、喜悦、能量的色彩。
  在整个色谱里,橙色具有兴奋度,是最耀眼的色彩。给人以华贵而温暖,兴奋而热烈的感觉,也是令人振奋的颜色。具有健康、富有活力、勇敢自由等象征意义,能给人有庄严、尊贵、神秘等感觉。橙色在空气中的穿透力仅次于红色,也是容易造成视觉疲劳的颜色。
  在网页颜色里,橙色适用于视觉要求较高的时尚网站,属于注目、芳香的颜色,也常被用于味觉较高的食品网站,是容易引起食欲的颜色。
  
  下面我们根据橙色系不同属性邻近色、同类色、对比色的搭配做不同的举例分析。

   橙色   
  
   → 橙色网页例图:http:// www.wastelink.co.uk
  

   橙色系分析:

  主色调橙色HSB数值的H表示色相,显示的是30度,而30度正是橙色显示特征最标准的颜色——正橙色。饱和度和亮度同时达到最高值,因此整个页面的视觉刺激是极其耀眼强烈的。
  这里选取了三种面积相当又是整个页面使用得最少的颜色为点睛色,使页面生动的同时又运用于导航位置,从而达到突出主题的效果。从HSB数值上看它们的明度纯度相对较低,与明度纯度较高的背景正橙色形成鲜明的对比。
  通过范围较大的背景白色、前景图片灰白色和小细节前景白色文字制造出明快气氛的同时,又呼应统一于整个页面。
  辅助色在这里是橙色与白色的过渡色。

   结论:
  饱和度与纯度很高特性明显的颜色,在达到视觉冲击力的同时,可适当采用少许对比色调和缓和于视觉,从而削弱视觉的疲劳度。



  要保持页面尺寸小巧,花些时间来处理一下图形,在保证图形质量的情况下使用尽量高的压缩比例,让图形尽量的小。

  另外,让图形使用较少的色彩也是一个让图形尽量小的办法。使用单调的颜色比使用梯度的颜色要好。使用梯度颜色可以在浏览器端快速填充颜色调色板供客户端显示。此外,减少图形的色彩深度进而可以使用较少的色彩树也是可以的。

  如果你需要提供较大的图象和多媒体文件,尽量不要插入页面里面,提供一个连接就可以了。这样,如果使用快速的连接点击图象就可以立刻看到,低速的连接不看图象也可以看到他最关心的内容,浏览感觉上没有什么延迟是最好的。

  

  4、不要假设用户的显示器和分辨率大小。

  一个常见的错误的是好多的网页设计师都认为访问者都有一个他们一样显示效果良好的大屏幕显示器。按照目前的状况,你可以为你的站点优化设计为标准的800×600分辨率,这是现在主流显示器的的默认显示分辨率。
  搜索引擎,比如Excite,我们可以发现一些为增加大量用户访问量的好主意。举例来说,多使用表格单元格颜色填充。该页的网页设计师为该网页添加了背景色,这样用户就不会在感觉上觉得下载页面耗费的时间过多。另外,大多数的显示器只能显示256色,而不是设计师所使用的真彩上百万种颜色设置。浏览器能显示的颜色在浏览器"安全色彩范围",即256色以内。后面我们将详细讨论这个问题。

  5、小心使用插件(plug-ins)和Applets。

  突出交互性或者多媒体特性的站点通常使用plug-ins和applets。Plug-ins是Web浏览器功能的扩展。浏览者如果安装了Plug-ins,他们就能够运行不同类型的文件,比如动画,视频和音频。Applets是小的程序片断或者是工具,经常用Java语言编写,可以借助诸如浏览器这样的大型程序完成一些有用的功能。

  虽然plug-ins和applets能大大增强站点的交互性和多媒体性能,但是对于一些较老配置的机器来说,这无疑又是一个多余的功能。举例来说,Java applets仅能工作在32位的操作系统下,Windows 3.

 虽然plug-ins和applets能大大增强站点的交互性和多媒体性能,但是对于一些较老配置的机器来说,这无疑又是一个多余的功能。举例来说,Java applets仅能工作在32位的操作系统下,Windows 3.x就行不通(虽然现在很少有人使用了)。另外,plug-ins需要花费时间下载安装,但并不是每一个用户都能熟练的完成下载后安装这样一个过程。不熟练的用户安装plug-ins的时候可能会遇到故障,不熟练的用户不需要这样的烦恼。

  如果你判断你的受众可以安装plug-ins和applets,你必须要在相关的部分提示用户,下载plug-ins和applets的时间和地址,并且安装过程中需要注意哪些方面的内容。这样可以方便用户的使用。如果是非常重要的信息,建议你提供一个可用的如纯文本型的可用信息,以方便那些确实无法安装plug-ins和applets的访问者。

  6、仅仅在需要的时候使用帧(FRAME)。

  使用帧可以把一个浏览器分成几个不同的窗口,对于站点的结构的把握是一个不错的方法。但是,你还是必须知道,还是有人在使用不支持帧的浏览器。在你开始打算设计一个帧的时候,你该仔细的考虑考虑你是否的确真的需要。经常,你这样的需求可以通过表格来组织站点的结构。当然,有些特别特别老的浏览器的确连表格也不支持。哎,这样说来,我们似乎真的是没有办法了。

  如果你必须使用帧,设法为还在使用那些古董浏览器的用户提供其它的解决办法。最坏的打算就是,如果真的没有办法解决,给这些用户一些道歉的信息,不要让他们感觉到你忽视了他们的存在。
7、不要忘记Web浏览器。

  你应该知道,最终的浏览者有很多的方法可以控制网页在客户端浏览器的显示效果(包括字体大小,颜色等等),不过从市场占有率来看,网景公司的航海家(Navigator)相比微软公司的探险家(Internet Explorer)的份额正逐渐减小。



  对一个指定的站点来说,如果考虑到某些访问者不喜欢使用图形方式的导航条,测试的时候你就需要关闭图形显示。所以,在制作的时候,你就必须要考虑到大部分(不是全部,当是至少应该考虑到导航条图形)的图形必须要使用文字提示,这样即使在浏览者客户端不显示导航图片的时候还有文字给予适当的提示,这样的感觉,会好很多,至少面对无法显示图形的红叉而言,这样的文字提示就给人以友好的感觉二不至于无所适从。

  事实上,微软公司出品的WEB探险家和美国Netscape公司航海家已经有越来越多的相似之处了,其实,早在一年前,他们之间的兼容已经不是一个大问题了。但是在细节上还是有区别的,某些在某个浏览器看上去的效果用另外一个浏览器看就完全不是那么一回事了。你可以理解这些差别,但是你无法支配他,不同的浏览器看上去就是不同,就象不同的人眼里的某个人各自会有不同的印象一样。你所需要的,就是知道他们存在差别,你应该尽量的去避免使用导致巨大差别的代码或者方法。

  好消息是,这二个浏览器都可以免费下载,对用户来说,完全可以尝试用二个浏览器去看看你的站点有什么不同的浏览感受,选择的权利在于浏览者,而你作为站点设计者,要做的只是去倾听浏览者可能的反馈。坏消息就是,你不能控制访问者使用什么样的浏览器,或者额外的去改变浏览器窗口的大小,设置字体类型、颜色和大小。你能作的就是当访问者不能访问某些部分的时候建议他们使用什么样的配置,怎么样看你的站点,这样他们就可以使用默认的设置或者你建议的浏览器。  

  8、保持苹果和PC格式兼容。

  很多的页面在苹果环境中设计而浏览者使用的确是PC。对大部分页面来说,这个理由。实际上,浏览器比操作系统更多的影响站点的浏览效果。有一个需要指出的事实,在IBM兼容PC机上看到的图片似乎比苹果机上的小,而且颜色稍深。如果你的站点图形大部分在苹果机上设计,建议在发布之前,在PC机上进行预览,看是否有较大的效果差异。

  苹果机和PC上显示的同样的颜色在某种程度上看上去往往有些差别。说的更精确些就是我们早前提到的关于调色板的区别在起着决定性的作用。这二个不同的平台,有216个通用的颜色,所以,网页设计师在设计的时候尽量使用这通用的216色就可以最大程度的保证这二个平台的页面色彩显示效果基本一致。
9、测试、测试、再测试!

  不要为我的罗嗦而感到厌烦。为了保证在众多的浏览者浏览器里面能正确的看到我们所想表达的页面效果,所以正式发布站点之前的测试显得非常的重要,是重中之重。从你自己的电脑开始,一遍又一遍的开始测试,使用不同的浏览器,试着调整浏览器窗口的宽度和高度,关闭图形显示,试着使用不同的显示分辨率。然后,在朋友、同事甚至邻居的电脑上重复刚才作过的事情。

  有专业的网页设计师建议我们将测试工作交给熟识的普通的用户去进行,因为这样才符合大多数的使用者的习惯,而且这些用户使用的浏览器版本较老,这样可以保证最终用户的浏览效果。有必要强调这一步的重要性。在办公室里面,我们经常可以看到一些似乎是作为点缀使用的古老的机器(几乎能见证电脑的发展历史),我们不妨用作我们的测试机器,似乎更能体现这些古董机器的价值。而这些古董机器得出的测试结果,往往比我们使用的专业的设计师所有的电脑测试的效果更加客观,更加具有代表性。

  10、可以通知你的访问者了。

  即使我们作了上面我们要作的一切工作,你必须明白,我们还是无法保证这个精心设计的站点能让每一个访问者都有很好的显示效果。如果你在首页上明确指出浏览你的站点需要具备什么什么样的条件,你必须明白并非所有的用户都能具备你所要求的条件。你可以为这些不能满足你认为的基本条件的用户一个另外的选择,这样可以让他们知道你并没有忽视他们。你可以告诉他们如何通过电话,书信或者电子邮件的方式与你取得联系,这样也不至于让他们空手而归。

www.xker.com()

  最后,经过测试、验收合格的站点才能向全世界发布。浏览者是否有兴趣浏览你的站点或者在你的站点停留很长事件已经完全摆脱你的控制了。有些用户由于使用速度过慢的调制解调器而变得烦躁不安,或者是页面无法显示图形或者,或者用户使用了他们个性化的浏览器无法正常显示站点……这些问题都将存在,一点也不用感到惊奇。我们现在所能作的,就是从客户的反馈信息当中分析和测试用户的多样性和可能性不断的进行调整。

  无论如何,你已经从你的站点得到某种心理上的满足。在开始继续作这件事情以前,你可以坐下来清楚的想想你究竟是为了什么创建这个站点的。仔细的列出你的连接,并不是所有的用户都有耐心在你的站点上寻找他所关心的内容。让他们知道什么时候什么地方将提供什么,比如你准备在什么时候提供一个重要资料的下载等等。尤其重要的是,要让那些相关的宣传对象满意,因为一旦他们发现一些对他们有用的东西,他们将向他们周围的朋友、同学或者亲戚进行扩散,这样你的站点的知名度就会慢慢的打开。

深橙红色系
  
    
   → 深橙红色网页例图:http:// www.matisserestaurant.ca
  

   深橙红色系分析:

  从色相度中可以知道0度为正红色,30度为正橙色,而主色调的HSB数值H显示22度可知,该深橙红色是橙色基础上加入少许邻近色红色,整体上降低了明度而得,因为红色本身较橙色明度低,因此这里橙红色的明度呈现出较低状态。
  辅助色选取了明度相对于主色调更低的三种颜色,前面两种饱和度都较高,最后一种灰蓝色由于明度较高因此饱和度降低,是主色调与前面两种辅助色的协调色。
  这个页面背景色运用了纹样,是以目前选取的主色调颜色和明度较暗的深红色结合而得,使得明度稍暗。
  数值上看,主色调也就是背景色的饱和度较高,但是由于降低了明度,颜色变得较沉稳。辅助色RGB数值显示,添加了适量的其他颜色,G和B数值区别不大,因此饱和度降低,颜色趋于柔和稳定。点睛色的加入和提亮,使页面视觉效果得到强化。

   结论:
  前景色通常要较明显的区别于背景色,达到台前的宣传目的。当饱和度较低的前景色与背景色变化不明显时,形成的是另外一种柔和统一的效果。

浅橙色同类色
  
   → 浅橙色同类色网页例图: http:// www.talentic.com
  

   浅橙色同类色分析:

  从主色调和辅色调在HSB数值H显示的数值是36可以看出,该页面色调是在同一种橙色的基础上只在明度上发生了变化。由于主要色调是浅橙色,明度越高饱和度越低,页面上减弱了饱和度较高的橙色特性,整个网页呈现出柔和自然稍有些发灰的调子。
  该网页是在橙色这一个颜色上做不同明度黑白灰色阶的柔和变化,属于单色调,配色非常的单纯。色阶平稳,同时存在着不够醒目的状态。白色在这里是起到了拉开主色调和辅色调空间距离,增强辅色调橙色的特性,使整个稍许有些发灰的页面明快了不少。但也由于白色属于非色彩,只在明度上呈最高数值而无彩度,不能给页面带来彩度所具有的鲜活靓丽的感觉,另一方面却也呈现出质朴的感受。

   结论:
  前面我们提到过同类色是在同一色相中不同的明度颜色变化。因此这类颜色相对其他类别颜色来说明净而单纯,配色上较容易达到协调统一,但也容易显得单调。
  初看该页面配色协调舒服,但看多了的确有些单调乏味的感觉,这也是同类色搭配的特性。同时由于运用了渐变色这一调和方法,该页面同时占有了前面我们提到的4种色彩中的调和方法的2种,整个页面呈现出调和中的调和是勿庸置疑的,但也同时显得有些单调,没有色彩亮点。

橙色系邻近色(黄色+橙色+橙红色)
  
  
   → 邻近色橙色网页例图:http:// www.tide.com

  
   橙色系邻近色(黄色+橙色+橙红色)分析:
  虽然第一眼看上去似乎色调上变化很多,但该网页的色彩构成主要是由黄色和橙色这两种邻近色构成的,通过不同的明度和纯度的变化而得到更为丰富的色阶,它们是浅黄色、黄色、橙色、橙红通过不同的形状面积,位置变化而得。从HSB数值中的H可以看出属于暖色范畴,三个色相的倾向不是很明显,以至于色彩呈现较规律、缓和。由于不同数值的明度表达,纯度也做出了不同的数值变化。www.xker.com()
  浅色在这里主要起到更调和主色调和点睛色的色彩过渡作用。点睛色在这里起到强调整个页面的华丽感,增强整个页面彩度的作用。

   结论:
  橙色与邻近色黄、红暖色调的搭配组合,这是一种简单又安全的方法,视觉韵律上处理得井然有序。整个页面看起来艳泽华丽、新鲜充满活力的感觉,符合Tide这一主题所要表达的目的。

橙色系对比色(橙色+蓝色)
  
   → 对比色橙红色应用网页例图: www.rastifilms.com.ar

  

   橙色系对比色(橙色+蓝色)分析
  HSB数值中的H色相显示主色调橙红色为26,我们知道正红色的H为0,正橙H为30,主色调橙红色是往0偏移而得。正蓝色是240,而该点睛色蓝色为192,往绿度偏移,在RGB中的数值G160也能看出来,因此蓝色的特性不是很强。但由于橙红色的明度饱和度达到最高值,因此尽管蓝色不是正蓝,但它的特性得到了很大程度的发挥。
  此种橙蓝对比色中的蓝色调配,比较少见,让人很容易记住它。而橙红色的饱和度明度都非常高,刺激度强,属于让人不可久视的颜色。
  介于橙红色和蓝色之间,与蓝色面积相当的白色,起到调和对比色橙红与蓝色之间关系的作用。

   结论:
  这组对比色通过使用的面积位置的不同来反映主次之间的关系。对比色能相互强烈的突出色彩特性。这组对比色属于是非常能突显个性的颜色。

橙色系高纯度高对比度(橙红色+绿色)
  
   → 橙色高纯度对比应用网页例图:  www.aliveis.com

  

   橙色系高纯度高对比度(橙红色+绿色)分析:

  与上组的橙色绿色相比,这组颜色强烈而刺激,色彩倾向无疑明确了很多。主色调橙红色往红色倾向,而红色的对比色是绿色,因此整组颜色有强烈的对比效果。从HSB数值H上看,除了蓝色外,其余几种颜色纯度都非常高,加上又是近于红绿对比色。页面的刺激强度是可想而知的强烈。
  黄色是中间色,起到过渡对比色作用,在这组色里属于调和色。蓝色出现在产品图案上,引导主次关系,增强视觉的注目点。

  结论:
  橙色是注目容易引起食欲的颜色,在这里得到了较充分的应用。
  非色彩的白色和黑色在这里起到了非常重要的作用,拉大了色彩色阶空间的距离。白色让整个色调组合更加明快,而黑色增添色彩的厚重质感——强烈中的强烈,增强对产品的视觉刺激。   


  本部分小节:

  
   橙色在HSB数值的H中为30度,是正橙色。橙色是一个非常响亮注目的颜色。橙色的对比色是蓝色,当这两种颜色彩度倾向越明确,对比强度就越大。但我们也看到,除了正宗的对比色橙蓝色外,橙色和绿色随着纯度的升高,达到的对比效果也很强烈。
  在今后的配色设计中可以多些不同明度纯度冷暖对比的尝试,会有意想不到的收获。

   白色是所有网页设计中属于较通用的颜色,它容易突出彩度的特性,明快于整个页面,当一个页面设计没有使用白色时,空间感觉减弱,容易造成彩度不够明确、页面有些沉闷等反应,然而又相对来说增添页面的厚重感觉,制造另外一种环境气氛。黑色在色调组合的辅助角色里容易制造出厚重的色彩效果。
  从这里我们又一次感受到色彩的相对性,即没有绝对的配色组合,它们总是根据搭配不同的色彩组合或强或弱的表现出什么样的特性。
www.xker.com()
   同类色、邻近色的组合,是非常调和的色彩组合,即使减少了色相的数量,一样也可以调配出很多不同的调和色彩。对于初学者来说,这是一个非常实用的配色方法。
  

责任编辑:


相关文章
 

最新文章

更多

· 建立自己的博客的过程中...
· 一个合格网页设计师的标...
· 如何制作出非常美观的网页
· 如何解决百度的搜索代码...
· 网页刷新方法
· 网页制作IE功能汇总
· 滚动字幕的制作 marquee
· 网站建设:对网站前台架...
· 网站设计的思考网页版面...
· 获得网页控件方法大全

推荐文章

更多

· 建立自己的博客的过程中...
· 一个合格网页设计师的标...
· 如何制作出非常美观的网页
· 如何解决百度的搜索代码...
· 网页刷新方法
· 网页制作IE功能汇总
· 滚动字幕的制作 marquee
· 网站建设:对网站前台架...
· 网站设计的思考网页版面...
· 获得网页控件方法大全

热点文章

更多