网站配色与布局的相关性及融合发展路径

翁洁

摘 要 在网站页面设计中，配色與布局起到了主导设计风格和突出网页功能的重要作用。而在设计网站页面的过程中，如果不了解配色与布局间的相关性，则会降低网站设计的实际功能以及审美效果。因此本文就网站配色与布局的相关性进行分析，并提出网站配色与布局的融合发展路径，以期在网站页面设计中能够更加促进配色与布局的融合发展。

关键词 网站设计 配色 布局 融合发展

中图分类号：J524 文献标识码：A DOI：10.16400/j.cnki.kjdkx.2018.02.015

Abstract In website page design， color matching and layout play an important role in leading the design style and highlighting web page functions. In the process of designing a website page， if you do not understand the relevance between color matching and layout， it will reduce the actual function and aesthetic effect of website design. Therefore， this paper analyzes the relevance of the website's color matching and layout， and puts forward the integration development path of website color matching and layout， so as to promote the integration of color matching and layout in website page design.

Keywords website design； the color； layout； fusion development

在互联网中，网站内容十分庞杂，由其市场需求划分主体设计元素。因此，依据用户需求的差异，网站整体色调与布局效果也各有不同。如果配色基调与整体布局相融合，则会突出设计美感，激发用户的使用兴趣，反之则会达到截然相反的设计效果。以淘宝网为例，其主营目标为C2C市场的客消群体，那么以橘黄色为主基调，激发消费者的购物欲望，同时以分层框架勾勒整体布局，更加方便客户选择产品。如果配色选择或者网站布局不合理，则会造成视觉冲突，进而降低网站的整体观感。在现代网站设计中，网络平台公司越发重视自身网站的设计效果，而影响设计效果的两个基本点，则为配色与布局。

1 网站配色与布局的相关性分析

1.1 配色与布局的对称平衡

配色与布局作为影响网站视觉设计效果的两个重要因素，在对称平衡上体现最为明显。从布局角度而言，网站结构设计是对各模块大小比例的划分，而颜色搭配在其中起到了避免视觉冲突的有效作用。当配色与布局无法形成视觉感官上的平衡效果，如上下或左右布局及颜色形成极大反差，其视觉感受也会同时降低，最终影响网站的整体感观。因此，在网站设计中，只有完全控制好布局比例和色彩搭配，才能形成较好的设计效果。以哈根达斯夏季主题的官网首页设计为例，在整体布局上相得益彰，而色彩以产品主色调枣红和乳白色为基底，同时衬托主营产品的视觉冲击力，形成色彩与布局的鲜明对比和黄金比例。进而给浏览者一种甜蜜的视觉印象，突出了均衡效果的网页设计理念，更加对配色布局的对称平衡进行了完美诠释。

1.2 配色与布局的对比统一

在网站设计中，设计对比来自颜色布局的反差效果，这样的设计方式，是为了突出主营产品的视觉效果。通过较为强烈的颜色对比、明暗对比以及方向对比，形成整体网站的对比效果。通过形状对比突出网站图像、文字、产品等设计元素的大小反差，进而形成一定的浏览顺序，引导用户的浏览方向。以星巴克官方网站的设计为例，主产品为现磨咖啡，而咖啡机、磨豆机、咖啡杯等原始颜色，在网页中形成自然对比。而依托产品logo的军绿色为主，形成了颜色对比的鲜明反差。同时在整体布局中，运用大比例海报将所有产品细分，以便突出各自产品的特点，并形成颜色与布局的对比，也就有效地提高了浏览者对系列产品的区分。而且在Starbucks首页中，将咖啡文化进行了怀旧处理，更加形成了一种与现代社会快节奏的文化反差，进而产生了超越设计本身的文化输出。这样的设计理念也是对比统一的文化驾驭，在文化底蕴深厚的品牌网站中较为常见，如Gucci、Chanel等国际一线品牌的网站设计中，其对比统一手法的运用在突出主营产品的效果上升华了网站产品的视觉冲击力，使得整个页面在对比中形成特色的协调美感。

2 网站配色与布局的融合发展路径探析

2.1 强调配色与布局的突出搭配

对于网站设计而言，其配色与布局两个设计角度，实质上是一个完整的设计过程，而且缺一不可。设计出的网站页面，需要起到引导用户浏览的视觉功能，就要从突出的主题元素中深度挖掘配色与布局的融合点。既可以为页面布局，也可以由配色进行突出元素的特定设计。在lee的官方网站活动页面中，设计师以突出的背景颜色和动态变化的布局设计，突出了靶心式布局的浏览效果，从而吸引浏览者进入中心页面。这样的布局配色方式更加容易吸引浏览者的注意，进而发挥出配色与布局对网站设计的突出性的引导作用。在RAGE游戏网页设计中，能够发现配色突出的功能导向。将不同色块进行编排整合，进而通过色块区分各个子页面的二级连接功能，从而出现了格外醒目的跳跃性字体和深色背景的鲜明对比。那么也就将配色与布局的突出性有效地表现在页面中，形成了相互融合的视觉效果。

2.2 注重配色与布局的虚实留白

在网站设计中将配色与布局有效地融合到一起，应当以真实布局和虚拟布局形成特色的虚实结合的表达方式。而所谓的留白，就是在网站设计中的“空白”处页面，这里的空白并非单纯意义的白色，而是在网页中不具备实际功能的布局区域，这个区域可以为任意颜色。中国书法中将以白色宣纸与黑色墨砚形成鲜明对比，建筑师密斯·凡·德·罗对建筑留白中“少即是多”的设计观点也是对空白处艺术效果的意蕴诠释。从中能够明确，将配色与布局有机融合到一起，并非一味地添加设计元素，适当的减法设计反而更加能够突出网站页面的主体功能，并形成对立平衡的视觉设计效果。在浏览者停留于思考的空隙处，留白起到了一定的铺垫作用，以这样的视觉传达效果突出网页主题，则能够有效地将配色与布局在虚实之间重新分配与整合，形成对称平衡与对比统一的视觉效果，那么也就将配色与布局完整地融合到同一网站页面中，而且发挥出各自的设计作用。

2.3 完善配色与布局的节奏韵律

在网站页面设计中的节奏韵律，是指在各种组合元素中将时间、深度、厚度、宽度、高度等有规律或无规律的间接性变化以及阶段性变化有机地整合到一起，形成浏览页面时的节奏韵律烘托。这样的节奏韵律产生与网页设计中的点线面的规律变化，即是在配色中产生的明暗、深浅、冷暖等色泽对比，也是在布局中形成的曲直、大小、疏密等设计结构。当网站页面设计运用了节奏韵律的设计方式，也就将配色与布局完整地化为统一的表达形式，并赋予网站页面以生命力，形成更高的浏览体验度。在很多美食网站中，将页面布局设计成为错落有致的排序方式，也是通过富有律动感的元素融合手法，将配色与布局融合到一起，并掌握模块中的节奏对比，从而以动态页面特效丰富了网站的主旨内容。

3 配色与布局的融合发展趋势

3.1 配色与布局的全新技术

网站设计由最初的纯文字页面，发展到结合图片的形式，以及多媒体插件在网页设计中的动态表现手法，其网站设计的内容形式在技术更新的过程中也得到了发展。近些年来HTML5和Flash技术的应用，对网站配色和布局起到了较大促进作用，动态页面的布局方式，也将网站配色的要求更加细化。尤其在一些网站页面设计中，鼠标也会在浏览移动过程中产生不同的设计效果，那么在很大程度上为配色与布局提供了更大的发挥空间。而Cookies技术在网站设计中的应用，也可以将浏览者的访问记录保存，Web服务器在判断Cookies提供的相关信息时，根据来访者的相关记录，提供不同布局与配色的展现方式，也成为未来网站设计的主流趋势。

3.2 多元化终端对配色与布局带来的新挑战

基于当前网站设计已经并不单纯集中在终端显示器浏览的层面，而且更多集中于无线终端，如平板电脑或者智能手机中。在网站配色与布局的融合发展上，需要同时兼顾web页面与H5页面的融合方式。在网站PC端浏览页面中，由于显示器的屏幕较大，通常可将布局紧密罗列，进而将更多的功能模块依次排开。但是在无线终端的手机页面中，其网站页面如果排列过于紧密，浏览效果势必下降，因此目前多数网站将PC端页面与手机端页面分开设计，那么在网页结构布局中则不可能完全一致，但是为了符合品牌设计理念与整体设计效果，让浏览者能够第一时间体验到网站PC端与手机端的风格统一，那么就要在小布局模块中保持一致，同时在配色方式上设计统一色调。此外，小尺寸手机多为480？20分辨率，而7寸屏幕则会达到1024？00分辨率，iPad却能达到2048？536分辨率，各种终端设备在现实应用中由于分辨率差异较大，那么设计师在进行网站设计时，需要對页面设计的终端效果反复考虑，尤其在配色和布局的融合中，需要考量网站页面在不同终端的设计效果，因此也对多元化的终端设计提出了更高的配色与布局要求。

4 小结

综上所述，网站设计中将配色与布局有机地融合到一起，是为了突出网页的主体功能与审美效果。其中配色与布局起到了对称平衡与对比统一的设计作用。那么在网站配色与布局的融合发展过程中，需要注重三个维度的设计方式，即：强调配色与布局的突出搭配；注重配色与布局的虚实留白；完善配色与布局的节奏韵律。尤其在配色与布局的全新技术全面发展，而显示终端多元化不断发展的过程中，注重配色与布局的合理搭配，是将配色与布局有机地融合到一起的重要途径。

参考文献

[1] 张丽萍.网页配色与版式布局的设计[J].产业与科技论坛，2015.14（3）：57-58.

[2] 张嘉兴.网页中色彩搭配与网站内容关系研究[J].美术教育研究，2015（8）：84-85.

[3] 金燕.网站美术视觉效果布局设计探究[J].知识经济，2013（4）：118.

[4] 盛昀瑶，张力.TRL-SS整合模式在高校教学中的实施研究——以“网页布局与配色”课程为例[J].湖南邮电职业技术学院学报，2016.15（2）：104-108.