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

邢夢(mèng)霞

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

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

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

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

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

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

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

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

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

2.1 界面元素布局

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

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

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

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

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

3.1 接近勝和相似性原理

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

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

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

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

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

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

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

3.3 對(duì)稱斷口主體與背景原理

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

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

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

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

4 結(jié)語

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

參考文獻(xiàn)

[1]喬柳.網(wǎng)頁界面設(shè)計(jì)中的信息圖形化研究[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]黃琳斯.視覺層級(jí)下的網(wǎng)頁布局設(shè)計(jì)研究[D].中南民族大學(xué)，2014.