簡約化設(shè)計(jì)視角下的網(wǎng)頁界面設(shè)計(jì)研究

王永花　殷旭彪　葛志慧

摘 要 針對當(dāng)前我國網(wǎng)頁設(shè)計(jì)不規(guī)范這一現(xiàn)象，提出簡約化網(wǎng)頁設(shè)計(jì)的觀點(diǎn)。運(yùn)用文獻(xiàn)資料法、歸納分析法和案例研究方法，以心理學(xué)、美學(xué)、信息傳播等不同學(xué)科為理論基礎(chǔ)，探究簡約化網(wǎng)頁設(shè)計(jì)趨勢的實(shí)質(zhì)原因，并通過視覺、注意、記憶、情感等角度深入淺出地分析簡約化的網(wǎng)頁設(shè)計(jì)元素。

關(guān)鍵詞 簡約化設(shè)計(jì)；信息傳遞；網(wǎng)頁界面設(shè)計(jì)

中圖分類號：TP393.092 文獻(xiàn)標(biāo)識碼：B

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

1 簡約化及相關(guān)概念厘清

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

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

2 簡約化網(wǎng)頁界面設(shè)計(jì)的內(nèi)涵分析

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

網(wǎng)頁功能的簡潔性 簡約的網(wǎng)頁在功能上能明確表達(dá)功能效用，強(qiáng)調(diào)用戶體驗(yàn)，是一種人性化的設(shè)計(jì)。王曉蓉、楊治明曾經(jīng)建議人性化網(wǎng)頁界面設(shè)計(jì)要具有美觀性、舒適性、簡潔性、一致性、高效性和安全性[3]。簡約的網(wǎng)頁功能針對用戶的心理動機(jī)、認(rèn)知心理、智力發(fā)展?fàn)顩r進(jìn)行設(shè)計(jì)，表達(dá)意義簡明醒目，易被用戶注意和認(rèn)知，而不是浪費(fèi)時(shí)間去尋找功能。

形態(tài)的易記性 從記憶的角度來說，簡潔單純的網(wǎng)頁元素要比復(fù)雜的網(wǎng)頁元素更容易被人們記住。簡潔單純的事物視覺點(diǎn)突出，不會分散用戶的注意力，能夠保持長時(shí)間的注意力穩(wěn)定。

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

3 網(wǎng)頁界面設(shè)計(jì)中簡約化要素分析

簡約化設(shè)計(jì)與文字元素 文字是人類用來記錄語言的符號系統(tǒng)，在網(wǎng)頁界面設(shè)計(jì)中占有十分重要的作用，因?yàn)槿藗兇蠖嘈畔⒌墨@知都是以文字的形式表達(dá)出來的。眾多構(gòu)成要素中文字具有最佳的直觀傳達(dá)作用以及最高的明確性。文字傳達(dá)本身語義之外，還傳遞其他一些信息。文字視覺形態(tài)的大小、顏色、曲直、排列的疏密，以及語言的強(qiáng)弱、緩急、和諧或嘈雜，以及表情、姿態(tài)等，能夠引起瀏覽者內(nèi)心相應(yīng)的不同感受。文字簡約化設(shè)計(jì)表現(xiàn)為以下幾點(diǎn)。

1）易讀性：文字的表達(dá)要能被大眾理解，在排版形式上能夠符合人們的視覺流程，在文字顏色和大小設(shè)計(jì)上要符合網(wǎng)頁的設(shè)計(jì)風(fēng)格。

2）明確性：信息表達(dá)簡潔明了，不繁瑣不模糊，能夠明確表達(dá)網(wǎng)頁設(shè)計(jì)的中心主題；在語義的傳達(dá)上不會讓人產(chǎn)生歧義，傳達(dá)的信息容易被用戶理解。

3）美觀性：文字的大小、顏色、編排等的設(shè)計(jì)要符合人的視覺審美，選擇適合于網(wǎng)頁風(fēng)格的文字編排；通過文字形體的統(tǒng)一變化、文字編排的節(jié)奏韻律、文字量感的對比和諧來增強(qiáng)網(wǎng)站的美觀度。

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

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

簡約化設(shè)計(jì)與圖像元素 圖像在網(wǎng)頁設(shè)計(jì)中扮演著不可缺少的角色，能夠簡化網(wǎng)頁設(shè)計(jì)的各種復(fù)雜的信息，這也是大多設(shè)計(jì)師喜歡它的原因之一。圖像簡化信息的具體表現(xiàn)包括以下幾點(diǎn)。

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

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

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

另外，圖形的簡約化還表現(xiàn)在LOGO設(shè)計(jì)上。LOGO可識別性強(qiáng)，使用簡單的圖形表達(dá)豐富的含義。簡約化的標(biāo)志更容易獲得受眾的認(rèn)知，更具有時(shí)代性，是信息簡化的產(chǎn)物。endprint

簡約化設(shè)計(jì)與色彩元素 色彩在網(wǎng)頁設(shè)計(jì)中占有很重要的位置，因?yàn)榫蜕矶裕藗儗ι实拿舾卸忍貏e的高。馬克思說：“色彩的感覺是一般美感中最大眾化的形式?！盵4]當(dāng)打開一個(gè)網(wǎng)頁時(shí)，關(guān)注色彩元素比其他的元素都要強(qiáng)，色彩最具表現(xiàn)力與識別性，出色的色彩搭配可以在瞬間吸引用戶的目光[5]。同時(shí)，它能夠體現(xiàn)企業(yè)產(chǎn)品的特質(zhì)，在不需要過多繁瑣的文字、版式等元素的搭配下，色彩就能直接簡潔明了地給用戶第一印象。

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

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

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

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

簡約化設(shè)計(jì)與版式設(shè)計(jì) 如果把網(wǎng)頁界面中的文字、圖形、點(diǎn)線面等元素比喻成員工的話，那么版式設(shè)計(jì)就是一個(gè)管理者，根據(jù)員工的職能特點(diǎn)，依據(jù)一定的管理理論和方法，有效地激發(fā)員工優(yōu)勢，從而更好地完成任務(wù)。因此，版式設(shè)計(jì)就是將文字、圖像、色彩、圖標(biāo)等元素有機(jī)組合，表達(dá)美與和諧[6]。

簡約化的網(wǎng)頁版式設(shè)計(jì)并不是將各種元素雜亂無章地編排，而是按照人們的視覺流程規(guī)律以及形象思維，有秩序統(tǒng)一地進(jìn)行規(guī)劃整合?；谑鼙姷囊曈X流程規(guī)律，簡約化的網(wǎng)頁版式設(shè)計(jì)應(yīng)該具有以下特征。

1）清晰易讀：網(wǎng)頁的不同元素位置設(shè)計(jì)，框架構(gòu)造上和諧統(tǒng)一。每個(gè)元素不是混亂的搭配，而是根據(jù)人的視覺流程特點(diǎn)，將設(shè)計(jì)元素進(jìn)行合理規(guī)劃，能夠在人的大腦中呈現(xiàn)出清晰明了的信息。

2）統(tǒng)一有秩序：統(tǒng)一和秩序增強(qiáng)了網(wǎng)頁各元素的聯(lián)系和輕重關(guān)系，符合用戶的閱讀習(xí)慣、心理秩序和思維發(fā)展的邏輯認(rèn)知順序。

3）相互呼應(yīng)：呼應(yīng)是指兩個(gè)以上的形態(tài)之間通過“呼

喚”和“相應(yīng)”的關(guān)系達(dá)到畫面的均衡。有效的網(wǎng)頁元素呼應(yīng)能夠增加元素之間的內(nèi)在聯(lián)系，使網(wǎng)頁整體感突出。

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

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

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

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

2）頁面大面積色塊使用：頁面大面積使用某一色彩，可以強(qiáng)烈渲染、烘托網(wǎng)頁設(shè)計(jì)元素和網(wǎng)頁主題，簡約時(shí)尚而更具視覺沖擊力。

3）統(tǒng)一頁面主要設(shè)計(jì)元素的背景，呈現(xiàn)出規(guī)則圖形組合：統(tǒng)一而有秩序的頁面能簡明地體現(xiàn)網(wǎng)頁主題的特質(zhì)，更容易讓用戶認(rèn)知。

4 總結(jié)

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

參考文獻(xiàn)

[1]黎浩.簡約主義：現(xiàn)代設(shè)計(jì)的風(fēng)格傾向[J].高教論壇，

2004（5）.

[2]楊大松.現(xiàn)代設(shè)計(jì)藝術(shù)的簡潔之美[J].安徽建筑工業(yè)學(xué)院學(xué)，2004，12（2）.

[3]何亭.人性化網(wǎng)頁界面設(shè)計(jì)的進(jìn)展與展望[J].美與時(shí)代，2012（9）.

[4]歐陽丹.淺析現(xiàn)代平面設(shè)計(jì)中色彩的簡約化趨勢[J].湖南工業(yè)職業(yè)技術(shù)學(xué)，2009，9（1）.

[5]吳愛群.簡約版式在平面設(shè)計(jì)中的應(yīng)用[J].美術(shù)教育研究，2012（3）.

[6]石艷紅.網(wǎng)站建設(shè)中的版式設(shè)計(jì)[J].科技信息，2007（28）.

[7]張統(tǒng)宣.虛與實(shí)的和諧：論網(wǎng)頁設(shè)計(jì)留白[J].價(jià)值工程，2011（10）.

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