網(wǎng)站配色與布局的相關(guān)性及融合發(fā)展路徑

翁潔

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

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

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

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

1.1 配色與布局的對稱平衡

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

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

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

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

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

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

2.2 注重配色與布局的虛實留白

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

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

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

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

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

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

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

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

4 小結(jié)

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

參考文獻

[1] 張麗萍.網(wǎng)頁配色與版式布局的設(shè)計[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īng)濟，2013（4）：118.

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