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