劉華玉 李 穎

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

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

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

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

1.1 視覺注意

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.2 界面設(shè)計(jì)

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

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

3.3 布局與實(shí)現(xiàn)

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

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

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

4 視覺效果測(cè)試

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

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

5 結(jié)語(yǔ)

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

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