趙陽　周美霞

層次感是一個(gè)廣義的詞匯，表現(xiàn)出圖案造型、色彩等的主次、遠(yuǎn)近、大小、前后等透視關(guān)系，是視覺上的主次、強(qiáng)弱、甚至美丑、善惡，是思維上的空間。進(jìn)行創(chuàng)作時(shí)，要進(jìn)行變形、擠壓、分割和增加等，既要符合觀感上的舒適性，也要滿足設(shè)計(jì)的層次感。本文依托層次感的設(shè)計(jì)手法，研究了層次感在網(wǎng)頁設(shè)計(jì)中的重要性、網(wǎng)頁設(shè)計(jì)實(shí)踐中層次感的應(yīng)用以及層次感在網(wǎng)頁設(shè)計(jì)中的構(gòu)建方式等，提供了網(wǎng)頁設(shè)計(jì)師在設(shè)計(jì)實(shí)踐中的方法論，啟迪設(shè)計(jì)師的創(chuàng)作靈感，讓設(shè)計(jì)師設(shè)計(jì)出更加優(yōu)化的網(wǎng)頁。

引言

社會(huì)的進(jìn)步使人們對(duì)審美有了更高的要求，同時(shí)對(duì)非物質(zhì)設(shè)計(jì)的要求也越來越高，所以對(duì)設(shè)計(jì)的需求越來越豐富。每個(gè)人每天都會(huì)接觸很多的網(wǎng)頁，并且隨著非物質(zhì)社會(huì)的發(fā)展，每天接觸到的網(wǎng)頁數(shù)量越來越多。因此網(wǎng)頁設(shè)計(jì)越來越重要，要求越來越高。這就要求設(shè)計(jì)師設(shè)計(jì)出能夠更好的滿足大眾審美和需求的網(wǎng)頁。網(wǎng)頁分很多種，如購物網(wǎng)站、傳媒類網(wǎng)站、社交類網(wǎng)站等。

網(wǎng)頁的創(chuàng)建要更多關(guān)注用戶的視覺流程以及信息的傳遞，這些需求則更多的建立在網(wǎng)頁的設(shè)計(jì)過程中。層次感在網(wǎng)頁設(shè)計(jì)中的應(yīng)用能更好的優(yōu)化網(wǎng)頁的設(shè)計(jì)。

層次感

層次感是一個(gè)廣義的詞匯。指某一系統(tǒng)在結(jié)構(gòu)或功能方面的等級(jí)秩序。具有多樣性，可按物質(zhì)的質(zhì)量、能量、運(yùn)動(dòng)狀態(tài)、空間尺度、時(shí)間順序、組織化程度等多種標(biāo)準(zhǔn)劃分。不同層次具有不同的性質(zhì)和特征，既有共同的規(guī)律，又各有特殊規(guī)律。 “層次感“一詞最早出自雕塑的浮雕技法中。圖案的雕刻，不僅要有三維感，還要體現(xiàn)出圖案造型、色彩和功能等的主次之分、大小、透視等關(guān)系，它是觀感上的主次、強(qiáng)弱、美丑，是大腦中的三維感覺。在創(chuàng)意設(shè)計(jì)中不僅要進(jìn)行變形、擠壓、分割和增加等，也要符合觀感的舒適。

網(wǎng)頁設(shè)計(jì)的層次感有2個(gè)分支：

（1）應(yīng)用元素的層次感。網(wǎng)頁設(shè)計(jì)須有前、中和后的變化，滿足這些變化，畫面的層次感才更好；

（2）色彩元素的層次感。色彩有進(jìn)色和退色之別，因此會(huì)造成網(wǎng)頁由于色彩設(shè)計(jì)產(chǎn)生的進(jìn)退感。色彩的前進(jìn)、后退感形成的視錯(cuò)覺，在設(shè)計(jì)中用來加強(qiáng)畫面空間層次。

層次感與網(wǎng)頁設(shè)計(jì)

1.層次感與網(wǎng)頁設(shè)計(jì)的關(guān)系

層次就是有主次之分，無論從大的范圍還是小的范圍都需要主次。突出主次的方法有許多，如從大小、色彩、動(dòng)態(tài)形狀。

首先，大小。視覺重心一般會(huì)落在較大的元素上。因此，設(shè)計(jì)時(shí)把要突出的主題文字或者元素大一些，以此吸引讀者的視覺重心。

其次，色彩。不同的色彩能給讀者帶來不同的感覺。例如，紅色代表熱情、警告、激情；藍(lán)色代表冷漠、憂郁等。使用色彩強(qiáng)調(diào)主次的前提是設(shè)計(jì)師必須研究色彩的特點(diǎn)以及視覺效果。

第三，動(dòng)態(tài)形狀。動(dòng)態(tài)的形狀更能吸引視覺重心。所以設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁時(shí)要想網(wǎng)頁更能吸引讀者，多加入一些動(dòng)態(tài)形狀。

2.視覺層次感在網(wǎng)頁設(shè)計(jì)中的重要性

（1）視覺流程

網(wǎng)頁視覺流程與展示設(shè)計(jì)中的流動(dòng)路線的設(shè)計(jì)相似。網(wǎng)頁視覺流程相當(dāng)于展示設(shè)計(jì)中的流動(dòng)路線，瀏覽者第一印象決定網(wǎng)站的整體感覺，規(guī)劃視覺流程引導(dǎo)用戶在瀏覽網(wǎng)頁過程中建立明確的視覺順序（見圖1），令用戶在瀏覽網(wǎng)頁的過程中可以首先看到網(wǎng)站的主要傳遞信息，第二步再看什么，最后看什么，潛移默化地使用戶形成網(wǎng)站的品牌意識(shí)，并使在網(wǎng)頁布局中的所有重點(diǎn)信息不被漏看。網(wǎng)頁視覺流程設(shè)計(jì)使網(wǎng)頁擁有信息傳播更簡潔快捷明確的瀏覽過程。減少讀者不必要的視覺搜索，避免讀者視覺疲勞。

網(wǎng)站一般由多個(gè)頁面組成：一級(jí)頁面、二級(jí)頁面、三級(jí)頁面等，頁面之間的變換存在不同的導(dǎo)航方式，因此網(wǎng)頁視覺流程不是單個(gè)網(wǎng)頁的視覺流程，而是包含了多個(gè)頁面的復(fù)雜視覺流程。網(wǎng)頁設(shè)計(jì)與視覺流程存在一定的對(duì)應(yīng)關(guān)系，視覺流程是隨多個(gè)頁面版式的變化而變化的。

（2）視覺層次對(duì)網(wǎng)頁設(shè)計(jì)的影響

視覺層次原則是網(wǎng)頁設(shè)計(jì)中的重要原則。優(yōu)秀的網(wǎng)頁能和瀏覽者有更好的交流互動(dòng)，所以設(shè)計(jì)作為核心，設(shè)計(jì)出的作品在某一程度上是和用戶的視覺交流。一個(gè)高能的設(shè)計(jì)師，必須傳達(dá)設(shè)計(jì)思想傳達(dá)。閱讀中，容易視覺疲勞，由于趨利避害，用戶是視覺美感的欣賞者，而非數(shù)據(jù)處理者。所以巨大的信息量，對(duì)用戶是挑戰(zhàn)。如圖2中的兩個(gè)普通圓：

在瀏覽者看來，圖1的畫面并不是兩個(gè)圓，而是一個(gè)較大黑色的圓和一個(gè)較小紅色的圓。在瀏覽者視覺出現(xiàn)的畫面中，并非看到兩個(gè)普通的圓，而是搜尋畫面元素的異同。這些異同感給人區(qū)分物體的信息并賦予圖形特定的意義。

圖2的是網(wǎng)頁設(shè)計(jì)中的文本層次運(yùn)用。兩段文字內(nèi)容一致，但圖中第二段文字更加易讀和理解。因?yàn)槲淖峙虐娴慕咏?、篇幅比例和相似程度使讀者將下級(jí)內(nèi)容自然地歸入標(biāo)題和分段。因此層次的錯(cuò)落有致能賦予標(biāo)題更多的涵義，并非信息的傳遞。

層次感在網(wǎng)頁設(shè)計(jì)中的構(gòu)建

層次感有很多類型：網(wǎng)頁設(shè)計(jì)中的層次感、產(chǎn)品設(shè)計(jì)中的層次感、發(fā)型設(shè)計(jì)中的層次感等。層次感在網(wǎng)頁設(shè)計(jì)中主要有兩個(gè)分支：應(yīng)用元素的層次感和色彩元素的層次感。

1.應(yīng)用元素的層次感的構(gòu)建

粗糙和雜亂是“丑”的外在表現(xiàn)，而層次感是美的一種表現(xiàn)，單調(diào)的重復(fù)給人的視覺觀感是無味的。層次感的分明、自由活潑有層次變化的造型能刺激視覺上美的感受。在網(wǎng)頁設(shè)計(jì)中，層次感適宜程度依據(jù)頁面的復(fù)雜程度而定。頁面復(fù)雜，要表達(dá)的重點(diǎn)越多，對(duì)層次感的要求亦越高。

（1）大小對(duì)比

一般來說，物體體積的大小與其自身 的吸引力成正相關(guān)。較大的物體更具吸引力。尺寸的設(shè)計(jì)是制造層次非常高效的途徑。因此，設(shè)計(jì)時(shí)把尺寸和重要性相結(jié)合是非常關(guān)鍵的。較大的應(yīng)用元素一般而言是最重要的，相反，最小的應(yīng)該元素重要性微弱些。對(duì)比關(guān)系能夠體現(xiàn)出對(duì)象之間的重要性。設(shè)計(jì)對(duì)象在大小上的戲劇性變化將傳遞出該信息的重要性或需要被特別關(guān)注，亮背景轉(zhuǎn)成暗背景可以區(qū)分核心出核心板塊，字體大小的對(duì)比和色彩明暗的對(duì)比傳達(dá)了信息的重要性。

（2）對(duì)齊

應(yīng)用元素的對(duì)齊反映網(wǎng)頁構(gòu)成元素優(yōu)良的組織性，對(duì)齊能賦予瀏覽者視覺層次安靜的作用。如，網(wǎng)頁中放在頁面左上角的標(biāo)識(shí)被賦予了官方的性質(zhì)，因?yàn)闉g覽者將左上角的信息與簡介、賬號(hào)、購物車等相聯(lián)系。以某種秩序感的對(duì)齊方式能夠激起用戶的興趣，網(wǎng)頁設(shè)計(jì)中整齊排列給用戶的視覺感受是：干凈，整潔、明了、便于閱讀。對(duì)齊需要的應(yīng)用元素要兩個(gè)以上。對(duì)齊必須要使用重復(fù)的設(shè)計(jì)手法，重復(fù)體現(xiàn)了應(yīng)用元素之間的關(guān)聯(lián)性。如果文字都是同一種色彩，那么瀏覽者看到一段新的同一色彩文字時(shí)，會(huì)認(rèn)為這是其中的另一段；當(dāng)同一個(gè)瀏覽者遇到一個(gè)藍(lán)色的或者有下劃線標(biāo)記的鏈接時(shí)，瀏覽者便會(huì)把它理解該段落之外的的文字。

（3）親密與留白

親密會(huì)把應(yīng)用元素互相分離且創(chuàng)建下級(jí)的層次感。頁面中會(huì)出現(xiàn)較多的被空白隔開的小部件，這些部件中有新層次，例如標(biāo)題、副標(biāo)題、作者和內(nèi)容等。親密性以最便捷的方式將有關(guān)的內(nèi)容組織起來，通過親密之間的關(guān)聯(lián)將主要內(nèi)容與次要內(nèi)容相區(qū)分。但是，由于親密而關(guān)聯(lián)在一起的元素有種雜亂的感覺，應(yīng)用元素間距大，會(huì)失去互相關(guān)聯(lián)性。一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)，瀏覽者視覺關(guān)聯(lián)性將會(huì)精確的將各個(gè)元素在大腦中形成完整的統(tǒng)一畫面。

2.色彩元素的層次感

不同色相的色彩在視覺感受中有距離感上的差距，即色彩進(jìn)的退感。色彩的進(jìn)退指色彩在有對(duì)比的情況下給人的視覺反應(yīng)，其會(huì)受到色相的影響，其次是純度和明度的影響。例如，在可見光光譜中，波長較長的顏色，如紅色視覺反饋有前進(jìn)感；而波長短色彩，如藍(lán)色的是后退感。在色彩純度中，鮮艷的高純度色彩，伸張感強(qiáng)；混濁的低純度色彩，退縮感強(qiáng)。就明度而言，高明度色彩，有前進(jìn)的視覺反饋，黯淡的低明度色彩，則是后退的視覺感受。

（1）色彩的主次

色彩的主次是指當(dāng)把作品去色后，作品呈現(xiàn)的從黑灰白比例。例如，當(dāng)作品去色之后，黑色較多，整體效果會(huì)顯得沉重。相反，白色多那么整體效果顯得蒼白，如果灰色多，白色與黑色少，那么版面會(huì)顯得“臟”，亮點(diǎn)不夠。在網(wǎng)頁設(shè)計(jì)過程中，需明確網(wǎng)頁設(shè)計(jì)的主色與輔色。網(wǎng)頁設(shè)計(jì)中豐富的色彩層次會(huì)使設(shè)計(jì)作品色彩艷麗，奪人眼球。

（2）色彩的對(duì)比

設(shè)計(jì)師在網(wǎng)頁配色時(shí)，需考慮到色彩的對(duì)比關(guān)系。但色彩的對(duì)比有很強(qiáng)的主觀性，因此色彩設(shè)計(jì)時(shí)的對(duì)比關(guān)系的可行性很難掌握。設(shè)計(jì)師在設(shè)計(jì)時(shí)，更多的要把黑白灰的關(guān)系處理好， 頁面中太多灰色調(diào)，這樣對(duì)比性太差，頁面沒有靈氣，顯得灰和臟。網(wǎng)頁設(shè)計(jì)中避免灰的方法是尋求色彩、明暗、飽和度三者之間的統(tǒng)一。

設(shè)計(jì)師應(yīng)用色彩時(shí)，不能把所有的色彩都做得面積一樣，所以設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁時(shí)首先得找到主色，并找到與之相關(guān)的色彩為輔色。色彩比例的設(shè)計(jì)可以讓網(wǎng)頁更具吸引力。

總結(jié)

互聯(lián)網(wǎng)時(shí)代，讓信息數(shù)量呈爆炸式增長，網(wǎng)頁設(shè)計(jì)的目的是通過現(xiàn)代的設(shè)計(jì)手法，來提高信息傳達(dá)的品質(zhì)，以增強(qiáng)信息傳播的力量和數(shù)量。網(wǎng)頁作為一種新的傳遞信息的視覺表現(xiàn)形式，有傳統(tǒng)平面設(shè)計(jì)的特點(diǎn)。優(yōu)秀的網(wǎng)頁設(shè)計(jì)，首先應(yīng)思考內(nèi)容上的精益求精，其次要對(duì)傳遞的內(nèi)容合理有效的視覺編排與布局。網(wǎng)頁設(shè)計(jì)的視覺流程已成為用戶主觀感受而并非公式化，設(shè)計(jì)只要符合瀏覽者認(rèn)知過程的心理順序和思維的邏輯順序，可以靈活多變地應(yīng)用?？梢詰?yīng)用各種版式設(shè)計(jì)與多樣的網(wǎng)頁布局類型，改變?yōu)g覽者視覺流程。設(shè)計(jì)師要做的是讓視覺流程自然、合理、暢快，更能給人留下深刻的印象。

色彩作為信息傳播過程中的重要元素能賦予信息豐富的美感，并有效的提升信息傳達(dá)的品質(zhì)。合理的運(yùn)用色彩語言，在網(wǎng)頁設(shè)計(jì)中能更好的引導(dǎo)瀏覽者完成信息獲取的過程，讓網(wǎng)頁獲得更強(qiáng)的視覺認(rèn)知力和藝術(shù)感染力，以獲得更廣泛的傳播。

（作者單位：江蘇大學(xué)藝術(shù)學(xué)院）

作者簡介：趙陽（1991-），男，甘肅隴西人，江蘇大學(xué)藝術(shù)學(xué)院研究生，研究方向：設(shè)計(jì)藝術(shù)學(xué)；

周美霞（1991-），女，江蘇響水人，江蘇大學(xué)藝術(shù)學(xué)院研究生，研究方向：工業(yè)設(shè)計(jì)工程。