互聯(lián)網(wǎng)改變了人們接收信息的方式和效率,各種產(chǎn)品橫空出世。

在互聯(lián)網(wǎng),尤其是移動(dòng)互聯(lián)網(wǎng),越來(lái)越注重效率,所以“酒香不怕巷子深”的法則在這里是不受歡迎的,各色的引導需求成為了設計師的工作日常。

所謂引導,常見(jiàn)的類(lèi)型無(wú)外乎兩類(lèi)——告訴用戶(hù)這里有什么(用戶(hù)可以做什么)?或者用戶(hù)可以怎么做?

我計劃用三篇文章從三個(gè)角度來(lái)探討“移動(dòng)端的引導”這一話(huà)題:引導的常見(jiàn)設計模式、引導的常見(jiàn)類(lèi)型和如何選用合適的引導。

本文首先從設計模式談起?!?a class="tag_a" target="_blank" style="color: rgb(82, 82, 82); text-decoration-line: none; transition: all 0.2s ease 0s; border-bottom: none; word-break: break-all;">設計模式”的概念是由建筑師 Christopher Alexander 在其著(zhù)作《建筑的永恒之道》(The Timeless Way of Building)和《建筑模式語(yǔ)言》(A Pattern Language )當中首次提出的,指的是用于解決特定問(wèn)題、可以重復使用的設計方案。

換言之,設計模式是解決某一類(lèi)或某幾類(lèi)問(wèn)題的有效設計方案,引導的設計模式從是否阻斷用戶(hù)當前行為,可以分為兩大類(lèi)——模態(tài)類(lèi)引導和非模態(tài)類(lèi)引導。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

模態(tài)(modal)類(lèi)引導的設計模式

模態(tài)的特點(diǎn):打斷用戶(hù)正在進(jìn)行的行為,強制用戶(hù)必須回應最上層的操作,否則不能進(jìn)行其他操作;區分模態(tài)的視覺(jué)特征——有覆蓋底層頁(yè)面的半透明蒙版(既在視覺(jué)上強化蒙版上層的操作,又在物理上屏蔽蒙版下層的操作)。

1. 對話(huà)框引導

對話(huà)框引導可以理解為是安卓端 Dialog/iOS 端 Alert 在略升級后,專(zhuān)門(mén)用于引導場(chǎng)景的設計模式。

升級具體表現在:對話(huà)框引導基本都有營(yíng)造視覺(jué)氛圍的素材圖(框體上的配圖)或背景圖(代替框體本身的整圖),甚至有帶動(dòng)效的圖片素材或 CTA 按鈕,這和 Dialog/Alert 那種偏純文字描述的克制是不一樣的。

為什么會(huì )升級,在我看來(lái)原因有二:一是要通過(guò)抓人眼球的視覺(jué)表現力,吸引用戶(hù)朝著(zhù)規劃好的產(chǎn)品路徑行進(jìn);二是因為引導的出現機制是系統自動(dòng)觸發(fā),而非對用戶(hù)某操作的回應(反饋),這意味著(zhù)于用戶(hù)而言,對冷不丁出現的對話(huà)框引導是沒(méi)有預期的,所以需要用比純文字表達更直白、高效的視覺(jué)元素解釋清楚這是什么?有什么好處?接下來(lái)該怎么做?等事情。

因為對話(huà)框引導會(huì )阻斷用戶(hù)當前行為,所以只有重要的引導才適合用這種設計模式。頂著(zhù)有可能“冒犯到用戶(hù)”的風(fēng)險彈出的內容,對用戶(hù)而言,最好要有足夠的誘惑力或實(shí)際價(jià)值,常見(jiàn)的適用場(chǎng)景有福利發(fā)放、重要活動(dòng)、重要版本升級等。

對話(huà)框引導因為沒(méi)有指向性(詳見(jiàn)氣泡引導/工具提示引導),所以一般居中顯示,占據整個(gè)屏幕的視覺(jué)重心。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

2. 操作欄引導

操作欄引導是類(lèi)似 iOS 端 Activity View 的設計模式(Activity View 是基于用戶(hù)操作后彈出的,而操作欄引導是系統自動(dòng)觸發(fā)的,所以我這里所謂的類(lèi)似是指展現形式上類(lèi)似——都是在頁(yè)面底部彈出的模態(tài)設計模式)。

操作欄引導的特點(diǎn)和對話(huà)框引導是一樣的(阻斷式引導、沒(méi)有指向性、用于重要功能/內容的引導),主要的區別是——在位置上,相較于居中顯示的對話(huà)框引導更靠下;所以理論上,操作欄引導在視覺(jué)重心上稍差一點(diǎn)點(diǎn);但也恰恰正是因為位置靠下,所以相較于對話(huà)框引導更便于操作,尤其是對大屏手機的單手操作而言;所以除了CTA按鈕外,操作欄引導可以承載更多的簡(jiǎn)單操作,如選擇標簽、打星評價(jià)等。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

3. 氣泡引導

氣泡引導可以理解為是安卓端 Popup/iOS 端 Popover 變形后的設計模式(同操作欄引導一樣,氣泡引導是系統自動(dòng)觸發(fā)的,Popup/Popover 是用戶(hù)操作后觸發(fā)的,所以氣泡引導在使用時(shí)要露出被引導元素,多為某個(gè)功能按鈕或某個(gè)內容按鈕;這和 Popup/Popover 是不一樣的,點(diǎn)擊某操作后彈出的 Popup/Popover,半透明蒙版會(huì )蓋住該操作控件)。

氣泡引導相較于上面兩種模態(tài)引導,因為更強調其指向性,所以可以根據實(shí)際需要出現在頁(yè)面的任何位置;所謂的指向性,其實(shí)就是指氣泡引導必定有一個(gè)小尖尖,來(lái)明確告知用戶(hù)在引導誰(shuí)。所以氣泡引導的適用場(chǎng)景是:界面上某個(gè)固定位置的功能或內容的引導。

氣泡引導和工具提示引導很類(lèi)似,區別就在于一個(gè)是模態(tài)一個(gè)是非模態(tài)(即氣泡引導有半透明蒙版,工具提示引導沒(méi)有半透明蒙版);所以阻斷式的氣泡引導適合最最最重要的功能/內容的引導,非阻斷式的工具提示引導適合比較重要的功能/內容的引導。

氣泡引導元素相對簡(jiǎn)單——被引導元素、半透明蒙版、帶小尖尖的氣泡、引導文案。為了增加視覺(jué)沖擊力可以在氣泡上添加圖片素材或者動(dòng)圖。一般沒(méi)有關(guān)閉按鈕,點(diǎn)擊氣泡外的任意位置,都可以關(guān)閉氣泡引導。

為了吸引用戶(hù)立即去操作被引導元素,可以給被引導元素添加光影變化、呼吸效果等,也可以添加對應交互手勢的視覺(jué)元素(如“小手點(diǎn)擊”的 gif 圖)。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

4. 頁(yè)面遮罩引導

頁(yè)面遮罩引導是一種類(lèi)似氣泡引導的設計模式。具體差別在于氣泡引導把被引導元素提到半透明蒙版上層,頁(yè)面遮罩引導是設計鏤空的半透明蒙版(即所謂的頁(yè)面遮罩),把半透明蒙版下層的被引導元素露出來(lái)。

像氣泡引導一樣,頁(yè)面遮罩引導也具有明確的指向性,一般都有繪制的箭頭告訴用戶(hù)引導文案是對哪個(gè)被引導元素的解釋或說(shuō)明。

頁(yè)面遮罩引導早些年常用于一個(gè)頁(yè)面上有多處功能/入口等要引導(當然單個(gè)引導也可以),但是大家現在見(jiàn)到它們的機會(huì )越來(lái)越少,分析原因可能有三個(gè):1. 先前的新鮮功能對現在的用戶(hù)而言隨處可見(jiàn),不值得再去引導;2. 用戶(hù)耐心越來(lái)越少,更喜歡自己去嘗試,而非聽(tīng)產(chǎn)品說(shuō)教(就像電子產(chǎn)品的說(shuō)明書(shū),很少有用戶(hù)去讀一樣);3. 產(chǎn)品可能發(fā)現,大部分先前引導的功能/入口其實(shí)沒(méi)那么重要,不值得用打斷用戶(hù)的方式去告知他們。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

非模態(tài)(modaless)類(lèi)引導的設計模式

非模態(tài)的特點(diǎn):不打斷用戶(hù)的當前的操作行為,用戶(hù)可以繼續進(jìn)行之前的操作,也可以對引導內容進(jìn)行回應,選擇權是在用戶(hù)手里的,區分非模態(tài)的視覺(jué)特征是沒(méi)有阻斷用戶(hù)行為的半透明蒙版出現。

1. 工具提示引導

為了呼應上面提到的氣泡引導,我們優(yōu)先介紹工具提示引導。區別于 Material Design 里的 Tooltips,工具提示引導是自動(dòng)觸發(fā)的設計模式,所以不適合事無(wú)巨細的引導所有功能或內容,更適合引導“次重要功能/內容里的重點(diǎn)對象”;而 Material Design 里的 Tooltips,是用戶(hù)長(cháng)按某按鈕后的信息反饋,是普世的,原則上(但凡不和長(cháng)按手勢沖突的)所有的按鈕都應該添加,尤其是為了節省空間而設計的純 icon 按鈕,因為大部分 icon 按鈕沒(méi)有統一的用戶(hù)認知。

與氣泡引導一樣,工具提示引導可以出現在屏幕的任意位置;盡管沒(méi)有半透明蒙版阻斷用戶(hù)行為,工具提示引導還是會(huì )遮擋原頁(yè)面的某些內容,所以一般會(huì )顯示數秒后自動(dòng)消失。

工具提示引導的元素有帶小尖尖的氣泡和引導文案,原則上也可以添加動(dòng)效、交互手勢等元素。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

2. Snackbar 引導

Snackbar 是安卓端 Material Design 設計體系中包含的一個(gè)控件,官方的定義是出現在頁(yè)面底部的一種控件,只有引導文案和一個(gè)文字按鈕,會(huì )自動(dòng)消失且支持用戶(hù)使用拖拽手勢把它劃出頁(yè)面進(jìn)行快速關(guān)閉;適用場(chǎng)景是用戶(hù)進(jìn)行了 A 操作,可以用 Snackbar 提示用戶(hù)是否要實(shí)施與之高度相關(guān)的 B 操作。

究其根本,與其說(shuō)官方定義的 Snackbar 在上述場(chǎng)景中是對 B 操作的引導,不如說(shuō)是系統對用戶(hù)進(jìn)行的 A 操作的反饋。

現實(shí)產(chǎn)品中,我們看到了各種各樣與 Material Design 建議用法相悖的案例,個(gè)人覺(jué)得這是突破了官方的限制,朝著(zhù)適用性更廣的方向在發(fā)展。所謂規則,本就是人為定義、人為遵守、人為打破的。哪怕這種打破只是讓我們朝著(zhù)更好的方向邁了一小步,這種“破壞”都是值得推崇和尊敬的。

比如大家會(huì )把 Snackbar 用在系統自動(dòng)觸發(fā)的引導上(本段所說(shuō)的“Snackbar 引導”就是指這種借 Snackbar 之名定義的、系統自動(dòng)觸發(fā)的引導模式)、會(huì )給它添加更重的按鈕(不局限于純文字按鈕)、添加圖片素材(甚至是動(dòng)圖)來(lái)增加美感吸引用戶(hù)注意力、會(huì )添加關(guān)閉按鈕來(lái)替代拖拽關(guān)閉的高級手勢、定義永久顯示的展示時(shí)長(cháng)(即用戶(hù)不主動(dòng)關(guān)閉就不會(huì )自動(dòng)消失)等。

為什么大家樂(lè )此不疲的改造著(zhù) Snackbar,因為它天然具有一些獨特優(yōu)勢;首先它是非模態(tài)的設計模式,對用戶(hù)的打擾是相對比較低的;其次它出現的位置是屏幕底部,類(lèi)似于操作欄引導,它對于大屏手機的單手操作很友好;最后作為自動(dòng)觸發(fā)的引導模式,因為沒(méi)有指向性,反而讓它沒(méi)有束縛、更具兼容性——活動(dòng)引導、內容引導、功能引導…,都能覆蓋到。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

3. FAB 引導

FAB 也是安卓端 Material Design 設計體系中包含的一個(gè)控件,全稱(chēng)是 floating action button(懸浮操作按鈕),FAB 引導只是借用 FAB 這個(gè)名字,同時(shí)也歡迎大家參與討論,以便定義出描述更為準確、有更廣泛認知的名字。

從字面意思可以看出,FAB 引導是懸浮在頁(yè)面之上的,像按鈕一樣占地兒很小的一種引導。為了吸引注意力,常見(jiàn)的用法多為一個(gè)圖片素材的入口;像其他引導一樣,圖片素材可以是 gif 動(dòng)圖來(lái)進(jìn)一步吸引用戶(hù)點(diǎn)擊。FAB 引導本身也可以配置動(dòng)效,如呼吸效果、抖動(dòng)效果。

為了降低對不感興趣用戶(hù)的過(guò)分打擾,FAB 引導可以配置自動(dòng)消失邏輯、可以添加關(guān)閉按鈕,也可以在用戶(hù)滑動(dòng)頁(yè)面的過(guò)程中設計收起態(tài)或通過(guò)調整透明度來(lái)消除對頁(yè)面內容的遮擋。

FAB 引導的位置通常是頁(yè)面下方(其中又以右下角最為常見(jiàn)),我能想到的背后邏輯有兩點(diǎn):

  • (中國)用戶(hù)閱讀時(shí)掃視的路線(xiàn)是從左上到右下,FAB 引導放在右下角既不會(huì )過(guò)分打擾用戶(hù),又不至于看不到。大屏手機的單手操作,下方會(huì )更容易點(diǎn)擊,可用性比在上方顯示會(huì )更好。

  • FAB 引導常用來(lái)引導某個(gè)運營(yíng)活動(dòng)(如紅包活動(dòng))、在信息架構上層級低但又相對重要的頁(yè)面(如去年各家資訊產(chǎn)品的疫情頁(yè)面入口);通過(guò)配置 FAB 引導,這些內容在首屏得以曝光,并為用戶(hù)提供快捷入口。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

4. 徽標引導

徽標(Badge)即平時(shí)常說(shuō)的“小紅點(diǎn)”(實(shí)際設計時(shí)可以結合產(chǎn)品主色,不必非得選用紅色),它通過(guò)帶顏色的小圓點(diǎn)或帶數字的徽標來(lái)告知用戶(hù),此處有內容更新。

接下來(lái)我們聊聊徽標作為一種引導模式有哪些應用場(chǎng)景:

上面描述的是徽標引導的兩種常見(jiàn)形式,一般不帶數字的小圓點(diǎn)引導性更弱(這里的“弱”指的是對用戶(hù)而言的重要性以及結合業(yè)務(wù)而言的重要性,二者綜合考量下的強度是弱的)一些的內容,即沒(méi)有數字逐級透傳到啟動(dòng) icon 上面。

稍重一些的帶數字的徽標提示,則會(huì )透傳到啟動(dòng) icon 上,并且用戶(hù)不點(diǎn)擊查看,就一直存在;還有第三種常見(jiàn)的用法,用“NEW”、“推薦”等文案代替數字,來(lái)引導用戶(hù)點(diǎn)擊某入口;我最近發(fā)現有基于此進(jìn)一步做升級強化的用法——用“帶文字的徽標加動(dòng)效”來(lái)強化引導效果的案例出現(詳見(jiàn)美團V11.8版本首頁(yè)的“美團優(yōu)選”入口和“電商tab”入口)。

徽標引導因為占地兒極小,對用戶(hù)的打擾微乎其微,所以不會(huì )設置主動(dòng)關(guān)閉按鈕,用戶(hù)關(guān)閉徽標引導的方式就是使用它或者等待它自動(dòng)消失;這就要求設計師在使用徽標引導時(shí),配套制定好消失邏輯——是用戶(hù)點(diǎn)擊之后就消失、還是用戶(hù)點(diǎn)擊特定次數后才消失、亦或是徽標提示展示特定次數后自動(dòng)消失,都需要提前規劃清楚。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

5. 嵌入式引導

嵌入式引導指的是把引導做在內容層,常見(jiàn)的是作為插條形式存在于 feed 流,或者作為插卡形式存在于瀑布流的情況。

嵌入式引導不會(huì )打擾用戶(hù),亦不會(huì )遮擋頁(yè)面內容,用戶(hù)劃動(dòng)頁(yè)面就可以把引導推出屏幕,但這種設計也意味著(zhù)在用戶(hù)把嵌入式引導推出屏幕前降低了屏幕的有效信息展示區域;所以嵌入式引導如果放在內容流頂部,一般會(huì )設計的精致小巧,來(lái)盡可能降低這種影響。如果內容流是有限流,放在內容流底部出現的話(huà),就無(wú)所謂占地兒多少了,加 IP 形象、動(dòng)圖或情懷類(lèi)素材都是很常見(jiàn)的。

嵌入式引導如果放在內容流頂部,盡管用戶(hù)可以直接推出屏幕,我們也會(huì )經(jīng)??吹接刑砑又鲃?dòng)關(guān)閉按鈕的設計案例出現;分析背后原因,一方面可以增加用戶(hù)的控制感,另外一方面可以根據對用戶(hù)行為的標記,針對該嵌入式引導,制定更為詳細的顯示策略(如用戶(hù)點(diǎn)擊關(guān)閉后,當日不再顯示;用戶(hù)累計關(guān)閉 3 次后,當月不再顯示)。

嵌入式引導用在內容流頂部常見(jiàn)于索要某種權限,用于內容流底部常見(jiàn)于引導用戶(hù)去關(guān)注更多、發(fā)布更多等操作。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

6. 手勢引導

手勢引導指的是對一些高級手勢操作的引導模式,如雙擊點(diǎn)贊、長(cháng)按保存、滑動(dòng)調整音量等,這些高級手勢對于用戶(hù)而言,如果能靈活掌握,使用產(chǎn)品時(shí)會(huì )起到事半功倍的效果。

手勢引導的元素很簡(jiǎn)單,一般是高級手勢的 gif 動(dòng)圖+引導文案。為了讓手勢引導清晰可見(jiàn),有時(shí)會(huì )加一個(gè)局部的半透明蒙版(如播放中的視頻,視覺(jué)背景元素瞬息萬(wàn)變,就經(jīng)常會(huì )加一個(gè)半透明蒙版來(lái)提升手勢引導的可見(jiàn)性)。手勢引導會(huì )自動(dòng)消失、且是非模態(tài),所以對用戶(hù)的打擾較弱。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

7. 特殊引導

除了上面描述的 5 種非模態(tài)類(lèi)引導,還有兩種構思巧妙,但不容易提煉、概括、歸類(lèi)的引導模式,也和大家分享一下。

第一種是動(dòng)效引導模式。這種引導模式的神奇之處在于沒(méi)有添加任何新元素,僅僅通過(guò)動(dòng)效來(lái)起到引導用戶(hù)的效果;如圖所示的 2018 年即刻某版本的關(guān)注主題列表頁(yè),用戶(hù)可以通過(guò)向左滑動(dòng)來(lái)刪除某個(gè)已關(guān)注的主題,但頁(yè)面上沒(méi)有任何提示信息,設計師通過(guò)“讓第一條主題自動(dòng)向左滑動(dòng)一下,來(lái)露出刪除按鈕”,從而起到提示用戶(hù)使用該功能的作用。

誠然,這個(gè)引導的限制條件很多——比如只能有一個(gè)列表,否則向左滑動(dòng)會(huì )和tab切換相沖突;再比如即刻的用戶(hù)是年輕化的,“滑動(dòng)刪除”這種對老齡用戶(hù)而言相對高階的手勢操作,對即刻用戶(hù)而言根本沒(méi)有學(xué)習的門(mén)檻;這些限制條件意味著(zhù)很多產(chǎn)品的刪除引導不能生搬硬套即刻的做法,但這并不妨礙即刻這個(gè)動(dòng)效引導的優(yōu)秀。

(嚴格意義上講,動(dòng)效引導能不能稱(chēng)之為設計模式我是拿不準的,首先它虛無(wú)縹緲——沒(méi)有新增的元素來(lái)概括和描述它;其次它可復用的場(chǎng)景也是比較少的。)

第二種是按鈕狀態(tài)變化引導模式。如下圖所示,當底 tab 除了有切換功能外,還被賦予了返回頂部功能時(shí),隨著(zhù)頁(yè)面的向上劃動(dòng),左下角的支付寶 tab 變成了返回頂部的樣式,通過(guò)這種按鈕展示狀態(tài)的變化,很好的提示了用戶(hù)這個(gè)按鈕所擁有的另外一個(gè)功能;同動(dòng)效引導一樣,按鈕狀態(tài)變化引導也需要設計師奇思妙想,是否能稱(chēng)之為一種引導的設計模式,也歡迎大家發(fā)表自己的看法。

移動(dòng)端引導設計指南(一):常見(jiàn)設計模式科普

結語(yǔ)

以上是我歸納總結的一些引導的常見(jiàn)模式,錯誤和不足之處,還請大家留言討論和批評指正;下一篇將從另一個(gè)視角——引導的常見(jiàn)類(lèi)型——來(lái)解析引導。

最后說(shuō)一下上面提及的各種引導模式的命名,我盡可能起的大家熟悉的名字或者自認為是描述最為準確的名字,可能與大家的日常認知有些出入。

如果諸位有不同意見(jiàn),歡迎給我留言,大家一起探討。