引導(dǎo)頁(yè)在交互設(shè)計(jì)中的實(shí)用性研究

張麗

摘要：文中詳細(xì)介紹了引導(dǎo)頁(yè)的類型及設(shè)計(jì)原則，并從常用的三類引導(dǎo)頁(yè)入手分析了其重要作用。著重介紹了在交互設(shè)計(jì)中引導(dǎo)頁(yè)的類型，分為前置引導(dǎo)和中間引導(dǎo)。還重點(diǎn)講述了引導(dǎo)頁(yè)的設(shè)計(jì)原則：合理化原則、優(yōu)化編排原則、眼球效應(yīng)原則。通過(guò)本文即可對(duì)引導(dǎo)頁(yè)在交互設(shè)計(jì)中的作用和設(shè)計(jì)原則有一個(gè)較為全面的認(rèn)識(shí)。

關(guān)鍵詞：引導(dǎo)頁(yè)；移動(dòng)應(yīng)用；WEB；游戲；交互設(shè)計(jì)

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）08-0254-03

Abstract：This paper describes the type and design principles of the page guiding， which has three classifications .In this paper， the important role of the three-page guiding is analyzed. This paper focuses on the types of pages in interactive design guide ， the guide is divided into front and center guide . Research rationalization principle ， optimize scheduling principles ，the principle of eye effect.The role of design principles and interaction design is researched in this paper.

Key words：Guide page；mobile applications；WEB；Games；Interactive Design

引導(dǎo)頁(yè)是帶領(lǐng)用戶更快捷更愉悅的達(dá)到目標(biāo)的過(guò)程，能在用戶使用軟件產(chǎn)品遇到障礙之前給予及時(shí)的幫助。在具有交互性的軟件產(chǎn)品中，新手引導(dǎo)的設(shè)計(jì)是在用戶初次使用該產(chǎn)品時(shí)，給予一些必須性的幫助以使得用戶能夠快速了解這個(gè)產(chǎn)品的功能與具體操作方式。為了完成不同的引導(dǎo)內(nèi)容和引導(dǎo)目標(biāo)，軟件產(chǎn)品的引導(dǎo)設(shè)計(jì)會(huì)根據(jù)需求進(jìn)行多樣化處理。引導(dǎo)頁(yè)即是用戶在首次使用軟件產(chǎn)品時(shí)進(jìn)行產(chǎn)品推介和引導(dǎo)的說(shuō)明書(shū)。由于傳統(tǒng)的說(shuō)明書(shū)相對(duì)枯燥和乏味，非必要情況，用戶一般不會(huì)先去閱讀，但在計(jì)算機(jī)軟件產(chǎn)品中，可以通過(guò)更生動(dòng)形象的表現(xiàn)方法來(lái)實(shí)現(xiàn)具有說(shuō)明書(shū)功能的產(chǎn)品引導(dǎo)頁(yè)的設(shè)計(jì)，從而使這類型的說(shuō)明信息更能為用戶所接受，并能使用戶在最短的時(shí)間內(nèi)了解這個(gè)軟件的主要功能、操作方式以便于迅速上手。好的UI設(shè)計(jì)需要具備很多的條件，但是以用戶為中心的設(shè)計(jì)原則將是最為基本的[1]，這在引導(dǎo)頁(yè)的設(shè)計(jì)中也是非常適用的。

1引導(dǎo)頁(yè)類型

引導(dǎo)頁(yè)具有指引用戶了解和掌握軟件應(yīng)用的功能、特性、操作方法等作用。根據(jù)軟件應(yīng)用的安裝情況，從位置上一般將引導(dǎo)頁(yè)分為前置引導(dǎo)和中間引導(dǎo)。

1.1前置引導(dǎo)

所謂前置引導(dǎo)，即在用戶安裝完成軟件應(yīng)用，并第一次打開(kāi)的時(shí)候出現(xiàn)的引導(dǎo)頁(yè)。該引導(dǎo)頁(yè)一般由2到6頁(yè)連續(xù)或不連續(xù)的相關(guān)頁(yè)面構(gòu)成，某些應(yīng)用引導(dǎo)頁(yè)可達(dá)10頁(yè)。前置引導(dǎo)是用戶使用軟件應(yīng)用前所看到的內(nèi)容，此時(shí)用戶對(duì)所安裝的產(chǎn)品了解并不多，對(duì)于產(chǎn)品的功能、布局、具體操作方法等內(nèi)容還沒(méi)有相關(guān)的認(rèn)知。所以前置引導(dǎo)擔(dān)任的作用主要就在于介紹產(chǎn)品的概況內(nèi)容、核心功能、比同類產(chǎn)品更具競(jìng)爭(zhēng)力的功能，以及重要的操作步驟等。由于前置引導(dǎo)的功能和特性決定了其只能在第一次安裝并打開(kāi)的時(shí)候出現(xiàn)。如果軟件應(yīng)用是版本迭代安裝，則在引導(dǎo)頁(yè)更多的出現(xiàn)新增功能及具有重大改變的操作方法的引導(dǎo)內(nèi)容。

有部分前置引導(dǎo)頁(yè)開(kāi)始出現(xiàn)了動(dòng)態(tài)效果的引導(dǎo)方式，或以動(dòng)畫(huà)或以視頻的方式呈現(xiàn)引導(dǎo)內(nèi)容，更加貼切的展示軟件產(chǎn)品的功能和操作方式。某些引導(dǎo)頁(yè)中還加入了交互特效，讓用戶的參與感加強(qiáng)，成功的避免了部分用戶直接跳過(guò)引導(dǎo)頁(yè)的局面。當(dāng)然，對(duì)于老用戶和熟手用戶來(lái)用，在前置引導(dǎo)頁(yè)上出現(xiàn)skip的選擇也是有利于用戶選擇的。

1.2中間引導(dǎo)

對(duì)于版本更新的軟件應(yīng)用，采用中間引導(dǎo)是一個(gè)常見(jiàn)的選擇。中間引導(dǎo)往往是對(duì)已有版本更新升級(jí)后，新功能的一些說(shuō)明性操作指導(dǎo)。在第一次使用有新功能出現(xiàn)的頁(yè)面或操作中，彈出指導(dǎo)性的說(shuō)明界面，能夠讓用戶快速掌握新功能的使用，而不會(huì)因?yàn)閷?duì)新功能的不解造成使用上的困擾。

中間引導(dǎo)在設(shè)計(jì)中常用比較貼近用戶的俏皮口語(yǔ)進(jìn)行引導(dǎo)，而非正式官方的書(shū)面用語(yǔ)。因?yàn)樵谑褂眠^(guò)程中，用戶往往更傾向于舒適滿意的服務(wù)性語(yǔ)言，而不使用說(shuō)教形式的官方用語(yǔ)。設(shè)計(jì)中多用卡通形象進(jìn)行引導(dǎo)，以對(duì)話的方式逐步提示，使用戶帶入感更強(qiáng)，更利于引導(dǎo)內(nèi)容的呈現(xiàn)，有興味性，也避免了用戶的反感。

2引導(dǎo)頁(yè)設(shè)計(jì)原則

2.1合理化原則

對(duì)于引導(dǎo)頁(yè)內(nèi)容的把握要遵循合理化原則。即只做必要的內(nèi)容引導(dǎo)，對(duì)于無(wú)意義的引導(dǎo)內(nèi)容，只會(huì)增加信息的的冗余，減淡重要信息的呈現(xiàn)。根據(jù)引導(dǎo)頁(yè)的目的，出發(fā)點(diǎn)不同，大致可以將其分為產(chǎn)品說(shuō)明類，使用說(shuō)明類，推廣類和問(wèn)題解決類。在設(shè)計(jì)之初就應(yīng)該對(duì)需要設(shè)計(jì)的引導(dǎo)頁(yè)進(jìn)行充分分析，從而得出合理化的設(shè)計(jì)方案。

2.2優(yōu)化編排原則

確定引導(dǎo)頁(yè)面內(nèi)容后，就需要對(duì)其呈現(xiàn)方式進(jìn)行優(yōu)化編排。引導(dǎo)頁(yè)最常用設(shè)計(jì)方式有文字與界面組合、文字與插圖組合、動(dòng)態(tài)效果與音樂(lè)、視頻特效等[2]。常用的編排有逐一展示、故事串聯(lián)、應(yīng)景節(jié)日等。逐一展示是將一個(gè)個(gè)內(nèi)容總結(jié)成點(diǎn)，并順序排列出來(lái)，各點(diǎn)之間沒(méi)有必要的關(guān)聯(lián)。而故事串聯(lián)則是將需要引導(dǎo)的內(nèi)容，編排成有機(jī)的故事，以圖片或視頻的方式來(lái)呈現(xiàn)，在講故事的時(shí)候，把引導(dǎo)內(nèi)容貫穿其中，以引起用戶的關(guān)注，此引導(dǎo)具有非常好的情景性，參讓用戶對(duì)引導(dǎo)的功能點(diǎn)感同身受。應(yīng)景節(jié)日一般是在節(jié)日期間進(jìn)行更新，或提前準(zhǔn)備在節(jié)日期間進(jìn)行更新的時(shí)候采用。常常以節(jié)日氣氛烘托引導(dǎo)內(nèi)容，從而引起用戶的共鳴。

2.3眼球效應(yīng)原則

有效的吸引用戶的眼球才能使引導(dǎo)頁(yè)面起到事半功倍的效果，需要將焦點(diǎn)聚集在重點(diǎn)閱讀的內(nèi)容上，才能達(dá)到突出信息的目的。聚焦可以通過(guò)光影突出、虛化背景、放大鏡突出內(nèi)容等方式來(lái)實(shí)現(xiàn)。

通過(guò)優(yōu)化引導(dǎo)頁(yè)傳達(dá)的信息，來(lái)達(dá)到吸引用戶眼球的目的。通常圖片比文字更具有吸引力，尤其是時(shí)效火爆的信息提取出來(lái)的圖片信息，更容易引起用戶的共鳴從而強(qiáng)化用戶的認(rèn)知。如，近期火爆的陳妍希版小龍女，常常被漫畫(huà)為雞腿頭飾，如在適當(dāng)?shù)囊龑?dǎo)頁(yè)面中使用，則會(huì)引起用戶的共鳴，進(jìn)而讓信息得以快速進(jìn)入用戶眼簾。

眼球效應(yīng)還可以通過(guò)交互效果、動(dòng)畫(huà)和視頻來(lái)實(shí)現(xiàn)。對(duì)于泛濫的靜態(tài)引導(dǎo)頁(yè)面來(lái)說(shuō)，采用動(dòng)態(tài)內(nèi)容更能夠吸引用戶的注意力。所以除了采用靜態(tài)的表現(xiàn)方式，還可以通過(guò)增加合適的動(dòng)態(tài)內(nèi)容來(lái)吸引用戶的眼球。

采用不一樣的引導(dǎo)頁(yè)切換方式，也可以吸引用戶的眼球。一般引導(dǎo)頁(yè)的切換都是從右向左滑動(dòng)切換，對(duì)于用戶來(lái)說(shuō)沒(méi)有多余的學(xué)習(xí)負(fù)擔(dān)，但長(zhǎng)久以后就會(huì)麻木從而感覺(jué)沒(méi)有創(chuàng)意?？梢酝ㄟ^(guò)設(shè)計(jì)出具有新意的切換方式來(lái)博取用戶的關(guān)注，比如，類似抽取、刮開(kāi)、上下等切換形式，在合適的時(shí)候，能取得與從不同的效果。

3常用引導(dǎo)頁(yè)場(chǎng)合

3.1移動(dòng)端應(yīng)用引導(dǎo)頁(yè)

隨著移動(dòng)設(shè)備的硬件等級(jí)不斷提升，移動(dòng)端的應(yīng)用也是非常隨之飛速提升，從功能到界面，到用戶體驗(yàn)，各軟件開(kāi)發(fā)商都在進(jìn)行著競(jìng)爭(zhēng)。如何才能讓一個(gè)好的移動(dòng)應(yīng)用新品快速占領(lǐng)新手用戶的心，做為啟動(dòng)圖標(biāo)和啟動(dòng)后第一個(gè)顯示的引導(dǎo)頁(yè)就成為了吸引用戶眼球的法寶。移動(dòng)端應(yīng)用的引導(dǎo)頁(yè)在設(shè)計(jì)過(guò)程中也要能夠盡量適配各種機(jī)型。占據(jù)手機(jī)行業(yè)大半江山的IOS和Android兩大平臺(tái)，及各種規(guī)格的主流平板，在引導(dǎo)頁(yè)的設(shè)計(jì)上都需要進(jìn)行適當(dāng)?shù)倪m配。

3.2 WEB引導(dǎo)頁(yè)

從用戶心理上講，網(wǎng)站引導(dǎo)頁(yè)起到了一定的緩沖作用[3]。傳統(tǒng)的WEB網(wǎng)站基本是在PC端通過(guò)瀏覽器進(jìn)行訪問(wèn)，以往PC端的WEB網(wǎng)站使用引導(dǎo)頁(yè)的大多是影視或房產(chǎn)等領(lǐng)域的網(wǎng)站，可以通過(guò)FLASH或視頻動(dòng)態(tài)引導(dǎo)，并帶有交互功能，從而引導(dǎo)用戶進(jìn)入網(wǎng)站?，F(xiàn)在移動(dòng)端設(shè)備的普及，使得WEB頁(yè)必須適應(yīng)新的顯示環(huán)境。眾多WEB站點(diǎn)在設(shè)計(jì)的時(shí)候都需要盡量考慮在移動(dòng)端的顯示效果。引導(dǎo)頁(yè)在傳統(tǒng)的PC端上是比較少見(jiàn)的，但有是由于HTML5和CSS3的普及以及各大瀏覽器廠商對(duì)其的支持。采用HTML5和CSS3構(gòu)建的網(wǎng)站常常會(huì)使用具有特殊效果的引導(dǎo)頁(yè)用為功能介紹或產(chǎn)品展示。其具有聲音、動(dòng)畫(huà)、特效和交互效果的展示，潮范兒實(shí)足能夠引起用戶的特別關(guān)注。

PC端從硬件上要比移動(dòng)端優(yōu)越許多，故在WEB引導(dǎo)頁(yè)的設(shè)計(jì)中，不需要像移動(dòng)端那樣考慮多種分辨率的適配，也不太需要考慮硬件的卡頓。所以特效、音頻、視頻和交互的選擇，成為引導(dǎo)頁(yè)效果的首選。

3.3游戲引導(dǎo)頁(yè)

游戲引導(dǎo)頁(yè)可以分為客戶端引導(dǎo)和手游引導(dǎo)。客戶端引導(dǎo)大多體現(xiàn)為新手指導(dǎo)，是新手玩家必經(jīng)之路，通過(guò)指引性的任務(wù)和情節(jié)，引導(dǎo)玩家完成。通過(guò)新手引導(dǎo)讓玩家掌握游戲必備操作技能，熟悉游戲環(huán)境。這基本是客戶端類游戲的固定模式。

手游中由于屏幕較小，引導(dǎo)頁(yè)既可以做成一般的移動(dòng)引導(dǎo)頁(yè)，也可以設(shè)置成新手任務(wù)引導(dǎo)。通過(guò)引導(dǎo)頁(yè)讓玩家熟悉游戲的基本操作，完成新手任務(wù)后整個(gè)游戲引導(dǎo)頁(yè)才算完結(jié)。游戲的特殊性導(dǎo)致其引導(dǎo)需要融合在游戲進(jìn)程中，優(yōu)秀的游戲UI設(shè)計(jì)是用戶的需求始終貫穿在整個(gè)設(shè)計(jì)過(guò)程之中[4]。

4結(jié)束語(yǔ)

引導(dǎo)頁(yè)在交互設(shè)計(jì)中應(yīng)當(dāng)根據(jù)項(xiàng)目需求來(lái)制定設(shè)計(jì)方案，并且需要根據(jù)產(chǎn)品的受眾及競(jìng)品等調(diào)研進(jìn)行合理化設(shè)計(jì)。引導(dǎo)頁(yè)的設(shè)計(jì)對(duì)于新用戶來(lái)說(shuō)是非常重要的，而功能性的升級(jí)版本中的引導(dǎo)頁(yè)也能讓老用戶快速掌握新升級(jí)功能，能起到很好的輔助作用，提升用戶體驗(yàn)。由此可見(jiàn)，引導(dǎo)頁(yè)的設(shè)計(jì)在未來(lái)都是一個(gè)設(shè)計(jì)的重點(diǎn)，值得在項(xiàng)目中推廣使用。

參考文獻(xiàn)：

[1] 萬(wàn)斐.以用戶為中心的UI界面設(shè)計(jì)[J].藝術(shù)設(shè)計(jì)，2015（5）.

[2] 周玉濱.由引導(dǎo)頁(yè)說(shuō)開(kāi)來(lái)[J].計(jì)算機(jī)與網(wǎng)絡(luò)，2014（19）.

[3] 孔維廣.網(wǎng)站引導(dǎo)頁(yè)界面設(shè)計(jì)研究[D].河北科技大學(xué)，2014（6）.

[4] 陳曉忠.網(wǎng)絡(luò)游戲UI界面的設(shè)計(jì)原則[J].吉林廣播電視大學(xué)學(xué)報(bào)，2010（5）.