關(guān)于網(wǎng)頁(yè)設(shè)計(jì)中版面布局設(shè)計(jì)與色彩搭配的探究

張文婷

（安徽電子信息職業(yè)技術(shù)學(xué)院，安徽 蚌埠 233000）

一、引言

隨著互聯(lián)網(wǎng)的高速發(fā)展以及普及性的應(yīng)用，人們對(duì)于網(wǎng)頁(yè)設(shè)計(jì)也有了更高的要求。在網(wǎng)頁(yè)設(shè)計(jì)中，不僅對(duì)設(shè)計(jì)師的專業(yè)技術(shù)提出了要求，對(duì)于設(shè)計(jì)師的審美能力以及藝術(shù)表達(dá)也進(jìn)行了考察。目前，互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的藝術(shù)性提出了更多的挑戰(zhàn)，設(shè)計(jì)師在進(jìn)行實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)中，要對(duì)版面布局與色彩搭配進(jìn)行重點(diǎn)的調(diào)節(jié)，使得網(wǎng)頁(yè)受到更多的關(guān)注，帶給用戶更好的瀏覽體驗(yàn)。

二、版面布局與色彩搭配的分組與整合

在網(wǎng)頁(yè)設(shè)計(jì)中，功能布局的精心設(shè)計(jì)能夠提升網(wǎng)頁(yè)的可閱讀性，使得網(wǎng)頁(yè)的功能模塊更加清晰。目前，在網(wǎng)頁(yè)設(shè)計(jì)中常用的分組方式就是劃線分組。但是這樣的方式缺乏形式上的美感，更加適用于較為簡(jiǎn)單的文字及圖片布局。在版面布局設(shè)計(jì)中，結(jié)合色彩搭配進(jìn)行分組設(shè)計(jì)，不僅能夠提升網(wǎng)頁(yè)分割的效果，還能利用色彩進(jìn)行信息的傳達(dá)。例如，奢華濃郁的色塊會(huì)帶向用戶傳遞出雍容華貴的印象；清新淡雅的色塊會(huì)向用戶傳遞出低調(diào)婉約的印象。同時(shí)，一些特有的色彩能夠依照社會(huì)背景的不同向用戶傳遞出特定的信息。例如，在我國(guó)公安系統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)中，常常會(huì)使用藍(lán)色的背景；在我國(guó)黨政機(jī)關(guān)的網(wǎng)頁(yè)設(shè)計(jì)中，常會(huì)使用紅色及黃色的背景。

三、版面布局與色彩搭配的對(duì)稱與平衡

在網(wǎng)頁(yè)設(shè)計(jì)中，要對(duì)視覺(jué)元素的大小、位置、比例、質(zhì)感、色彩等等進(jìn)行平衡，確保視覺(jué)效果達(dá)到穩(wěn)定的狀態(tài)。平衡的形式有兩種，一種是對(duì)稱式的平衡，另一種是均衡式的平衡。第一，對(duì)稱式的平衡。這種平衡的方式較為普遍，能夠讓用戶感受到穩(wěn)定、整潔、值得信賴的效果。例如，網(wǎng)頁(yè)設(shè)計(jì)的版面布局與色彩搭配的左右平衡就是是對(duì)稱式平衡的一種。主要利用軸對(duì)稱、中心對(duì)稱的方式進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。第二，均衡式的平衡。這種平衡方式相對(duì)復(fù)雜，且版面布局與色彩搭配并內(nèi)有特定的規(guī)律，通常利用了網(wǎng)頁(yè)中的元素或是配色的對(duì)比達(dá)到視覺(jué)上的平衡。

四、版面布局與色彩搭配的對(duì)比與統(tǒng)一

在網(wǎng)頁(yè)設(shè)計(jì)中，通過(guò)將反差較大的兩個(gè)視覺(jué)要素放在一起，能夠形成較大的視覺(jué)反差，達(dá)到對(duì)于主題的強(qiáng)調(diào)的效果。目前，普遍使用的版面布局對(duì)比有色彩對(duì)比、大小對(duì)比、方向?qū)Ρ纫约懊靼祵?duì)比，其中，大小對(duì)比更加常見，對(duì)于網(wǎng)頁(yè)中主次信息的傳達(dá)有著更好的效果，對(duì)用戶的閱讀順序進(jìn)行了引導(dǎo)。利用色彩搭配的對(duì)比，能夠增強(qiáng)用戶的印象，給予了用戶更加強(qiáng)烈的視覺(jué)刺激。將較為相似的兩種要素放在一起，利用版面布局與色彩搭配的協(xié)調(diào)，形成了視覺(jué)上的統(tǒng)一，能夠提升視覺(jué)上的整體感。

五、版面布局與色彩搭配的強(qiáng)調(diào)與突出

在網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)師需要對(duì)用戶的瀏覽順序、信息記憶的深刻程度等進(jìn)行引導(dǎo)。換言之，網(wǎng)頁(yè)設(shè)計(jì)師需要對(duì)網(wǎng)頁(yè)的主題信息進(jìn)行突出和強(qiáng)調(diào)。版面布局與色彩搭配都能對(duì)網(wǎng)頁(yè)的主題信息進(jìn)行強(qiáng)調(diào)，對(duì)用戶的瀏覽順序進(jìn)行引導(dǎo)。而兩者相結(jié)合能夠有效提升引導(dǎo)的層次性，對(duì)于信息強(qiáng)調(diào)也有著一定的促進(jìn)作用。例如，在進(jìn)行網(wǎng)頁(yè)的設(shè)計(jì)中，可以在網(wǎng)頁(yè)最中心的位置利用一個(gè)較大的圖片或圖形對(duì)最重點(diǎn)的主題進(jìn)行強(qiáng)調(diào)，在中心圖片的周圍，利用向日葵結(jié)構(gòu)對(duì)不同的小模塊進(jìn)行布置，使其形成一個(gè)空心圓。對(duì)于需要強(qiáng)調(diào)的小模塊，可以使用顏色的強(qiáng)調(diào)來(lái)進(jìn)行突出。這樣，用戶在進(jìn)行網(wǎng)站的瀏覽時(shí)，視覺(jué)的焦點(diǎn)首先會(huì)聚集在中心圖片，接著會(huì)將視覺(jué)焦點(diǎn)放在顏色強(qiáng)調(diào)的小模塊中，完成了主題信息的強(qiáng)調(diào)與印象的加深。

六、版面布局與色彩搭配的虛實(shí)與留白

在網(wǎng)頁(yè)設(shè)計(jì)中，除了應(yīng)用元素的布置外，其余的部分均是留白。簡(jiǎn)單來(lái)說(shuō)，留白是網(wǎng)頁(yè)頁(yè)面中沒(méi)有放置元素的位置。網(wǎng)頁(yè)設(shè)計(jì)人員要合理運(yùn)用留白的方式，讓用戶在心理上體驗(yàn)到愉悅與輕松。使用留白，能夠讓用戶保留了視覺(jué)上的休息空間，也能讓傳達(dá)出設(shè)計(jì)師特定的想法?？桃獾牧舭滓材芤龑?dǎo)用戶的視覺(jué)焦點(diǎn)，使得用戶將注意力集中于頁(yè)面的主題上。

虛實(shí)與留白的有效結(jié)合是版面設(shè)計(jì)與色彩搭配結(jié)合的體現(xiàn)。其中，虛實(shí)可以通過(guò)顏色的對(duì)比或是明暗關(guān)系的調(diào)節(jié)來(lái)進(jìn)行體現(xiàn)。在網(wǎng)頁(yè)設(shè)計(jì)中，通過(guò)配色明暗關(guān)系，能夠拉開圖案的層次，使得二維的圖片在用戶的視覺(jué)與腦海中轉(zhuǎn)化成三維得效果。結(jié)合與文字的對(duì)比以及留白的強(qiáng)調(diào)，能夠引導(dǎo)用戶的注意力集中于網(wǎng)頁(yè)的重點(diǎn)信息中，實(shí)現(xiàn)了網(wǎng)頁(yè)主題的強(qiáng)調(diào)，使得網(wǎng)頁(yè)兼具藝術(shù)性以及實(shí)用性。

七、結(jié)語(yǔ)

綜上所述，在網(wǎng)頁(yè)設(shè)計(jì)中，版面布局設(shè)計(jì)與色彩搭配不僅要對(duì)網(wǎng)頁(yè)主題信息進(jìn)行強(qiáng)調(diào)，還要體現(xiàn)出設(shè)計(jì)的藝術(shù)性。通過(guò)版面布局與色彩搭配的分組與整合、對(duì)稱與平衡、對(duì)比與統(tǒng)一、強(qiáng)調(diào)與突出、虛實(shí)與留白，實(shí)現(xiàn)了用戶瀏覽注意力的引導(dǎo)，提升了用戶對(duì)網(wǎng)頁(yè)的瀏覽體驗(yàn)，加深了用戶對(duì)網(wǎng)頁(yè)主題信息的印象。