中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：隨著互聯網世界的不斷發展，如今各種互聯網產品的設計多種多樣，在產品設計中，用戶可以根據一些引導設計進行每個步驟的操作，所以引導設計是非常重要的；本文作者分享了關于設計模式中的引導，我們一起來了解一下。

互聯網改變了人們接收信息的方式和效率，各種產品橫空出世。

在互聯網，尤其是移動互聯網，越來越注重效率，所以“酒香不怕巷子深”的法則在這里是不受歡迎的，各色的引導需求成為了設計師的工作日常。

所謂引導，常見的類型無外乎兩類——告訴用戶這里有什么（用戶可以做什么）？或者用戶可以怎么做？

我計劃用三篇文章從三個角度來探討“移動端的引導”這一話題：引導的常見設計模式、引導的常見類型和如何選用合適的引導。

本文首先從設計模式談起。“設計模式”的概念是由建筑師Christopher Alexander在其著作《建筑的永恒之道》（The Timeless Way of Building）和《建筑模式語言》（A Pattern Language ）當中首次提出的，指的是用于解決特定問題、可以重復使用的設計方案。

換言之，設計模式是解決某一類或某幾類問題的有效設計方案，引導的設計模式從是否阻斷用戶當前行為，可以分為兩大類——模態類引導和非模態類引導。

一、模態（modal）類引導的設計模式

模態的特點：打斷用戶正在進行的行為，強制用戶必須回應最上層的操作，否則不能進行其他操作；區分模態的視覺特征——有覆蓋底層頁面的半透明蒙版（既在視覺上強化蒙版上層的操作，又在物理上屏蔽蒙版下層的操作）。

1. 對話框引導

對話框引導可以理解為是安卓端Dialog/iOS端Alert在略升級后，專門用于引導場景的設計模式。

升級具體表現在：對話框引導基本都有營造視覺氛圍的素材圖（框體上的配圖）或背景圖（代替框體本身的整圖），甚至有帶動效的圖片素材或CTA按鈕，這和Dialog/Alert那種偏純文字描述的克制是不一樣的。

為什么會升級，在我看來原因有二：一是要通過抓人眼球的視覺表現力，吸引用戶朝著規劃好的產品路徑行進；二是因為引導的出現機制是系統自動觸發，而非對用戶某操作的回應（反饋），這意味著于用戶而言，對冷不丁出現的對話框引導是沒有預期的，所以需要用比純文字表達更直白、高效的視覺元素解釋清楚這是什么？有什么好處？接下來該怎么做？等事情。

因為對話框引導會阻斷用戶當前行為，所以只有重要的引導才適合用這種設計模式。頂著有可能“冒犯到用戶”的風險彈出的內容，對用戶而言，最好要有足夠的誘惑力或實際價值，常見的適用場景有福利發放、重要活動、重要版本升級等。

對話框引導因為沒有指向性（詳見氣泡引導/工具提示引導），所以一般居中顯示，占據整個屏幕的視覺重心。

2. 操作欄引導

操作欄引導是類似iOS端Activity View的設計模式（Activity View是基于用戶操作后彈出的，而操作欄引導是系統自動觸發的，所以我這里所謂的類似是指展現形式上類似——都是在頁面底部彈出的模態設計模式）。

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

3. 氣泡引導

氣泡引導可以理解為是安卓端Popup/iOS端Popover變形后的設計模式（同操作欄引導一樣，氣泡引導是系統自動觸發的，Popup/Popover是用戶操作后觸發的，所以氣泡引導在使用時要露出被引導元素，多為某個功能按鈕或某個內容按鈕；這和Popup/Popover是不一樣的，點擊某操作后彈出的Popup/Popover，半透明蒙版會蓋住該操作控件）。

氣泡引導相較于上面兩種模態引導，因為更強調其指向性，所以可以根據實際需要出現在頁面的任何位置；所謂的指向性，其實就是指氣泡引導必定有一個小尖尖，來明確告知用戶在引導誰。所以氣泡引導的適用場景是：界面上某個固定位置的功能或內容的引導。

氣泡引導和工具提示引導很類似，區別就在于一個是模態一個是非模態（即氣泡引導有半透明蒙版，工具提示引導沒有半透明蒙版）；所以阻斷式的氣泡引導適合最最最重要的功能/內容的引導，非阻斷式的工具提示引導適合比較重要的功能/內容的引導。

氣泡引導元素相對簡單——被引導元素、半透明蒙版、帶小尖尖的氣泡、引導文案。為了增加視覺沖擊力可以在氣泡上添加圖片素材或者動圖。一般沒有關閉按鈕，點擊氣泡外的任意位置，都可以關閉氣泡引導。

為了吸引用戶立即去操作被引導元素，可以給被引導元素添加光影變化、呼吸效果等，也可以添加對應交互手勢的視覺元素（如“小手點擊”的gif圖）。

4.?頁面遮罩引導

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

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

頁面遮罩引導早些年常用于一個頁面上有多處功能/入口等要引導（當然單個引導也可以），但是大家現在見到它們的機會越來越少，分析原因可能有三個：1. 先前的新鮮功能對現在的用戶而言隨處可見，不值得再去引導；2. 用戶耐心越來越少，更喜歡自己去嘗試，而非聽產品說教（就像電子產品的說明書，很少有用戶去讀一樣）；3. 產品可能發現，大部分先前引導的功能/入口其實沒那么重要，不值得用打斷用戶的方式去告知他們。

二、非模態（modaless）類引導的設計模式

非模態的特點：不打斷用戶的當前的操作行為，用戶可以繼續進行之前的操作，也可以對引導內容進行回應，選擇權是在用戶手里的，區分非模態的視覺特征是沒有阻斷用戶行為的半透明蒙版出現。

1. 工具提示引導

為了呼應上面提到的氣泡引導，我們優先介紹工具提示引導。區別于Material Design里的Tooltips，工具提示引導是自動觸發的設計模式，所以不適合事無巨細的引導所有功能或內容，更適合引導“次重要功能/內容里的重點對象”；而Material Design里的Tooltips，是用戶長按某按鈕后的信息反饋，是普世的，原則上（但凡不和長按手勢沖突的）所有的按鈕都應該添加，尤其是為了節省空間而設計的純icon按鈕，因為大部分icon按鈕沒有統一的用戶認知。

與氣泡引導一樣，工具提示引導可以出現在屏幕的任意位置；盡管沒有半透明蒙版阻斷用戶行為，工具提示引導還是會遮擋原頁面的某些內容，所以一般會顯示數秒后自動消失。

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

2. Snackbar引導

Snackbar是安卓端Material Design設計體系中包含的一個控件，官方的定義是出現在頁面底部的一種控件，只有引導文案和一個文字按鈕，會自動消失且支持用戶使用拖拽手勢把它劃出頁面進行快速關閉；適用場景是用戶進行了A操作，可以用Snackbar提示用戶是否要實施與之高度相關的B操作。

究其根本，與其說官方定義的Snackbar在上述場景中是對B操作的引導，不如說是系統對用戶進行的A操作的反饋。

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

比如大家會把Snackbar用在系統自動觸發的引導上（本段所說的“Snackbar引導”就是指這種借Snackbar之名定義的、系統自動觸發的引導模式）、會給它添加更重的按鈕（不局限于純文字按鈕）、添加圖片素材（甚至是動圖）來增加美感吸引用戶注意力、會添加關閉按鈕來替代拖拽關閉的高級手勢、定義永久顯示的展示時長（即用戶不主動關閉就不會自動消失）等。

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

3. FAB引導

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

從字面意思可以看出，FAB引導是懸浮在頁面之上的，像按鈕一樣占地兒很小的一種引導。為了吸引注意力，常見的用法多為一個圖片素材的入口；像其他引導一樣，圖片素材可以是gif動圖來進一步吸引用戶點擊。FAB引導本身也可以配置動效，如呼吸效果、抖動效果。

為了降低對不感興趣用戶的過分打擾，FAB引導可以配置自動消失邏輯、可以添加關閉按鈕，也可以在用戶滑動頁面的過程中設計收起態或通過調整透明度來消除對頁面內容的遮擋。

FAB引導的位置通常是頁面下方（其中又以右下角最為常見），我能想到的背后邏輯有兩點：

• （中國）用戶閱讀時掃視的路線是從左上到右下，FAB引導放在右下角既不會過分打擾用戶，又不至于看不到。
• 大屏手機的單手操作，下方會更容易點擊，可用性比在上方顯示會更好。

FAB引導常用來引導某個運營活動（如紅包活動）、在信息架構上層級低但又相對重要的頁面（如去年各家資訊產品的疫情頁面入口）；通過配置FAB引導，這些內容在首屏得以曝光，并為用戶提供快捷入口。

4. 徽標引導

徽標（Badge）即平時常說的“小紅點”（實際設計時可以結合產品主色，不必非得選用紅色），它通過帶顏色的小圓點或帶數字的徽標來告知用戶，此處有內容更新。

接下來我們聊聊徽標作為一種引導模式有哪些應用場景：

上面描述的是徽標引導的兩種常見形式，一般不帶數字的小圓點引導性更弱（這里的“弱”指的是對用戶而言的重要性以及結合業務而言的重要性，二者綜合考量下的強度是弱的）一些的內容，即沒有數字逐級透傳到啟動icon上面。

稍重一些的帶數字的徽標提示，則會透傳到啟動icon上，并且用戶不點擊查看，就一直存在；還有第三種常見的用法，用“NEW”、“推薦”等文案代替數字，來引導用戶點擊某入口；我最近發現有基于此進一步做升級強化的用法——用“帶文字的徽標加動效”來強化引導效果的案例出現（詳見美團V11.8版本首頁的“美團優選”入口和“電商tab”入口）。

徽標引導因為占地兒極小，對用戶的打擾微乎其微，所以不會設置主動關閉按鈕，用戶關閉徽標引導的方式就是使用它或者等待它自動消失；這就要求設計師在使用徽標引導時，配套制定好消失邏輯——是用戶點擊之后就消失、還是用戶點擊特定次數后才消失、抑或徽標提示展示特定次數后自動消失，都需要提前規劃清楚。

5. 嵌入式引導

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

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

嵌入式引導如果放在內容流頂部，盡管用戶可以直接推出屏幕，我們也會經常看到有添加主動關閉按鈕的設計案例出現；分析背后原因，一方面可以增加用戶的控制感，另外一方面可以根據對用戶行為的標記，針對該嵌入式引導，制定更為詳細的顯示策略（如用戶點擊關閉后，當日不再顯示；用戶累計關閉3次后，當月不再顯示）。

嵌入式引導用在內容流頂部常見于索要某種權限，用于內容流底部常見于引導用戶去關注更多、發布更多等操作。

6. 手勢引導

手勢引導指的是對一些高級手勢操作的引導模式，如雙擊點贊、長按保存、滑動調整音量等，這些高級手勢對于用戶而言，如果能靈活掌握，使用產品時會起到事半功倍的效果。

手勢引導的元素很簡單，一般是高級手勢的gif動圖+引導文案。為了讓手勢引導清晰可見，有時會加一個局部的半透明蒙版（如播放中的視頻，視覺背景元素瞬息萬變，就經常會加一個半透明蒙版來提升手勢引導的可見性）。手勢引導會自動消失、且是非模態，所以對用戶的打擾較弱。

7. 特殊引導

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

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

誠然，這個引導的限制條件很多——比如只能有一個列表，否則向左滑動會和tab切換相沖突；再比如即刻的用戶是年輕化的，“滑動刪除”這種對老齡用戶而言相對高階的手勢操作，對即可用戶而言根本沒有學習的門檻；這些限制條件意味著很多產品的刪除引導不能生搬硬套即刻的做法，但這并不妨礙即刻這個動效引導的優秀。

（嚴格意義上講，動效引導能不能稱之為設計模式我是拿不準的，首先它虛無縹緲——沒有新增的元素來概括和描述它；其次它可復用的場景也是比較少的。）

第二種是按鈕狀態變化引導模式。如下圖所示，當底tab除了有切換功能外，還被賦予了返回頂部功能時，隨著頁面的向上劃動，左下角的支付寶tab變成了返回頂部的樣式，通過這種按鈕展示狀態的變化，很好的提示了用戶這個按鈕所擁有的另外一個功能；同動效引導一樣，按鈕狀態變化引導也需要設計師奇思妙想，是否能稱之為一種引導的設計模式，也歡迎大家發表自己的看法。

三、結語

以上是我歸納總結的一些引導的常見模式，錯誤和不足之處，還請大家留言討論和批評指正；下一篇將從另一個視角——引導的常見類型——來解析引導。

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

如果諸位有不同意見，歡迎給我留言，大家一起探討。

最后的最后，以上內容也有我們團隊其他成員的貢獻（包括在職的和離職的），如果說這篇文章能給屏幕前的您一點點啟發，這里面也有他們的功勞。在此謝過，祝好！

本文由 @Sean Wei 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自?Unsplash，基于 CC0 協議