(3)对比色网页
这是最广泛的网页色彩搭配类型,很多初学设计的人会以为色彩对比主要是红绿、橙蓝、黄紫色的色相对比,实际上色彩对比范畴不仅仅局限于这些。虽然这里的对比色不是严格意义上色彩关系中的对比色,但大致也可以理解为能够凸显色彩特点,起到吸引眼球、突出主题作用的网页色彩对比。具体来讲,在网页界面设计的色彩构成中,色彩的面积、形状、位置以及色相、明度、纯度之间都可以产生对比效果,从而使网页色彩配合增添不同的变化,页面更加丰富多彩。
在设计这一类网站之前,需要确定网站整体的色彩基调,特别是贯穿整体网页的主色调和具有视觉冲击的点缀色要相得益彰。通常具备主、次两种色调就够用了,也可以通过调整色调、色彩和色度来灵活创造更多的可能性。
值得一提的是,网站的色彩比例控制在6∶3∶1最为适宜。如果色彩比例太均匀,会让色彩之间相互冲突,主次不分。“6∶3∶1”规则指的是,主色调应该覆盖6成的网页和UI元素,辅助色占据3成,而剩下的1成则应该是装饰色或者强调色。如图1-9所示的Best Buy就是一个典型的案例,以蓝色为主色调,黄色为辅助色,红色用以强调。

图1-9
图1-10是欧美一个体育运动类主题的网站,将蓝灰色的背景和降调的图片作为主基调,搭配明黄色的标题文字,风格明快,重点突出,很好地表达了运动类网站的个性色彩。

图1-10
图1-11是土耳其食品New Leaf 的官方网站的界面设计,设计师大胆采用了高纯度的黄色和蓝色作为网页主基调,对比色的运用让网页色彩鲜亮,令人印象深刻,很好地展示了果汁饮品的特征。这样灵活的色彩搭配是非常考验设计师的想象力和创造力的。

图1-11
小贴士(https://www.daowen.com)
网站配色的目的是要提高网站的体验性和可读性,不让用户分心。配色方案需要保证即使是色盲用户都能准确而轻松地获取网站内容。所以,网站的配色并非是随心所欲地搭配,而是在充分满足阅读功能的前提下,做最为舒适的色彩配合。在网页配色中,还要切记一些误区:
①避免使用高饱和度的色彩作背景。
②不要将所有颜色都用到,一个页面尽量将主要色彩控制在 3 种以内。
③不使用花纹繁复的图案作为背景,以方便用户阅读主要的正文文字。
色彩术语
·色相(Hue)——各类色彩的总称谓,如红色、蓝色、黄色。
·色彩饱和度(Saturation)——颜色的整体强度,也称为纯度。
·明度(Value)——某种色相通过加入不同比例的白色或黑色而产生不同的颜色明暗程度。
·色调(Tone)——纯色和灰色组合产生的颜色,也可以说是一幅画中画面色彩的总体倾向。
·色环(Chromatic Circle)——又称为色轮,是一种按照色彩序列进行的首尾连接的呈现方式,最为普遍的是12色环或者24色环。在网页配色方案过程中,色环是最重要也是最实用的工具之一(图1-12)。

图1-12