簡約化設計視角下的網頁界面設計研究

王永花　殷旭彪　葛志慧

摘 要 針對當前我國網頁設計不規范這一現象，提出簡約化網頁設計的觀點。運用文獻資料法、歸納分析法和案例研究方法，以心理學、美學、信息傳播等不同學科為理論基礎，探究簡約化網頁設計趨勢的實質原因，并通過視覺、注意、記憶、情感等角度深入淺出地分析簡約化的網頁設計元素。

關鍵詞 簡約化設計；信息傳遞；網頁界面設計

中圖分類號：TP393.092 文獻標識碼：B

文章編號：1671-489X（2015）08-0057-03

1 簡約化及相關概念厘清

簡約化與飽和化的辯證 飽和，在化學中的解釋是：在一定溫度和壓力下，溶液所含溶質的量已經達到最大限度不能夠再溶解時表現出的形態。也用來比喻事物發展到最高限度時所表現出來的狀況和態勢。從視覺接受的角度分析，飽和化是指視覺信息達到人們所承受的最大限度。簡約化與飽和化是相對的。簡約化就是對人視覺信息的簡化，它是用簡潔明快的視覺語言來滿足受眾對視覺環境感性的、本能的和理性的需求。

簡約化與簡單化的厘清 簡約不同于簡單。“簡單”解釋為結構單純、容易理解，與復雜、困難、繁瑣是相互對立的詞語。在網頁設計中簡單表現為頁面結構單一、色彩單調，在形式表達上比較呆板，無法給人視覺帶來亮點，功能缺乏交互性等。簡約并不是缺乏設計要素，它是一種更高層次的創作境界[1]。簡約是針對不同對象，篩選適合于設計對象的、經過不斷精心組合或者選擇的精華。它遵從人類的生理和心理狀態，強調的是以人為本的更為情感化的設計。

2 簡約化網頁界面設計的內涵分析

形式統一與和諧 凡是簡潔美的東西都有一條共同的原則，就是在外觀造型中的各元素存在一定的和諧、統一的關系[2]。人的視覺和心理慣于接受有序、簡潔與和諧的形態。即使人們遇到一些看似凌亂無序的畫面，也盡量從各種角度對其進行歸類、整理，以求從中找出內在的規律與美的因素。因此。視覺美感產生于有序與和諧之中。有序與和諧讓人對事物的心理感覺單純化、規律化以及整潔化。

網頁功能的簡潔性 簡約的網頁在功能上能明確表達功能效用，強調用戶體驗，是一種人性化的設計。王曉蓉、楊治明曾經建議人性化網頁界面設計要具有美觀性、舒適性、簡潔性、一致性、高效性和安全性[3]。簡約的網頁功能針對用戶的心理動機、認知心理、智力發展狀況進行設計，表達意義簡明醒目，易被用戶注意和認知，而不是浪費時間去尋找功能。

形態的易記性 從記憶的角度來說，簡潔單純的網頁元素要比復雜的網頁元素更容易被人們記住。簡潔單純的事物視覺點突出，不會分散用戶的注意力，能夠保持長時間的注意力穩定。

情感表達的豐富性 簡約化的網頁呈現的不僅僅是一個視覺畫面，它還蘊含著深刻的思想和豐富的情感。針對用戶的情感心境，使用合理的文字、色彩、圖像，能使用戶對產品產生親和力，從而加深品牌印象。因此，網頁不僅注重它的美觀度，更注重它的情感表達的豐富性。

3 網頁界面設計中簡約化要素分析

簡約化設計與文字元素 文字是人類用來記錄語言的符號系統，在網頁界面設計中占有十分重要的作用，因為人們大多信息的獲知都是以文字的形式表達出來的。眾多構成要素中文字具有最佳的直觀傳達作用以及最高的明確性。文字傳達本身語義之外，還傳遞其他一些信息。文字視覺形態的大小、顏色、曲直、排列的疏密，以及語言的強弱、緩急、和諧或嘈雜，以及表情、姿態等，能夠引起瀏覽者內心相應的不同感受。文字簡約化設計表現為以下幾點。

1）易讀性：文字的表達要能被大眾理解，在排版形式上能夠符合人們的視覺流程，在文字顏色和大小設計上要符合網頁的設計風格。

2）明確性：信息表達簡潔明了，不繁瑣不模糊，能夠明確表達網頁設計的中心主題；在語義的傳達上不會讓人產生歧義，傳達的信息容易被用戶理解。

3）美觀性：文字的大小、顏色、編排等的設計要符合人的視覺審美，選擇適合于網頁風格的文字編排；通過文字形體的統一變化、文字編排的節奏韻律、文字量感的對比和諧來增強網站的美觀度。

4）適合性：針對不同的用戶，使用合適的文字大小、顏色、語氣、形態，拉近用戶的心理距離，引發用戶的情感共鳴，達到產品宣傳的最終效果。

5）創新性：將文字圖形化、意象化，以更富創意的形式表達出深層的設計思想，能夠克服網頁的單調和平淡，從而打動人心。這種方式的處理既是文字內容的直觀表達，又是文字含義的延伸表達。它增加網頁的視覺亮點，給用戶耳目一新的感覺。

簡約化設計與圖像元素 圖像在網頁設計中扮演著不可缺少的角色，能夠簡化網頁設計的各種復雜的信息，這也是大多設計師喜歡它的原因之一。圖像簡化信息的具體表現包括以下幾點。

1）圖像的直觀性和簡易性：圖像取代了文字多而繁雜的缺陷，相對于大片的描述文字，人們更愿意去選擇簡潔和直觀的圖片，它易被理解和認知。尤其是在體現產品特質的網頁中，與其使用大量的文字耗費精力，不如使用更直觀的產品圖片，提高信息的傳遞效率。

2）圖像的豐富性和真實性：圖像含有豐富的色彩，具有設計藝術的美觀度和視覺的空間感，所以能夠吸引人們的眼球。同時，圖像多是真實的生活采集到的攝影圖片，在藝術的表達上自然、不做作、真實，更符合人們簡約化思維的模式。

在新聞資訊類網站中，圖文結合是經常見到的現象。網站中都會把今日的重點新聞配上小塊的圖片放在網頁中，不僅簡化了文字的數量，還提高了用戶處理信息的效率。圖片的應用就是對信息的簡約化處理，圖像將信息以最直觀、簡潔的形式呈現出來，省去了人們閱讀大篇文字的時間，也避免了因文字過多而迷失重點。

另外，圖形的簡約化還表現在LOGO設計上。LOGO可識別性強，使用簡單的圖形表達豐富的含義。簡約化的標志更容易獲得受眾的認知，更具有時代性，是信息簡化的產物。endprint

簡約化設計與色彩元素 色彩在網頁設計中占有很重要的位置，因為就生理而言，人們對色彩的敏感度特別的高。馬克思說：“色彩的感覺是一般美感中最大眾化的形式。”[4]當打開一個網頁時，關注色彩元素比其他的元素都要強，色彩最具表現力與識別性，出色的色彩搭配可以在瞬間吸引用戶的目光[5]。同時，它能夠體現企業產品的特質，在不需要過多繁瑣的文字、版式等元素的搭配下，色彩就能直接簡潔明了地給用戶第一印象。

簡約化的網頁色彩設計就是根據網頁類型的特質，從復雜的客觀色彩中提取出最能凸顯設計神韻的一到三種主觀性的色彩，通過色彩的色相、純度、明暗、色塊面積等的對比，簡化用戶的視覺流程，給受眾帶來視覺和心理的輕松，具體表現為以下幾點。

1）配色的統一和諧：同一色彩的大量使用，可以使頁面整體化和秩序化，能快速給用戶留下深刻的印象。

2）配色的強調和突出：使用和其他元素顏色對比強烈的某一色彩，可以引起受眾的注意力。

3）配色的留白使用：采用大面積色塊的留白，增強了頁面的節奏感和韻律感，能夠使頁面簡潔大方。

簡約化設計與版式設計 如果把網頁界面中的文字、圖形、點線面等元素比喻成員工的話，那么版式設計就是一個管理者，根據員工的職能特點，依據一定的管理理論和方法，有效地激發員工優勢，從而更好地完成任務。因此，版式設計就是將文字、圖像、色彩、圖標等元素有機組合，表達美與和諧[6]。

簡約化的網頁版式設計并不是將各種元素雜亂無章地編排，而是按照人們的視覺流程規律以及形象思維，有秩序統一地進行規劃整合。基于受眾的視覺流程規律，簡約化的網頁版式設計應該具有以下特征。

1）清晰易讀：網頁的不同元素位置設計，框架構造上和諧統一。每個元素不是混亂的搭配，而是根據人的視覺流程特點，將設計元素進行合理規劃，能夠在人的大腦中呈現出清晰明了的信息。

2）統一有秩序：統一和秩序增強了網頁各元素的聯系和輕重關系，符合用戶的閱讀習慣、心理秩序和思維發展的邏輯認知順序。

3）相互呼應：呼應是指兩個以上的形態之間通過“呼

喚”和“相應”的關系達到畫面的均衡。有效的網頁元素呼應能夠增加元素之間的內在聯系，使網頁整體感突出。

4）中心突出：視覺中心是人的視覺心理量感所偏向的視覺位置。視覺中心突出的網頁能夠主次分明地把網頁的元素進行位置編排，以突出網頁要表達的重點信息。

簡約化設計與留白 顧名思義，空白區域是指不同元素之間的區域。在網頁設計中，文字之間、段落之間、圖片之間等網頁設計元素之間的區域都是空白。網頁設計的留白并非意指白色，而是設計界面中內容的空白。認知心理學的研究證明，留在空白之中的東西更容易被人注意和想起[7]，它是符合人們的認知需求的，人們的注意力和記憶力不可能長期保持穩定的狀態，他們需要外界的事物給予一個“緩沖”和“喘息”，以獲得視覺和心理的緩和，因此，留白體現的是一種單純輕松的理念。

“留白”在某種程度上代表著簡約[8]。留白正是用這種“此時無聲勝有聲”的視覺語言，詮釋了簡約化設計的以少勝多之美。留白能控制視覺量感，保持了網頁整體的統一性和平衡感，增加了網頁頁面的內涵和豐富性。網頁設計中一般包括以下幾種常用的留白技巧。

1）背景和元素間隔的空白：它能夠清晰地分離頁面板塊，增加頁面的空間感，更容易引導用戶的視覺流程。

2）頁面大面積色塊使用：頁面大面積使用某一色彩，可以強烈渲染、烘托網頁設計元素和網頁主題，簡約時尚而更具視覺沖擊力。

3）統一頁面主要設計元素的背景，呈現出規則圖形組合：統一而有秩序的頁面能簡明地體現網頁主題的特質，更容易讓用戶認知。

4 總結

簡約化網頁界面設計符合現代人們視覺和心理的需要，是時代大背景的選擇，體現設計界最先進的設計理念。將簡約化的思想和理念運用到網頁設計中，創造性地處理網頁中文字、圖像、色彩、版式等網頁元素的關系，便能正確把握設計流程的方向，給設計師和用戶一個規范的參考。

參考文獻

[1]黎浩.簡約主義：現代設計的風格傾向[J].高教論壇，

2004（5）.

[2]楊大松.現代設計藝術的簡潔之美[J].安徽建筑工業學院學，2004，12（2）.

[3]何亭.人性化網頁界面設計的進展與展望[J].美與時代，2012（9）.

[4]歐陽丹.淺析現代平面設計中色彩的簡約化趨勢[J].湖南工業職業技術學，2009，9（1）.

[5]吳愛群.簡約版式在平面設計中的應用[J].美術教育研究，2012（3）.

[6]石艷紅.網站建設中的版式設計[J].科技信息，2007（28）.

[7]張統宣.虛與實的和諧：論網頁設計留白[J].價值工程，2011（10）.

[8]唐周.意向留白[D].長沙：湖南師范大學，2012.endprint