如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

前言

蒙版引導(dǎo)一直是一個十分熱門的話題，對于很多用戶來講經(jīng)常會不徹底閱讀甚至快速關(guān)閉來結(jié)束引導(dǎo)，這樣便起不到很好的教育作用。甚至還有“在界面上添加這些并不會讓你的產(chǎn)品變得更易用”的說法（觀點(diǎn)引自文章“Misused mobile UX patterns”）。但我認(rèn)為這種說法過于片面，對于一些流程復(fù)雜或者功能個性的產(chǎn)品應(yīng)用，添加蒙版引導(dǎo)進(jìn)行說明，是十分有必要的。

什么是蒙版引導(dǎo)

蒙版引導(dǎo)（Coach Marks），從英文字面上的意思是指具有教育指示意義的引導(dǎo)標(biāo)注。通常出現(xiàn)在用戶初次使用產(chǎn)品的過程中，能夠以最輕量的方式快速指引用戶了解產(chǎn)品的使用方法或者新功能。現(xiàn)階段用戶打開一個新的產(chǎn)品通常會遇到各種引導(dǎo)提示（前置引導(dǎo)頁，視頻引導(dǎo)，彈窗提示，活動浮層介紹等等），區(qū)分于這些引導(dǎo)，蒙版引導(dǎo)通常緊貼著界面流程進(jìn)行而出現(xiàn),使用透明色間隔形式加上簡單指示性文字與圖形，總是能夠簡潔明了地告知用戶產(chǎn)品的功能或者使用方法，并且由于其輕量的屬性會大大減少用戶的閱讀時間。設(shè)計得當(dāng)?shù)拿砂嬉龑?dǎo)不僅可以與其他引導(dǎo)相輔相成，同時也能夠增加用戶對產(chǎn)品的好感度。

蒙版引導(dǎo)的應(yīng)用場景

蒙版引導(dǎo)的使用場景非常寬泛，根據(jù)不同的場景設(shè)計合適的蒙版引導(dǎo)，才能夠最為直接的達(dá)到教育作用同時也不會對用戶造成困擾。以下會結(jié)合案例來說明不同場景下的蒙版引導(dǎo)：

1.闡述功能

說明功能點(diǎn)是蒙版引導(dǎo)最常見的出現(xiàn)場景，通常會采用較為醒目的氣泡或者箭頭等指示性圖形配合文字，直接標(biāo)注在界面上進(jìn)行說明。這種直抒內(nèi)容的引導(dǎo)樣式，有效地節(jié)約了閱讀時間，同時也更加容易被用戶理解和吸收。以下為兩種在闡述功能的時候比較常用的樣式：

FaceU和VUE作為現(xiàn)在比較熱門的攝影和錄像類軟件，在拍照界面中都引用了蒙版引導(dǎo)說明功能。FaceU（左）使用文字和箭頭輔助直接在界面上標(biāo)識出變臉選擇入口和長按錄制視頻的功能，點(diǎn)擊使用后消失，這種開門見山的蒙版引導(dǎo)簡潔并且，使得用戶能夠快速的了解功能點(diǎn)。而VUE(右)說明的功能點(diǎn)相對較多，直接標(biāo)識全部會使得界面看起來比較雜亂，增加閱讀障礙感的同時也不美觀。所以采用了黑色透明遮罩，對界面無需講解區(qū)域降低了可視度，而需要說明的功能點(diǎn)進(jìn)行了高亮并且標(biāo)注，使得用戶閱讀起來更加清晰。

2.隱藏操作

隨著移動端平臺的普及，大家越來越關(guān)注小屏幕的有效利用。這時候就出現(xiàn)了手勢操作這種交互形式，他們能夠在有限的屏幕面積上觸發(fā)更多的產(chǎn)品功能。而這些隱藏功能可以通過蒙版引導(dǎo)很好地展現(xiàn)給用戶。通常這時候使用手勢圖標(biāo)配合方向性動畫來進(jìn)行引導(dǎo)，相對于直接的文字描述會更加形象生動，能夠更好地幫助用戶了解如何調(diào)起這些隱藏操作。

Issuu是一款聚合了全球各類熱門雜志的閱讀類應(yīng)用，極具設(shè)計感的精致UI，給用戶留下了深刻印象。為了留下更多版面來展現(xiàn)雜志的封面和內(nèi)容，issuu把一些針對書籍操作的功能隱藏了起來，通過蒙版引導(dǎo)上的手勢圖形得知，只需在封面上輕輕長按，這些功能就會立即顯現(xiàn)。

3.圖例列舉

對于有些產(chǎn)品功能的使用，直接標(biāo)注說明遠(yuǎn)遠(yuǎn)沒有圖例列舉來的準(zhǔn)確簡便。通常這種形式的蒙版引導(dǎo)主要應(yīng)用在一些需要用戶判斷和提交相關(guān)信息等功能的教育說明上，而這時候使用圖例列舉可能是一種更加直觀的方式，它們能夠使得用戶少走彎路，正確地完成軟件使用。

Rent The Runway作為一款服裝租賃應(yīng)用，通過照片查找相似風(fēng)格服裝也是其一項(xiàng)亮點(diǎn)功能。而它的蒙版引導(dǎo)就采用了圖例對比說明的方式，告訴用戶上傳多大的衣服細(xì)節(jié)才能夠使得搜索功能正常使用。而這樣的尺寸把握卻很難用極少的文字說明來表示。

蒙版引導(dǎo)的設(shè)計建議

1.徑直表達(dá) 圖文結(jié)合

對于用戶來講，他們并不希望在使用產(chǎn)品的時候碰到過于復(fù)雜的引導(dǎo)提示，他們總是希望花費(fèi)較少的時間來了解引導(dǎo)所要告知的內(nèi)容。簡單直面的文字表達(dá)，并且專注于單個功能點(diǎn)進(jìn)行詮釋，能夠使得用戶快速得到并遵循引導(dǎo)達(dá)到使用的目的。

而在文字說明的時候配合使用視覺元素進(jìn)行包裝輔助，可以讓用戶能夠在不完整閱讀的情況下獲得更多的引導(dǎo)信息。使用手勢，箭頭等視覺指示元素，可以使得你得蒙版引導(dǎo)更富有指向性。同時你也可以根據(jù)產(chǎn)品風(fēng)格融入一些插畫手繪元素，使得整個引導(dǎo)看起來更加活潑，增加用戶閱讀的欲望感。

Bloomthat作為一款送花軟件，對于送花時間和地點(diǎn)的選擇入口著重進(jìn)行了說明指引。它的蒙版引導(dǎo)在簡要文字說明的基礎(chǔ)上增加了輔助性質(zhì)的圖形icon，能夠幫助用戶快速理解說明的內(nèi)容，提高閱讀效率的同時也增加了用戶的好感度。

Grid Lens是一款功能比較垂直的實(shí)時多格相機(jī)。用戶拍攝完以后可以根據(jù)自己的喜好為其添加多種濾鏡效果、氣泡文字框、以及小貼紙。在蒙版引導(dǎo)中，Grid lens除了簡單地闡述拍攝方法以外同時也指出了個性化定制的入口位置。中央的標(biāo)題也友好的告知用戶彈出界面的性質(zhì)。直白的手寫文案，加入了與整體產(chǎn)品氣質(zhì)相符合的可愛圖形，再雜糅一些擬人化元素，使得整個蒙版引導(dǎo)非常生動，會讓用戶十分樂意去閱讀完你的蒙版引導(dǎo)。

2.注意頻率 把握節(jié)奏

即使用戶決定去閱讀你的蒙版引導(dǎo)，同一界面上表達(dá)太多內(nèi)容同樣也會給用戶帶來閱讀負(fù)荷，通常這時候用戶會選擇不完整閱讀甚至關(guān)閉來結(jié)束引導(dǎo)對于操作上的阻礙。同時蒙版引導(dǎo)的使用頻率也必須有所注意，盡量只針對主要功能添加說明，保證產(chǎn)品的核心功能在用戶手里使用順暢才是最關(guān)鍵的。

Srocktouch作為一款讓人眼前一亮的股票應(yīng)用，受到不少股友用戶追捧。不過他們蒙版引導(dǎo)卻做的十分糟糕。過多的標(biāo)注信息呈現(xiàn)在一個頁面上，眼花繚亂，對于用戶來講非常不友好。同時標(biāo)注引導(dǎo)也存在著很多無用信息，比如放大鏡，圓環(huán)箭頭和五角星圖形icon，作為互聯(lián)網(wǎng)的常規(guī)用戶，都會知道這些是表達(dá)搜索，刷新和喜愛的意思，根本無需標(biāo)注說明。所以當(dāng)你在設(shè)計產(chǎn)品蒙版引導(dǎo)的時候，首先要減少承載內(nèi)容的量同時也要規(guī)避對普適性操作的說明，這樣能夠降低用戶的閱讀成本，不會使得用戶對著復(fù)雜的引導(dǎo)流程產(chǎn)生恐懼感。

當(dāng)蒙版引導(dǎo)中表達(dá)的信息量較少時，單頁展示全部是一個比較推薦的做法。但如果你的產(chǎn)品有一個相對復(fù)雜的使用流程或者功能使用相對分散，那么漸進(jìn)式引導(dǎo)會是一個不錯的選擇。每次只集中于單個交互動作進(jìn)行解釋引導(dǎo)，然后迫使用戶進(jìn)行嘗試，這種教練結(jié)合的引導(dǎo)方式在考慮到用戶短期記憶力的情況下，往往能夠起到很好作用。

Flipboard作為一款聚合類閱讀應(yīng)用，被大家所熟知 。作為一款功能點(diǎn)相對分散的app，它的蒙版引導(dǎo)配合著用戶使用不同界面而出現(xiàn)，同時也鼓勵用戶即時跟隨引導(dǎo)進(jìn)行操作。

3.區(qū)分層級 融入動效

產(chǎn)品設(shè)計者必須對蒙版引導(dǎo)的視覺樣式與產(chǎn)品界面的實(shí)際元素做出足夠的差異化處理，這樣用戶才能夠很明確的做出區(qū)分。引導(dǎo)和界面相互混淆的設(shè)計，往往會使用戶感到困惑，他們會嘗試與其交互，最終因?yàn)闆]有達(dá)到使用預(yù)期而放棄使用軟件。

Hotel Tonight是一款提供當(dāng)日酒店預(yù)訂服務(wù)的產(chǎn)品應(yīng)用。在初次使用之前會彈出蒙版引導(dǎo)告訴你選擇預(yù)定日期的入口和可以連續(xù)預(yù)定多天的功能。而它的蒙版引導(dǎo)使用與整體界面色調(diào)相同的遮罩作為間隔，從整體視覺觀感上來講，很難與實(shí)際界面做出區(qū)分。同時右上角日期圖標(biāo)高亮也很容易使用戶產(chǎn)生誤解，他們會在沒有點(diǎn)擊“Ok”按鈕關(guān)閉引導(dǎo)的情況下嘗試點(diǎn)擊操作，而結(jié)果往往是用戶因?yàn)椴僮鞑豁槙?yīng)用產(chǎn)生不好的印象甚至關(guān)閉使用軟件?？梢妼γ砂嬉龑?dǎo)和實(shí)際界面做出足夠的層級區(qū)分是產(chǎn)品設(shè)計中必須注意的一個環(huán)節(jié)。

對你的蒙版引導(dǎo)添加動畫效果，不僅能夠使得用戶更加樂于閱讀你的引導(dǎo)，同時也可以減少突兀彈出給用戶帶來的使用不暢感。有些時候，動畫效果還可以幫助用戶理解界面操作使用。例如在手勢操作的引導(dǎo)界面中，帶有方向性移動的動畫效果可以讓用戶知道操作的方向，相比于文字說明，更加直觀和快捷。

寫在最后

當(dāng)你想要在你的產(chǎn)品中加入蒙版引導(dǎo)的時候，希望以上的建議指南和案例分析能夠?qū)δ愕脑O(shè)計有一定的幫助。雖然本文是關(guān)于蒙版引導(dǎo)的著重解析，但并不意味著你在新產(chǎn)品的初次體驗(yàn)設(shè)計中一定要加入這些。要時刻記住用戶才是一切的關(guān)鍵，我們的目的是設(shè)計直觀、易于使用的產(chǎn)品。在進(jìn)行任何添加設(shè)計的同時，一定要停下來想清楚是否有更好的方式代替簡化，才能夠給用戶提供一個更加愉悅的體驗(yàn)環(huán)境。

藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)