• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】手機移動應用的八類引導模式介紹




    手機移動應用的八類引導模式介紹

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自未知的設計理論類文章,寫教學的作者是情非得已,感謝情非得已提供設計理論的實作教學。

    教學大綱:

    文字工作搞的有點兒奔放了啊,一直玩到周日晚間這般時候;任何其他事情恐怕都難以讓自己有這樣的勁頭了吧。也難說。其實周末兩天主要是收拾家當準備搬家;忙裡抽閑做做內容,純當休閑娛樂。


    設計理論教學開始

    文字工作搞的有點兒奔放了啊,一直玩到周日晚間這般時候;任何其他事情恐怕都難以讓自己有這樣的勁頭了吧。也難說。其實周末兩天主要是收拾家當準備搬家;忙裡抽閑做做內容,純當休閑娛樂。

    今次的譯文,與之前一篇產品早期原型設計與用戶測試方面的文章類似,也是來自一本新書,Mobile Design Pattern Gallery(移動應用設計模式畫廊),有興趣的同學可以搜搜,我就不加書店鏈接了。確實沒時間念叨那些有的沒的了,有點鬧不住了;讓我們歡快的進入正文吧。

    前段日子,我們(英文原文作者)的團隊接到了一個新的移動應用項目。悲催的是,當時所有的移動方面的設計師都已經被其他項目買票了,剩下的設計師所擅長的領域基本都在企業級應用或效率工具等方面。於是,我製作了一個包含大量移動應用截圖的快速教程,希望幫助他們儘快熟悉新方向。結果真心好,培訓效果喜人,這套教程也成為我們手頭的移動應用設計模式參考,並逐步編纂成書。

    我(英文原文作者)個人對其中關於“引導”方面的話題最有愛,在這裡分享給大家。需要提一下,雖然這些設計模式都是基於移動應用歸納出的最佳實踐方式,但它們在某種程度上同樣適用於移動化的網站設計。

    還記得第一次使用Photoshop時的情形嗎?給我印象最深刻的就是一個空白畫布和左側的一堆強大工具。話說,當時我也只是假設它們很強大,實際上不能確定,因為面對這樣一個界面,我完全不知道從哪裡開始使用。於是我只好又買來一本“Teach Yourself Photoshop in 24 Hours”,花點時間自學先。(24小時系列教程,小C我只看過JavaScript一本,印象里真心爛。)

     

    10多年之後的現在,移動市場中出現了成千上萬的應用,每個類別中,都有好幾打功能幾乎完全相同的。這些應用多數是免費的,所以我們時常會隨便挑一個下載安裝,花5分鐘研究一下那些直覺性很差的用戶界面,然後卸掉,再去裝另外一個玩玩看。

    Layar Reality Browser是一款基於“增強現實”(Augmented Reality,簡稱AR)技術的移動應用,它的初期版本如下圖所示:

    手機移動應用的八類引導模式介紹

    是什麼讓我經由這塊大片灰色的界面得到了“增強現實”?答案就是“引導”。對於移動應用來說,“引導”的本質就是一種小提示,當用戶第一次使用app的時候顯示出來,向用戶推薦一些常用功能的操作方式,或引領他們完成一個預設的教學目標。簡單卻用心的引導方式可以很有效的在初次體驗中提升用戶滿意度。

    移動應用的引導模式大致分為八類:

    對話(Dialog)

    提示(Tip)

    遊歷(Tour)

    視頻演示(Video Demo)

    半透明標註(Transparency)

    嵌入(Embedded)

    持續(Persistent)

    探索(Discoverable)

    手機移動應用的八類引導模式介紹

    對話(Dialog)

    帶有介紹文案的簡單對話框是移動應用中最普遍的引導方式,也許是因為在開發編碼方面相對容易些的緣故。不過由於太常見了,這種模式也非常容易被用戶直接無視。

    保持介紹文案的言簡意賅是非常重要的,沒人願意在這裡閱讀大量內容。另外有一點需要注意,對於非常重要的信息,最好在應用內部留有能夠重新閱讀這些提示內容的入口。下面的截圖出自TargetWeight和ActionMethod這兩款應用的首頁。

    手機移動應用的八類引導模式介紹

    提示(Tip)

    這種方式比起“對話”來說,具有更強的上下文相關性。我們可以在應用的任何一個視圖界面中使用提示,而不僅是首頁。在eBay的app中(如下圖左側所示),“保存搜索結果”的功能就是通過提示來吸引眼球的。試想如果這裡不使用如此明顯的提示,用戶的目光會很容易忽視掉這塊原本是呈現標題的地方。另外,Android中用來引導用戶對首頁進行自定義的操作提示也是個很典型的範例(下圖右側),有些類似Windows中的曲別針君。

    手機移動應用的八類引導模式介紹

    ShoppingList會在用戶使用的過程中漸進式的對一些主要功能進行提示,引導用戶操作。

    手機移動應用的八類引導模式介紹

    通常的原則,是在當前需要突出的相關功能旁邊放置提示氣泡,保持介紹文案的簡短,並且在用戶開始執行對應的操作時移除提示。

    遊歷(Tour)

    遊歷可以帶來終極的引導體驗——通過對關鍵屏和重要功能的連續展示,在最短的時間內引領用戶對應用進行全面的探索。Nike GPS應用是該方式的一個不錯的例子,它特別為移動設備進行了優化,包括明了的介紹、生動的圖片、簡單的導航以及足夠明顯的關閉按鈕。這套遊歷會在應用的首屏出現,用戶可以在7屏的介紹中自由的前後瀏覽或關閉。另外,在導航方面,Nike GPS同時使用了頁面指示(圓點)與頁碼計數("2 of 7")來清晰的展示當前遊歷的步驟。CalcBot也用到了類似的導航。

    手機移動應用的八類引導模式介紹

     

    視頻演示(Video Demo)

    對於某些依賴於特定操作方法的應用來說,視頻演示也許是最有效的引導方式了,因為它可以動態的展示應用的實際操作。Roambi通過這種這種方式展示了它們的大量可視化數據,並且直觀的演示了用於導航和瀏覽內容的手勢。Google Goggles則直接在演示中插入了一段Youtube上的視頻。

    我們通常可以使用這種方式來展示應用的關鍵功能點,或是從標準操作流程的角度出發,演示應用的操作方式。另外,需要在視頻中提供基本的控制功能,包括停止、暫停、音量控制等。

    手機移動應用的八類引導模式介紹

    手機移動應用的八類引導模式介紹

    半透明標註(Transparency)

    與其他具有引導性的設計模式相比,半透明標註的方式對於觸屏設備來說有些獨特。它通常會在應用的首屏出現,以一個覆蓋在真實界面上方的半透明層為背景。Pulse和Phoster是比較典型的例子,通過半透明標註的模式,他們快速並且可視化的向用戶展示了怎樣對內容進行導航。

    我們應該以正確的方式使用半透明標註,而不是試圖通過這種效果來彌補應用界面本身的拙劣設計。當用戶開始產生相應的交互行為時,要及時的移除標註。

    手機移動應用的八類引導模式介紹

    嵌入(Embedded)

    與其他模式不同,“嵌入”不會在目標界面加載之前呈現。在這種模式中,相關的引導內容會融入到界面設計當中,直到被真正的內容覆蓋移除掉。Mini Diary和PageOnce都是典型的例子,通過嵌入式的提示,他們可以立刻推動用戶進行相關操作。

    在一個界面中可以存在多個嵌入式引導提示。在設計應用的界面時,要對這些嵌入式元素進行差異化處理,通過圖片等方式使它們能與普通內容很好的區別開。

    手機移動應用的八類引導模式介紹

    持續(Persistent)

    這種方式同樣會融入到界面當中,並始終存在。例如,Jamie Oliver’s Recipes會始終建議用戶使用橫屏的方式獲取額外的功能。Spring Pad則結合了“嵌入”與“持續”兩種模式——用來引導用戶添加自定義內容的“+”符號會始終存在,並不斷被正式內容替代。

    手機移動應用的八類引導模式介紹

    探索(Discoverable)

    所謂的“探索”式引導,聽上去也許有些矛盾,但它是一種鼓勵用戶進行某種特定交互操作的有效方式,同時不會影響到應用界面本身的設計。通常,這類引導會在某些操作的觸發下呈現,例如下拉或側翻頁面。

    要對這種引導方式的使用保持謹慎。它最常規的作用是刷新或加載更多內容。

    手機移動應用的八類引導模式介紹

    — —

    文章永久連結為: 手機移動應用的八類引導模式介紹