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