榮超：這個指南中的實踐案例和組件可以幫助用戶快速直觀地了解他們在你的應用中能做些什么，想知道谷歌的設計團隊是如何做有效用戶引導的，看這個準沒錯！

相關教程：《想提高可用性？看谷歌MATERIAL DESIGN 的官方教程是怎么做的！》

以下指南旨在：

1. 通過在相關情景中介紹應用的特性和功能來幫助用戶從中獲取更多的價值
2. 改善應用的參與度和留存率

為了確保用戶體驗、尊重用戶意愿，這些建議會涉及到目標、時間、音量和頻率。

前七天

• 用戶引導：自定義模式
• 用戶教育：如何使用應用的基礎指導

接下來30天及以后

• 特性探索：用戶未嘗試過的特性和功能提示

用戶引導

“用戶引導”幫助用戶了解、使用應用。

“用戶引導”的內容應簡潔明了，同時需要有效提高用戶對應用的使用。

用法

你設定的“用戶引導”方案應該考慮到對應用熟悉程度不同的各類用戶，從而根據不同用戶設立不同目標。

用戶引導模式

用戶引導從應用商店開始，結束于用戶第一次使用應用

設計引導頁時需要考慮好前后頁面間的關系。

圖為第一次運行應用的用戶引導（只顯示給第一次打開應用的用戶）

Material design包括以下三種引導模式：

自定義

允許用戶自定義他們的選擇。

快速入門

直接在應用中開始引導。

突出用戶利益

利用簡潔的自動輪播頁（或動畫）突出使用該應用的三個好處。

適用什么類型的”用戶引導“取決于你的應用是否使用通用，可識別的UI風格和設置的方便程度。

自定義模式

自定義模式允許用戶通過一系列簡短的操作來自定義他們首次運行應用的體驗。

這種模式是暗示引導，它可以給予用戶一種控制感和讓用戶從頁面中獲取到自己的興趣。

△ ?登陸頁

△ ?自定義模式

提高正確的選擇

你提供給用戶的選擇將會直接影響你“用戶引導”的成效。

選擇需要：

• 有意義且引人關注
• 提供新信息
• 簡短

有意義且引人關注

提供對用戶體驗有利且有顯著影響的選項。通過暗示教育用戶如何與UI交互。

用戶自己選擇需要的內容利于后續產品體驗。

了解用戶，檢查他們stream的頻率，但不能對體驗造成影響。

問你不知道的事

不要詢問可以從正常產品使用中就能獲取到的用戶行為偏好。

很難從用戶正常使用產品過程中得知用戶想要的內容。這時候詢問用戶偏好是非常有價值的。

不要要求用戶做出選擇，因為通常用戶選擇完后很少會特意返回去修改這些選擇。

保持簡短

在單屏中限制選項的數量，或者使用多屏來呈現這些選項（這會讓用戶感覺每屏的內容相互關聯）。

每屏應少于十個選項。

單屏展示自定義選項

不可過多屏展示自定義選項

在設計“用戶引導”時，請考慮用戶引導的過程如何與用戶首次運行應用的體驗相連接。用戶引導過后，保證用戶能夠按照剛剛的指引進行實際操作。

設計

圍繞“你的應用能做什么”來設計“自定義選項”頁面。專注于內容消費的應用可能會詢問用戶感興趣的主題，而那些需要訂閱的應用可能會詢問用戶要綁定哪些主題。

一些常見的關于“自定義選項”的設計模式:

△ ?綁定列表

△ ?宮格視圖

△ ?列表

?快速入門

在快速入門模式中，用戶直接到達沒有顯示任何用戶引導模式的界面中（除了登錄和設置）。

快速入門模式：

• 使用戶能夠快速入門應用的核心功能
• 提供優先級第一的關鍵操作
• 還可以提供可選途徑去了解更多信息或幫助請求

最佳案例

• 讓用戶動起來

你的界面應該鼓勵用戶交互，而不是將用戶停留在空白屏幕上。

可提供用戶啟動的選項：

不可不要讓用戶無所事事。

提供教學

如果大多數用戶在引導頁之后還不清楚如何使用應用的話，那在界面中提供提示UI供用戶選擇學習如何使用應用。

提供機會讓用戶學習使用應用：

不要強迫用戶進入學習。

提供優先級第一的關鍵操作

提供與用戶參與度（頭七天）最密切相關的操作?；蛘撸褂锰崾镜姆绞浇榻B用戶未使用過的應用的核心功能。

△ ?推動用戶進行優先級第一的關鍵操作

△ ?不要讓用戶無所事事

突出用戶利益的引導模式里面包含有簡短的輪播頁，或者是動畫。它突出了用戶使用該應用的三大好處。

選擇正確的用戶利益顯示

在突出用戶利益模式中只顯示不超過三個關于用戶的利益說明。這三個頁面應將應用和用戶個人利益聯系在一起進行描述，而不是命令用戶做什么或者只在闡述應用有什么功能。

在確定要呈現哪些好處時，請先考慮:

• 應用能夠解決的問題
• 應用能為用戶帶來最大的好處
• 應用的"牙刷功能" （意思是一項用戶每天都會使用一或兩次的功能）

集成選項

• 輪播頁

輪播頁最多展示三幅插圖，并每隔2-3秒自動切換插圖。第一屏需要比其他兩屏頁面的停留時間更短，這樣做是為了讓用戶清楚當前屏幕是個輪播頁而不是一個單一的頁面。如果用戶觸碰到頁面，那輪播功能應該被禁用。

顯示 "Get Started" 按鈕并循環播放動畫，直至用戶點擊 "Get Started" 按鈕進入應用。

輪播頁允許用戶使用滑動手勢，使用滑動手勢可以向前或向后滑動查看頁面。

△ ?輪播圖自動播放。按鈕和分頁導航的位置是固定的。

最佳案例

• 保持視覺的連續性

通過調整字符、環境、樣式、排版和按鈕顏色來保持視覺的連續性。

在整個體驗中使用一致的視覺效果和顏色，并通過固定的按鈕和分頁導航來統一構圖，進而創建一個統一的用戶引導（敘事）。

簡化

簡化傳達一個概念所需要素的視覺效果。

△ 隱喻：插圖非常直觀的描述了文件保存到云端

△ 不可整幅圖沒有焦點

不要顯示UI

如果用戶從沒有使用過該應用，則不要顯示應用相關的UI。首先你需要顯示應用提供給用戶好處。

你可以在稍后的頁面中顯示特定UI的教學。

△ 這幅插圖向用戶傳達了應用提供給用戶的好處

△ 顯示實際應用的UI會讓用戶疑惑圖像是插圖還是可交互的元素。

設計用戶引導的時候需要考慮到用戶“第一次”的應用體驗。引導頁過后正式進入應用后，用戶所看見的界面操作應該跟之前引導學習的內容相關聯，讓用戶能夠快速上手。

設計

突出用戶利益模式的設計應該以一種稱贊的情感進行描述。其中的描述最好使用文字表達，而不是圖像。

1:1寬高比的插圖適用于不同平臺上的屏幕。確保背景色和文本顏色滿足可訪問性（無障礙）的最小對比度標準。

移動和平板端豎向顯示

居中對齊的文本和交互元素放置在插圖之下。

△ ?移動端：豎向顯示

△ ?平板端：豎向顯示

移動和平板端橫向顯示

左對齊的文本和交互元素放置在插圖的右側，并垂直居中。

△ ?移動端：橫向顯示

△ ?平板端：橫向顯示

桌面端

將插圖、文本和交互元素放在一個居中對齊的卡片中。在卡片旁邊顯示“上一頁”和“下一頁”按鈕，并在它的下方放置分頁指示器。

△ ?桌面端

可穿戴和TV設備上的啟動頁使用的是不同的交互方法，所以需要以不同的方式進行設計。

各平臺尺寸標準

• 移動和平板端上豎向顯示

文本和UI在頁面中居中對齊。屏幕底部的上方生成24dp內邊距（padding）。

1.大標題：24sp，行距32sp

2.副標題：15sp，行距24dp

3.32sp行高

4.按鈕頂部到文本中心的距離：56dp（空間只允許存在1-3行文本）

5.垂直方向上24dp內邊距

移動和平板端上橫向顯示

文本和UI對齊至插畫的左邊緣，并垂直居中

1. 大標題：24sp，行距32sp

2. 副標題：15sp，行距24dp

3. 32sp行高

4. 按鈕頂部到文本中心的距離：56dp（空間只允許存在1-3行文本）

5. 垂直方向上24dp內邊距

桌面端

1. 大標題：24sp，行距32sp

2. 副標題：16sp，行距24dp

3. 32sp行高

4. 按鈕頂部到文本中心的距離：56dp（空間只允許存在1-3行文本）

5. 圖像距離頁碼圓點：24dp

6. 圖像距離箭頭：48dp

本小節結束。想繼續學習的同學記得轉微博喲。

「Material Design?好文合集」

官方譯文：

1. 《中文版來了！新版Material Design 官方動效指南》
2. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（二）》
3. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（三）》

學習筆記：

1. 《學霸的自學筆記！Material Design設計規范學習心得》
2. 《重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學習筆記》

素材篇：

1. 《新鮮熱辣！一組實用的MATERIAL DESIGN風格素材！》

實戰教程：

1. 《重磅改版！網易新聞安卓客戶端MATERIAL DESIGN實戰》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com