秩序感在現代交互設計中的應用
——以網頁中的版式設計為例

張 宇

（中國礦業大學 建筑與設計學院， 江蘇 徐州 221000）

0 引言

我們按照自然規律生活，生物秩序是藝術秩序的基礎，有序的設計以自然秩序的自然滿足人們的審美和心理需求。

科技的發展使人們對于視覺的觀感有了更嚴格的要求，對版式設計有了更嚴格的要求，因此，秩序感的設計應運而生。 秩序感的設計， 強化了給用戶帶來的視覺感受，同時，接收視覺信息后更關注用戶行為反饋。 秩序感在網頁設計中的應用不僅增強了網頁的秩序性， 還能讓用戶對網頁的內容與構成輕松的了解，增強了閱讀的便利性。

1 源于自然與生活的設計秩序

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

許多生活規律都離不開秩序感。 城市動脈兩側的摩天大樓，等距的樓梯等。 人們在這個社會環境中創造秩序，根據各種需求創造美好的秩序。 這種美的秩序，藝術的秩序，影響著我們的生活，提高了我們的生活質量和理想主義的領域。 各種秩序豐富了我們的生活，同時也以豐富多彩的方式豐富呈現出了藝術。

2 秩序感在網頁版式設計中的產生

網頁版式是根據科學和藝術的原則， 在網頁畫面中進行文本和圖形的排列。 在網頁中，圖形和文本的布局產生了秩序感，它不但符合人類的視覺審美規律，并且符合秩序美感的規律。 網頁這個概念出現也不過三十年的時間，版式風格更是豐富多彩，網頁版式中最常見的的三種風格，即古典風格、網格風格、自由風格。

古典風格： 古典風格的版面是嚴格的遵循對稱平衡的， 并且遵循統一的規格與尺寸， 各元素之間的間距統一，給人以優雅精美的心理感受。

網格風格： 網格風格的版面采用大小比例相同的網格為版面基礎，提供了標準的尺寸與規格，按照網格來排列文章、標題、圖片等。 它使網頁看起老更有秩序，一直到現在，它仍然是現在設計中廣泛適使用的一種網頁排版方式。

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

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

3 秩序感在網頁版式設計中的存在與特征

3.1 網頁版式中秩序感的規律性

網頁的設計風格是由文字、圖像以及色彩所決定的，表現出來有規律的秩序感。相對來說，具有一定代表性的是北歐簡約風格的網頁設計，與波普式自由設計風格。斯堪的納維亞簡約網頁設計風格布局遵循機械化的幾何順序，并以嚴格和標準化的方式組織元素。 可以看到，布局具有嚴格的“骨架”功能，強調理性秩序。流行風格的自由設計風格強調傳達網頁的個性， 看似隨意的擺放其實遵循一定的規則。

圖1 是U2 Lighting 的網站首頁， 該產品走的是高端設計風格， 所以在網頁風格上選擇了北歐簡約的設計風格， 采用的左右對稱式構圖， 導航欄的字體使用了和logo 相同的襯線體，統一的間距， 黑白灰為主要色調， 這樣既突出產品的特征也創造出了神秘的氣氛，使網頁傳達的產品信息更加直觀。

圖1 Lighting 網站首頁

3.2 網頁版式中的平衡感

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

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

圖2 Lumix 相機網站首頁

4 秩序感在網頁版式設計中的應用

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

圖3 用戶閱讀順序習慣示意

圖4 是Komosition 的首頁， 用戶在瀏覽網頁時首先會看到最具有視覺沖擊力的信息，就是畫面中的表盤，這也是頁面傳達的最重要的元素， 秩序感增強了它的視覺效果。隨著視覺引導線進性移動， 可以使用戶更有興趣的去瀏覽網頁， 也使網頁中的版式更具有條理性與針對性。

圖4 Komosition 手表首頁

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

圖5 Motive 的首頁

5 格式塔理論在網頁版式設計中的應用

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

格式塔理論是網頁設計中運用的最多的心理學理論，主要包括：相似原則、接近原則和閉合原則。

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

圖6 搜狐視頻網站導航欄

圖7 淘寶網頁導航欄

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

圖8 接近原則示意圖

圖9 線上雜志首頁

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

圖10 閉合原則示意圖

6 秩序感對網頁版式設計的啟示

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

網頁的整體美感是通過設計、前端、配色、媒體和網頁呈現的內容來實現的。 各方面的不足指出都會影響整個網頁的秩序和美觀。 設計是網頁上的一個非常重要的環節，它是在網頁上傳達信息的最重要途徑之一。根據不同網站的屬性，設計相應的網頁版式布局，可以更好地傳達信息，提高網站的視覺效率，促進人機交互的發展。

7 結束語

秩序感在網頁信息的傳達過程中起到了一定的保障作用，因此，將網頁設計都呈現出秩序感對網頁信息的傳達至關重要。在當今社會，秩序感的設計已經與網頁設計融為一體，而在網頁信息平臺上，秩序感已經成為網頁進行信息傳達的基礎設計法則。因此，網頁版式設計中的秩序感尤為重要，它不僅符合人類視覺運動的一系列常規，同時，能帶給用戶又優質的交互體驗感。