基于視覺認(rèn)知規(guī)律和信息傳播理論的網(wǎng)頁信息視覺流研究

王 偉

（上海視覺藝術(shù)學(xué)院，上海201620）

一、關(guān)于眼睛

人的眼睛主要依靠兩種細(xì)胞（視桿細(xì)胞和視錐細(xì)胞）來獲得感光的能力，利用視網(wǎng)膜成像，經(jīng)視神經(jīng)傳入到大腦視覺中樞。眼睛通常能接收和識別一些基本的信息，包括亮度、形狀、顏色、運(yùn)動、立體空間和表面細(xì)節(jié)等情況。至少有80%以上的外界信息經(jīng)視覺獲得。識別總視場范圍近 200 度，中間部分大概有 120 度是雙眼視覺區(qū)域，兩側(cè)各 40 度是單眼視覺區(qū)域。[1]實(shí)際上，雙眼直視的自然舒適區(qū)域只有40度左右。

以筆記本電腦屏幕為例，經(jīng)過測算，用戶（這里指成人用戶，中國大陸男性平均身高169.7厘米，女性158.2厘米）[2]操作鍵盤的曲臂和屏幕的距離大約在45～50厘米之間。目前，市面上最符合良好體驗(yàn)度的筆記本電腦顯示尺寸是15英寸，按4:3的標(biāo)準(zhǔn)屏來計(jì)算，物理尺寸大約為30厘米×23厘米，按72分辨率計(jì)算，屏幕尺寸正好為1080像素，這種屏幕尺寸的體驗(yàn)度最佳，使用起來感覺最舒服。通常，用戶使用的屏幕存在物理尺寸和顯示分辨率并不一致，規(guī)劃和設(shè)計(jì)網(wǎng)絡(luò)界面時，一般建議不宜超出此實(shí)際物理尺寸的范圍。

二、眼睛的運(yùn)動

眼睛尋找目標(biāo)有其獨(dú)特的機(jī)制。下圖準(zhǔn)確地描述了眼睛運(yùn)動的工作機(jī)制(圖1)。[3]

圖1 眼睛運(yùn)動驅(qū)動信息流的作用機(jī)制

眼睛在一個封閉的視域空間里搜索目標(biāo)，通過視覺器官接收信息，并通過大腦控制中樞來決定是否進(jìn)入下一個目標(biāo)，眼睛的運(yùn)動軌跡正是通過這種不斷的反饋機(jī)制，驅(qū)使眼睛通過轉(zhuǎn)動頭部來獲取更多的目標(biāo)信息，從而形成一條甚至多條的視覺線。

三、視知覺和記憶

物像通過視覺器官將引起一系列的心理反應(yīng)，這是一個由外向內(nèi)傳輸信息的過程，科學(xué)家們從不同的角度來詮釋這種現(xiàn)象，如內(nèi)省理論①內(nèi)省理論實(shí)驗(yàn)始于馮特，認(rèn)為人的直接經(jīng)驗(yàn)的獲得需要借助內(nèi)省。、S-R理論②S—R（S:stimulus;R:response）理論又稱刺激—反應(yīng)理論，其代表人物是赫爾、商代克、巴普洛夫、華生。、信息編碼理論③信息編碼理論是通過信息基本原理來解釋人類大腦對信息輸入、信息加工、信息輸出的過程和方法。、建構(gòu)主義理論④建構(gòu)主義理論(constructivism)的重要概念是圖式，該理論認(rèn)為圖式是人類認(rèn)識事物的基礎(chǔ)，是個體對世界的知覺理解和思考的方式。該理論認(rèn)為認(rèn)知發(fā)展受三個過程的影響：同化、順應(yīng)和平衡。其代表人物是皮亞杰、科爾伯格、斯滕伯格、卡茨等。、情景認(rèn)知理論⑤情景認(rèn)知理論強(qiáng)調(diào)認(rèn)知是在實(shí)踐和情景脈絡(luò)中共同協(xié)商的結(jié)果，知識是一種動態(tài)的建構(gòu)與組織。等。以維特海默、科夫卡、克勒為代表的格式塔心理學(xué)認(rèn)為視知覺具有整體性、具體化、組織性和恒常性特征。格式塔心理學(xué)認(rèn)為視知覺行為是一種整體的認(rèn)知行為，即依據(jù)整體性“印象”來識別對象，并擅于將散落的形象具體化。在一定范圍內(nèi)改變知覺條件的情況下，人們對物體或性質(zhì)仍會保持恒定的知覺傾向，如被觀察對象的形狀、大小、顏色、明度、方向、距離、位置具有恒常性特征。正是由于這種恒常性，當(dāng)物象發(fā)生某些變化時，我們的眼睛依然可以辨認(rèn)出其原本特征。這些認(rèn)知特征使同類型的對象之間形成視覺線傾向。以皮亞杰為代表的日內(nèi)瓦學(xué)派認(rèn)為失去平衡是促進(jìn)認(rèn)知發(fā)展的動力，每個人在兒童期就具有了某種圖式，在認(rèn)知和知識之間的不平衡中，通過順應(yīng)和同化促成智力成長，這種成長過程是信息在大腦中匹配、同化或順應(yīng)地構(gòu)建有序的過程，這種有序化過程，為相關(guān)語義之間的連接提供預(yù)設(shè)視覺線機(jī)會。借助這些理論來構(gòu)建網(wǎng)絡(luò)信息流，將大幅提升信息傳播效果。

大腦如何構(gòu)建有序的信息？過去曾一度認(rèn)為，人的大腦特定區(qū)域?qū)?yīng)這某一識別類別。最近，神經(jīng)科學(xué)也在視覺記憶方面獲得了最新的進(jìn)展。美國加州大學(xué)伯克利分校的科學(xué)家繪制出驚人的人類“大腦地圖”，并發(fā)表在《神經(jīng)元》雜志上，揭示大腦如何能夠?qū)⑽覀兛吹降牟煌矬w和活動進(jìn)行有序排列。(圖2)

圖2 大腦地圖

科學(xué)家將這種大腦地圖稱之為“一個連續(xù)的語義空間”。[4]研究人員發(fā)現(xiàn)一些類別之間存在有意義的聯(lián)系，例如擁有相同“鄰域語義”的人類和動物。兩者之間沒有類似的關(guān)系則很難建立這種類型的語義空間，例如走廊和桶。這種發(fā)現(xiàn)，為我們提供了一種新的信息組織關(guān)系，為構(gòu)建信息流提供了一種新的設(shè)計(jì)方法,可以利用這種“鄰域語義”現(xiàn)象來預(yù)設(shè)視覺流軌跡，讓用戶更便利地獲取信息,而這種關(guān)系也加強(qiáng)了閱讀和理解的流暢性。例如在描繪一個有關(guān)美食的信息時，與其相關(guān)的“領(lǐng)域語義”可能是各種各樣的精美的廚具、新鮮食材、豐富的調(diào)味品、鮮艷的色彩、漂亮的形狀，也可能是享受美食的表情和肢體語言等。

四、視覺運(yùn)動規(guī)律

視覺流是認(rèn)知和記憶機(jī)能所表現(xiàn)出來的自然現(xiàn)象。視覺流不僅具有線性特征，也具備方向性特征。

馬斯洛認(rèn)為，尋求安全感是人在獲得基本生理需求之外的第二基本需求。個體出于安全需要，眼睛首先會尋找主體所處環(huán)境的邊界，這種現(xiàn)象在剛出生的幼兒期就會表現(xiàn)出來。例如，當(dāng)人進(jìn)入某個陌生空間時，通常先尋找這個空間的邊界。當(dāng)某個物象進(jìn)入人的視野時，同樣會在第一時間尋找物象的邊界。當(dāng)人的眼睛瀏覽網(wǎng)頁時，眼睛即會對網(wǎng)頁邊界做出確認(rèn)的動作反應(yīng)。由于視覺活動所表現(xiàn)出來的衡常性具有接近律、相似律、閉合律、連續(xù)律、成員特性律等規(guī)律。眼睛一旦執(zhí)行確認(rèn)邊界和尋找焦點(diǎn)以后，在相應(yīng)的空間內(nèi)會從焦點(diǎn)開始連續(xù)尋找相關(guān)要素，視線會向信息相關(guān)的方向移動，如向著和焦點(diǎn)相同或相近的指向、顏色、大小、距離空間或語義等，這就形成了視覺流現(xiàn)象。這種現(xiàn)象在大腦里繪制出了一張張“連續(xù)的語義空間”的知識記憶圖譜。

根據(jù)觀察，當(dāng)物象進(jìn)入眼睛的視野時，視覺活動軌跡從哪里開始，到哪里結(jié)束，有其特定的規(guī)律，這些規(guī)律反映了視覺線、視覺焦點(diǎn)和安全空間之間的關(guān)系:

1.當(dāng)眼睛進(jìn)入某個視域時，眼睛具有停留在畫面左上角的傾向。

2.眼睛總具有從視覺第一焦點(diǎn)沿著順時針看一張圖片的傾向。

3.眼睛對圖片中的人總抱有特別的興趣，然后才注意到其他的物體。

4.形狀、色彩、方向、大小等對象屬性的對比度越高越容易成為視覺焦點(diǎn)，視線容易根據(jù)視覺刺激強(qiáng)度級次由強(qiáng)向弱的方向流動，形成視覺流。

5.人們的視覺焦點(diǎn)總是最先停留在刺激力強(qiáng)度最大的地方，然后向弱方向流動。

6.視線流動的順序，還容易受到人的生理及心理的影響，一個共情的對象更容易受到視覺的關(guān)注。

7.由于眼睛的水平運(yùn)動比垂直運(yùn)動快，更容易，更省力，因而在觀察物象時，容易先注意水平方向的物象，然后才注意垂直方向的物象。人的眼睛對于畫面左上方的觀察力優(yōu)于右上方，對右下方的觀察力又優(yōu)于左下方。

8.由于人們的視覺運(yùn)動是一種積極主動的行為，具有很強(qiáng)的自主選擇性，往往先選擇所感興趣的視覺物象，而忽略其他要素，從而造成視覺流程的不規(guī)則性與不穩(wěn)定性。

9.視覺具備格式塔認(rèn)知心理特征，能有將相似的對象組織在一起的記憶能力，從而形成各種不同的視覺線和形狀，如相似的形狀、大小、色彩、位置等。

視覺流具有長度屬性和運(yùn)動時間屬性，這些長度屬性又可以分為字的長度、閱讀時間的長度、視線掃描的長度。研究表明，在不同性質(zhì)的網(wǎng)絡(luò)媒體上，視覺流長度對信息傳播的效果影響非常明顯。

通過對文本的長度對傳播的影響研究，結(jié)果表明在Twitter與Facebook上的統(tǒng)計(jì)表現(xiàn)比較迥異，但是和Demian Farnworth在Google上的發(fā)現(xiàn)比較接近。研究機(jī)構(gòu)Buddy Media和Track Social認(rèn)為，Twitter文字的理想長度是100字符，根據(jù)統(tǒng)計(jì)結(jié)果,Twitter長度在71—100字之間的轉(zhuǎn)發(fā)量最高。Facebook帖子的理想長度不超過40字符，Jeff Bullas 通過分析帖子的受“喜歡”率和評論率發(fā)現(xiàn)，帖子內(nèi)容少于40字者獲得的互動率要高86%。Demian Farnworth發(fā)現(xiàn)Google標(biāo)題理想長度不超過60字符。他的建議是標(biāo)題最好一行解決。Kissmetrics的研究結(jié)果發(fā)現(xiàn)，標(biāo)題的理想長度為6個字，受眾最關(guān)注的是標(biāo)題的前 3 個字和后 3 個字。[5]

社交媒體專家 Derek Halpern發(fā)現(xiàn)，段落的理想寬度為40～60字符[6]，內(nèi)容寬度決定了媒體給人留下的印象。內(nèi)容寬度大小決定了文章給人的觀感是簡單還是復(fù)雜，同時也是讓讀者理解程度最大化的關(guān)鍵，這種研究對網(wǎng)頁設(shè)計(jì)的網(wǎng)格化設(shè)計(jì)進(jìn)一步提供了科學(xué)依據(jù)。按照英文的單詞平均長度來看，大概相當(dāng)于8～11個單詞。相對而言，中文的信息壓縮率更高。因此，在網(wǎng)頁設(shè)計(jì)布局時，無論是960網(wǎng)格系統(tǒng)還是1200網(wǎng)格系統(tǒng)⑥960網(wǎng)格系統(tǒng)和1200網(wǎng)格系統(tǒng)是由MIT媒體實(shí)驗(yàn)室開發(fā)的適應(yīng)多屏幕顯示閱讀的網(wǎng)頁設(shè)計(jì)技術(shù)框架，主要由HTML、CSS、Javascript三項(xiàng)技術(shù)組合完成，可以通過合并拆分來自由組合網(wǎng)頁的版式，已經(jīng)廣泛應(yīng)用于網(wǎng)絡(luò)前端項(xiàng)目開發(fā)中。，每兩個單元能夠容納12個漢字。

博客網(wǎng)站Medium的研究結(jié)果表明，博客的理想篇幅是7分鐘、1600字。Medium衡量文章表現(xiàn)的標(biāo)準(zhǔn)并非點(diǎn)擊量而是關(guān)注度。他們通過研究發(fā)現(xiàn)，文章的受關(guān)注度(閱讀時間)隨篇幅上升，到7分鐘篇幅時到達(dá)頂峰，此后受關(guān)注度便逐步下降。如果是圖片較多的文章則字?jǐn)?shù)以1000字左右為宜。

種種研究表明，視覺流的長度在不同的網(wǎng)頁類型中所表現(xiàn)出來的影響和要求并不一致。在網(wǎng)頁設(shè)計(jì)過程中，需要充分考慮其長度屬性對信息傳播效果可能的影響，利用視覺跟蹤技術(shù)可以精確掌握視覺活動的特點(diǎn)，以便于優(yōu)化視覺流，增強(qiáng)傳播效果。

五、精確測量視覺運(yùn)動

過去，視覺設(shè)計(jì)的傳播效果常常由設(shè)計(jì)者或者決策者的經(jīng)驗(yàn)來決定，隨著技術(shù)的發(fā)展，人類的行為和信息的傳播方式、評估方法均發(fā)生了很大的變化。網(wǎng)絡(luò)、移動終端普及使人類的接受信息的行為變得越來越碎片化，這種粗放式的設(shè)計(jì)方法已經(jīng)不再適應(yīng)現(xiàn)代傳播的要求。我們需要借助一種新的設(shè)計(jì)和評估方法來解決有效傳播問題。

眼球跟蹤技術(shù)廣泛運(yùn)用于實(shí)驗(yàn)心理學(xué)、應(yīng)用心理學(xué)、工程心理學(xué)、認(rèn)知神經(jīng)科學(xué)等領(lǐng)域。現(xiàn)在，很多企業(yè)和信息傳播研究機(jī)構(gòu)使用這項(xiàng)技術(shù)來測試頁面?zhèn)鞑バЧＱ矍蚋櫦夹g(shù)除了需要一臺攝像機(jī)和一臺顯示器，不需要任何專業(yè)硬件，所以部署這種技術(shù)經(jīng)濟(jì)便捷，只要使用一臺標(biāo)準(zhǔn)攝影機(jī)，這種系統(tǒng)鑒別用戶的準(zhǔn)確度就可以高達(dá)97%。用眼球跟蹤技術(shù)，我們可以精確地發(fā)現(xiàn)頁面信息之間的關(guān)系。

眼球跟蹤儀工廠利用跟蹤儀對不同的網(wǎng)頁進(jìn)行了視覺興趣點(diǎn)的跟蹤實(shí)驗(yàn)。通過該實(shí)驗(yàn)，可以精確統(tǒng)計(jì)在不同的區(qū)域視覺對內(nèi)容的反應(yīng)。這里記錄了平均駐留點(diǎn)時間、首次駐留點(diǎn)時間、關(guān)注的比例，精確的數(shù)據(jù)可幫助改善網(wǎng)頁信息的傳播效果。圖3測試計(jì)量了視覺運(yùn)動的方向及其第一次關(guān)注的時間、平均視線駐留的時間、及其關(guān)注的人數(shù)比例。

圖3 眼睛跟蹤儀統(tǒng)計(jì)的Linkin網(wǎng)站頁面的眼球熱圖區(qū)域

在圖4的案例中，通過視覺跟蹤儀測試的用戶數(shù)據(jù)后改善的傳達(dá)效果和未改善時的信息傳達(dá)效果對比，我們可以發(fā)現(xiàn)：畫面中紅色越濃，眼睛在此駐留的時間越長，紅色區(qū)域表現(xiàn)出來的橢圓形，帶有一定的指向，透露出了被測試者的視線軌跡移動方向。

圖4 畫面改善前和改善后視覺跟蹤儀測量的眼球熱圖結(jié)果對比

在圖5中，我們可以發(fā)現(xiàn)在右下角的那個熱區(qū)，它并不符合視覺規(guī)律，但確是一個很熱的區(qū)域。筆者認(rèn)為有三個原因?qū)е逻@樣的結(jié)果。第一，左側(cè)指向性線條將關(guān)注點(diǎn)引導(dǎo)此位置；第二，白底紅字的強(qiáng)烈對比強(qiáng)化了視覺效果；第三，留白的使用，突出了內(nèi)容。由此可見，視覺線在頁面信息傳播中發(fā)揮了積極引導(dǎo)視覺移動的重要作用。

圖5 視覺跟蹤儀所測試的klout網(wǎng)頁熱點(diǎn)

六、制造和改善視覺流

利用視覺運(yùn)動規(guī)律和構(gòu)建信息流方法能夠有效改善傳播效果。

信息流（Information flow）是指信息的傳播與流動，人們采用各種方式來實(shí)現(xiàn)信息交流，從面對面的直接交談到采用各種現(xiàn)代化的傳遞媒介，包括信息的收集、傳遞、處理、儲存、檢索、分析等渠道和過程。

隨著眼睛的運(yùn)動軌跡，大腦在不斷地進(jìn)行收集、傳遞、處理、存儲、檢索和分析看到的相關(guān)信息。信息流的形成過程有賴于大腦活動；大腦活動是一種有目的地組織信息的行為。強(qiáng)化視覺運(yùn)動，通常有兩種途徑來促進(jìn)這種行為的發(fā)生。一種方法是利用相關(guān)的研究成果構(gòu)建一種人為的視覺流方式，常常采用圖形、位置、大小、方向等要素制造某種序列方式來實(shí)現(xiàn)；另一種方法是通過人腦對語言單位的連續(xù)意義的存儲及理解的模式來構(gòu)建視覺流方式，從而增強(qiáng)信息傳播的效用，文本常常采用這種方法。利用以上兩種方法進(jìn)行有效組織視覺認(rèn)知路徑，可以增強(qiáng)傳播效果。

巧用視覺形態(tài)制造序列關(guān)系來構(gòu)筑視覺流，通過有意識地設(shè)計(jì)某種線性結(jié)構(gòu)，引導(dǎo)眼睛的運(yùn)動方向，例如直線、S型線條、Z型線條等等。這些結(jié)構(gòu)形式，促使眼睛跟隨著相關(guān)預(yù)先設(shè)定好的路徑瀏覽，大腦試圖跟隨這些路徑去理解和記憶這種結(jié)構(gòu)上的某些文字的連續(xù)性信息或者圖形信息。這種預(yù)設(shè)能提升信息認(rèn)知和記憶的流暢性，增強(qiáng)信息傳播效果。

視覺通過圖像和文字來獲取信息，選擇和組織圖像和文字，即運(yùn)用圖形記憶法的工作原理，將圖像和要記憶的文字從發(fā)音或感覺上建立某種聯(lián)系，或者通過技術(shù)處理語義之間的關(guān)系，可進(jìn)一步提升信息傳播效果。

英國著名語言學(xué)家Michael Hoey 教授在關(guān)于“Lexical Priming and the Properties of Text”[7]的報告中從三個方面闡述了他對詞匯觸發(fā)和文本屬性的認(rèn)識，提出詞匯搭配和詞匯習(xí)得的研究問題和語義觸發(fā)對語言習(xí)得的解釋，指出任意一個詞項(xiàng)或多詞單位以一種特殊的語義關(guān)系、銜接關(guān)系、結(jié)構(gòu)關(guān)系構(gòu)成了詞匯的觸發(fā)因素。這種連續(xù)性的觸發(fā)將引導(dǎo)視覺線的發(fā)生。

對視覺形態(tài)的預(yù)處理和對語言單位的處理，在形式上和內(nèi)容上構(gòu)建出了一個完整的信息流，眼睛在這條路徑上移動，形成有效的傳播效果。

七、結(jié)語

2016年，Google的搜索量突破了2萬億次。2019年底，中國互聯(lián)網(wǎng)頁面將突破3000億個，現(xiàn)在沒有人能夠說清楚全球頁面的規(guī)模，在這種情況下，借助大數(shù)據(jù)的處理手段來分析、設(shè)計(jì)和優(yōu)化網(wǎng)頁信息是未來設(shè)計(jì)的一個重要趨勢。視覺流是眼睛運(yùn)動的一種自然現(xiàn)象，也是獲取視覺信息的一種方式，依托眼動跟蹤儀捕捉大數(shù)據(jù)可以幫助優(yōu)化視覺流，或者通過預(yù)設(shè)視覺流中的上下文語義結(jié)構(gòu)關(guān)系，這將促進(jìn)用戶對信息的解讀和理解，增強(qiáng)信息傳播效果。