from：http://wx.alipay.com/2011/12/19/app-新手引導設計/
app 新手引導設計
Posted on 2011 年 12 月 19 日 by 霖鈴
我最早接觸的新手引導設計是來自于遊戲，簡單如“祖瑪”在我第一次玩時也會給我一個關于遊戲故事背景的介紹。當我進入遊戲後界面上會有閃動的提示告訴我應該如何去操作。遊戲發展到網遊之後，為了讓使用者熟悉各種鍵盤操作，設計者們往往會給出幾種新手任務讓使用者熟悉不同的指法。别具匠心的新手引導能夠讓玩家沒有挫折感的成長為一個老手。
做為一個互動設計師我們設計産品的目标當然是讓使用者不需要幫助就可以完成所有操作。但是,如果app應用也能像遊戲一樣，有個開場故事告訴使用者這應用是幹什麼的，有個新手引導的體系更有效的讓使用者學會如何使用也将是種非常好的體驗。事實上，已經有越來越多的app應用開始有自己的新手引導設計。現在就讓我們來看看大家都是如何來做的，每種新手引導方式的優缺點以及适用情況又是怎樣的。
一、示範Demo
示範demo的方式一般是在使用者第一次啟動應用時，通過幾個場景動畫的展現告訴使用者如何使用。這種demo動畫也可以采用視訊短片的形式。
Convertbot(一個機關轉化的應用)，在首次啟動的時候會詢問使用者是否想看一個示範demo。如果使用者願意的話，它會以場景動畫的方式告訴使用者如何進行機關轉化的操作（如下圖）。這個示範demo同時也可以在support菜單下看到，友善使用者日後檢視。
制作示範demo時需要注意的幾點
1、動畫節奏一定要掌握好，制作之後要讓沒有用過的使用者看一下動畫說明是否能看懂。
2、如果首次啟動的時候使用者沒有看，最好在幫助資訊闆塊提供一個再次觀看的入口。
3、demo播放的時間不要太長，一般不要超過30秒。
4、允許使用者中途退出觀看。
5、動畫中需要有輔助的說明資訊。
優點：
1、使用者在觀看示範的時候不需一屏一屏手動切換螢幕。
2、可以更加直覺的讓使用者看到應用中每個關素、按鈕之間的互動方式是怎樣的。
缺點：
1、一般用來展示一個任務流程，對于流程很多的應用就不太适合了。
2、有可能動畫節奏掌握的不好，使用者還沒有看明白動畫就已經往下播放了。
适用于：
1、涉及到與線下的互動的應用通過示範demo就可以很直覺的展示線上線下互動（比如支付寶的悅享拍這樣線上線下互動的應用）
2、設計中有精巧互動動畫的應用，這樣的示範會讓使用者一開始就被你的應用所吸引。
二、靜态教程
靜态教程和示範demo有點像，都是告訴使用者如何去使用應用的，隻不過它是需要使用者手動去進行每屏的切換的。
你可以像操作說明一樣一步步教使用者如何使用一個或幾個應用的主要任務。如web md 在使用者啟動的時候通過十幾屏的教程像使用者介紹應用的各個功能點及操作細節。（當然我認為這個靜态教程有點過長了）
你可以向使用者展示幾個交叉的任務是如何關聯的，比如購物分享應用“pose”将拍照、修圖添說明、分享給好友、檢視好友留言幾個功能串聯起來給使用者講了個故事。
在靜态教程中你還可以為你的應用打廣告，比如閱讀分享應用“flud”在它的iPhone新手引導的最後一頁為自己的iPad應用打了個小廣告。
制作靜态教程的時候需要注意以下幾點：
1、頁面不要過多。（最好在10頁以下）
2、不要隻是截圖和簡單的文字介紹，請重視設計元素和語言表達不要讓使用者感覺看的很無趣。
3、讓使用者可以随時退出這個示範流程，最好可以有路徑直接引導使用者去登入或注冊。如下圖：
4、不要妄圖向使用者介紹應用所有的功能，請找出最能打動他們的功能和變化做介紹。
5、介紹看完後應直接進入登入或應用首界面。
優點：
1、使用者可以自主要制每一步的介紹。
2、可以一次性介紹多個功能，也可以表現他們之間的關系。
缺點：
可能一次性向使用者展示了過多的功能，減少了使用者探索的樂趣。
适用于：
1、很适合進行多個功能介紹，如果你的應用是由很多平分秋色的功能（或互相關聯的功能）組成的話，可以選擇此種引導方式。
2、新優化點的介紹。當我們優化了一個大版本，有很多的變化和改進的時候，采用這種方式也很不錯。
三、覆寫在界面之上的操作介紹
覆寫在界面上的操作介紹，指的是在一個特定的界面上通過半透明的覆寫層的方式向使用者介紹界面上1～5個元素的操作或含義。
Pulse new mini介紹頁面中各部分如何操作。
在新浪微網誌添加了分組檢視微網誌的功能之後，界面上的操作變化較多，是以有了如下的新手提示頁面。
這種設計應注意：
1、由于單螢幕的空間比較小，是以要介紹的元素點一定不要過多，介紹文字也要盡可能的簡短。
2、由于覆寫層看起來像是不可操作的，是以别忘了給使用者留個翻過此頁的出口。
3、這種說明頁面不一定要出現在第一次啟動後或應用的第一界面，它也可以出現在應用更深層次界面中。
優點：
1、效率很高，不會讓使用者感覺需要浪費時間觀看。
2、此種方式就像在操作螢幕上添加的幾個注釋，跳過覆寫層之後使用者還會對介紹保有印象，去嘗試操作的可能性很大。
缺點：
1、那種界面上操作元素太多的界面就不适合用此種方式做介紹了。
2、隻能介紹一個界面之内的操作。
适用于：
1、用在操作與原來相比有變化的時候。
2、适用于應用的操作方式比較隐蔽的時候，如下拉，輕按兩下等操作。
四、演練
演練是指引導使用者一步一步的完成應用中的一個任務。這樣的引導可以幫助使用者快速的完成任務操作，同時使用者也真實的與應用産生了互動，有助于使用者更深入的探索應用。這種方式可能會降低你的新使用者流失率。
Path的新手注冊不像正常的新手注冊隻是填寫一長串的表單而已，而是一步一步的引導使用者将自己的資訊豐富起來。
Shopkick是一款提供消費折扣的應用，整個應用采取了勳章級别的折扣獎勵體系。進入應用後螢幕上的提示資訊會引導使用者操作并且赢得第一個獎勵勳章。Shopkick創新性的把一個複雜的晉級任務拆分成幾個獎章任務。使用者可以很輕易的收集到一個獎章，會有晉級在望的感覺。
使用演練這種方式的時候需要注意以下幾點：
1、由于演練流程需要使用者一步一步跟着走，是以演練的流程一定是應用中最重要的或必經的流程。
2、演練的流程一定要簡單，最好在3步左右，不然使用者會有厭煩和失去控制權的感覺。
3、如果可能的話，盡量讓演練變得有趣，如果演練結束之後能夠有個小獎勵當然是最好的。（就像我們在玩遊戲時練習關卡通過後，關卡選擇會呈現已完成的狀态，我的遊戲角色能得到最初的道具等等）
4、在演練結束之後要明确的告知使用者下一步該怎麼做或者應該如何傳回應用的主界面。
優點：
1、實時性的操作引導，讓使用者幾乎不用思考就可以輕松完成操作。
2、通過這次演練使用者已經參與到應用的使用，或完成了一個重要的卻不用反複操作的功能（如注冊、完善個人資料）
缺點：
1、可能會給使用者失去控制權的感覺。
2、不适合介紹那種步驟很多的流程。
3、由于隻是介紹一個功能如何操作，無法向使用者展示應用中幾個功能的關系。
适用于：
1、非常适用于使用者注冊賬戶和開始第一個釋出任務（社交類應用）。
2、适用于有勳章體系（獎勵體系）的應用。可以讓使用者感受到激勵，初嘗成長的快樂。
下面再來介紹兩種輔助的新手引導方式，這兩種方式可以随時穿插在使用者使用的過程中，是靈活輕便的引導方式。
五、小提示（tips）
tips一般是出現在使用者使用過程中，可以是通過觸發某操作即展現的形式，也可以是在頁面中單獨的tip區使用者可以選擇看或不看此提示。也可以是瞬間閃現的氣泡提示，使用者點選即消失或者幾秒中之後會自動消失。
Evernote在首次啟動的時候界面下方會有一個tips頁簽，向使用者提示頁面中的一些操作。當然，此提示可以随時收起。
paypal 的bump功能，當使用者選擇此功能的時候卻沒有與其他使用者進行bump對接時會出現如下的提示。
需要注意的是：
1、tip不能頻繁的出現最好隻是在使用者需要幫助時出現。（不然使用者會有“難道我很笨嗎？”的不适感）
2、tip不要遮擋和影響使用者的目前和下一步操作。
優點：
1、非常的靈活，可以随操作的情況靈活出現。
2、不會中斷使用者的操作行為，是使用者控制的引導方式。
缺點：
1、隻是對單個操作的注釋，不可能向使用者展示整個功能流程。
2、氣泡類提示對有氣泡潔癖的使用者來說會有點幹擾，會把使用者引導到本不想進行的操作去。
适用于：
1、适用于教使用者一些小技巧或者一些輔助功能。
2、适合在某一操作進行不下去的時候給予幫助。
3、适用于提示一些使用者不太容易注意的功能。
六、簡介，功能說明
簡介是一種常見的對應用各功能做介紹的方式，一般用是簡短的幾句話來描述展現頁的功能，描述資訊會在第一次使用功能時出現，并且會自動消失。
比如在instagram中使用者首次在幾個頁簽中做切換的時候螢幕的下方都會浮現出簡短的頁面介紹。
這種頁面介紹設計應該注意：
1、在出現的時候不要打斷和影響使用者的操作。
2、出現的時間請做好計算，一般使用者想要讀明白單段文字資訊需要5秒左右。
3、介紹文字要盡量簡短，最好是在2～3行文字。
優點：
1、可以快速的向使用者介紹某一頁面的作用。使用者在試探性的點選頁簽的時候就能夠對應用有個概念性的了解了。
2、不會中斷和影響使用者的操作。
缺點：
1、文字的介紹不直覺，不要指望使用者通過簡介了解要如何使用。
2、看過介紹後，有可能打擊到使用者使用功能的積極性。
适用于：
操作較簡單，需要做功能緣由說明的界面。
新手引導設計首先要選擇适合自己應用的方式。比如大熱的twitter的第三方用戶端tweetbot對自己複雜的手勢操作采取了在啟動畫面中示範介紹（方式二）中的一頁中做介紹，使用者是較難記住的。如果采用覆寫頁面（方式三）的方式進行介紹是不是會更好？
前面介紹的各種新手引導方式我們可以隻選一種适合自己應用的方式。當然也可以選擇2、3種在适合的場景中配合使用。（如下圖）
Quick fotobook
最後要說的是新手引導應該是讓使用者第一次使用時感到更舒适的引導，而不是為糟糕設計的補救措施。
參考閱讀：Top 6 Help Design Patterns for iPhone Apps