超實(shí)用！通用設(shè)計(jì)法則解析之「導(dǎo)引手冊(cè)」

彈框?qū)б龝?huì)打斷用戶(hù)操作，吸引用戶(hù)細(xì)致力，使用有透明度的黑色折罩（60%～80%）加上不同情勢(shì)的彈窗組成。彈窗可以使用體系自帶的，也可以個(gè)性化定制，彈窗導(dǎo)引一樣平常必要用戶(hù)作出選擇或繼承操作。

西柚月經(jīng)助手、票噠噠理財(cái)、大眾點(diǎn)評(píng)的彈窗阻斷用戶(hù)當(dāng)前操作，強(qiáng)關(guān)注新內(nèi)容，并附帶筆墨、圖片、按鈕指導(dǎo)用戶(hù)繼承操作。（也可以選擇關(guān)閉）

2. 局部型

局部型：采用弱交互的體例，在用戶(hù)必要指導(dǎo)的功能四周出現(xiàn)，輕量的吸引用戶(hù)細(xì)致新的新信息。（包括對(duì)話(huà)式導(dǎo)引、功能性導(dǎo)引、關(guān)照導(dǎo)引、紅點(diǎn)導(dǎo)引、筆墨導(dǎo)引、Toast導(dǎo)引）

對(duì)話(huà)式導(dǎo)引

對(duì)話(huà)式導(dǎo)引一樣平常出如今新增功能旁，懸浮在網(wǎng)頁(yè)上，點(diǎn)擊屏幕或等待幾秒就會(huì)主動(dòng)消散。視覺(jué)結(jié)果顯明（或帶有動(dòng)效），增長(zhǎng)用戶(hù)的查看欲望。相比新手指導(dǎo)，對(duì)話(huà)式指導(dǎo)的視覺(jué)重量較輕，不會(huì)阻斷用戶(hù)操作。

網(wǎng)易云音樂(lè)運(yùn)用了對(duì)話(huà)式導(dǎo)引，用戶(hù)操作/點(diǎn)擊屏幕后導(dǎo)引便隨之消散。如許的處理體例在不打斷用戶(hù)操作的情況下，輕量化的提醒削減對(duì)用戶(hù)的打攪。

大姨媽APP 登錄網(wǎng)頁(yè)中第三方賬號(hào)登錄入口旁常常會(huì)提醒上次登錄的賬號(hào)；美柚對(duì)新用戶(hù)頭像會(huì)進(jìn)行提醒，提示可以上傳更清晰的頭像；更美用動(dòng)效（紅點(diǎn)帶有動(dòng)效）吸引用戶(hù)查看日記詳情。

功能性導(dǎo)引

功能性導(dǎo)引比較潛伏，一樣平常安放在用戶(hù)觸發(fā)緊張功能時(shí)，預(yù)防用戶(hù)誤操作造成的緊張后果。

付出寶在對(duì)話(huà)框中輸入數(shù)字時(shí)會(huì)觸發(fā)轉(zhuǎn)賬按鈕（展望用戶(hù)輸入數(shù)字時(shí)會(huì)有轉(zhuǎn)賬需求）；截圖后一段時(shí)間內(nèi)點(diǎn)擊加號(hào)按鈕主動(dòng)出現(xiàn)最近的截圖（展望用戶(hù)在截圖后會(huì)將圖片發(fā)送摯友的舉動(dòng)）。這兩個(gè)功能性導(dǎo)引重要是為了進(jìn)步用戶(hù)的操作服從。

關(guān)照導(dǎo)引

關(guān)照導(dǎo)引位于網(wǎng)頁(yè)重要內(nèi)容的頂部，通常用戶(hù)需點(diǎn)擊操作進(jìn)入新信息的內(nèi)容網(wǎng)頁(yè)，返回后原網(wǎng)頁(yè)關(guān)照導(dǎo)引消散，起到警示和提示的作用。

秀動(dòng)的關(guān)照導(dǎo)引位于資源位和風(fēng)格保舉模塊之間，QQ、小紅書(shū)位于列表上方，其視覺(jué)樣式都有別于網(wǎng)頁(yè)重要內(nèi)容，并且用戶(hù)操作后會(huì)消散。

紅點(diǎn)導(dǎo)引

紅點(diǎn)導(dǎo)引就是網(wǎng)頁(yè)中常見(jiàn)的小紅點(diǎn)，常用于未讀新聞的提示，可以是小紅點(diǎn)，也可以是小紅點(diǎn)+數(shù)字的情勢(shì)。通過(guò)視覺(jué)聚焦的情勢(shì)進(jìn)步用戶(hù)點(diǎn)擊。

筆墨導(dǎo)引

筆墨導(dǎo)引常出如今列表中，用于增補(bǔ)功能說(shuō)明/活動(dòng)說(shuō)明，一樣平常會(huì)使用奪目的字體顏色或是伴隨紅點(diǎn)，指導(dǎo)用戶(hù)點(diǎn)擊。

Toast導(dǎo)引

Toast 導(dǎo)引較輕量，不操作3秒左右消散，屬于弱交互，與傳統(tǒng) toast 不同在于可以手勢(shì)操作，指導(dǎo)用戶(hù)查看新信息。

人人視頻和優(yōu)酷視頻的 toast 導(dǎo)引是活動(dòng)時(shí)期使用的，導(dǎo)引點(diǎn)擊進(jìn)入活動(dòng)網(wǎng)頁(yè)；脈脈的 toast 導(dǎo)引用于提示新動(dòng)態(tài)，屬于常規(guī)功能。

3. 混合型

混合型：這種模式的體現(xiàn)手法既有全局型，也有局部型。（包括空白頁(yè)導(dǎo)引）

空白頁(yè)導(dǎo)引

空白頁(yè)導(dǎo)引有整個(gè)網(wǎng)頁(yè)和局部網(wǎng)頁(yè)兩種體現(xiàn)情勢(shì)，同時(shí)包含跳轉(zhuǎn)按鈕，可以繼承操作。通過(guò)狀況描述、內(nèi)容描述或步驟描述等體例作為立意點(diǎn)指導(dǎo)用戶(hù)進(jìn)一步操作。

唱吧、淘寶、餓了么的空白頁(yè)導(dǎo)引運(yùn)用的是全局型，阻斷用戶(hù)操作，分別闡述了當(dāng)前內(nèi)容狀況/使勤奮能前提說(shuō)明/后續(xù)步驟說(shuō)明，指導(dǎo)用戶(hù)前往了解并選擇是否必要開(kāi)通功能。

喜馬拉雅、小紅書(shū)、拼多多使用的是局部型空白頁(yè)導(dǎo)引，占有網(wǎng)頁(yè)一屏1/2或1/3的面積，引起用戶(hù)的強(qiáng)關(guān)注，但是不打斷用戶(hù)操作。

四、比較型導(dǎo)引手冊(cè)

比較型導(dǎo)引手冊(cè)在移動(dòng)端中的應(yīng)用比較少見(jiàn)，適用于專(zhuān)家用戶(hù)（對(duì)某些領(lǐng)域熱愛(ài)鉆研/互聯(lián)網(wǎng)從業(yè)者熱衷于研究APP）。比較型導(dǎo)引手冊(cè)的重點(diǎn)在于對(duì)比，從對(duì)比中發(fā)現(xiàn)所需的信息，了解產(chǎn)品差異，可以是幾個(gè)產(chǎn)品之間進(jìn)行對(duì)比，也可以是產(chǎn)品自身的對(duì)比。

1. 相互對(duì)比導(dǎo)引

這一類(lèi)對(duì)比導(dǎo)引常用于購(gòu)物場(chǎng)景，用戶(hù)必要對(duì)比不同商品的詳細(xì)參數(shù)，了解哪一種商品更吻合本身的購(gòu)買(mǎi)需求。當(dāng)所稀有據(jù)放開(kāi)后逐一對(duì)比，會(huì)使得商品之間的差異特別很是清晰。

汽車(chē)之家將復(fù)雜的汽車(chē)參數(shù)逐一列出，由于汽車(chē)屬于高消耗商品，所以用戶(hù)必要細(xì)心查看汽車(chē)配置，這一功能對(duì)用戶(hù)來(lái)說(shuō)十分便利。

電子產(chǎn)品的參數(shù)繁多，中關(guān)村在線(xiàn)的「VS」功能可以幫助用戶(hù)細(xì)致對(duì)比參數(shù)。

淘寶的找相似功能也是比較型導(dǎo)引，找出商品的相似款，幫助用戶(hù)對(duì)比價(jià)格和質(zhì)量的差異，省時(shí)省力的找到合適的商品。

2. 自身對(duì)比導(dǎo)引

應(yīng)用商店的「版本歷史記錄」功能，就是產(chǎn)品自身的對(duì)比，進(jìn)入功能后點(diǎn)擊更多，可以看到每個(gè)版本提拔/新增的功能點(diǎn)。互聯(lián)網(wǎng)從業(yè)者或是喜好研究各類(lèi) APP 的用戶(hù)可以更細(xì)致的了解 APP。

QQ音樂(lè)的版本歷史記錄特別很是細(xì)致，對(duì)比每一次的更新內(nèi)容，可以了解產(chǎn)品的優(yōu)化點(diǎn)、優(yōu)化速度、優(yōu)化方向等信息。

迎接關(guān)注作者的微信公眾號(hào)：「三分設(shè)」

圖片素材作者：Pedro Fernandes