手機(jī)APP中的視覺引導(dǎo)性符號(hào)研究

于小妹

南京理工大學(xué)，江蘇南京，210094

手機(jī)APP中的視覺引導(dǎo)性符號(hào)研究

于小妹

南京理工大學(xué)，江蘇南京，210094

手機(jī)APP是基于網(wǎng)站發(fā)展比較成熟和手機(jī)功能支持的條件下形成的，它既遵循網(wǎng)站設(shè)計(jì)的一般規(guī)律，又有其獨(dú)有的設(shè)計(jì)原則。手機(jī)APP應(yīng)注重視覺引導(dǎo)設(shè)計(jì)，即用戶能夠依據(jù)手機(jī)界面上的圖形、文字、色彩等元素所承載的信息，準(zhǔn)確、順利抵達(dá)目的地，并使各頁(yè)面之間的切換通過引導(dǎo)性符號(hào)設(shè)計(jì)變得合理有序。本文研究了手機(jī)APP中的視覺引導(dǎo)性設(shè)計(jì)，探討了手機(jī)APP中視覺引導(dǎo)性符號(hào)的設(shè)計(jì)方法，借以案例佐證設(shè)計(jì)方法，為手機(jī)APP開發(fā)者更好的引導(dǎo)客戶使用，提高APP的生存率提供參考。

手機(jī)APP；視覺；引導(dǎo)性符號(hào)

“引導(dǎo)”，帶領(lǐng)、使跟隨之意義。南朝宋國(guó)劉敬叔《異苑》卷三：“傅承為江夏守，有一雙鵝失之三年，忽引導(dǎo)得三十馀頭來(lái)向承家。”而手機(jī)APP中的視覺引導(dǎo)，即通過視覺符號(hào)引導(dǎo)用戶的眼睛在手機(jī)網(wǎng)站界面上移動(dòng)，支持用戶去完成它們的目標(biāo)和任務(wù)。

一般來(lái)說，視覺引導(dǎo)設(shè)計(jì)主要體現(xiàn)在兩個(gè)領(lǐng)域：一是從視覺傳達(dá)角度來(lái)研究，關(guān)注的是如何用簡(jiǎn)潔而醒目的符號(hào)來(lái)表達(dá)準(zhǔn)確的含義，這種視覺語(yǔ)言是不分國(guó)界的；二是從環(huán)境藝術(shù)設(shè)計(jì)角度來(lái)研究，主要包括材質(zhì)、外觀、位置、藝術(shù)表現(xiàn)等因素，而且使符號(hào)融入整個(gè)環(huán)境的氛圍中去。在這里我們所說的是指在手機(jī)APP界面的設(shè)計(jì)當(dāng)中應(yīng)該注重的視覺引導(dǎo)設(shè)計(jì)，其中要使瀏覽該手機(jī)APP的用戶在界面中的任何位置，都能夠清楚地找到指引方向的標(biāo)識(shí)物，從而依據(jù)界面上的圖形、文字、色彩等元素所承載的信息，準(zhǔn)確、順利抵達(dá)目的地，并使各頁(yè)面之間的切換通過引導(dǎo)性符號(hào)設(shè)計(jì)變得合理有序。在手機(jī)APP中，視覺引導(dǎo)性符號(hào)設(shè)計(jì)的目的在于準(zhǔn)確把握用戶的心理活動(dòng)及一般視覺導(dǎo)向，一定要明確用戶“從哪里來(lái)，到哪里去”，借以“左右”用戶的行為。

1 手機(jī)APP中的視覺引導(dǎo)性設(shè)計(jì)

我們?yōu)槭裁匆谑謾C(jī)APP中做視覺引導(dǎo)性設(shè)計(jì)？對(duì)于手機(jī)用戶來(lái)說，“引導(dǎo)”的本質(zhì)就是一種小提示，當(dāng)用戶第一次使用APP的時(shí)候顯示出來(lái)，向用戶推薦一些常用功能的操作方式，或引領(lǐng)他們完成一個(gè)預(yù)設(shè)的教學(xué)目標(biāo)，簡(jiǎn)單卻用心的引導(dǎo)方式可以很有效的在初次體驗(yàn)中提升用戶滿意度。常見的視覺引導(dǎo)設(shè)計(jì)方式有對(duì)話、提示、游歷、演示、標(biāo)注、嵌入、持續(xù)和探索。（如圖1）。

圖1 常見的視覺引導(dǎo)設(shè)計(jì)方式

在一款倡導(dǎo)“新閱讀、新生活”的MONO手機(jī)閱讀軟件中，從打開界面的一段背景影音、流動(dòng)海母加上提示性文字“開始奇妙之旅”進(jìn)入3頁(yè)游歷界面，游歷可以帶來(lái)終極的引導(dǎo)體驗(yàn)——通過對(duì)關(guān)鍵屏和重要功能的連續(xù)展示，在最短的時(shí)間內(nèi)引領(lǐng)用戶對(duì)應(yīng)用進(jìn)行全面的探索。簡(jiǎn)單的文字交流后進(jìn)入探索界面“向下拉開始看日?qǐng)?bào)”，這種“探索”是一種鼓勵(lì)用戶進(jìn)行某種特定交互操作的有效方式，同時(shí)不會(huì)影響到應(yīng)用界面本身的設(shè)計(jì)。通常，這類引導(dǎo)會(huì)在某些操作的觸發(fā)下呈現(xiàn)，例如下拉或側(cè)翻頁(yè)面。接著轉(zhuǎn)入等待界面“俯覽世界”后打開內(nèi)容頁(yè)面，每個(gè)內(nèi)容板塊都有提示性語(yǔ)言，方便用戶更好體驗(yàn)。（如圖2）

圖2 MONO的視覺引導(dǎo)界面設(shè)計(jì)

2 手機(jī)APP中的視覺引導(dǎo)性符號(hào)

在MONO手機(jī)閱讀軟件中，主要運(yùn)用的視覺引導(dǎo)性符號(hào)有三類，即（如圖3）：

圖3 MONO的視覺引導(dǎo)符號(hào)

其中，文字標(biāo)題字11號(hào)、次標(biāo)題8號(hào)、說明性文字是7號(hào)字，漢字以微軟雅黑和黑體、英文以Arial字體為主，文字色彩白色為主。圖標(biāo)扁平化黑背景，色彩以單色塊為主。整體背景以暗色為主，襯托主要對(duì)話框。在這款手機(jī)閱讀軟件中，功能比較完備，文藝氣息濃厚，足以引導(dǎo)用戶駐足體驗(yàn)。

在實(shí)驗(yàn)設(shè)計(jì)中主要以眼動(dòng)熱區(qū)和眼動(dòng)軌跡進(jìn)行測(cè)試分析，測(cè)試對(duì)象為大學(xué)生，有效量本30人，畫面設(shè)置五頁(yè)，每頁(yè)時(shí)間限定10秒，自動(dòng)自右向左翻頁(yè)。

圖4 MONO界面眼動(dòng)軌跡圖

圖5 MONO界面眼動(dòng)熱區(qū)圖

通過實(shí)驗(yàn)數(shù)據(jù)整合，繪制出圖4眼動(dòng)軌跡圖和圖5眼動(dòng)熱區(qū)圖，從眼動(dòng)軌跡圖第一張中可以看出大部分人第一眼被MONO軟件的黑底白字大標(biāo)題和右下角箭頭所吸引，再對(duì)比第一張的眼動(dòng)熱區(qū)圖，發(fā)現(xiàn)這兩處也是瀏覽次數(shù)最多的，只要時(shí)間充足，用戶會(huì)不斷注目這兩處，從第一張圖也可以看出用戶的習(xí)慣是從右向左，從上到下，對(duì)于背景水母動(dòng)畫，用戶的關(guān)注度在10秒內(nèi)人均關(guān)注度只有4秒，可見，用戶對(duì)有效信息的關(guān)注多于無(wú)效信息的關(guān)注。從第二張眼動(dòng)軌跡圖可以看出用戶被跳躍性的色塊的吸引度大于標(biāo)題文字“WELCOME!”，但是從熱區(qū)圖中反映出的確是對(duì)文字的關(guān)注度更大，花費(fèi)時(shí)間更多。第三張圖的軌跡圖中可以看出用戶對(duì)圖案的注意到大于文字，但是在熱區(qū)圖中，可以看出，用戶雖然在瀏覽頁(yè)面，但是這時(shí)候已經(jīng)不仔細(xì)閱讀內(nèi)容，只是大略的瀏覽頁(yè)面，可見第三頁(yè)一般為視覺盲頁(yè)。第四張圖中用戶對(duì)頁(yè)面的關(guān)注大一點(diǎn)，但是對(duì)于小文字的閱讀耐心度也不高，不過通過綠和紅色塊的關(guān)注度可以看出，冷色塊的吸引度略高于暖色塊。第五圖，作為承上啟下的頁(yè)面，信息量包含也比較多，所以用戶的有選擇性閱讀更能反映頁(yè)面中視覺引導(dǎo)性符號(hào)的作用大小，在軌跡圖中可以發(fā)現(xiàn)綠色快以及色塊的文字被用戶最先注意到，然后是向右下拉的箭頭，然后是背景人物圖案，最后才是幾段小文字，特別注意到，對(duì)于箭頭，用戶在10秒內(nèi)至少瀏覽5次。

綜上實(shí)驗(yàn)，可以得出結(jié)論如下：

（1）在手機(jī)APP中，視覺引導(dǎo)遵循的是一條流暢的路徑，設(shè)計(jì)能順利地引導(dǎo)用戶在界面上移動(dòng)（而不應(yīng)該視線在各種各樣的符號(hào)之間跳來(lái)跳去，所有的符號(hào)試圖引起用戶的注意）。

（2）有效“干擾”手機(jī)用戶的視線，為用戶提供有效選擇的、某種可能的“引導(dǎo)”符號(hào)，支持用戶試圖去完成它們的目標(biāo)和任務(wù)。

（3）手機(jī)用戶的視覺習(xí)慣總結(jié)為：

①左上角優(yōu)先，從左到右、從上到下的閱讀習(xí)慣（古騰堡法則）。

②字體對(duì)比：字體越大、越粗，表示這部分內(nèi)容越重要。

③色塊對(duì)比：色塊明度對(duì)比越大，色塊越突出；色塊純度越高，吸引度越大；同樣大小色塊，冷色比暖色更能吸引人關(guān)注。

④盲頁(yè)：當(dāng)頁(yè)面在五張時(shí)，第三、四兩張是不太被重視的，屬于盲頁(yè)，所以重要信息應(yīng)該放在前兩頁(yè)和最后一頁(yè)。

（4）通過創(chuàng)意圖片（帶有指示性的圖片）的設(shè)計(jì)，可以更有效地引導(dǎo)手機(jī)用戶完成任務(wù)和目標(biāo)。比如：

①箭頭；

②計(jì)數(shù)數(shù)字。

3 結(jié)語(yǔ)

手機(jī)APP是基于網(wǎng)站發(fā)展比較成熟和手機(jī)功能支持的條件下形成的，它既遵循網(wǎng)站設(shè)計(jì)的一般規(guī)律，又有其獨(dú)有的設(shè)計(jì)原則，在保證界面、元素的統(tǒng)一基礎(chǔ)上，引導(dǎo)用戶去使用這款A(yù)PP軟件 ，才是APP開發(fā)、推出的重要環(huán)節(jié)，我們?cè)O(shè)計(jì)的APP只有讓用戶更快地接受，更好地使用，才是成功的。“用戶在頁(yè)面上的視線移動(dòng)，并不是隨機(jī)的。它是一種所有人類共有的、對(duì)于視覺刺激產(chǎn)生的、一系列的復(fù)雜的原始本能反應(yīng)。”設(shè)計(jì)師可以通過有效的視覺手段，不同的引導(dǎo)性符號(hào)，來(lái)吸引或分散手機(jī)用戶的注意力。從而引導(dǎo)手機(jī)用戶更好地體驗(yàn)這款手機(jī)APP軟件。

[1]曾廣雄.中文Dreamweaver網(wǎng)頁(yè)制作實(shí)例教程[M].北京:研究出版社,2008:206.

[2]聶森.網(wǎng)頁(yè)設(shè)計(jì)中平面視覺傳達(dá)分析[J].吉林商業(yè)高等專科學(xué)校學(xué)報(bào),2004:4.

[3]陳飛.組合之美——談網(wǎng)頁(yè)設(shè)計(jì)的點(diǎn)、線、面的運(yùn)用[J].內(nèi)蒙古藝術(shù),2003:26-27.

[4]張帆,羅琦,宮曉爾.網(wǎng)頁(yè)界面設(shè)計(jì)藝術(shù)教程[M].北京:人民郵電出版社,2002:44.

[5]劉丹.視覺元素在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)[J].合肥工業(yè)大學(xué)學(xué)報(bào),2006.20(2):130.

[6]吳大非.網(wǎng)頁(yè)界面的視覺設(shè)計(jì)研究[J].電腦知識(shí)與技術(shù),2010(29).

于小妹/1992年生/女/山東青島人/碩士/研究方向?yàn)槭謾C(jī)界面交互與UI設(shè)計(jì)