翁潔

摘 要 在網(wǎng)站頁面設(shè)計(jì)中，配色與布局起到了主導(dǎo)設(shè)計(jì)風(fēng)格和突出網(wǎng)頁功能的重要作用。而在設(shè)計(jì)網(wǎng)站頁面的過程中，如果不了解配色與布局間的相關(guān)性，則會(huì)降低網(wǎng)站設(shè)計(jì)的實(shí)際功能以及審美效果。因此本文就網(wǎng)站配色與布局的相關(guān)性進(jìn)行分析，并提出網(wǎng)站配色與布局的融合發(fā)展路徑，以期在網(wǎng)站頁面設(shè)計(jì)中能夠更加促進(jìn)配色與布局的融合發(fā)展。

關(guān)鍵詞 網(wǎng)站設(shè)計(jì) 配色 布局 融合發(fā)展

中圖分類號(hào)：J524 文獻(xiàn)標(biāo)識(shí)碼：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

在互聯(lián)網(wǎng)中，網(wǎng)站內(nèi)容十分龐雜，由其市場(chǎng)需求劃分主體設(shè)計(jì)元素。因此，依據(jù)用戶需求的差異，網(wǎng)站整體色調(diào)與布局效果也各有不同。如果配色基調(diào)與整體布局相融合，則會(huì)突出設(shè)計(jì)美感，激發(fā)用戶的使用興趣，反之則會(huì)達(dá)到截然相反的設(shè)計(jì)效果。以淘寶網(wǎng)為例，其主營(yíng)目標(biāo)為C2C市場(chǎng)的客消群體，那么以橘黃色為主基調(diào)，激發(fā)消費(fèi)者的購物欲望，同時(shí)以分層框架勾勒整體布局，更加方便客戶選擇產(chǎn)品。如果配色選擇或者網(wǎng)站布局不合理，則會(huì)造成視覺沖突，進(jìn)而降低網(wǎng)站的整體觀感。在現(xiàn)代網(wǎng)站設(shè)計(jì)中，網(wǎng)絡(luò)平臺(tái)公司越發(fā)重視自身網(wǎng)站的設(shè)計(jì)效果，而影響設(shè)計(jì)效果的兩個(gè)基本點(diǎn)，則為配色與布局。

1 網(wǎng)站配色與布局的相關(guān)性分析

1.1 配色與布局的對(duì)稱平衡

配色與布局作為影響網(wǎng)站視覺設(shè)計(jì)效果的兩個(gè)重要因素，在對(duì)稱平衡上體現(xiàn)最為明顯。從布局角度而言，網(wǎng)站結(jié)構(gòu)設(shè)計(jì)是對(duì)各模塊大小比例的劃分，而顏色搭配在其中起到了避免視覺沖突的有效作用。當(dāng)配色與布局無法形成視覺感官上的平衡效果，如上下或左右布局及顏色形成極大反差，其視覺感受也會(huì)同時(shí)降低，最終影響網(wǎng)站的整體感觀。因此，在網(wǎng)站設(shè)計(jì)中，只有完全控制好布局比例和色彩搭配，才能形成較好的設(shè)計(jì)效果。以哈根達(dá)斯夏季主題的官網(wǎng)首頁設(shè)計(jì)為例，在整體布局上相得益彰，而色彩以產(chǎn)品主色調(diào)棗紅和乳白色為基底，同時(shí)襯托主營(yíng)產(chǎn)品的視覺沖擊力，形成色彩與布局的鮮明對(duì)比和黃金比例。進(jìn)而給瀏覽者一種甜蜜的視覺印象，突出了均衡效果的網(wǎng)頁設(shè)計(jì)理念，更加對(duì)配色布局的對(duì)稱平衡進(jìn)行了完美詮釋。

1.2 配色與布局的對(duì)比統(tǒng)一

在網(wǎng)站設(shè)計(jì)中，設(shè)計(jì)對(duì)比來自顏色布局的反差效果，這樣的設(shè)計(jì)方式，是為了突出主營(yíng)產(chǎn)品的視覺效果。通過較為強(qiáng)烈的顏色對(duì)比、明暗對(duì)比以及方向?qū)Ρ龋纬烧w網(wǎng)站的對(duì)比效果。通過形狀對(duì)比突出網(wǎng)站圖像、文字、產(chǎn)品等設(shè)計(jì)元素的大小反差，進(jìn)而形成一定的瀏覽順序，引導(dǎo)用戶的瀏覽方向。以星巴克官方網(wǎng)站的設(shè)計(jì)為例，主產(chǎn)品為現(xiàn)磨咖啡，而咖啡機(jī)、磨豆機(jī)、咖啡杯等原始顏色，在網(wǎng)頁中形成自然對(duì)比。而依托產(chǎn)品logo的軍綠色為主，形成了顏色對(duì)比的鮮明反差。同時(shí)在整體布局中，運(yùn)用大比例海報(bào)將所有產(chǎn)品細(xì)分，以便突出各自產(chǎn)品的特點(diǎn)，并形成顏色與布局的對(duì)比，也就有效地提高了瀏覽者對(duì)系列產(chǎn)品的區(qū)分。而且在Starbucks首頁中，將咖啡文化進(jìn)行了懷舊處理，更加形成了一種與現(xiàn)代社會(huì)快節(jié)奏的文化反差，進(jìn)而產(chǎn)生了超越設(shè)計(jì)本身的文化輸出。這樣的設(shè)計(jì)理念也是對(duì)比統(tǒng)一的文化駕馭，在文化底蘊(yùn)深厚的品牌網(wǎng)站中較為常見，如Gucci、Chanel等國(guó)際一線品牌的網(wǎng)站設(shè)計(jì)中，其對(duì)比統(tǒng)一手法的運(yùn)用在突出主營(yíng)產(chǎn)品的效果上升華了網(wǎng)站產(chǎn)品的視覺沖擊力，使得整個(gè)頁面在對(duì)比中形成特色的協(xié)調(diào)美感。

2 網(wǎng)站配色與布局的融合發(fā)展路徑探析

2.1 強(qiáng)調(diào)配色與布局的突出搭配

對(duì)于網(wǎng)站設(shè)計(jì)而言，其配色與布局兩個(gè)設(shè)計(jì)角度，實(shí)質(zhì)上是一個(gè)完整的設(shè)計(jì)過程，而且缺一不可。設(shè)計(jì)出的網(wǎng)站頁面，需要起到引導(dǎo)用戶瀏覽的視覺功能，就要從突出的主題元素中深度挖掘配色與布局的融合點(diǎn)。既可以為頁面布局，也可以由配色進(jìn)行突出元素的特定設(shè)計(jì)。在lee的官方網(wǎng)站活動(dòng)頁面中，設(shè)計(jì)師以突出的背景顏色和動(dòng)態(tài)變化的布局設(shè)計(jì)，突出了靶心式布局的瀏覽效果，從而吸引瀏覽者進(jìn)入中心頁面。這樣的布局配色方式更加容易吸引瀏覽者的注意，進(jìn)而發(fā)揮出配色與布局對(duì)網(wǎng)站設(shè)計(jì)的突出性的引導(dǎo)作用。在RAGE游戲網(wǎng)頁設(shè)計(jì)中，能夠發(fā)現(xiàn)配色突出的功能導(dǎo)向。將不同色塊進(jìn)行編排整合，進(jìn)而通過色塊區(qū)分各個(gè)子頁面的二級(jí)連接功能，從而出現(xiàn)了格外醒目的跳躍性字體和深色背景的鮮明對(duì)比。那么也就將配色與布局的突出性有效地表現(xiàn)在頁面中，形成了相互融合的視覺效果。

2.2 注重配色與布局的虛實(shí)留白

在網(wǎng)站設(shè)計(jì)中將配色與布局有效地融合到一起，應(yīng)當(dāng)以真實(shí)布局和虛擬布局形成特色的虛實(shí)結(jié)合的表達(dá)方式。而所謂的留白，就是在網(wǎng)站設(shè)計(jì)中的“空白”處頁面，這里的空白并非單純意義的白色，而是在網(wǎng)頁中不具備實(shí)際功能的布局區(qū)域，這個(gè)區(qū)域可以為任意顏色。中國(guó)書法中將以白色宣紙與黑色墨硯形成鮮明對(duì)比，建筑師密斯·凡·德·羅對(duì)建筑留白中“少即是多”的設(shè)計(jì)觀點(diǎn)也是對(duì)空白處藝術(shù)效果的意蘊(yùn)詮釋。從中能夠明確，將配色與布局有機(jī)融合到一起，并非一味地添加設(shè)計(jì)元素，適當(dāng)?shù)臏p法設(shè)計(jì)反而更加能夠突出網(wǎng)站頁面的主體功能，并形成對(duì)立平衡的視覺設(shè)計(jì)效果。在瀏覽者停留于思考的空隙處，留白起到了一定的鋪墊作用，以這樣的視覺傳達(dá)效果突出網(wǎng)頁主題，則能夠有效地將配色與布局在虛實(shí)之間重新分配與整合，形成對(duì)稱平衡與對(duì)比統(tǒng)一的視覺效果，那么也就將配色與布局完整地融合到同一網(wǎng)站頁面中，而且發(fā)揮出各自的設(shè)計(jì)作用。

2.3 完善配色與布局的節(jié)奏韻律

在網(wǎng)站頁面設(shè)計(jì)中的節(jié)奏韻律，是指在各種組合元素中將時(shí)間、深度、厚度、寬度、高度等有規(guī)律或無規(guī)律的間接性變化以及階段性變化有機(jī)地整合到一起，形成瀏覽頁面時(shí)的節(jié)奏韻律烘托。這樣的節(jié)奏韻律產(chǎn)生與網(wǎng)頁設(shè)計(jì)中的點(diǎn)線面的規(guī)律變化，即是在配色中產(chǎn)生的明暗、深淺、冷暖等色澤對(duì)比，也是在布局中形成的曲直、大小、疏密等設(shè)計(jì)結(jié)構(gòu)。當(dāng)網(wǎng)站頁面設(shè)計(jì)運(yùn)用了節(jié)奏韻律的設(shè)計(jì)方式，也就將配色與布局完整地化為統(tǒng)一的表達(dá)形式，并賦予網(wǎng)站頁面以生命力，形成更高的瀏覽體驗(yàn)度。在很多美食網(wǎng)站中，將頁面布局設(shè)計(jì)成為錯(cuò)落有致的排序方式，也是通過富有律動(dòng)感的元素融合手法，將配色與布局融合到一起，并掌握模塊中的節(jié)奏對(duì)比，從而以動(dòng)態(tài)頁面特效豐富了網(wǎng)站的主旨內(nèi)容。

3 配色與布局的融合發(fā)展趨勢(shì)

3.1 配色與布局的全新技術(shù)

網(wǎng)站設(shè)計(jì)由最初的純文字頁面，發(fā)展到結(jié)合圖片的形式，以及多媒體插件在網(wǎng)頁設(shè)計(jì)中的動(dòng)態(tài)表現(xiàn)手法，其網(wǎng)站設(shè)計(jì)的內(nèi)容形式在技術(shù)更新的過程中也得到了發(fā)展。近些年來HTML5和Flash技術(shù)的應(yīng)用，對(duì)網(wǎng)站配色和布局起到了較大促進(jìn)作用，動(dòng)態(tài)頁面的布局方式，也將網(wǎng)站配色的要求更加細(xì)化。尤其在一些網(wǎng)站頁面設(shè)計(jì)中，鼠標(biāo)也會(huì)在瀏覽移動(dòng)過程中產(chǎn)生不同的設(shè)計(jì)效果，那么在很大程度上為配色與布局提供了更大的發(fā)揮空間。而Cookies技術(shù)在網(wǎng)站設(shè)計(jì)中的應(yīng)用，也可以將瀏覽者的訪問記錄保存，Web服務(wù)器在判斷Cookies提供的相關(guān)信息時(shí)，根據(jù)來訪者的相關(guān)記錄，提供不同布局與配色的展現(xiàn)方式，也成為未來網(wǎng)站設(shè)計(jì)的主流趨勢(shì)。

3.2 多元化終端對(duì)配色與布局帶來的新挑戰(zhàn)

基于當(dāng)前網(wǎng)站設(shè)計(jì)已經(jīng)并不單純集中在終端顯示器瀏覽的層面，而且更多集中于無線終端，如平板電腦或者智能手機(jī)中。在網(wǎng)站配色與布局的融合發(fā)展上，需要同時(shí)兼顧web頁面與H5頁面的融合方式。在網(wǎng)站PC端瀏覽頁面中，由于顯示器的屏幕較大，通?？蓪⒉季志o密羅列，進(jìn)而將更多的功能模塊依次排開。但是在無線終端的手機(jī)頁面中，其網(wǎng)站頁面如果排列過于緊密，瀏覽效果勢(shì)必下降，因此目前多數(shù)網(wǎng)站將PC端頁面與手機(jī)端頁面分開設(shè)計(jì)，那么在網(wǎng)頁結(jié)構(gòu)布局中則不可能完全一致，但是為了符合品牌設(shè)計(jì)理念與整體設(shè)計(jì)效果，讓瀏覽者能夠第一時(shí)間體驗(yàn)到網(wǎng)站PC端與手機(jī)端的風(fēng)格統(tǒng)一，那么就要在小布局模塊中保持一致，同時(shí)在配色方式上設(shè)計(jì)統(tǒng)一色調(diào)。此外，小尺寸手機(jī)多為480？20分辨率，而7寸屏幕則會(huì)達(dá)到1024？00分辨率，iPad卻能達(dá)到2048？536分辨率，各種終端設(shè)備在現(xiàn)實(shí)應(yīng)用中由于分辨率差異較大，那么設(shè)計(jì)師在進(jìn)行網(wǎng)站設(shè)計(jì)時(shí)，需要對(duì)頁面設(shè)計(jì)的終端效果反復(fù)考慮，尤其在配色和布局的融合中，需要考量網(wǎng)站頁面在不同終端的設(shè)計(jì)效果，因此也對(duì)多元化的終端設(shè)計(jì)提出了更高的配色與布局要求。

4 小結(jié)

綜上所述，網(wǎng)站設(shè)計(jì)中將配色與布局有機(jī)地融合到一起，是為了突出網(wǎng)頁的主體功能與審美效果。其中配色與布局起到了對(duì)稱平衡與對(duì)比統(tǒng)一的設(shè)計(jì)作用。那么在網(wǎng)站配色與布局的融合發(fā)展過程中，需要注重三個(gè)維度的設(shè)計(jì)方式，即：強(qiáng)調(diào)配色與布局的突出搭配；注重配色與布局的虛實(shí)留白；完善配色與布局的節(jié)奏韻律。尤其在配色與布局的全新技術(shù)全面發(fā)展，而顯示終端多元化不斷發(fā)展的過程中，注重配色與布局的合理搭配，是將配色與布局有機(jī)地融合到一起的重要途徑。

參考文獻(xiàn)

[1] 張麗萍.網(wǎng)頁配色與版式布局的設(shè)計(jì)[J].產(chǎn)業(yè)與科技論壇，2015.14（3）：57-58.

[2] 張嘉興.網(wǎng)頁中色彩搭配與網(wǎng)站內(nèi)容關(guān)系研究[J].美術(shù)教育研究，2015（8）：84-85.

[3] 金燕.網(wǎng)站美術(shù)視覺效果布局設(shè)計(jì)探究[J].知識(shí)經(jīng)濟(jì)，2013（4）：118.

[4] 盛昀瑤，張力.TRL-SS整合模式在高校教學(xué)中的實(shí)施研究——以“網(wǎng)頁布局與配色”課程為例[J].湖南郵電職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2016.15（2）：104-108.