張 宇

（中國礦業(yè)大學(xué) 建筑與設(shè)計(jì)學(xué)院， 江蘇 徐州 221000）

0 引言

我們按照自然規(guī)律生活，生物秩序是藝術(shù)秩序的基礎(chǔ)，有序的設(shè)計(jì)以自然秩序的自然滿足人們的審美和心理需求。

科技的發(fā)展使人們對于視覺的觀感有了更嚴(yán)格的要求，對版式設(shè)計(jì)有了更嚴(yán)格的要求，因此，秩序感的設(shè)計(jì)應(yīng)運(yùn)而生。 秩序感的設(shè)計(jì)， 強(qiáng)化了給用戶帶來的視覺感受，同時(shí)，接收視覺信息后更關(guān)注用戶行為反饋。 秩序感在網(wǎng)頁設(shè)計(jì)中的應(yīng)用不僅增強(qiáng)了網(wǎng)頁的秩序性， 還能讓用戶對網(wǎng)頁的內(nèi)容與構(gòu)成輕松的了解，增強(qiáng)了閱讀的便利性。

1 源于自然與生活的設(shè)計(jì)秩序

人類生活在社會規(guī)律中， 與自然的關(guān)系密不可分。正如宗白華先生所說：“中國人在天地的動靜、 四十的節(jié)律、晝夜的來復(fù)，生長老死的綿延中，感到宇宙是生生而具條理的?！痹谠紩r(shí)代，人類通過打磨和打磨石頭來創(chuàng)造遵循一定規(guī)律的圖案。 隨著主觀意識的出現(xiàn)，原始人將形狀和大小相似的石頭和骨頭連接起來， 創(chuàng)造出原始的裝飾品。 這種有序的組合就是人們審美的心理結(jié)構(gòu)。

許多生活規(guī)律都離不開秩序感。 城市動脈兩側(cè)的摩天大樓，等距的樓梯等。 人們在這個(gè)社會環(huán)境中創(chuàng)造秩序，根據(jù)各種需求創(chuàng)造美好的秩序。 這種美的秩序，藝術(shù)的秩序，影響著我們的生活，提高了我們的生活質(zhì)量和理想主義的領(lǐng)域。 各種秩序豐富了我們的生活，同時(shí)也以豐富多彩的方式豐富呈現(xiàn)出了藝術(shù)。

2 秩序感在網(wǎng)頁版式設(shè)計(jì)中的產(chǎn)生

網(wǎng)頁版式是根據(jù)科學(xué)和藝術(shù)的原則， 在網(wǎng)頁畫面中進(jìn)行文本和圖形的排列。 在網(wǎng)頁中，圖形和文本的布局產(chǎn)生了秩序感，它不但符合人類的視覺審美規(guī)律，并且符合秩序美感的規(guī)律。 網(wǎng)頁這個(gè)概念出現(xiàn)也不過三十年的時(shí)間，版式風(fēng)格更是豐富多彩，網(wǎng)頁版式中最常見的的三種風(fēng)格，即古典風(fēng)格、網(wǎng)格風(fēng)格、自由風(fēng)格。

古典風(fēng)格： 古典風(fēng)格的版面是嚴(yán)格的遵循對稱平衡的， 并且遵循統(tǒng)一的規(guī)格與尺寸， 各元素之間的間距統(tǒng)一，給人以優(yōu)雅精美的心理感受。

網(wǎng)格風(fēng)格： 網(wǎng)格風(fēng)格的版面采用大小比例相同的網(wǎng)格為版面基礎(chǔ)，提供了標(biāo)準(zhǔn)的尺寸與規(guī)格，按照網(wǎng)格來排列文章、標(biāo)題、圖片等。 它使網(wǎng)頁看起老更有秩序，一直到現(xiàn)在，它仍然是現(xiàn)在設(shè)計(jì)中廣泛適使用的一種網(wǎng)頁排版方式。

自由風(fēng)格：自由風(fēng)格的網(wǎng)頁版式布局是不固定的，網(wǎng)頁中的各種元素自由編排，這種布局注重空間與留白、正負(fù)形之間的關(guān)系，布局豐富多樣。

從古典風(fēng)格注重具有裝飾性的線條， 到網(wǎng)格風(fēng)格簡介與功能為首的理念， 再到自由風(fēng)格注重豐富又多樣的布局， 秩序感的概念與其相應(yīng)的原則越來越多的融入到網(wǎng)頁版式設(shè)計(jì)中。

3 秩序感在網(wǎng)頁版式設(shè)計(jì)中的存在與特征

3.1 網(wǎng)頁版式中秩序感的規(guī)律性

網(wǎng)頁的設(shè)計(jì)風(fēng)格是由文字、圖像以及色彩所決定的，表現(xiàn)出來有規(guī)律的秩序感。相對來說，具有一定代表性的是北歐簡約風(fēng)格的網(wǎng)頁設(shè)計(jì)，與波普式自由設(shè)計(jì)風(fēng)格。斯堪的納維亞簡約網(wǎng)頁設(shè)計(jì)風(fēng)格布局遵循機(jī)械化的幾何順序，并以嚴(yán)格和標(biāo)準(zhǔn)化的方式組織元素。 可以看到，布局具有嚴(yán)格的“骨架”功能，強(qiáng)調(diào)理性秩序。流行風(fēng)格的自由設(shè)計(jì)風(fēng)格強(qiáng)調(diào)傳達(dá)網(wǎng)頁的個(gè)性， 看似隨意的擺放其實(shí)遵循一定的規(guī)則。

圖1 是U2 Lighting 的網(wǎng)站首頁， 該產(chǎn)品走的是高端設(shè)計(jì)風(fēng)格， 所以在網(wǎng)頁風(fēng)格上選擇了北歐簡約的設(shè)計(jì)風(fēng)格， 采用的左右對稱式構(gòu)圖， 導(dǎo)航欄的字體使用了和logo 相同的襯線體，統(tǒng)一的間距， 黑白灰為主要色調(diào)， 這樣既突出產(chǎn)品的特征也創(chuàng)造出了神秘的氣氛，使網(wǎng)頁傳達(dá)的產(chǎn)品信息更加直觀。

圖1 Lighting 網(wǎng)站首頁

3.2 網(wǎng)頁版式中的平衡感

網(wǎng)頁中版式秩序的最基本的特征就是平衡感， 單調(diào)的網(wǎng)頁很難吸引用戶的視線。 從網(wǎng)頁版式的角度看，理性的布局會使這種平衡感更加明顯。 這種平衡感是通過文字、圖形、色彩相互組合、搭配體現(xiàn)出來的。 自由、隨性的網(wǎng)頁版式其平衡性是體現(xiàn)在適度的對網(wǎng)頁版式進(jìn)行改變。

圖2 是Lumix 相機(jī)的首頁，版式采用的中規(guī)中矩的左右構(gòu)圖對稱構(gòu)圖， 相機(jī)處于畫面的正中央，相機(jī)周圍進(jìn)行了大量的留白，提升了頁面的呼吸感，色彩上采用經(jīng)典的黑白色，背景添加了底紋，豐富畫面的同時(shí)又使網(wǎng)頁具有靈動性。 整個(gè)網(wǎng)頁層次明確、產(chǎn)品突出，提升了用戶對頁面的視覺好感。

圖2 Lumix 相機(jī)網(wǎng)站首頁

4 秩序感在網(wǎng)頁版式設(shè)計(jì)中的應(yīng)用

秩序感的原則是網(wǎng)頁版式設(shè)計(jì)中條理性的來源，條理性可以使用戶在瀏覽網(wǎng)頁時(shí)沿著一定的順序閱讀。 如圖3 所示， 用戶在瀏覽網(wǎng)頁時(shí)，習(xí)慣以從上到下的順序，然后從左到右進(jìn)行瀏覽。 所以在進(jìn)行設(shè)計(jì)工作的時(shí)候，最關(guān)鍵的信息基本上都是放在畫面的頂部或者左邊，通常這個(gè)部分都是網(wǎng)頁的導(dǎo)航欄， 一般政府或者企業(yè)類的網(wǎng)頁會使用這種版式。

圖3 用戶閱讀順序習(xí)慣示意

圖4 是Komosition 的首頁， 用戶在瀏覽網(wǎng)頁時(shí)首先會看到最具有視覺沖擊力的信息，就是畫面中的表盤，這也是頁面?zhèn)鬟_(dá)的最重要的元素， 秩序感增強(qiáng)了它的視覺效果。隨著視覺引導(dǎo)線進(jìn)性移動， 可以使用戶更有興趣的去瀏覽網(wǎng)頁， 也使網(wǎng)頁中的版式更具有條理性與針對性。

圖4 Komosition 手表首頁

圖5 是MOTIVE的首頁， 網(wǎng)頁采用了對角式構(gòu)圖， 運(yùn)用了經(jīng)典的F 式布局，舍棄了網(wǎng)頁普遍使用的左右對稱式構(gòu)圖，將文字與圖片進(jìn)行了中心對稱式放置，在擁有秩序的同時(shí)也使整個(gè)網(wǎng)頁的畫面充滿藝術(shù)的氛圍。 同時(shí)，這種F 式布局的版式也尊崇從左到右、從上到下的瀏覽順序，有著非常強(qiáng)的條理性，便于用戶的瀏覽與交互使用。

圖5 Motive 的首頁

5 格式塔理論在網(wǎng)頁版式設(shè)計(jì)中的應(yīng)用

格式塔理論是西方心理學(xué)的重要理論之一， 對現(xiàn)代的網(wǎng)頁設(shè)計(jì)有非常大的影響。了解用戶主觀意識，不僅可以幫助設(shè)計(jì)師設(shè)計(jì)出更適合用戶的網(wǎng)頁， 并且還可以使畫面中的每個(gè)元素、各種布局都有嚴(yán)謹(jǐn)?shù)睦碚撘罁?jù)支撐。庫爾特·考夫卡在《格式塔心理學(xué)原理》中就提出“眼腦作用是一個(gè)不斷組織、簡化、統(tǒng)一的過程，正式通過這一過程，才產(chǎn)生出易于理解、協(xié)調(diào)的整體。 ”簡單來說，我們的主觀意識會自動的將復(fù)雜或相同元素簡化為一個(gè)易于閱讀的整體，用格式塔理論設(shè)計(jì)網(wǎng)頁，可以提高設(shè)計(jì)師的工作效率，同時(shí)也可以營造網(wǎng)頁的秩序感。

格式塔理論是網(wǎng)頁設(shè)計(jì)中運(yùn)用的最多的心理學(xué)理論，主要包括：相似原則、接近原則和閉合原則。

相似原則： 人的潛意識會將視線范圍內(nèi)的一些相似元素看做成一個(gè)整體，甚至都不需要文字提示，我們的主觀意識會把相同的元素整合。在網(wǎng)頁版式設(shè)計(jì)中，這個(gè)是被經(jīng)常使用的原則，如圖6 搜狐視頻的橫向?qū)Ш綑冢瑸榱藚^(qū)分一級導(dǎo)航和二級導(dǎo)航欄， 分別使用了紅底白字和白底黑字。 如圖7 淘寶的橫向?qū)Ш綑?，“天貓、聚劃算、二手”這三個(gè)分類則使用了加大的橙色字體， 與其它的分類進(jìn)行區(qū)分，雖然在同一導(dǎo)航欄，但通過這個(gè)方法使三個(gè)分類區(qū)分，也是整個(gè)網(wǎng)頁的層次得到了增強(qiáng)。

圖6 搜狐視頻網(wǎng)站導(dǎo)航欄

圖7 淘寶網(wǎng)頁導(dǎo)航欄

接近原則： 各元素之間的相對距離會影響我們感知他們是否組織在一起， 接近的物體會被我們認(rèn)為是一個(gè)整體。 如圖8 所示，沒有什么標(biāo)注，人們的主觀意識就是把它當(dāng)作是左右兩組。圖9 是一個(gè)在線雜志的網(wǎng)頁，這是一個(gè)典型的接近原則的案例。整個(gè)網(wǎng)頁的版式嚴(yán)謹(jǐn)?shù)陌凑站W(wǎng)格系統(tǒng)進(jìn)行布局，頁面中沒有出現(xiàn)線條或者框架來劃分，但通過接近原則可以看出網(wǎng)頁被劃分成了五組。頂部導(dǎo)航欄與logo 是一組，左側(cè)列表文字相互接近、間距相同很明顯是一組， 右側(cè)大面積的圖文有著一定的關(guān)系是一組， 右上角的訂閱按鈕雖是次要區(qū)域， 但他依然是網(wǎng)頁中不可缺少的，也是一組，其它的例如網(wǎng)站鏈接、底部按鈕也是一組。 接近原則使網(wǎng)頁更流暢精準(zhǔn)的傳達(dá)信息， 同時(shí)也增強(qiáng)了畫面的秩序美感。

圖8 接近原則示意圖

圖9 線上雜志首頁

閉合原則： 當(dāng)視覺元素不是完整的整體時(shí)，卻仍然能被人識別出來，這種情況在圖標(biāo)設(shè)計(jì)中應(yīng)用的比較多。 如圖10 實(shí)際上是三條線段，但人們會主觀的認(rèn)為他組合形成了一個(gè)三角形。

圖10 閉合原則示意圖

6 秩序感對網(wǎng)頁版式設(shè)計(jì)的啟示

秩序感來源于自然界， 而秩序感先于網(wǎng)頁布局的設(shè)計(jì)，網(wǎng)頁設(shè)計(jì)中的秩序感是有一定規(guī)律的。網(wǎng)頁布局豐富多樣，但都有一定的規(guī)律。常用的網(wǎng)頁布局排序方法主要有對比、留白、平衡等技術(shù)。對比度可以增強(qiáng)圖像效果，突出重要的視覺元素。留空可以簡化圖像的復(fù)雜性，增加空間感。 平衡是根據(jù)特定規(guī)則放置每個(gè)視覺元素以匹配顏色和形狀。 它起到溝通的作用，并賦予網(wǎng)頁一定的順序。

網(wǎng)頁的整體美感是通過設(shè)計(jì)、前端、配色、媒體和網(wǎng)頁呈現(xiàn)的內(nèi)容來實(shí)現(xiàn)的。 各方面的不足指出都會影響整個(gè)網(wǎng)頁的秩序和美觀。 設(shè)計(jì)是網(wǎng)頁上的一個(gè)非常重要的環(huán)節(jié)，它是在網(wǎng)頁上傳達(dá)信息的最重要途徑之一。根據(jù)不同網(wǎng)站的屬性，設(shè)計(jì)相應(yīng)的網(wǎng)頁版式布局，可以更好地傳達(dá)信息，提高網(wǎng)站的視覺效率，促進(jìn)人機(jī)交互的發(fā)展。

7 結(jié)束語

秩序感在網(wǎng)頁信息的傳達(dá)過程中起到了一定的保障作用，因此，將網(wǎng)頁設(shè)計(jì)都呈現(xiàn)出秩序感對網(wǎng)頁信息的傳達(dá)至關(guān)重要。在當(dāng)今社會，秩序感的設(shè)計(jì)已經(jīng)與網(wǎng)頁設(shè)計(jì)融為一體，而在網(wǎng)頁信息平臺上，秩序感已經(jīng)成為網(wǎng)頁進(jìn)行信息傳達(dá)的基礎(chǔ)設(shè)計(jì)法則。因此，網(wǎng)頁版式設(shè)計(jì)中的秩序感尤為重要，它不僅符合人類視覺運(yùn)動的一系列常規(guī)，同時(shí)，能帶給用戶又優(yōu)質(zhì)的交互體驗(yàn)感。