W Design & NEWS

网页设计——选择正确的配色方案

W-design2015.09.16

网页设计——选择正确的配色方案

网页设计——选择正确的配色方案

挑选正确的配色方案是设计过程中比较困难的阶段。配色方案可决定网站的成败。您选择的颜色需表达网站的整体氛围,您的配色方案也将引起读者对页面关键区域的注意。网站设计需花大量时间在配色方案上,确保能按以下提示和工具选用最合适的配色方案。

根据文字配色

文字是网页最重要的元素。如果读者看不懂您的网站,那就没有任何意义,他们会关闭您的网站。不管是出现在导航条还是正文的文字,都应选择合适的颜色,使文字易于辨认。标准的选择就是用浅色背景搭配深色文字。大多数人已习惯这样因为平面媒体已有悠久的历史。当然,网页设计中我们不必拘泥于平面媒体的式样,只要适合您的网页,可以任意选择深色搭配方案。

下例是暗色设计。导航元素以低对比度在背景中衬托白色文字。红色形成反差,也指出此网页的焦点。

下例是导航条和文本区域的禁忌。瓶身上的字不统一且难以辨认。正文采用两种最不合适的背景颜色。黄色的文本与背景图片中的瓶子很不搭配。

 

图片1 蓝色背景搭配不合适的文本颜色

选择颜色

以前,网页设计限制使用 216 种网络安全颜色的调色板,但现在浏览者几乎允许使用所有颜色。任意搭配颜色不代表您就可以尝试浅色背景搭配深色前景色。背景颜色至少占据网页的50%,将确定网页基调。但只要它适合您的网页定位,也可以大胆颠覆这种传统的颜色搭配方案。

根据标志选颜色

您的标志是选择网页颜色的起点。试用反差较大的颜色突出显示标志,也可使标志颜色成为网页中新的色彩元素。以下图片来自联邦快递,是个很好的例子。标志中的紫色突出显示灵活的导航条,网页的服务部分指出消费者可获得的主要服务。浅灰色也具有装饰作用,灵活地运用于导航条和滚动条。

 

图2 — 联通快递突出标志色彩

挑选颜色工具:

颜色搭配方法无数。经验表明如果网页运用的色彩超过 5 种,那就太多了。像 Color Scheme Designer 和 Adobe’s Kuler project 这两款工具让您可运用以下原则试用色彩搭配方案。

§                    互补原则——调色板上相对的颜色

§                    模拟原则——调色板上相邻的颜色

§                    单色原则——不同深浅的同种颜色

§                    三分体或四分体原则——调色板上等距的三种或四种颜色

除了上列举例,还有多种色彩搭配理论原则,但上述原则是最流行的搭配。

这两款工具让您与其他设计者的方案对比,还可将调色导出到调色板,作为GIMP或Photoshop中备用的样式。Adobes Kuler Web 应用程序也在色彩选择方案里添加了许多社会定位的方案。

有许多种 Web 应用程序用于创造适用所有平台的色彩搭配方案。这只是两个最流行的例子。我再多列举几个,以便大家探索。

§                    颜色策划(http://www.colorschemer.com/)---设计师的在线画板和论坛

§                    色彩混合器(http://colorblender.com/)--RGB/HSV 曲线工具,具备简单的导出功能

§                    可用色彩实验室(http://www.visibone.com/colorlab/)----只选用216 种网络安全色彩调色板的基色选取工具

§                     色彩理论(http://colortheory.liquisoft.com/)-不同于其他工具,是一个帮助理解上文所述色彩理论的网址

W design values every chance to work with you.