手機APP中的視覺引導性符號研究

于小妹

南京理工大學，江蘇南京，210094

手機APP中的視覺引導性符號研究

于小妹

南京理工大學，江蘇南京，210094

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

手機APP；視覺；引導性符號

“引導”，帶領、使跟隨之意義。南朝宋國劉敬叔《異苑》卷三：“傅承為江夏守，有一雙鵝失之三年，忽引導得三十馀頭來向承家?！倍謾CAPP中的視覺引導，即通過視覺符號引導用戶的眼睛在手機網站界面上移動，支持用戶去完成它們的目標和任務。

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

1 手機APP中的視覺引導性設計

我們為什么要在手機APP中做視覺引導性設計？對于手機用戶來說，“引導”的本質就是一種小提示，當用戶第一次使用APP的時候顯示出來，向用戶推薦一些常用功能的操作方式，或引領他們完成一個預設的教學目標，簡單卻用心的引導方式可以很有效的在初次體驗中提升用戶滿意度。常見的視覺引導設計方式有對話、提示、游歷、演示、標注、嵌入、持續和探索。（如圖1）。

圖1 常見的視覺引導設計方式

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

圖2 MONO的視覺引導界面設計

2 手機APP中的視覺引導性符號

在MONO手機閱讀軟件中，主要運用的視覺引導性符號有三類，即（如圖3）：

圖3 MONO的視覺引導符號

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

在實驗設計中主要以眼動熱區和眼動軌跡進行測試分析，測試對象為大學生，有效量本30人，畫面設置五頁，每頁時間限定10秒，自動自右向左翻頁。

圖4 MONO界面眼動軌跡圖

圖5 MONO界面眼動熱區圖

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

綜上實驗，可以得出結論如下：

（1）在手機APP中，視覺引導遵循的是一條流暢的路徑，設計能順利地引導用戶在界面上移動（而不應該視線在各種各樣的符號之間跳來跳去，所有的符號試圖引起用戶的注意）。

（2）有效“干擾”手機用戶的視線，為用戶提供有效選擇的、某種可能的“引導”符號，支持用戶試圖去完成它們的目標和任務。

（3）手機用戶的視覺習慣總結為：

①左上角優先，從左到右、從上到下的閱讀習慣（古騰堡法則）。

②字體對比：字體越大、越粗，表示這部分內容越重要。

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

④盲頁：當頁面在五張時，第三、四兩張是不太被重視的，屬于盲頁，所以重要信息應該放在前兩頁和最后一頁。

（4）通過創意圖片（帶有指示性的圖片）的設計，可以更有效地引導手機用戶完成任務和目標。比如：

①箭頭；

②計數數字。

3 結語

手機APP是基于網站發展比較成熟和手機功能支持的條件下形成的，它既遵循網站設計的一般規律，又有其獨有的設計原則，在保證界面、元素的統一基礎上，引導用戶去使用這款APP軟件 ，才是APP開發、推出的重要環節，我們設計的APP只有讓用戶更快地接受，更好地使用，才是成功的。“用戶在頁面上的視線移動，并不是隨機的。它是一種所有人類共有的、對于視覺刺激產生的、一系列的復雜的原始本能反應?！痹O計師可以通過有效的視覺手段，不同的引導性符號，來吸引或分散手機用戶的注意力。從而引導手機用戶更好地體驗這款手機APP軟件。

[1]曾廣雄.中文Dreamweaver網頁制作實例教程[M].北京:研究出版社,2008:206.

[2]聶森.網頁設計中平面視覺傳達分析[J].吉林商業高等?？茖W校學報,2004:4.

[3]陳飛.組合之美——談網頁設計的點、線、面的運用[J].內蒙古藝術,2003:26-27.

[4]張帆,羅琦,宮曉爾.網頁界面設計藝術教程[M].北京:人民郵電出版社,2002:44.

[5]劉丹.視覺元素在網頁設計中的運[J].合肥工業大學學報,2006.20(2):130.

[6]吳大非.網頁界面的視覺設計研究[J].電腦知識與技術,2010(29).

于小妹/1992年生/女/山東青島人/碩士/研究方向為手機界面交互與UI設計