前言：
引導是帶領用戶更快速更愉悅地達到目標的過程，能在用戶使用產品遇到障礙之前給予及時的幫助。在移動互聯網的產品的設計中，新手引導的設計則是在用戶初次使用該移動產品時，給予的一些必須性的幫助以使得用戶能快速愉悅地瞭解這個產品的功能與具體操作方式。爲了完成不同的引導內容和引導的目標，移動端的引導設計會根據需求進行不同的多樣化處理。根據引導出現的時機，可以分爲前置型的引導與過程中的引導。
前置型的引導：在用戶還沒有正式開始使用這個產品時給出的一系列幫助內容。主要的設計方式爲引導頁的設計。過程中的引導：在用戶使用產品的過程中給出的一系列幫助內容。主要的設計方式有空白頁的內容引導，loading等等待狀態中的引導，拆分包袱的逐步引導，巧設默認值的功能引導，tips引導，浮點引導，遮罩聚焦式引導，觸發式引導，任務演練式引導等。
由於篇幅所限，本篇博文主要針對前置型引導的引導頁的設計詳細論述，而對於過程中的引導會在後續博文中奉上。
引導頁的設計探究
引導頁作爲前置型引導，必然具備前置型引導的特徵。用戶是在使用前看到引導頁的內容，此時用戶對這個產品的瞭解並不多，對於如產品的功能/頁面佈局/具體使用等還沒有建立起完整的認知。所以引導頁更適合闡述產品的概況內容（如具有產品的概念，產品的核心功能，具有競爭力的功能點或用戶痛點，以及會影響到初次使用的操作方式的內容），建立起用戶對產品的大致認知；而不太適用於闡述過於細節的產品內容，因爲此時用戶還無法進行相應的信息匹配，細節內容會不容易理解。
雖然引導頁有上述的限制，但是由於它具備的很多優點，讓它作爲一種非常常見的方式來使用。
具體的優點：1）篇幅設置可自由設定，在一定範圍內可多可少；2）全屏或幾乎全屏的信息呈現的方式，使得信息的可承載量多；3）內容的編排自由，設計師可以自由發揮。
所以引導頁是一種在設計上較靈活自由的方式。但是在實際的使用中，我們還是常常會發現設計的效果並不容易達不到預期。用戶常常不會仔細瀏覽這些引導的信息，對於引導的內容信息的接收程度會打折扣，很難全部吸收；還有不少情況下用戶會跳過引導，忽略引導想提供的幫助信息。那麼，如何做能讓我們設計的引導才能引起用戶的興趣，讓他們花費一點精力去吸收引導的內容信息，這需要一些技巧。
最核心的技巧有4點：精簡與合理使用 & 細緻編排 & 有效的注意力 & 構建特色。
精簡與合理使用
在引導頁設計的泛濫時代，絕大多數的APP在首次使用中都會設計幾頁引導內容。
設計師需要把控引導的內容。只做必要的引導頁內容。沒必要的引導內容會增加信息的冗餘性，沖淡真正需要用戶關注的信息的注意力與精力。
在設計之前，我們要對用戶初次使用該APP時的心理與使用行爲進行分析，並不是所有情況都適合使用引導頁的，要對不適合的情況say no。
適合與否的依據主要是在真實的使用場景中，用戶是希望能對這個產品有個大致的瞭解，還是希望快速啓動產品立即使用，在使用的過程中再慢慢學習。如果用戶是希望快速啓動產品使用中出現過於的引導會引起用戶的方案。
具體較適用的情況：
1.對於一個新概念的新產品，用戶需要對這些新的概念或內容有所理解才能更好的使用產品。（下圖爲Vida的引導截圖）
2.競爭力的或有吸引力的內容點的介紹。（下圖爲支付寶和糯米糰購的引導截圖）
細緻編排
當確定了引導的內容後，我們需要對引導的內容進行細緻的編排。具體的編排可以分爲平鋪直敘述和講故事的方式。平鋪直敘是將一個一個內容點羅列，之間沒有建立什麼聯繫。而講故事是將內容串聯起來變成一個整體的故事。
1.講故事的方式，使引導具有情景性
講建立與用戶使用情景匹配的場景，讓用戶能建立一種熟悉的感受，能讓用戶對引導的功能點感同身受。
串聯的故事一般而言都是多頁的形式。一步拋出一個需告知的點，循序漸進的解說。故事可以只圍繞一個功能點來敘述，也可以將多個功能點串聯起來變成一個故事。形成一個完整的故事。
由於每次一個告知點，多會採用聚焦的設計手法，把視覺注意力吸引到每個告知點上。
講故事的主要目的是希望構建用戶與產品之間的聯繫。讓用戶感覺到產品與自己是有關係的，現在所說的內容是與我相關的，我需要花費精力來關注一下。如果完全建立不起關聯，很容易讓用戶忽略。
微信4.0的引導就是一個編故事建立關係的好例子。在微信在推出4.0版本的時候，新增加了類似Path和Instagram一樣的相冊功能，並且可以把相冊分享到朋友圈。這個功能的加入拓展了之間僅是溝通聊天工具的產品定義。在4.0版本的新功能引導中，它非常成功的講訴了一個關於相冊功能的故事，並且在設計內容時非常注意建立聯繫。在故事闡述中它一直強調用戶可以怎麼樣，讓用戶能明確感覺到與自己的關係。
2.講故事的主要手法——故事可以是以情動人，痛點渲染，角色榜樣類比等方式
A. 動之以情
營造出具有濃烈感情色彩的場景，喚起用戶心底的情緒，讓用戶產生對產品的共鳴。當產品附加了感情的元素，產品就會讓用戶形成一種情感上的聯繫，用戶對產品的好感也會增加。
打感情牌的手法比較適用於具有社交性的產品引導。
在設計中不論是背景圖片還是文案都致力於感情氣氛的營造。（下圖爲人人網的引導截圖）
B. 痛點渲染
建立一個用戶在實際生活中會遇到的類似的不便的場景，讓用戶能感受到共鳴，喚起用戶對所述功能的需要感。然後給出該產品能給出的解決方案，可以讓用戶感覺。
戳痛點的手法比較適用於實用的工具性的功能引導。在設計中文案：可採用痛點式文案，或者是非常具有顫動性的文案。
C. 角色榜樣類比
通過建立用戶熟悉的人物角色，來描述其他人會用這個產品來做什麼，這種方式可以拓寬對產品功能使用的場景與多種其他可能性。啓發用戶對這個產品的想象。建立的熟悉的人物形象會讓描述變得具體而形象，會從而引發當前使用的用戶形成一種類比的心理。
這種方式適用於對產品整體功能的介紹，對於新老產品的功能介紹都適用: 1）老產品用此方法可以啓發用戶拓寬對既有功能使用的其他的可能性，拓寬使用場景。2）新產品用此方法可以讓用戶對這個產品的整體功能有更多的認識。
設計要點：1）用戶角色渲染得讓人覺得可信，能讓人很容易聯想到自己也會遇到類似情況。2）文案：可採用比較具有親和力，質樸的文案。
（下圖爲印象筆記的引導截圖）
D. 範例吸引
將引導的內容融入真實的界面中，通過合理選擇呈現的內容來讓用戶可以通過界面上的信息來感知產品所具有的功能。這種引導形式可以很好的在第一時間向用戶展示產品形態，建立用戶的興趣；範例能讓用戶預知在使用產品時界面會是什麼樣子，能讓用戶對實際界面有充分的瞭解，並且能讓用戶看到產品完整的功能與形態。但是這種方式是一種注重界面呈現，用視覺效果去吸引用戶的方式，所以對產品本身有一定的要求。
適用條件：1）界面本身的設計需具有一定的創新性/美觀性/吸引力，這樣融入到真實界面中的引導才能具有吸引力。2）產品本身若需要通過用戶的經營才能慢慢達到一個完整的形態，那麼這種真實界面的範例的方式能勾引用戶增加對產品的使用的興趣，並且能讓用戶對產品功能理解得比較充分與完善。
設計要點：1）引導中要呈現的內容需仔細挑選，能把產品的典型功能與特徵充分展示。2）文案最好是比較親切的。
（下圖爲Path的引導截圖）
E.平鋪直敘的方式
如果內容點無法串聯，只能一一羅列，那麼在設計中我們可以——
1.對每個內容建立場景。
2.放置具有吸引人的或具有競爭力的內容。
3.根據記憶的效果的原則合理排序。將最需要用戶關注的內容放在最前面。（記憶的效果：最前面的內容記憶效果>最後面的內容記憶效果>中間部分的內容的記憶效果）
4.精簡引導的內容。不要放置太多的引導頁。
5.對於每頁的設計可以參考下面的有效的注意力裏的設計技巧。
有效的注意力
注意力是記憶力的基礎，記憶力是注意力的結果。沒有良好的注意力就沒有良好的記憶力，良好的記憶力是建立在良好的注意力基礎上的。
我們所設計的引導頁也需要能吸引用戶的注意力，讓用戶能夠花費精力來閱讀我們想告知他們的信息，以達到一種有效的注意力。具體可以怎麼做呢？
我們可以從不同的內容與設計方式上提高效果，以下一一闡述。
1.聚焦
界面中不要有過多的視覺焦點，容易分散用戶的注意力，導致用戶不知道該看那裏。
當界面中的信息聚焦在某一點上時，用戶能快速準確定位到需要閱讀的信息內容上，達到消化信息的目的。
聚焦的設計手法有很多種，如通過光影的方式，將亮光的部分打在最需要用戶關注的信息上；虛化背景的方式，突出前面的信息內容；放大鏡方式，將需要用戶關注的部分作爲放大突出。當然除了所舉案例中的常見手法，還可以運用其他的方式來聚焦，只要可以達到效果即可。
信息的聚焦需要設計師對信息的內容進行取捨，儘量剔除不需要的內容。
若精簡後依然內容較多，那麼可以通過拉開信息的層次來使得信息可以聚焦。在設計中儘量將內容整體化，形成幾個大塊的信息，不要過於瑣碎。瑣碎的內容不利於信息的獲取。由於用戶對信息的認知是有整體到細節，用戶在閱讀內容的時候，更習慣先將內容先抽象成一個整體，然後再仔細閱讀整體中的細節內容。所以我們的設計的過程中需要讓用戶能夠很快地抽象出整體的信息。
圖例爲反例。案例中的設計讓頁面中形成了過於多的發散點，用戶的閱讀時難以梳理成整塊的信息，增加了信息獲取的難度。
2.優化圖片所傳達的信息
人類對於圖片信息的閱讀能力是遠大於對於文字信息的理解的。圖片可以更加直觀地讓用戶感知到所要傳遞的信息。
在不同的圖片中，人們對人臉，美女，笑容，具有動感的照片更容易引起用戶的注意。
同樣爲美膚的功能引導，左側的設計不需要藉助文字就可以讓用戶理解可以美膚，而右側的設計若只看圖是無法理解的。左側的引導設計比右側的引導設計更加直觀好記憶。
3.除了靜態的視覺畫面，我們還可以增加用戶對於引導內容的注意力。
現在的引導頁的設計多爲靜態的視覺頁面。人類對於動態內容的注意力> 對於靜態內容的注意力。所以除了靜態圖片的方式，我們完全可以通過適當增加動態內容來吸引用戶的注意力。
圖例爲QQ水印相機和Flava的引導頁。
QQ水印相機的引導頁就是使用動態注意力，的每頁用一個圖釘釘着一副照片，而照片會已圖釘爲圓心輕微地左右擺動。Flava同樣，中間的圖片的部分都是動態的演示。這2個設計都非常容易讓用戶對動態部分的內容引起注意，從而閱讀相關的內容。
當然在動態內容中，我們也要注意視覺焦點的問題，不能讓界面中的動態焦點太多。一般1個動態焦點會比較好。
當然除了已有的這些案例，我們也可以思考，除了動態的內容，我們是否可以激發其他的感官來吸引用戶的注意力。比如可以通過增加一些音效。目前還沒有找到這樣的案例，但是個人感覺也是可以嘗試的。
4.改變屏與屏之間切換的交互方式
現在的引導頁的切屏交互方式基本都爲左右滑動，我們也可以通過改變既有的交互方式增加用戶的注意力。畢竟用戶對新的東西的好奇心還是有的。但是不要盲目的爲了改變而改變。交互的方式應該要與設計的內容相匹配。改變的交互方式要簡單易學，在界面的設計中要有使用的隱喻線索，讓這種新的交互方式變得自然而容易，否則會引起用戶的反感。
圖例爲feedly的引導頁。改變了常用的左右滑動的方式，使用了向上滑動的方式。每張引導頁想一張卡片，閱讀過的引導頁向上滑動即被滑出屏幕。界面視覺對於新的交互方式有明確的引導，不會增加操作的難度，會讓用戶感覺到是一傢俱有創新性的公司。
5.能有效傳達的文案
A. 字數的控制
從心理學的角度，人類對於文案在短時間內能記憶住的字符不超過9個。（這個是人類記憶的特性，人類對於內容的短時記憶的容量有限，一般爲7 ± 2項目，一般爲7 ± 2，即5 ~ 9個項目，這也就是平常我們所說的記憶廣度。）超過9個字符，用戶是很難記憶的且容易受到干擾而發生遺忘。文案的設計上應該是挑重點的說，無意義的不必要的冗餘文字應果斷剔除。
如果精簡後依然超出極限字符數，那麼可以對文案內容分層次。
通過排版的方式，突出需要用戶記憶的字符，弱化其他字符。一般而言突出的字符爲2-7個是比較容易記憶的。
通過斷句的方式，將長的文案變爲短的子單元，這樣可以擴大短時記憶的容量。斷句可以通過打標點，留空格，斷行的方式來實現。
（這個也是運用人類記憶的特性，如果超過短時記憶的容量或插入其他活動，短時記憶容易受到干擾而發生遺忘。爲擴大短時記憶的容量，可採用組塊的方法，即將小的記憶單位組合成大的單位來記憶，這時較大的記憶單位就叫做塊。）
B. 文案的內容與行文風格
文案的內容可以融入時下熱點或話題，行文風格上也可以具有時代的特徵。讓用戶能感受到產品能緊跟時代，貼近當前的社會生活，比一般的文案容易引起用戶的注意度。
構建特色
很多的引導頁在設計上同質化問題嚴重，極度相似的設計手法、設計風格、排版風格、相似的文案內容、讓用戶很難記憶或引起關注。構建產品引導頁的特色是區別於其他產品的好方式，特色可以讓引導頁脫穎而出。
那麼如何構建特色呢？
1.從設計方式上進行特色構建
我們可以從引導頁面內容的不同組成元素來尋找特色的構建點。
背景圖片的攝影角度或風格/後期處理/色調；版式編排的設計風格/版式佈局/配色方案；文案的行文風格；多屏切換方式也可以考慮
構建特色並不需要對所有內容的元素都進行，即使只在一個內容點上進行特色構建也是可以的，但是需要做到的是這個點上的特色要非常明顯，用戶容易感知到。
2.系列化引導設計的特色構建
對於一些不斷更新迭代的產品，往往在重要版本升級的時候都會給出必要的新的引導的內容。所以我們除了從單次引導內容思考進行特色構建以外，我們還可以把眼光拉遠一些，從一個系列化引導設計的角度去構建特色。系列化的引導需要從一開始進行單次引導時就加以思考，爲系列化構思一個主題。下圖中的新浪微博的引導頁的設計就是一種系列化引導設計的特色構建。它選用季節爲主題，根據所處的季節的特徵進行內容的運營。這種方式可以讓用戶對多次引導的內容感覺到一種新的整體化的特色，貼近當前生活的方式也讓產品感覺具有時新性，易於接受。
轉載自騰訊ISUX (http://isux.tencent.com/user-guide-design-01.html)