網站配色與布局的相關性及融合發展路徑

翁潔

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

關鍵詞 網站設計 配色 布局 融合發展

中圖分類號：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.