基于視覺注意的移動圖書館界面顯示優(yōu)化研究

劉華玉 李 穎

（安徽工程大學(xué)，安徽 蕪湖 241000）

隨著網(wǎng)絡(luò)技術(shù)的飛躍和智能終端的普及，移動應(yīng)用當(dāng)下的發(fā)展可謂如日中天，Elgan Mike通過廣泛調(diào)查得出的數(shù)據(jù)顯示，“當(dāng)前手機(jī)用戶有86%的時間花費在手機(jī)App上，而只有14%的時間花費在我們所熟知的萬維網(wǎng)上”[1]。因此，移動應(yīng)用產(chǎn)品市場競爭日益激烈，移動應(yīng)用產(chǎn)品的設(shè)計也朝著用戶體驗的精細(xì)化和舒適度的方向不斷深入，移動應(yīng)用產(chǎn)品設(shè)計對于用戶參與度的重視程度亦越來越高，而其中用戶視覺領(lǐng)域的感受與體驗度研究尤為重要。Asta Tarute等通過網(wǎng)絡(luò)問卷調(diào)查的方法從246名受訪者采集用戶數(shù)據(jù)進(jìn)行用戶參與調(diào)查，試圖提取移動應(yīng)用積累用戶參與并產(chǎn)生用戶持續(xù)使用意向的特征要素[2]。Xiang Cheng等采用大數(shù)據(jù)方法進(jìn)行了移動應(yīng)用用戶參與特征的研究[3]，眾多調(diào)查研究顯示，移動應(yīng)用用戶參與度較高的特征主要體現(xiàn)在兩個方面：情感和視覺。

基于這一事實，Hossain和 Muhammad開展了針對移動應(yīng)用情感識別系統(tǒng)用于提升用戶參與度的研究[4]。而本文則聚焦于視覺參與與視覺注意的研究，并應(yīng)用于移動圖書館界面視覺設(shè)計，以實現(xiàn)良好的用戶界面視覺效果和閱讀體驗。具體方法是基于屏幕分辨率匹配及視覺優(yōu)化原理，以一款移動圖書館界面顯示設(shè)計為例，探索面向主流移動終端設(shè)備的移動圖書館應(yīng)用界面視覺優(yōu)化，并通過用戶人群的視覺效果測試與反饋，以實際結(jié)果驗證視覺優(yōu)化設(shè)計的有效性。本文旨在通過研究提升移動圖書館在網(wǎng)絡(luò)讀者中的吸引力和用戶粘性，以此促進(jìn)移動圖書館的跨平臺應(yīng)用與推廣，并為相關(guān)設(shè)計人員提供參考借鑒。

1 用戶視覺習(xí)慣研究

1.1 視覺注意

所謂視覺注意，是指“人的視覺會過多的‘關(guān)注’于場景中令人感興趣的區(qū)域，并能對這些區(qū)域進(jìn)行仔細(xì)的觀察，而忽略環(huán)境中其余部分的一種視覺特性”[5]。它的特點在于人們在接觸海量信息時能夠及時抓住具有顯著特征的目標(biāo)，例如顯著的顏色、大小、位置、運動等。

早在1967年，Yabus通過眼動跟蹤實驗向人們展示了視覺注意對視覺傳播效果的影響[6]。索爾所等研究了視覺注意對客體特征的處理過程[7]，這一研究結(jié)果現(xiàn)已被廣泛應(yīng)用于移動應(yīng)用界面設(shè)計領(lǐng)域。該研究領(lǐng)域的先鋒人物Jakob Nielsen博士曾經(jīng)對二百三十多名網(wǎng)絡(luò)用戶進(jìn)行了調(diào)查分析，其閱讀習(xí)慣結(jié)果表明網(wǎng)絡(luò)用戶的視覺流程呈字母“F”形瀏覽趨勢。因此，“Google根據(jù)用戶視線從上至下、從左至右移動，瀏覽范圍整體呈F型方式的特性設(shè)計出了搜索結(jié)果頁的‘金三角’形態(tài)”[8]，這一研究結(jié)果同樣適用于移動應(yīng)用界面設(shè)計領(lǐng)域。

1.2 網(wǎng)絡(luò)用戶視覺瀏覽

網(wǎng)絡(luò)用戶的視覺瀏覽習(xí)慣總體遵循著從上到下、從左到右的移動軌跡，同時與其內(nèi)容和形式相關(guān)。

1.2.1 內(nèi)容相關(guān)：“主動關(guān)注”與“被動關(guān)注”

用戶對于移動應(yīng)用界面的體驗一般產(chǎn)生于兩種狀態(tài)之下：一是無目的隨意瀏覽；二是帶有信息需求的有意搜尋。兩種情況下界面對于用戶視覺注意的引導(dǎo)有所不同。

主動關(guān)注：用戶因特定的信息需求而主動搜索并關(guān)注界面內(nèi)容，與用戶已有的體驗、需求、搜索目的、品牌經(jīng)驗息息相關(guān)。

被動關(guān)注：用戶無信息需求的狀態(tài)下，界面元素對用戶注意的引導(dǎo)和吸引。

用戶視覺注意在“被動關(guān)注”的情形下會對用戶的內(nèi)容關(guān)注產(chǎn)生重要作用，潛移默化的引導(dǎo)用戶關(guān)注相關(guān)內(nèi)容，此時用戶界面設(shè)計和視覺設(shè)計則會起到重要參考和提示作用。

1.2.2 形式相關(guān)：位置、顏色與大小

位置：根據(jù)用戶視覺“自上而下，從左至右”的瀏覽習(xí)慣，往往處于頂部和左邊的內(nèi)容最先受到關(guān)注，然而根據(jù)用戶視覺持續(xù)注意的研究，其停留于頂部和中間內(nèi)容的持續(xù)時間最長，關(guān)注程度最高，因此界面設(shè)計往往將最重要的內(nèi)容如標(biāo)題、LOGO放置于頂部居中位置最能引起用戶關(guān)注。同樣根據(jù)用戶視覺瀏覽習(xí)慣，界面設(shè)計應(yīng)自上而下根據(jù)內(nèi)容的重要程度進(jìn)行不同層次的布局。

顏色：用戶對界面中色彩突出的內(nèi)容較先關(guān)注。突出顯示的顏色無疑對用戶視覺注意有著瞬間捕獲的能力，因此許多應(yīng)用界面設(shè)定系統(tǒng)色與警戒色以提示用戶注意。

大?。河脩粢曈X注意與界面內(nèi)容的大小緊密相關(guān)，界面內(nèi)容所占區(qū)域越大，用戶的關(guān)注程度越高，因此移動應(yīng)用界面將重要內(nèi)容以較大區(qū)域顯示以引起用戶注意，如根據(jù)重要級別的不同，將字體顯示大小劃分為不同級別，以引起用戶不同程度的注意。

1.3 移動應(yīng)用界面元素視覺特征

移動應(yīng)用界面元素如大小、位置、顏色、亮度、布局等顯示方式可以在用戶未主動關(guān)注的狀態(tài)下，快速抓住用戶的注意。多名學(xué)者對于廣告元素的眼動跟蹤實驗研究表明，圖片對于用戶注意的捕捉能力優(yōu)于文本[9]，而文本捕獲用戶注意的能力與其所占的空間大小有關(guān)，因此移動應(yīng)用界面往往采取以圖為主，圖文并茂，且在顯示結(jié)構(gòu)設(shè)計上實現(xiàn)主次分明、動靜結(jié)合的合理布局與展示。

2 移動圖書館界面顯示優(yōu)化設(shè)計原則

以一款移動圖書館界面顯示設(shè)計為例，對移動應(yīng)用界面顯示優(yōu)化方案加以研究。移動圖書館界面顯示優(yōu)化設(shè)計的目標(biāo)是實現(xiàn)界面元素層次清楚、內(nèi)容主次分明、用戶關(guān)注的引導(dǎo)性強、顯示形式的差別體現(xiàn)級別層次。

2.1 顯示內(nèi)容設(shè)計原則

移動圖書館從內(nèi)容設(shè)計上要體現(xiàn)出其重要程度，重要內(nèi)容、一般內(nèi)容和輔助內(nèi)容在信息架構(gòu)設(shè)計中應(yīng)該體現(xiàn)出顯示級別的差異。根據(jù)內(nèi)容設(shè)計，移動新聞圖書館客戶端應(yīng)用界面內(nèi)容包含LOGO、標(biāo)題、首頁圖片、應(yīng)用模塊、登錄注冊、頁面導(dǎo)航圖標(biāo)等內(nèi)容，信息架構(gòu)設(shè)計時應(yīng)對這些部分內(nèi)容的顯示進(jìn)行優(yōu)先級別的設(shè)定，如圖1所示：

圖1 移動圖書館界面內(nèi)容顯示優(yōu)先級別設(shè)定

需要強調(diào)的是，界面內(nèi)容顯示的優(yōu)先級別不完全代表界面內(nèi)容的重要程度，還與用戶的內(nèi)容關(guān)注、系統(tǒng)設(shè)計等有關(guān)，例如頁面導(dǎo)航圖標(biāo)部分的內(nèi)容也十分重要，但考慮到用戶會主動搜索關(guān)注這部分內(nèi)容，因此雖然常將其置于頁面底部，與系統(tǒng)其他界面相呼應(yīng)，也不會減弱用戶對該部分內(nèi)容的關(guān)注。

2.2 顯示方式設(shè)計原則

移動應(yīng)用界面以突出顯示方式顯示重點內(nèi)容，一般以突出顯示顏色或突出顯示位置來強調(diào)重點內(nèi)容。相關(guān)研究表明，用戶對于移動應(yīng)用界面的關(guān)注遵循頂部優(yōu)先的原則，即越靠近頂部的內(nèi)容越受關(guān)注，因此在開展移動圖書館界面設(shè)計時，應(yīng)遵循這一原則，將內(nèi)容按重要程度從上至下依次排列，而最重要的內(nèi)容放在頂部位置，如標(biāo)題、LOGO等，同時在作頁面導(dǎo)航設(shè)計時，以顯著的顏色突出當(dāng)前頁面導(dǎo)航圖標(biāo)。

2.3 顯示大小設(shè)計原則

除了顯示方式，界面元素的顯示大小也對用戶視覺注意的捕獲發(fā)揮重要作用，其顯示大小不僅與其內(nèi)容在界面中的優(yōu)先級別相關(guān)，還直接關(guān)聯(lián)用戶視覺的舒適度?！敖?jīng)測試，正常情況下，PC終端上顯示物理寬度為4.23 mm、平板電腦上顯示2.81 mm、手機(jī)屏幕上顯示1.58 mm的文字對于人眼來說是最舒適的”[10]。另根據(jù)屏幕分辨率匹配原理所計算出的iphone及安卓系列1920*1080主流屏幕下的各項元素匹配大小，如表1所示，其計算方法為字號大小=（文字物理寬度）×（屏幕寬度像素個數(shù)）/（屏幕物理寬度），而安卓系列1080P屏幕的寬度從5.15 inch（小米5）到6.8 inch（華為p8）不等，因此在計算匹配字號時使用的是這一系列屏幕寬度的平均值5.57 inch。

表1 主流手機(jī)屏幕分配率適配表（1080P）

此外，還會根據(jù)文字的優(yōu)先級別設(shè)置顯示大小，一般而言，越重要的內(nèi)容其顯示大小的數(shù)值越高，以下結(jié)合界面內(nèi)容的優(yōu)先級別及1080P主流屏幕匹配字號指定的標(biāo)準(zhǔn)字顯示大小，如表1所示，其他各項內(nèi)容如LOGO、按鈕、行高等結(jié)合最新的UI設(shè)計規(guī)范，且以標(biāo)準(zhǔn)字號大小為參考進(jìn)行尺寸計算。

2.4 響應(yīng)式布局設(shè)計原則

在確定了界面元素的顯示級別、顯示方式與顯示大小后，界面內(nèi)容布局應(yīng)采用響應(yīng)式布局方式，以適應(yīng)不同設(shè)備屏幕對界面元素的顯示要求。Marcotte早在2010年就提出了響應(yīng)式網(wǎng)頁設(shè)計的概念[11]。響應(yīng)式網(wǎng)頁設(shè)計一般要求整體結(jié)構(gòu)與頁面內(nèi)容能夠根據(jù)設(shè)備與用戶行為的改變而變化，用于解決設(shè)備環(huán)境改變后界面及其元素的正常顯示問題。其具體要求是，設(shè)備屏幕尺寸發(fā)生改變時，界面整體隨屏幕寬度的改變而調(diào)整，菜單、應(yīng)用圖標(biāo)、功能模塊等并列布局元素符合彈性盒布局要求，自動伸縮以適應(yīng)屏幕寬度的改變；基礎(chǔ)元素（字體、按鈕、圖標(biāo)、LOGO等）大小根據(jù)屏幕寬度重新計算以適應(yīng)屏幕顯示要求；其他素材（如圖片、多媒體影音文件等）寬度隨屏幕寬度的變化而等比例縮放調(diào)整；元素排版方式根據(jù)屏幕變化適當(dāng)調(diào)整。

3 移動圖書館界面視覺優(yōu)化設(shè)計與布局實現(xiàn)

對移動圖書館應(yīng)用界面進(jìn)行視覺優(yōu)化設(shè)計與布局實現(xiàn)，發(fā)布于不同設(shè)備平臺，獲取用戶反饋以研究視覺優(yōu)化設(shè)計的有效性。

3.1 內(nèi)容設(shè)計

根據(jù)移動應(yīng)用的功能模塊對界面內(nèi)容進(jìn)行設(shè)計，以移動圖書館的“個人中心”界面設(shè)計為例，首先是羅列歸類界面所要顯示的內(nèi)容，并確定顯示方式和顯示的優(yōu)先級別。經(jīng)前期的需求確認(rèn)和分析，開展對界面顯示內(nèi)容進(jìn)行顯示優(yōu)先級別的劃分、確定與設(shè)計，該客戶端個人中心界面展示元素如圖1所示。

3.2 界面設(shè)計

針對主流設(shè)備的1080P/5.5英寸下的多款機(jī)型進(jìn)行界面設(shè)計，繪制線框圖，如圖2所示，線框圖中展示了界面各元素的尺寸、布局等，其中的LOGO、圖標(biāo)、文本等尺寸均是根據(jù)表2所示的屏幕分辨率適配表計算，符合人眼對于元素大小舒適度的要求，再將界面及元素寬度及間距換算為百分比，以保證屏幕分辨率改變時界面布局不變。

根據(jù)線框圖進(jìn)行大小和布局、顏色和素材的設(shè)計。依據(jù)視覺優(yōu)化方法對界面進(jìn)行設(shè)計與布局：①重要內(nèi)容（標(biāo)題、LOGO）置于界面頂部，如圖2頂部的“個人中心”；②根據(jù)用戶視覺注意特點，從上至下布置的內(nèi)容依次為標(biāo)題和LOGO、首頁圖片、主要應(yīng)用模塊、登錄注冊以及頁面導(dǎo)航圖標(biāo)；③圖標(biāo)、字體、按鈕等元素大小根據(jù)屏幕分辨率匹配原理計算，同時符合人眼對舒適度的要求；④同類元素大小按照重要級別進(jìn)行顯示設(shè)置，如參考表1標(biāo)準(zhǔn)字使用場景與字號要求，對界面中不同重要級別的文字進(jìn)行大小的換算；⑤底部導(dǎo)航圖標(biāo)使用系統(tǒng)色突出顯示當(dāng)前頁面圖標(biāo)，且整個界面中將重要內(nèi)容以醒目顏色顯示，以顏色提醒網(wǎng)絡(luò)讀者的視覺注意，如圖3所示。

3.3 布局與實現(xiàn)

圖2 移動應(yīng)用界面設(shè)計線框圖

圖3 不同設(shè)備終端的測試效果圖

運用跨平臺移動Web開發(fā)技術(shù)HTML5與CSS3樣式編輯與布局技術(shù)對界面進(jìn)行布局與實現(xiàn)。HTML5創(chuàng)建界面元素，圖片、圖標(biāo)、LOGO、按鈕、文字等，運用CSS3進(jìn)行樣式編輯與布局，整體布局過程符合以下原則：①分辨率適配原則：根據(jù)分配率適配原理，對界面中的字體、LOGO大小、按鈕、圖標(biāo)、文本間距等進(jìn)行計算，符合人眼對舒適度的要求。②彈性盒布局原理：并列元素以彈性盒模式進(jìn)行布局，以實現(xiàn)其根據(jù)屏幕寬度及用戶行為的變化自動伸縮。③寬度響應(yīng)原則：界面、框架及間距寬度以屏幕寬度的比例計算以適應(yīng)屏幕寬度變化。

4 視覺效果測試

運用谷歌瀏覽器chrome自帶的設(shè)備屏幕模擬器，對移動圖書館的“個人中心”界面視覺優(yōu)化設(shè)計與布局實現(xiàn)的視覺效果進(jìn)行發(fā)布測試，得到了不同設(shè)備屏幕下的測試效果，如圖3，從左至右分別為模擬iphone5的4英寸640×1136屏幕、iphone6的4.7英寸750×1134屏幕和iphone6s的5.5英寸1080×1920屏幕上的測試效果。

從測試結(jié)果可以看到，經(jīng)顯示優(yōu)化設(shè)計的移動圖書館應(yīng)用界面發(fā)布于不同設(shè)備屏幕時能夠自動適應(yīng)屏幕寬度而調(diào)整界面布局，且LOGO、圖標(biāo)、文字等內(nèi)容始終能以適合人眼舒適度的最佳大小顯示。選取兩個班級共75名學(xué)生進(jìn)行小范圍的用戶視覺效果測試，經(jīng)用戶反饋調(diào)查與數(shù)據(jù)統(tǒng)計，絕大多數(shù)同學(xué)反饋該移動圖書館客戶端應(yīng)用界面具有良好的視覺體驗效果，界面易讀性強、清晰度高、元素大小顯示較為舒適、顯示內(nèi)容的層次分明、界面整體布局較為舒適，只有1名同學(xué)表示界面不符合其個性化體驗需求，1名同學(xué)表示界面視覺效果不確定。經(jīng)用戶視覺反饋，該顯示優(yōu)化設(shè)計方案下的移動應(yīng)用界面設(shè)計符合絕大多數(shù)用戶群體的視覺瀏覽習(xí)慣，能夠?qū)崿F(xiàn)良好的用戶視覺體驗效果。

5 結(jié)語

依據(jù)網(wǎng)絡(luò)用戶視覺注意基本原理，在遵循移動用戶的視覺注意規(guī)律，符合用戶視覺瀏覽習(xí)慣的基礎(chǔ)之上，確定對移動圖書館客戶端應(yīng)用包括顯示內(nèi)容、顯示大小、顯示方式和布局方式在內(nèi)的界面顯示優(yōu)化設(shè)計原則，并通過“個人中心”界面設(shè)計進(jìn)行具體布局與實踐應(yīng)用，且發(fā)布于不同設(shè)備平臺進(jìn)行用戶視覺效果測試，以用戶視覺體驗反饋驗證界面視覺效果。

研究結(jié)果表明，移動應(yīng)用優(yōu)化顯示方案下的界面設(shè)計具有一定的優(yōu)越性，即提升了用戶視覺體驗，增強了用戶閱讀體驗。然而，具體的視覺效果與傳播效果研究較為復(fù)雜，目前的研究只是處于探索階段，進(jìn)一步的研究需要借助一定的硬件實驗條件以及龐大用戶群體并設(shè)計更為精確合理的研究環(huán)節(jié)，這是該領(lǐng)域研究今后發(fā)展的方向。