具有引導(dǎo)性的移動(dòng)應(yīng)用界面設(shè)計(jì)模式
前段日子，我們的團(tuán)隊(duì)接到了一個(gè)新的移動(dòng)應(yīng)用項(xiàng)目。悲催的是，當(dāng)時(shí)所有的移動(dòng)方面的設(shè)計(jì)師都已經(jīng)被其他項(xiàng)目買票了，剩下的設(shè)計(jì)師所擅長(zhǎng)的領(lǐng)域基本都在企業(yè)級(jí)應(yīng)用或效率工具等方面。
于是，我制作了一個(gè)包含大量移動(dòng)應(yīng)用截圖的快速教程，希望幫助他們盡快熟悉新方向。結(jié)果真心好，培訓(xùn)效果喜人，這套教程也成為我們手頭的移動(dòng)應(yīng)用設(shè)計(jì)模式參考，并逐步編纂成書。
我(英文原文作者)個(gè)人對(duì)其中關(guān)于“引導(dǎo)”方面的話題最有愛，在這里分享給大家。需要提一下，雖然這些設(shè)計(jì)模式都是基于移動(dòng)應(yīng)用歸納出的***實(shí)踐方式，但它們?cè)谀撤N程度上同樣適用于移動(dòng)化的網(wǎng)站設(shè)計(jì)。
還記得***次使用Photoshop時(shí)的情形嗎?給我印象最深刻的就是一個(gè)空白畫布和左側(cè)的一堆強(qiáng)大工具。話說(shuō)，當(dāng)時(shí)我也只是假設(shè)它們很強(qiáng)大，實(shí)際上不能確定，因?yàn)槊鎸?duì)這樣一個(gè)界面，我完全不知道從哪里開始使用。于是我只好又買來(lái)一本“Teach Yourself Photoshop in 24 Hours”，花點(diǎn)時(shí)間自學(xué)先。(24小時(shí)系列教程，小C我只看過JavaScript一本，印象里真心爛。)
10多年之后的現(xiàn)在，移動(dòng)市場(chǎng)中出現(xiàn)了成千上萬(wàn)的應(yīng)用，每個(gè)類別中，都有好幾打功能幾乎完全相同的。這些應(yīng)用多數(shù)是免費(fèi)的，所以我們時(shí)常會(huì)隨便挑一個(gè)下載安裝，花5分鐘研究一下那些直覺性很差的用戶界面，然后卸掉，再去裝另外一個(gè)玩玩看。
Layar Reality Browser是一款基于“增強(qiáng)現(xiàn)實(shí)”(Augmented Reality，簡(jiǎn)稱AR)技術(shù)的移動(dòng)應(yīng)用，它的初期版本如下圖所示：
是什么讓我經(jīng)由這塊大片灰色的界面得到了“增強(qiáng)現(xiàn)實(shí)”?答案就是“引導(dǎo)”。對(duì)于移動(dòng)應(yīng)用來(lái)說(shuō)，“引導(dǎo)”的本質(zhì)就是一種小提示，當(dāng)用戶***次使用app的時(shí)候顯示出來(lái)，向用戶推薦一些常用功能的操作方式，或***他們完成一個(gè)預(yù)設(shè)的教學(xué)目標(biāo)。簡(jiǎn)單卻用心的引導(dǎo)方式可以很有效的在初次體驗(yàn)中提升用戶滿意度。
移動(dòng)應(yīng)用的引導(dǎo)模式大致分為八類：
對(duì)話(Dialog)
提示(Tip)
游歷(Tour)
視頻演示(Video Demo)
半透明標(biāo)注(Transparency)
嵌入(Embedded)
持續(xù)(Persistent)
探索(Discoverable)
#p#
對(duì)話(Dialog)
帶有介紹文案的簡(jiǎn)單對(duì)話框是移動(dòng)應(yīng)用中最普遍的引導(dǎo)方式，也許是因?yàn)樵陂_發(fā)編碼方面相對(duì)容易些的緣故。不過由于太常見了，這種模式也非常容易被用戶直接無(wú)視。
保持介紹文案的言簡(jiǎn)意賅是非常重要的，沒人愿意在這里閱讀大量?jī)?nèi)容。另外有一點(diǎn)需要注意，對(duì)于非常重要的信息，***在應(yīng)用內(nèi)部留有能夠重新閱讀這些提示內(nèi)容的入口。下面的截圖出自TargetWeight和ActionMethod這兩款應(yīng)用的首頁(yè)。
提示(Tip)
這種方式比起“對(duì)話”來(lái)說(shuō)，具有更強(qiáng)的上下文相關(guān)性。我們可以在應(yīng)用的任何一個(gè)視圖界面中使用提示，而不僅是首頁(yè)。在eBay的app中(如下圖左側(cè)所示)，“保存搜索結(jié)果”的功能就是通過提示來(lái)吸引眼球的。試想如果這里不使用如此明顯的提示，用戶的目光會(huì)很容易忽視掉這塊原本是呈現(xiàn)標(biāo)題的地方。另外，Android中用來(lái)引導(dǎo)用戶對(duì)首頁(yè)進(jìn)行自定義的操作提示也是個(gè)很典型的范例(下圖右側(cè))，有些類似Windows中的曲別針君。
ShoppingList會(huì)在用戶使用的過程中漸進(jìn)式的對(duì)一些主要功能進(jìn)行提示，引導(dǎo)用戶操作。
通常的原則，是在當(dāng)前需要突出的相關(guān)功能旁邊放置提示氣泡，保持介紹文案的簡(jiǎn)短，并且在用戶開始執(zhí)行對(duì)應(yīng)的操作時(shí)移除提示。
#p#
游歷(Tour)
游歷可以帶來(lái)***的引導(dǎo)體驗(yàn)——通過對(duì)關(guān)鍵屏和重要功能的連續(xù)展示，在最短的時(shí)間內(nèi)***用戶對(duì)應(yīng)用進(jìn)行全面的探索。Nike GPS應(yīng)用是該方式的一個(gè)不錯(cuò)的例子，它特別為移動(dòng)設(shè)備進(jìn)行了優(yōu)化，包括明了的介紹、生動(dòng)的圖片、簡(jiǎn)單的導(dǎo)航以及足夠明顯的關(guān)閉按鈕。這套游歷會(huì)在應(yīng)用的首屏出現(xiàn)，用戶可以在7屏的介紹中自由的前后瀏覽或關(guān)閉。另外，在導(dǎo)航方面，Nike GPS同時(shí)使用了頁(yè)面指示(圓點(diǎn))與頁(yè)碼計(jì)數(shù)(“2 of 7″)來(lái)清晰的展示當(dāng)前游歷的步驟。CalcBot也用到了類似的導(dǎo)航。
視頻演示(Video Demo)
對(duì)于某些依賴于特定操作方法的應(yīng)用來(lái)說(shuō)，視頻演示也許是最有效的引導(dǎo)方式了，因?yàn)樗梢詣?dòng)態(tài)的展示應(yīng)用的實(shí)際操作。Roambi通過這種這種方式展示了它們的大量可視化數(shù)據(jù)，并且直觀的演示了用于導(dǎo)航和瀏覽內(nèi)容的手勢(shì)。Google Goggles則直接在演示中插入了一段Youtube上的視頻。
我們通?？梢允褂眠@種方式來(lái)展示應(yīng)用的關(guān)鍵功能點(diǎn)，或是從標(biāo)準(zhǔn)操作流程的角度出發(fā)，演示應(yīng)用的操作方式。另外，需要在視頻中提供基本的控制功能，包括停止、暫停、音量控制等。
#p#
半透明標(biāo)注(Transparency)
與其他具有引導(dǎo)性的設(shè)計(jì)模式相比，半透明標(biāo)注的方式對(duì)于觸屏設(shè)備來(lái)說(shuō)有些獨(dú)特。它通常會(huì)在應(yīng)用的首屏出現(xiàn)，以一個(gè)覆蓋在真實(shí)界面上方的半透明層為背景。Pulse和Phoster是比較典型的例子，通過半透明標(biāo)注的模式，他們快速并且可視化的向用戶展示了怎樣對(duì)內(nèi)容進(jìn)行導(dǎo)航。
我們應(yīng)該以正確的方式使用半透明標(biāo)注，而不是試圖通過這種效果來(lái)彌補(bǔ)應(yīng)用界面本身的拙劣設(shè)計(jì)。當(dāng)用戶開始產(chǎn)生相應(yīng)的交互行為時(shí)，要及時(shí)的移除標(biāo)注。
嵌入(Embedded)
與其他模式不同，“嵌入”不會(huì)在目標(biāo)界面加載之前呈現(xiàn)。在這種模式中，相關(guān)的引導(dǎo)內(nèi)容會(huì)融入到界面設(shè)計(jì)當(dāng)中，直到被真正的內(nèi)容覆蓋移除掉。Mini Diary和PageOnce都是典型的例子，通過嵌入式的提示，他們可以立刻推動(dòng)用戶進(jìn)行相關(guān)操作。
在一個(gè)界面中可以存在多個(gè)嵌入式引導(dǎo)提示。在設(shè)計(jì)應(yīng)用的界面時(shí)，要對(duì)這些嵌入式元素進(jìn)行差異化處理，通過圖片等方式使它們能與普通內(nèi)容很好的區(qū)別開。
#p#
持續(xù)(Persistent)
這種方式同樣會(huì)融入到界面當(dāng)中，并始終存在。例如，Jamie Oliver’s Recipes會(huì)始終建議用戶使用橫屏的方式獲取額外的功能。Spring Pad則結(jié)合了“嵌入”與“持續(xù)”兩種模式——用來(lái)引導(dǎo)用戶添加自定義內(nèi)容的“+”符號(hào)會(huì)始終存在，并不斷被正式內(nèi)容替代。
探索(Discoverable)
所謂的“探索”式引導(dǎo)，聽上去也許有些矛盾，但它是一種鼓勵(lì)用戶進(jìn)行某種特定交互操作的有效方式，同時(shí)不會(huì)影響到應(yīng)用界面本身的設(shè)計(jì)。通常，這類引導(dǎo)會(huì)在某些操作的觸發(fā)下呈現(xiàn)，例如下拉或側(cè)翻頁(yè)面。
要對(duì)這種引導(dǎo)方式的使用保持謹(jǐn)慎。它最常規(guī)的作用是刷新或加載更多內(nèi)容。
【編輯推薦】
