端引導(dǎo)設(shè)計(jì)指南(一):常見(jiàn)設(shè)計(jì)模式科普
2021-03-05
我計(jì)劃用三篇文章從三個(gè)角度來(lái)探討「移動(dòng)端的引導(dǎo)」這一話(huà)題:引導(dǎo)的常見(jiàn)設(shè)計(jì)模式、引導(dǎo)的常見(jiàn)類(lèi)型和如何選用合適的引導(dǎo)。本文首先從設(shè)計(jì)模式談起。
互聯(lián)網(wǎng)改變了人們接收信息的方式和效率,各種產(chǎn)品橫空出世。
在互聯(lián)網(wǎng),尤其是移動(dòng)互聯(lián)網(wǎng),越來(lái)越注重效率,所以“酒香不怕巷子深”的法則在這里是不受歡迎的,各色的引導(dǎo)需求成為了設(shè)計(jì)師的工作日常。
所謂引導(dǎo),常見(jiàn)的類(lèi)型無(wú)外乎兩類(lèi)——告訴用戶(hù)這里有什么(用戶(hù)可以做什么)?或者用戶(hù)可以怎么做?
我計(jì)劃用三篇文章從三個(gè)角度來(lái)探討“移動(dòng)端的引導(dǎo)”這一話(huà)題:引導(dǎo)的常見(jiàn)設(shè)計(jì)模式、引導(dǎo)的常見(jiàn)類(lèi)型和如何選用合適的引導(dǎo)。
本文首先從設(shè)計(jì)模式談起。“設(shè)計(jì)模式”的概念是由建筑師 Christopher Alexander 在其著作《建筑的永恒之道》(The Timeless Way of Building)和《建筑模式語(yǔ)言》(A Pattern Language )當(dāng)中首次提出的,指的是用于解決特定問(wèn)題、可以重復(fù)使用的設(shè)計(jì)方案。
換言之,設(shè)計(jì)模式是解決某一類(lèi)或某幾類(lèi)問(wèn)題的有效設(shè)計(jì)方案,引導(dǎo)的設(shè)計(jì)模式從是否阻斷用戶(hù)當(dāng)前行為,可以分為兩大類(lèi)——模態(tài)類(lèi)引導(dǎo)和非模態(tài)類(lèi)引導(dǎo)。
模態(tài)的特點(diǎn):打斷用戶(hù)正在進(jìn)行的行為,強(qiáng)制用戶(hù)必須回應(yīng)最上層的操作,否則不能進(jìn)行其他操作;區(qū)分模態(tài)的視覺(jué)特征——有覆蓋底層頁(yè)面的半透明蒙版(既在視覺(jué)上強(qiáng)化蒙版上層的操作,又在物理上屏蔽蒙版下層的操作)。
1. 對(duì)話(huà)框引導(dǎo)
對(duì)話(huà)框引導(dǎo)可以理解為是安卓端 Dialog/iOS 端 Alert 在略升級(jí)后,專(zhuān)門(mén)用于引導(dǎo)場(chǎng)景的設(shè)計(jì)模式。
升級(jí)具體表現(xiàn)在:對(duì)話(huà)框引導(dǎo)基本都有營(yíng)造視覺(jué)氛圍的素材圖(框體上的配圖)或背景圖(代替框體本身的整圖),甚至有帶動(dòng)效的圖片素材或 CTA 按鈕,這和 Dialog/Alert 那種偏純文字描述的克制是不一樣的。
為什么會(huì)升級(jí),在我看來(lái)原因有二:一是要通過(guò)抓人眼球的視覺(jué)表現(xiàn)力,吸引用戶(hù)朝著規(guī)劃好的產(chǎn)品路徑行進(jìn);二是因?yàn)橐龑?dǎo)的出現(xiàn)機(jī)制是系統(tǒng)自動(dòng)觸發(fā),而非對(duì)用戶(hù)某操作的回應(yīng)(反饋),這意味著于用戶(hù)而言,對(duì)冷不丁出現(xiàn)的對(duì)話(huà)框引導(dǎo)是沒(méi)有預(yù)期的,所以需要用比純文字表達(dá)更直白、高效的視覺(jué)元素解釋清楚這是什么?有什么好處?接下來(lái)該怎么做?等事情。
因?yàn)閷?duì)話(huà)框引導(dǎo)會(huì)阻斷用戶(hù)當(dāng)前行為,所以只有重要的引導(dǎo)才適合用這種設(shè)計(jì)模式。頂著有可能“冒犯到用戶(hù)”的風(fēng)險(xiǎn)彈出的內(nèi)容,對(duì)用戶(hù)而言,最好要有足夠的誘惑力或?qū)嶋H價(jià)值,常見(jiàn)的適用場(chǎng)景有福利發(fā)放、重要活動(dòng)、重要版本升級(jí)等。
對(duì)話(huà)框引導(dǎo)因?yàn)闆](méi)有指向性(詳見(jiàn)氣泡引導(dǎo)/工具提示引導(dǎo)),所以一般居中顯示,占據(jù)整個(gè)屏幕的視覺(jué)重心。
2. 操作欄引導(dǎo)
操作欄引導(dǎo)是類(lèi)似 iOS 端 Activity View 的設(shè)計(jì)模式(Activity View 是基于用戶(hù)操作后彈出的,而操作欄引導(dǎo)是系統(tǒng)自動(dòng)觸發(fā)的,所以我這里所謂的類(lèi)似是指展現(xiàn)形式上類(lèi)似——都是在頁(yè)面底部彈出的模態(tài)設(shè)計(jì)模式)。
操作欄引導(dǎo)的特點(diǎn)和對(duì)話(huà)框引導(dǎo)是一樣的(阻斷式引導(dǎo)、沒(méi)有指向性、用于重要功能/內(nèi)容的引導(dǎo)),主要的區(qū)別是——在位置上,相較于居中顯示的對(duì)話(huà)框引導(dǎo)更靠下;所以理論上,操作欄引導(dǎo)在視覺(jué)重心上稍差一點(diǎn)點(diǎn);但也恰恰正是因?yàn)槲恢每肯拢韵噍^于對(duì)話(huà)框引導(dǎo)更便于操作,尤其是對(duì)大屏手機(jī)的單手操作而言;所以除了CTA按鈕外,操作欄引導(dǎo)可以承載更多的簡(jiǎn)單操作,如選擇標(biāo)簽、打星評(píng)價(jià)等。
3. 氣泡引導(dǎo)
氣泡引導(dǎo)可以理解為是安卓端 Popup/iOS 端 Popover 變形后的設(shè)計(jì)模式(同操作欄引導(dǎo)一樣,氣泡引導(dǎo)是系統(tǒng)自動(dòng)觸發(fā)的,Popup/Popover 是用戶(hù)操作后觸發(fā)的,所以氣泡引導(dǎo)在使用時(shí)要露出被引導(dǎo)元素,多為某個(gè)功能按鈕或某個(gè)內(nèi)容按鈕;這和 Popup/Popover 是不一樣的,點(diǎn)擊某操作后彈出的 Popup/Popover,半透明蒙版會(huì)蓋住該操作控件)。
氣泡引導(dǎo)相較于上面兩種模態(tài)引導(dǎo),因?yàn)楦鼜?qiáng)調(diào)其指向性,所以可以根據(jù)實(shí)際需要出現(xiàn)在頁(yè)面的任何位置;所謂的指向性,其實(shí)就是指氣泡引導(dǎo)必定有一個(gè)小尖尖,來(lái)明確告知用戶(hù)在引導(dǎo)誰(shuí)。所以氣泡引導(dǎo)的適用場(chǎng)景是:界面上某個(gè)固定位置的功能或內(nèi)容的引導(dǎo)。
氣泡引導(dǎo)和工具提示引導(dǎo)很類(lèi)似,區(qū)別就在于一個(gè)是模態(tài)一個(gè)是非模態(tài)(即氣泡引導(dǎo)有半透明蒙版,工具提示引導(dǎo)沒(méi)有半透明蒙版);所以阻斷式的氣泡引導(dǎo)適合最最最重要的功能/內(nèi)容的引導(dǎo),非阻斷式的工具提示引導(dǎo)適合比較重要的功能/內(nèi)容的引導(dǎo)。
氣泡引導(dǎo)元素相對(duì)簡(jiǎn)單——被引導(dǎo)元素、半透明蒙版、帶小尖尖的氣泡、引導(dǎo)文案。為了增加視覺(jué)沖擊力可以在氣泡上添加圖片素材或者動(dòng)圖。一般沒(méi)有關(guān)閉按鈕,點(diǎn)擊氣泡外的任意位置,都可以關(guān)閉氣泡引導(dǎo)。
為了吸引用戶(hù)立即去操作被引導(dǎo)元素,可以給被引導(dǎo)元素添加光影變化、呼吸效果等,也可以添加對(duì)應(yīng)交互手勢(shì)的視覺(jué)元素(如“小手點(diǎn)擊”的 gif 圖)。
4. 頁(yè)面遮罩引導(dǎo)
頁(yè)面遮罩引導(dǎo)是一種類(lèi)似氣泡引導(dǎo)的設(shè)計(jì)模式。具體差別在于氣泡引導(dǎo)把被引導(dǎo)元素提到半透明蒙版上層,頁(yè)面遮罩引導(dǎo)是設(shè)計(jì)鏤空的半透明蒙版(即所謂的頁(yè)面遮罩),把半透明蒙版下層的被引導(dǎo)元素露出來(lái)。
像氣泡引導(dǎo)一樣,頁(yè)面遮罩引導(dǎo)也具有明確的指向性,一般都有繪制的箭頭告訴用戶(hù)引導(dǎo)文案是對(duì)哪個(gè)被引導(dǎo)元素的解釋或說(shuō)明。
頁(yè)面遮罩引導(dǎo)早些年常用于一個(gè)頁(yè)面上有多處功能/入口等要引導(dǎo)(當(dāng)然單個(gè)引導(dǎo)也可以),但是大家現(xiàn)在見(jiàn)到它們的機(jī)會(huì)越來(lái)越少,分析原因可能有三個(gè):1. 先前的新鮮功能對(duì)現(xiàn)在的用戶(hù)而言隨處可見(jiàn),不值得再去引導(dǎo);2. 用戶(hù)耐心越來(lái)越少,更喜歡自己去嘗試,而非聽(tīng)產(chǎn)品說(shuō)教(就像電子產(chǎn)品的說(shuō)明書(shū),很少有用戶(hù)去讀一樣);3. 產(chǎn)品可能發(fā)現(xiàn),大部分先前引導(dǎo)的功能/入口其實(shí)沒(méi)那么重要,不值得用打斷用戶(hù)的方式去告知他們。
非模態(tài)的特點(diǎn):不打斷用戶(hù)的當(dāng)前的操作行為,用戶(hù)可以繼續(xù)進(jìn)行之前的操作,也可以對(duì)引導(dǎo)內(nèi)容進(jìn)行回應(yīng),選擇權(quán)是在用戶(hù)手里的,區(qū)分非模態(tài)的視覺(jué)特征是沒(méi)有阻斷用戶(hù)行為的半透明蒙版出現(xiàn)。
1. 工具提示引導(dǎo)
為了呼應(yīng)上面提到的氣泡引導(dǎo),我們優(yōu)先介紹工具提示引導(dǎo)。區(qū)別于 Material Design 里的 Tooltips,工具提示引導(dǎo)是自動(dòng)觸發(fā)的設(shè)計(jì)模式,所以不適合事無(wú)巨細(xì)的引導(dǎo)所有功能或內(nèi)容,更適合引導(dǎo)“次重要功能/內(nèi)容里的重點(diǎn)對(duì)象”;而 Material Design 里的 Tooltips,是用戶(hù)長(zhǎng)按某按鈕后的信息反饋,是普世的,原則上(但凡不和長(zhǎng)按手勢(shì)沖突的)所有的按鈕都應(yīng)該添加,尤其是為了節(jié)省空間而設(shè)計(jì)的純 icon 按鈕,因?yàn)榇蟛糠?icon 按鈕沒(méi)有統(tǒng)一的用戶(hù)認(rèn)知。
與氣泡引導(dǎo)一樣,工具提示引導(dǎo)可以出現(xiàn)在屏幕的任意位置;盡管沒(méi)有半透明蒙版阻斷用戶(hù)行為,工具提示引導(dǎo)還是會(huì)遮擋原頁(yè)面的某些內(nèi)容,所以一般會(huì)顯示數(shù)秒后自動(dòng)消失。
工具提示引導(dǎo)的元素有帶小尖尖的氣泡和引導(dǎo)文案,原則上也可以添加動(dòng)效、交互手勢(shì)等元素。
2. Snackbar 引導(dǎo)
Snackbar 是安卓端 Material Design 設(shè)計(jì)體系中包含的一個(gè)控件,官方的定義是出現(xiàn)在頁(yè)面底部的一種控件,只有引導(dǎo)文案和一個(gè)文字按鈕,會(huì)自動(dòng)消失且支持用戶(hù)使用拖拽手勢(shì)把它劃出頁(yè)面進(jìn)行快速關(guān)閉;適用場(chǎng)景是用戶(hù)進(jìn)行了 A 操作,可以用 Snackbar 提示用戶(hù)是否要實(shí)施與之高度相關(guān)的 B 操作。
究其根本,與其說(shuō)官方定義的 Snackbar 在上述場(chǎng)景中是對(duì) B 操作的引導(dǎo),不如說(shuō)是系統(tǒng)對(duì)用戶(hù)進(jìn)行的 A 操作的反饋。
現(xiàn)實(shí)產(chǎn)品中,我們看到了各種各樣與 Material Design 建議用法相悖的案例,個(gè)人覺(jué)得這是突破了官方的限制,朝著適用性更廣的方向在發(fā)展。所謂規(guī)則,本就是人為定義、人為遵守、人為打破的。哪怕這種打破只是讓我們朝著更好的方向邁了一小步,這種“破壞”都是值得推崇和尊敬的。
比如大家會(huì)把 Snackbar 用在系統(tǒng)自動(dòng)觸發(fā)的引導(dǎo)上(本段所說(shuō)的“Snackbar 引導(dǎo)”就是指這種借 Snackbar 之名定義的、系統(tǒng)自動(dòng)觸發(fā)的引導(dǎo)模式)、會(huì)給它添加更重的按鈕(不局限于純文字按鈕)、添加圖片素材(甚至是動(dòng)圖)來(lái)增加美感吸引用戶(hù)注意力、會(huì)添加關(guān)閉按鈕來(lái)替代拖拽關(guān)閉的高級(jí)手勢(shì)、定義永久顯示的展示時(shí)長(zhǎng)(即用戶(hù)不主動(dòng)關(guān)閉就不會(huì)自動(dòng)消失)等。
為什么大家樂(lè)此不疲的改造著 Snackbar,因?yàn)樗烊痪哂幸恍┆?dú)特優(yōu)勢(shì);首先它是非模態(tài)的設(shè)計(jì)模式,對(duì)用戶(hù)的打擾是相對(duì)比較低的;其次它出現(xiàn)的位置是屏幕底部,類(lèi)似于操作欄引導(dǎo),它對(duì)于大屏手機(jī)的單手操作很友好;最后作為自動(dòng)觸發(fā)的引導(dǎo)模式,因?yàn)闆](méi)有指向性,反而讓它沒(méi)有束縛、更具兼容性——活動(dòng)引導(dǎo)、內(nèi)容引導(dǎo)、功能引導(dǎo)…,都能覆蓋到。
3. FAB 引導(dǎo)
FAB 也是安卓端 Material Design 設(shè)計(jì)體系中包含的一個(gè)控件,全稱(chēng)是 floating action button(懸浮操作按鈕),F(xiàn)AB 引導(dǎo)只是借用 FAB 這個(gè)名字,同時(shí)也歡迎大家參與討論,以便定義出描述更為準(zhǔn)確、有更廣泛認(rèn)知的名字。
從字面意思可以看出,F(xiàn)AB 引導(dǎo)是懸浮在頁(yè)面之上的,像按鈕一樣占地兒很小的一種引導(dǎo)。為了吸引注意力,常見(jiàn)的用法多為一個(gè)圖片素材的入口;像其他引導(dǎo)一樣,圖片素材可以是 gif 動(dòng)圖來(lái)進(jìn)一步吸引用戶(hù)點(diǎn)擊。FAB 引導(dǎo)本身也可以配置動(dòng)效,如呼吸效果、抖動(dòng)效果。
為了降低對(duì)不感興趣用戶(hù)的過(guò)分打擾,F(xiàn)AB 引導(dǎo)可以配置自動(dòng)消失邏輯、可以添加關(guān)閉按鈕,也可以在用戶(hù)滑動(dòng)頁(yè)面的過(guò)程中設(shè)計(jì)收起態(tài)或通過(guò)調(diào)整透明度來(lái)消除對(duì)頁(yè)面內(nèi)容的遮擋。
FAB 引導(dǎo)的位置通常是頁(yè)面下方(其中又以右下角最為常見(jiàn)),我能想到的背后邏輯有兩點(diǎn):
(中國(guó))用戶(hù)閱讀時(shí)掃視的路線(xiàn)是從左上到右下,F(xiàn)AB 引導(dǎo)放在右下角既不會(huì)過(guò)分打擾用戶(hù),又不至于看不到。大屏手機(jī)的單手操作,下方會(huì)更容易點(diǎn)擊,可用性比在上方顯示會(huì)更好。
FAB 引導(dǎo)常用來(lái)引導(dǎo)某個(gè)運(yùn)營(yíng)活動(dòng)(如紅包活動(dòng))、在信息架構(gòu)上層級(jí)低但又相對(duì)重要的頁(yè)面(如去年各家資訊產(chǎn)品的疫情頁(yè)面入口);通過(guò)配置 FAB 引導(dǎo),這些內(nèi)容在首屏得以曝光,并為用戶(hù)提供快捷入口。
4. 徽標(biāo)引導(dǎo)
徽標(biāo)(Badge)即平時(shí)常說(shuō)的“小紅點(diǎn)”(實(shí)際設(shè)計(jì)時(shí)可以結(jié)合產(chǎn)品主色,不必非得選用紅色),它通過(guò)帶顏色的小圓點(diǎn)或帶數(shù)字的徽標(biāo)來(lái)告知用戶(hù),此處有內(nèi)容更新。
接下來(lái)我們聊聊徽標(biāo)作為一種引導(dǎo)模式有哪些應(yīng)用場(chǎng)景:
上面描述的是徽標(biāo)引導(dǎo)的兩種常見(jiàn)形式,一般不帶數(shù)字的小圓點(diǎn)引導(dǎo)性更弱(這里的“弱”指的是對(duì)用戶(hù)而言的重要性以及結(jié)合業(yè)務(wù)而言的重要性,二者綜合考量下的強(qiáng)度是弱的)一些的內(nèi)容,即沒(méi)有數(shù)字逐級(jí)透?jìng)鞯絾?dòng) icon 上面。
稍重一些的帶數(shù)字的徽標(biāo)提示,則會(huì)透?jìng)鞯絾?dòng) icon 上,并且用戶(hù)不點(diǎn)擊查看,就一直存在;還有第三種常見(jiàn)的用法,用“NEW”、“推薦”等文案代替數(shù)字,來(lái)引導(dǎo)用戶(hù)點(diǎn)擊某入口;我最近發(fā)現(xiàn)有基于此進(jìn)一步做升級(jí)強(qiáng)化的用法——用“帶文字的徽標(biāo)加動(dòng)效”來(lái)強(qiáng)化引導(dǎo)效果的案例出現(xiàn)(詳見(jiàn)美團(tuán)V11.8版本首頁(yè)的“美團(tuán)優(yōu)選”入口和“電商tab”入口)。
徽標(biāo)引導(dǎo)因?yàn)檎嫉貎簶O小,對(duì)用戶(hù)的打擾微乎其微,所以不會(huì)設(shè)置主動(dòng)關(guān)閉按鈕,用戶(hù)關(guān)閉徽標(biāo)引導(dǎo)的方式就是使用它或者等待它自動(dòng)消失;這就要求設(shè)計(jì)師在使用徽標(biāo)引導(dǎo)時(shí),配套制定好消失邏輯——是用戶(hù)點(diǎn)擊之后就消失、還是用戶(hù)點(diǎn)擊特定次數(shù)后才消失、亦或是徽標(biāo)提示展示特定次數(shù)后自動(dòng)消失,都需要提前規(guī)劃清楚。
5. 嵌入式引導(dǎo)
嵌入式引導(dǎo)指的是把引導(dǎo)做在內(nèi)容層,常見(jiàn)的是作為插條形式存在于 feed 流,或者作為插卡形式存在于瀑布流的情況。
嵌入式引導(dǎo)不會(huì)打擾用戶(hù),亦不會(huì)遮擋頁(yè)面內(nèi)容,用戶(hù)劃動(dòng)頁(yè)面就可以把引導(dǎo)推出屏幕,但這種設(shè)計(jì)也意味著在用戶(hù)把嵌入式引導(dǎo)推出屏幕前降低了屏幕的有效信息展示區(qū)域;所以嵌入式引導(dǎo)如果放在內(nèi)容流頂部,一般會(huì)設(shè)計(jì)的精致小巧,來(lái)盡可能降低這種影響。如果內(nèi)容流是有限流,放在內(nèi)容流底部出現(xiàn)的話(huà),就無(wú)所謂占地兒多少了,加 IP 形象、動(dòng)圖或情懷類(lèi)素材都是很常見(jiàn)的。
嵌入式引導(dǎo)如果放在內(nèi)容流頂部,盡管用戶(hù)可以直接推出屏幕,我們也會(huì)經(jīng)常看到有添加主動(dòng)關(guān)閉按鈕的設(shè)計(jì)案例出現(xiàn);分析背后原因,一方面可以增加用戶(hù)的控制感,另外一方面可以根據(jù)對(duì)用戶(hù)行為的標(biāo)記,針對(duì)該嵌入式引導(dǎo),制定更為詳細(xì)的顯示策略(如用戶(hù)點(diǎn)擊關(guān)閉后,當(dāng)日不再顯示;用戶(hù)累計(jì)關(guān)閉 3 次后,當(dāng)月不再顯示)。
嵌入式引導(dǎo)用在內(nèi)容流頂部常見(jiàn)于索要某種權(quán)限,用于內(nèi)容流底部常見(jiàn)于引導(dǎo)用戶(hù)去關(guān)注更多、發(fā)布更多等操作。
6. 手勢(shì)引導(dǎo)
手勢(shì)引導(dǎo)指的是對(duì)一些高級(jí)手勢(shì)操作的引導(dǎo)模式,如雙擊點(diǎn)贊、長(zhǎng)按保存、滑動(dòng)調(diào)整音量等,這些高級(jí)手勢(shì)對(duì)于用戶(hù)而言,如果能靈活掌握,使用產(chǎn)品時(shí)會(huì)起到事半功倍的效果。
手勢(shì)引導(dǎo)的元素很簡(jiǎn)單,一般是高級(jí)手勢(shì)的 gif 動(dòng)圖+引導(dǎo)文案。為了讓手勢(shì)引導(dǎo)清晰可見(jiàn),有時(shí)會(huì)加一個(gè)局部的半透明蒙版(如播放中的視頻,視覺(jué)背景元素瞬息萬(wàn)變,就經(jīng)常會(huì)加一個(gè)半透明蒙版來(lái)提升手勢(shì)引導(dǎo)的可見(jiàn)性)。手勢(shì)引導(dǎo)會(huì)自動(dòng)消失、且是非模態(tài),所以對(duì)用戶(hù)的打擾較弱。
7. 特殊引導(dǎo)
除了上面描述的 5 種非模態(tài)類(lèi)引導(dǎo),還有兩種構(gòu)思巧妙,但不容易提煉、概括、歸類(lèi)的引導(dǎo)模式,也和大家分享一下。
第一種是動(dòng)效引導(dǎo)模式。這種引導(dǎo)模式的神奇之處在于沒(méi)有添加任何新元素,僅僅通過(guò)動(dòng)效來(lái)起到引導(dǎo)用戶(hù)的效果;如圖所示的 2018 年即刻某版本的關(guān)注主題列表頁(yè),用戶(hù)可以通過(guò)向左滑動(dòng)來(lái)刪除某個(gè)已關(guān)注的主題,但頁(yè)面上沒(méi)有任何提示信息,設(shè)計(jì)師通過(guò)“讓第一條主題自動(dòng)向左滑動(dòng)一下,來(lái)露出刪除按鈕”,從而起到提示用戶(hù)使用該功能的作用。
誠(chéng)然,這個(gè)引導(dǎo)的限制條件很多——比如只能有一個(gè)列表,否則向左滑動(dòng)會(huì)和tab切換相沖突;再比如即刻的用戶(hù)是年輕化的,“滑動(dòng)刪除”這種對(duì)老齡用戶(hù)而言相對(duì)高階的手勢(shì)操作,對(duì)即刻用戶(hù)而言根本沒(méi)有學(xué)習(xí)的門(mén)檻;這些限制條件意味著很多產(chǎn)品的刪除引導(dǎo)不能生搬硬套即刻的做法,但這并不妨礙即刻這個(gè)動(dòng)效引導(dǎo)的優(yōu)秀。
(嚴(yán)格意義上講,動(dòng)效引導(dǎo)能不能稱(chēng)之為設(shè)計(jì)模式我是拿不準(zhǔn)的,首先它虛無(wú)縹緲——沒(méi)有新增的元素來(lái)概括和描述它;其次它可復(fù)用的場(chǎng)景也是比較少的。)
第二種是按鈕狀態(tài)變化引導(dǎo)模式。如下圖所示,當(dāng)?shù)?tab 除了有切換功能外,還被賦予了返回頂部功能時(shí),隨著頁(yè)面的向上劃動(dòng),左下角的支付寶 tab 變成了返回頂部的樣式,通過(guò)這種按鈕展示狀態(tài)的變化,很好的提示了用戶(hù)這個(gè)按鈕所擁有的另外一個(gè)功能;同動(dòng)效引導(dǎo)一樣,按鈕狀態(tài)變化引導(dǎo)也需要設(shè)計(jì)師奇思妙想,是否能稱(chēng)之為一種引導(dǎo)的設(shè)計(jì)模式,也歡迎大家發(fā)表自己的看法。
以上是我歸納總結(jié)的一些引導(dǎo)的常見(jiàn)模式,錯(cuò)誤和不足之處,還請(qǐng)大家留言討論和批評(píng)指正;下一篇將從另一個(gè)視角——引導(dǎo)的常見(jiàn)類(lèi)型——來(lái)解析引導(dǎo)。
最后說(shuō)一下上面提及的各種引導(dǎo)模式的命名,我盡可能起的大家熟悉的名字或者自認(rèn)為是描述最為準(zhǔn)確的名字,可能與大家的日常認(rèn)知有些出入。
如果諸位有不同意見(jiàn),歡迎給我留言,大家一起探討。