網(wǎng)頁信息結(jié)構(gòu)的格式塔原理研究

邢夢霞

摘要：界面信息結(jié)構(gòu)設(shè)計在網(wǎng)頁界面設(shè)計中占著舉足輕重的作用。文章通討對網(wǎng)頁中信息元素的分析，挖掘網(wǎng)頁界面中信息結(jié)構(gòu)關(guān)系。從格式塔原理入手，結(jié)合實際網(wǎng)頁界面案例，分析各原理對信息元素的組織與加工，體現(xiàn)人的視覺系統(tǒng)對信息結(jié)構(gòu)的處理。

關(guān)鍵詞：信息元素;界面結(jié)構(gòu)關(guān)系;格式塔原理

中圖分類號：J524 文獻(xiàn)標(biāo)識碼：A

文章編碼：1672-7053（2019）01-0082-03

面對新的時代，網(wǎng)絡(luò)成為獲取信息最有效的窗口，網(wǎng)頁界面成為人與信息互動的載體。網(wǎng)頁界面是指人與計算機(jī)之間以網(wǎng)絡(luò)為平臺的信息界面，它是一種由非物質(zhì)化數(shù)字設(shè)計形態(tài)與人進(jìn)行交互的[1]。在用戶與網(wǎng)頁界面交互的過程中，實現(xiàn)信息的傳達(dá)與接受。網(wǎng)頁界面設(shè)計屬于人際交互設(shè)計的一種，因其自身的特殊性，信息設(shè)計需要具有自身的特點和原則，通過美學(xué)和人機(jī)交互原理對網(wǎng)頁界面中的信息元素進(jìn)行組織與排列，使信息更好的傳達(dá)。網(wǎng)頁設(shè)計的過程是設(shè)計師將原始數(shù)據(jù)轉(zhuǎn)化成視覺信息的過程，是信息的編排與組織的過程。通過對信息元素的合理規(guī)劃，實現(xiàn)有效的視覺引導(dǎo)效果，強(qiáng)化用戶瀏覽思路，引導(dǎo)用戶快速獲取信息。

1 網(wǎng)頁界面的信息元素

網(wǎng)頁界面通過元素的組織向用戶傳遞信息，組織效果的優(yōu)劣直接影響用戶的信息認(rèn)知。網(wǎng)頁界面中信息元素主要包括文字、色彩和圖形圖像，用戶通過瀏覽界面獲取信息。文字作為信息傳遞的主要手段，是網(wǎng)頁界面中必不可少的元素，在信息的描述和解釋中起著重要的作用。色彩是網(wǎng)頁界面設(shè)計考慮的重要因素，人的視覺系統(tǒng)對色彩的敏感度非常高。界面中的色彩可以給人不同的感受，從而使用戶產(chǎn)生想象[2]。通過色彩的吸引與引導(dǎo)，可以促使用戶在界面中完成一些交互操作，提高操作效率。色彩的區(qū)別變化，可使用戶得到及時的信息反饋，對用戶的操作引導(dǎo)起著重要的作用。圖像在網(wǎng)頁界面中具有明顯的優(yōu)勢，與文字相比，圖像所傳達(dá)的信息量遠(yuǎn)大于文字所傳達(dá)的信息量，具有更強(qiáng)的視覺沖擊力。圖像既包含了靜態(tài)的圖片素材，又包括動態(tài)的Flash、視頻等元素。網(wǎng)頁中的圖片類型可根據(jù)網(wǎng)站風(fēng)格和內(nèi)容進(jìn)行不同選擇，例如對于新聞網(wǎng)站，圖片需要真實且高清，與文字相呼應(yīng);針對兒童網(wǎng)站，可考慮整體使用插畫風(fēng)格圖片，凸顯網(wǎng)站的個性化和差異化。圖像有效地避免了單獨(dú)文字描述可能出現(xiàn)的表述不清、理解差異問題。在網(wǎng)頁界面中，圖形的一般表現(xiàn)形式是幾何形態(tài)。網(wǎng)頁圖形的表現(xiàn)形式主要有幾何圖形、表現(xiàn)符號等。圖像和幾何圖形的結(jié)合豐富了網(wǎng)頁效果，增添了趣味性和時尚感。

2 網(wǎng)頁界面的信息結(jié)構(gòu)關(guān)系

作為一個體系龐大的系統(tǒng)，網(wǎng)頁界面設(shè)計既要考慮顯性信息的準(zhǔn)確傳達(dá)，又要注意信息組織的有效作用。通過認(rèn)知心理學(xué)原理可以得知，受生理和心理的影響，人們在視覺信息感知的過程中，視線流動是有一定順序的，視線的接受特性被稱為視覺流程。根據(jù)設(shè)計意圖引導(dǎo)用戶的視覺焦點，因此，向受眾發(fā)送的網(wǎng)頁信息將清晰、流暢、快速[3]。在設(shè)計優(yōu)良的網(wǎng)頁界面中，視覺流程是按照一條引線進(jìn)行的，能夠有效引導(dǎo)用戶瀏覽網(wǎng)站，給予用戶清晰的獲取信息線索，也能使頁面更加緊湊美觀。界面結(jié)構(gòu)可以分為顯性的界面元素布局和隱性的信息結(jié)構(gòu)化表現(xiàn)。

2.1 界面元素布局

在網(wǎng)頁界面中，設(shè)計師根據(jù)一定的美學(xué)原理，在有限的頁面空間中，組織各種視覺信息，如文字、色彩、圖形圖像。網(wǎng)頁界面中的顯性信息是指用戶能直觀察覺的，可通過閱讀和瀏覽被感知到。有效地視覺信息交流或是將內(nèi)容組織設(shè)計成塊成為我們設(shè)計的核心任務(wù)[4]。結(jié)合用戶視覺習(xí)慣和認(rèn)知特點網(wǎng)站通過良好的視覺元素布局使界面具有藝術(shù)美感，用戶更容易獲取信息。

2.2 信息結(jié)構(gòu)化表現(xiàn)

網(wǎng)頁界面中的隱性信息是通過界面中的各種顯性視覺元素所表現(xiàn)出來的隱藏性信息。界面中的隱性結(jié)構(gòu)關(guān)系其實是對視覺信息構(gòu)建結(jié)構(gòu)，實現(xiàn)信息的結(jié)構(gòu)化。通過對文字、圖片等信息元素的組織和編排展現(xiàn)所需傳達(dá)的信息，搭建合理的信息結(jié)構(gòu)和內(nèi)容組織對用戶認(rèn)知網(wǎng)頁效果至關(guān)重要，良好的界面環(huán)境對幫助用戶認(rèn)知有很大的促進(jìn)作用。因此合理規(guī)劃界面中的元素，在界面設(shè)計過程中注重界面信息結(jié)構(gòu)的表達(dá)，提高用戶對界面信息的認(rèn)知效率。網(wǎng)頁界面以傳達(dá)信息為目的，信息的組織關(guān)系有并列、關(guān)聯(lián)、包含等。當(dāng)界面中呈現(xiàn)多種信息時，有些信息可能是相關(guān)的，可以利用接近、相同形態(tài)等方式表現(xiàn)信息的并列關(guān)系;信息間的關(guān)聯(lián)關(guān)系，可能是一對一或者一對多的關(guān)系，將關(guān)聯(lián)的信息放置在一起，保留合適的留白，既能保持元素的聯(lián)系性，又能提高網(wǎng)頁的適用性;網(wǎng)頁信息也存在著包合關(guān)系，通過對信息合理區(qū)分，將頁面中的信息進(jìn)行縱向延伸，減少單頁面的信息量，縮減用戶的搜索時間。

3 網(wǎng)頁界面的格式塔原理應(yīng)用

界面中元素的組織對界面信息認(rèn)知有直接影響，因此合理規(guī)劃界面中的元素至關(guān)重要。在界面設(shè)計中運(yùn)用格式塔原理為設(shè)計師提供了一種新的思路，通過顯性的界面元素布局，傳達(dá)隱合信息關(guān)系，有效提高用戶對界面信息的認(rèn)知效率，提升用戶體驗。格式塔原理分析人的眼腦視覺規(guī)律，從整體角度把握事物的知覺結(jié)構(gòu)，對信息進(jìn)行簡化、組織、加工來規(guī)劃界面信息，使界面更加協(xié)調(diào)，易于理解。通過對格式塔原理的分析，提醒設(shè)計者在設(shè)計時保證讓界面上的信息適應(yīng)人的視知覺規(guī)律，提高界面的可視性。對于靜態(tài)網(wǎng)頁界面設(shè)計，最重要的格式塔原理有以下幾條：接近性原理、相似性原理、連續(xù)性原理、封閉性原理、對稱性原理和主體與背景原理。

3.1 接近勝和相似性原理

接近性和相似性原理都傾向于把信息經(jīng)過梳理和歸納進(jìn)行分組，將一大段信息分割成更易于瀏覽和閱讀的若干塊，降低認(rèn)知難度。接近性原理是指人的視覺習(xí)慣會根據(jù)信息元素的相對物理位置遠(yuǎn)近，感知信息是如何組織在一起的。在一定的平面區(qū)域內(nèi)，互相靠近的對象看起來是一組，距離較遠(yuǎn)的則被分為另一組。如圖1，藍(lán)色圓形在縱向排列上的距離相對橫向上更短，人眼容易將圖形認(rèn)知成四條“豎線”;而右側(cè)黃色圓形在橫向排列上的距離相對縱向上更短，人們傾向?qū)D形認(rèn)知成四條“橫線”，同時下方三條“橫線”間距更小，所以人們會先將整體圖形認(rèn)知為上下兩部分，再區(qū)分出上方一條“橫線”和下方三條“橫線”。

在網(wǎng)頁界面中，相關(guān)聯(lián)的信息元素可以利用接近性原理進(jìn)行整合，利用設(shè)計元素的位置距離實現(xiàn)信息關(guān)系的表達(dá)。如圖2，網(wǎng)頁功能為展示圖片信息，獨(dú)立的圖片模塊包括一張圖片、名稱文字、標(biāo)簽圖形三個元素，相關(guān)聯(lián)的三個元素之間的距離明顯小于模塊與模塊的間距。網(wǎng)站通過運(yùn)用合理的留白方式，改變了使用分欄線區(qū)分信息的方式，減輕無關(guān)元素的視覺干擾，更具設(shè)計感。

相似性原理指的是對于具有相同或相似形狀、顏色、結(jié)構(gòu)特征的元素，人眼傾向于將它們歸為一組信息。如圖3，人眼將圓形歸為一組信息，將矩形歸為另一組信息，運(yùn)用形狀區(qū)分信息種類;顏色相同的藍(lán)色圓形被認(rèn)知為一組信息，黃色圓形則為另一組信息，通常顏色不同的信息更為突出，運(yùn)用顏色區(qū)分和強(qiáng)調(diào)信息;對于結(jié)構(gòu)上存在差異的元素，人眼首先將結(jié)構(gòu)特征相同的歸為一組，人們將大矩形視為一個整體，四個小矩形視為另一個整體，結(jié)構(gòu)特征的不同可實現(xiàn)信息分類和區(qū)分信息層級。

在網(wǎng)頁界面中，相似性原理應(yīng)用情景一般有兩種。一種是利用有共性的元素或元素組織形式表現(xiàn)信息，表示該信息具有相似的功能，滿足了同一個任務(wù)需求。如圖4，推薦的店鋪信息包合七種，分別為店浦圖片、店鋪名稱、星級圖標(biāo)、點評數(shù)量、菜系類別、位置信息、人均價格。這些信息元素采用一致的排列布局，具有相同的結(jié)構(gòu)特征，用戶傾向?qū)⒔缑嬷械男畔⒏兄獮槿齻€具有同一功能的模塊，增強(qiáng)信息的關(guān)聯(lián)性與整體性。另一種是利用元素的差異表示不同功能，并強(qiáng)調(diào)形狀、顏色或結(jié)構(gòu)特征獨(dú)特的元素。如圖5，主功能操作為四個按鈕圖標(biāo)，其中“發(fā)送”按鈕樣式在顏色和圖標(biāo)上區(qū)別于其余三個，從而突出了重點功能，獲得用戶更多視線關(guān)注，提升操作效率。

3.2 連續(xù)斷口封閉性原理

連續(xù)性和封閉性原則傾向于讓信息以完整形態(tài)的方式呈現(xiàn)，將不熟悉的形式轉(zhuǎn)換成符合以往認(rèn)知的對象，自動補(bǔ)齊缺少的部分，從整體上把握事物。連續(xù)性原理是指人們傾向利用物體運(yùn)動的趨勢，將沒有連接在一起的個體加工成連續(xù)的，將零散的信息認(rèn)知成一個相互聯(lián)系的整體。如圖6，人眼在識別斷斷續(xù)續(xù)的線段時，會將斷裂的部分在腦海中連接，同時連接成的整體是具有方向傾向，在識別圖形時，會將圖形認(rèn)知為兩條相交的直線和交叉延伸的弧線。如圖7，在視頻網(wǎng)頁界面的“播放記錄”信息中，節(jié)目圖片最下方用線條元素表示觀看進(jìn)度，通過不同灰度的線段表示已觀看和未觀看的節(jié)目長度。用戶在認(rèn)知該信息時，不會獨(dú)立地去理解這兩條線段，而是根據(jù)方向的引導(dǎo)，將兩條線段連接起來，理解線段合義。

封閉性原理指的是人們根據(jù)自身經(jīng)驗，更傾向于識別一個完整熟悉的物體，會自覺將存在缺漏的物體補(bǔ)充完整。如圖8，左側(cè)圖形為四個扇形，人眼在識別時，傾向?qū)D形認(rèn)知為一個熟悉且完整的圖形——圓形，自主將缺少的空白區(qū)域在腦中填充。封閉性強(qiáng)調(diào)信息的完整，呈現(xiàn)出的元素存在空缺，人們意識中仍會將元素當(dāng)作完整的整體處理。如圖9，“用戶”和“星標(biāo)”圖形因重疊組合與前后遮擋的關(guān)系變得不完整，而人眼會根據(jù)已有經(jīng)驗，將后面的“用戶”形象補(bǔ)充完整。采用不完整圖形作為圖標(biāo)，使圖標(biāo)更透氣，更具節(jié)奏感，且不會給用戶感知理解造成困難。

3.3 對稱斷口主體與背景原理

對稱性和主體與背景原理具有簡化對象的傾向。對稱性原理是指在面對復(fù)雜的對象時，我們的視覺系統(tǒng)會按照最簡化的形式來認(rèn)知對象，更易感知勻稱的物體，傾向?qū)ΨQ的元素感知為一個整體。如圖10，當(dāng)人們看到左側(cè)的圖形時，人眼趨向?qū)?fù)雜的圖形簡單化，尋找具有秩序與穩(wěn)定的元素，把圖形認(rèn)知為左右兩個方形，從而降低圖形復(fù)雜度。如圖11，在網(wǎng)站中，對稱的元素看起來是舒適、和諧的。

主體與背景原理是指在一個場景中突出強(qiáng)調(diào)某些元素，占據(jù)人們主要注意力，而其余元素退后成背景，起襯托作用。該原則為圖像營造一種層次感，主體元素在視覺上更靠前，人們會優(yōu)先感知主體部分，背景則不容易引起注意，從而通過這種形式簡化人們的認(rèn)知過程。如圖12，人們的視線會先被面積較小的圓形吸引，面積大的矩形在之后才被感知。如圖13，在網(wǎng)頁界面中，在背景之上添加蒙版是常用手法。主體元素在蒙版之上，是頁面中最突出的元素;背景在蒙版下面，進(jìn)行弱化處理，用戶仍能知道他們所處的環(huán)境。

3.4 格式塔原理的綜合應(yīng)用

格式塔原理是描述人們?nèi)绾沃庇^的感知對象。格式塔原理中各原理并不是孤立的，而是共同起作用的，它們之間具有強(qiáng)關(guān)聯(lián)性，是相輔相成的關(guān)系，可以根據(jù)具體需求和用戶場景，進(jìn)行組合運(yùn)用。但各原理之間存在著相互作用，同時使用某幾個格式塔原理進(jìn)行設(shè)計的時候，可能產(chǎn)生違反預(yù)期效果的情況。為了消除這種影響，當(dāng)設(shè)計好頁面之后，逐一的用各個原理來考量各設(shè)計元素之間的關(guān)系是否符合設(shè)計初衷，以達(dá)到最好的網(wǎng)頁視覺效果。

4 結(jié)語

通過對網(wǎng)頁界面中信息結(jié)構(gòu)的分析，得知優(yōu)秀的網(wǎng)站除了具有視覺上的美觀，更重要的是信息結(jié)構(gòu)設(shè)計。以格式塔原理為指導(dǎo)，界面上的信息以結(jié)構(gòu)化的形式呈現(xiàn)，挖掘信息之間的相互關(guān)系和規(guī)律。這樣的網(wǎng)頁界面適應(yīng)人的視知覺規(guī)律，提高網(wǎng)頁的可視性。

參考文獻(xiàn)

[1]喬柳.網(wǎng)頁界面設(shè)計中的信息圖形化研究[D].上海交通大學(xué)，2010.

[2]譚先聯(lián).開放性網(wǎng)絡(luò)基于超鏈接的信息組織策略的應(yīng)用[J].科技資訊，2010（22）：19-20.

[3]Shi P.Visual Information Interactive Design on Web Interface[J].Advances in Multimedia，Software Engineering and Computing，2011，（2）：457-462.

[4]黃琳斯.視覺層級下的網(wǎng)頁布局設(shè)計研究[D].中南民族大學(xué)，2014.