榮超：這個(gè)指南中的實(shí)踐案例和組件可以幫助用戶快速直觀地了解他們?cè)谀愕膽?yīng)用中能做些什么，想知道谷歌的設(shè)計(jì)團(tuán)隊(duì)是如何做有效用戶引導(dǎo)的，看這個(gè)準(zhǔn)沒(méi)錯(cuò)！

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

以下指南旨在：

1. 通過(guò)在相關(guān)情景中介紹應(yīng)用的特性和功能來(lái)幫助用戶從中獲取更多的價(jià)值
2. 改善應(yīng)用的參與度和留存率

為了確保用戶體驗(yàn)、尊重用戶意愿，這些建議會(huì)涉及到目標(biāo)、時(shí)間、音量和頻率。

前七天

• 用戶引導(dǎo)：自定義模式
• 用戶教育：如何使用應(yīng)用的基礎(chǔ)指導(dǎo)

接下來(lái)30天及以后

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

用戶引導(dǎo)

“用戶引導(dǎo)”幫助用戶了解、使用應(yīng)用。

“用戶引導(dǎo)”的內(nèi)容應(yīng)簡(jiǎn)潔明了，同時(shí)需要有效提高用戶對(duì)應(yīng)用的使用。

用法

你設(shè)定的“用戶引導(dǎo)”方案應(yīng)該考慮到對(duì)應(yīng)用熟悉程度不同的各類用戶，從而根據(jù)不同用戶設(shè)立不同目標(biāo)。

用戶引導(dǎo)模式

用戶引導(dǎo)從應(yīng)用商店開(kāi)始，結(jié)束于用戶第一次使用應(yīng)用

設(shè)計(jì)引導(dǎo)頁(yè)時(shí)需要考慮好前后頁(yè)面間的關(guān)系。

圖為第一次運(yùn)行應(yīng)用的用戶引導(dǎo)（只顯示給第一次打開(kāi)應(yīng)用的用戶）

Material design包括以下三種引導(dǎo)模式：

自定義

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

快速入門

直接在應(yīng)用中開(kāi)始引導(dǎo)。

突出用戶利益

利用簡(jiǎn)潔的自動(dòng)輪播頁(yè)（或動(dòng)畫）突出使用該應(yīng)用的三個(gè)好處。

適用什么類型的”用戶引導(dǎo)“取決于你的應(yīng)用是否使用通用，可識(shí)別的UI風(fēng)格和設(shè)置的方便程度。

自定義模式

自定義模式允許用戶通過(guò)一系列簡(jiǎn)短的操作來(lái)自定義他們首次運(yùn)行應(yīng)用的體驗(yàn)。

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

△ ?登陸頁(yè)

△ ?自定義模式

提高正確的選擇

你提供給用戶的選擇將會(huì)直接影響你“用戶引導(dǎo)”的成效。

選擇需要：

• 有意義且引人關(guān)注
• 提供新信息
• 簡(jiǎn)短

有意義且引人關(guān)注

提供對(duì)用戶體驗(yàn)有利且有顯著影響的選項(xiàng)。通過(guò)暗示教育用戶如何與UI交互。

用戶自己選擇需要的內(nèi)容利于后續(xù)產(chǎn)品體驗(yàn)。

了解用戶，檢查他們stream的頻率，但不能對(duì)體驗(yàn)造成影響。

問(wèn)你不知道的事

不要詢問(wèn)可以從正常產(chǎn)品使用中就能獲取到的用戶行為偏好。

很難從用戶正常使用產(chǎn)品過(guò)程中得知用戶想要的內(nèi)容。這時(shí)候詢問(wèn)用戶偏好是非常有價(jià)值的。

不要要求用戶做出選擇，因?yàn)橥ǔＳ脩暨x擇完后很少會(huì)特意返回去修改這些選擇。

保持簡(jiǎn)短

在單屏中限制選項(xiàng)的數(shù)量，或者使用多屏來(lái)呈現(xiàn)這些選項(xiàng)（這會(huì)讓用戶感覺(jué)每屏的內(nèi)容相互關(guān)聯(lián)）。

每屏應(yīng)少于十個(gè)選項(xiàng)。

單屏展示自定義選項(xiàng)

不可過(guò)多屏展示自定義選項(xiàng)

在設(shè)計(jì)“用戶引導(dǎo)”時(shí)，請(qǐng)考慮用戶引導(dǎo)的過(guò)程如何與用戶首次運(yùn)行應(yīng)用的體驗(yàn)相連接。用戶引導(dǎo)過(guò)后，保證用戶能夠按照剛剛的指引進(jìn)行實(shí)際操作。

設(shè)計(jì)

圍繞“你的應(yīng)用能做什么”來(lái)設(shè)計(jì)“自定義選項(xiàng)”頁(yè)面。專注于內(nèi)容消費(fèi)的應(yīng)用可能會(huì)詢問(wèn)用戶感興趣的主題，而那些需要訂閱的應(yīng)用可能會(huì)詢問(wèn)用戶要綁定哪些主題。

一些常見(jiàn)的關(guān)于“自定義選項(xiàng)”的設(shè)計(jì)模式:

△ ?綁定列表

△ ?宮格視圖

△ ?列表

?快速入門

在快速入門模式中，用戶直接到達(dá)沒(méi)有顯示任何用戶引導(dǎo)模式的界面中（除了登錄和設(shè)置）。

快速入門模式：

• 使用戶能夠快速入門應(yīng)用的核心功能
• 提供優(yōu)先級(jí)第一的關(guān)鍵操作
• 還可以提供可選途徑去了解更多信息或幫助請(qǐng)求

最佳案例

• 讓用戶動(dòng)起來(lái)

你的界面應(yīng)該鼓勵(lì)用戶交互，而不是將用戶停留在空白屏幕上。

可提供用戶啟動(dòng)的選項(xiàng)：

不可不要讓用戶無(wú)所事事。

提供教學(xué)

如果大多數(shù)用戶在引導(dǎo)頁(yè)之后還不清楚如何使用應(yīng)用的話，那在界面中提供提示UI供用戶選擇學(xué)習(xí)如何使用應(yīng)用。

提供機(jī)會(huì)讓用戶學(xué)習(xí)使用應(yīng)用：

不要強(qiáng)迫用戶進(jìn)入學(xué)習(xí)。

提供優(yōu)先級(jí)第一的關(guān)鍵操作

提供與用戶參與度（頭七天）最密切相關(guān)的操作。或者，使用提示的方式介紹用戶未使用過(guò)的應(yīng)用的核心功能。

△ ?推動(dòng)用戶進(jìn)行優(yōu)先級(jí)第一的關(guān)鍵操作

△ ?不要讓用戶無(wú)所事事

突出用戶利益的引導(dǎo)模式里面包含有簡(jiǎn)短的輪播頁(yè)，或者是動(dòng)畫。它突出了用戶使用該應(yīng)用的三大好處。

選擇正確的用戶利益顯示

在突出用戶利益模式中只顯示不超過(guò)三個(gè)關(guān)于用戶的利益說(shuō)明。這三個(gè)頁(yè)面應(yīng)將應(yīng)用和用戶個(gè)人利益聯(lián)系在一起進(jìn)行描述，而不是命令用戶做什么或者只在闡述應(yīng)用有什么功能。

在確定要呈現(xiàn)哪些好處時(shí)，請(qǐng)先考慮:

• 應(yīng)用能夠解決的問(wèn)題
• 應(yīng)用能為用戶帶來(lái)最大的好處
• 應(yīng)用的"牙刷功能" （意思是一項(xiàng)用戶每天都會(huì)使用一或兩次的功能）

集成選項(xiàng)

• 輪播頁(yè)

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

顯示 "Get Started" 按鈕并循環(huán)播放動(dòng)畫，直至用戶點(diǎn)擊 "Get Started" 按鈕進(jìn)入應(yīng)用。

輪播頁(yè)允許用戶使用滑動(dòng)手勢(shì)，使用滑動(dòng)手勢(shì)可以向前或向后滑動(dòng)查看頁(yè)面。

△ ?輪播圖自動(dòng)播放。按鈕和分頁(yè)導(dǎo)航的位置是固定的。

最佳案例

• 保持視覺(jué)的連續(xù)性

通過(guò)調(diào)整字符、環(huán)境、樣式、排版和按鈕顏色來(lái)保持視覺(jué)的連續(xù)性。

在整個(gè)體驗(yàn)中使用一致的視覺(jué)效果和顏色，并通過(guò)固定的按鈕和分頁(yè)導(dǎo)航來(lái)統(tǒng)一構(gòu)圖，進(jìn)而創(chuàng)建一個(gè)統(tǒng)一的用戶引導(dǎo)（敘事）。

簡(jiǎn)化

簡(jiǎn)化傳達(dá)一個(gè)概念所需要素的視覺(jué)效果。

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

△ 不可整幅圖沒(méi)有焦點(diǎn)

不要顯示UI

如果用戶從沒(méi)有使用過(guò)該應(yīng)用，則不要顯示應(yīng)用相關(guān)的UI。首先你需要顯示應(yīng)用提供給用戶好處。

你可以在稍后的頁(yè)面中顯示特定UI的教學(xué)。

△ 這幅插圖向用戶傳達(dá)了應(yīng)用提供給用戶的好處

△ 顯示實(shí)際應(yīng)用的UI會(huì)讓用戶疑惑圖像是插圖還是可交互的元素。

設(shè)計(jì)用戶引導(dǎo)的時(shí)候需要考慮到用戶“第一次”的應(yīng)用體驗(yàn)。引導(dǎo)頁(yè)過(guò)后正式進(jìn)入應(yīng)用后，用戶所看見(jiàn)的界面操作應(yīng)該跟之前引導(dǎo)學(xué)習(xí)的內(nèi)容相關(guān)聯(lián)，讓用戶能夠快速上手。

設(shè)計(jì)

突出用戶利益模式的設(shè)計(jì)應(yīng)該以一種稱贊的情感進(jìn)行描述。其中的描述最好使用文字表達(dá)，而不是圖像。

1:1寬高比的插圖適用于不同平臺(tái)上的屏幕。確保背景色和文本顏色滿足可訪問(wèn)性（無(wú)障礙）的最小對(duì)比度標(biāo)準(zhǔn)。

移動(dòng)和平板端豎向顯示

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

△ ?移動(dòng)端：豎向顯示

△ ?平板端：豎向顯示

移動(dòng)和平板端橫向顯示

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

△ ?移動(dòng)端：橫向顯示

△ ?平板端：橫向顯示

桌面端

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

△ ?桌面端

可穿戴和TV設(shè)備上的啟動(dòng)頁(yè)使用的是不同的交互方法，所以需要以不同的方式進(jìn)行設(shè)計(jì)。

各平臺(tái)尺寸標(biāo)準(zhǔn)

• 移動(dòng)和平板端上豎向顯示

文本和UI在頁(yè)面中居中對(duì)齊。屏幕底部的上方生成24dp內(nèi)邊距（padding）。

1.大標(biāo)題：24sp，行距32sp

2.副標(biāo)題：15sp，行距24dp

3.32sp行高

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

5.垂直方向上24dp內(nèi)邊距

移動(dòng)和平板端上橫向顯示

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

1. 大標(biāo)題：24sp，行距32sp

2. 副標(biāo)題：15sp，行距24dp

3. 32sp行高

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

5. 垂直方向上24dp內(nèi)邊距

桌面端

1. 大標(biāo)題：24sp，行距32sp

2. 副標(biāo)題：16sp，行距24dp

3. 32sp行高

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

5. 圖像距離頁(yè)碼圓點(diǎn)：24dp

6. 圖像距離箭頭：48dp

本小節(jié)結(jié)束。想繼續(xù)學(xué)習(xí)的同學(xué)記得轉(zhuǎn)微博喲。

「Material Design?好文合集」

官方譯文：

1. 《中文版來(lái)了！新版Material Design 官方動(dòng)效指南》
2. 《中文版來(lái)了！新版MATERIAL DESIGN 官方動(dòng)效指南（二）》
3. 《中文版來(lái)了！新版MATERIAL DESIGN 官方動(dòng)效指南（三）》

學(xué)習(xí)筆記：

1. 《學(xué)霸的自學(xué)筆記！Material Design設(shè)計(jì)規(guī)范學(xué)習(xí)心得》
2. 《重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學(xué)習(xí)筆記》

素材篇：

1. 《新鮮熱辣！一組實(shí)用的MATERIAL DESIGN風(fēng)格素材！》

實(shí)戰(zhàn)教程：

1. 《重磅改版！網(wǎng)易新聞安卓客戶端MATERIAL DESIGN實(shí)戰(zhàn)》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com