管道經(jīng)驗(yàn)法則手冊簡介

優(yōu)秀的設(shè)計(jì)師有時(shí)會(huì)無視設(shè)計(jì)法則。但當(dāng)他們這樣做的時(shí)候，通常會(huì)有一些補(bǔ)償性的措施。除非你確定你能做得那么好，否則最好還是遵守這些法則?！に固貍惪耍╓illiam Strunk）

設(shè)計(jì)師必須具備豐富的知識(shí)儲(chǔ)備，在各個(gè)行業(yè)中找尋相通的規(guī)律和事物的本源。經(jīng)過多年的沉淀，前輩們留下了大量的通用設(shè)計(jì)法則，小編匯集法則進(jìn)行講解，抓取法則在用戶界面設(shè)計(jì)中的呈現(xiàn)，幫助大家更好的理解和運(yùn)用。法則包含跨學(xué)科的專業(yè)知識(shí)，重拾那些被忽略的本源，將其融入日常設(shè)計(jì)和用戶體驗(yàn)體系中，活用法則來驗(yàn)證自己的設(shè)計(jì)過程和設(shè)計(jì)成果。

一、「導(dǎo)引手冊」

「導(dǎo)引手冊」（Advance Organizer）是指：在給出新信息之前，提供一些簡單的說明，以文字、圖畫、聲音等形式呈現(xiàn)，幫助大家更容易了解新信息?！笇?dǎo)引手冊」相比「概述」和「摘要」來說形式更為多樣。

使用「導(dǎo)引手冊」需以線性方式呈現(xiàn)。（例如在教學(xué)時(shí)，先從入門介紹開始，由淺入深，逐漸增加難度）

二、「導(dǎo)引手冊」的種類

導(dǎo)引手冊分為兩種：說明型和比較型。

下圖為移動(dòng)端導(dǎo)引手冊的結(jié)構(gòu)腦圖：

三、說明型導(dǎo)引手冊

「導(dǎo)引手冊」在移動(dòng)端應(yīng)用十分常見，用戶引導(dǎo)就是典型的說明型導(dǎo)引手冊，幫助用戶快速了解下載的應(yīng)用以及新增功能，給予用戶引導(dǎo)，減少誤操作，提高產(chǎn)品的用戶體驗(yàn)。

1. 全局型

全局型：在主功能頁面之前呈現(xiàn)，占據(jù)整個(gè)頁面，去除其他干擾用戶的因素，使用戶注意力聚焦于引導(dǎo)內(nèi)容。（包括新手導(dǎo)引、操作導(dǎo)引、閃屏導(dǎo)引、彈窗導(dǎo)引）

（1）新手導(dǎo)引

新手導(dǎo)引通常使用頁面遮罩+提示的方式，是一種阻斷型的設(shè)計(jì)，較為強(qiáng)勢的說明產(chǎn)品功能的使用方法，視覺效果直觀，可以幫助用戶快速學(xué)習(xí)核心功能或新增功能。需要注意幾個(gè)要點(diǎn)：觸發(fā)功能時(shí)進(jìn)行引導(dǎo)；突出產(chǎn)品的重點(diǎn)功能；文字盡量精簡；采用分步式展示。

京東金融使用阻斷型設(shè)計(jì)的新手導(dǎo)引強(qiáng)制用戶觀看功能說明，為了讓用戶快速了解產(chǎn)品功能，減少誤操作，加強(qiáng)了金融類產(chǎn)品在安全性維度的用戶心智。

新氧使用新手導(dǎo)引進(jìn)行說明，提前幫助用戶理解功能。對于新人用戶而言，僅通過圖標(biāo)和標(biāo)題展示（練習(xí)社）的功能入口是難以理解的。

（2）操作導(dǎo)引

引導(dǎo)用戶去完成某種指定的操作任務(wù)，常用于完善資料、認(rèn)證身份、充值、收藏、關(guān)注、簽到等功能流。另外，在頁面中加強(qiáng)視覺表現(xiàn)力，吸引用戶操作的設(shè)計(jì)也屬于操作導(dǎo)引。（如 FAB按鈕、簽到功能、icon 的動(dòng)效等）

東家APP 在用戶「登錄/注冊」過程中，通過按鈕上的文字（發(fā)送驗(yàn)證碼、下一步、完成等）變化，引導(dǎo)用戶按照步驟完善信息，從而順勢完成整個(gè)「登錄/注冊」流程。

（3）閃屏導(dǎo)引

閃屏導(dǎo)引的主要類型為：常規(guī)閃屏、廣告閃屏、活動(dòng)閃屏、節(jié)日閃屏、大版本升級閃屏。大版本升級閃屏?xí)蛔鳛檎f明型導(dǎo)引手冊，向用戶展示新功能和操作方法。

大眾點(diǎn)評在閃屏中使用文字、圖片的形式展示產(chǎn)品的新功能、視覺風(fēng)格和品牌理念。

（4）彈框?qū)б?/p>

彈框?qū)б龝?huì)打斷用戶操作，吸引用戶注意力，使用有透明度的黑色折罩（60%～80%）加上不同形式的彈窗組成。彈窗可以使用系統(tǒng)自帶的，也可以個(gè)性化定制，彈窗導(dǎo)引一般需要用戶作出選擇或繼續(xù)操作。

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

2. 局部型

局部型：采用弱交互的方式，在用戶需要引導(dǎo)的功能周圍出現(xiàn)，輕量的吸引用戶注意新的新信息。（包括對話式導(dǎo)引、功能性導(dǎo)引、通知導(dǎo)引、紅點(diǎn)導(dǎo)引、文字導(dǎo)引、Toast導(dǎo)引）

（1）對話式導(dǎo)引

對話式導(dǎo)引一般出現(xiàn)在新增功能旁，懸浮在頁面上，點(diǎn)擊屏幕或等待幾秒就會(huì)自動(dòng)消失。視覺效果明顯（或帶有動(dòng)效），增加用戶的查看欲望。相比新手引導(dǎo)，對話式引導(dǎo)的視覺重量較輕，不會(huì)阻斷用戶操作。

網(wǎng)易云音樂運(yùn)用了對話式導(dǎo)引，用戶操作/點(diǎn)擊屏幕后導(dǎo)引便隨之消失。這樣的處理方式在不打斷用戶操作的情況下，輕量化的提示減少對用戶的打擾。

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

（2）功能性導(dǎo)引

功能性導(dǎo)引比較隱蔽，一般安放在用戶觸發(fā)重要功能時(shí)，預(yù)防用戶誤操作造成的嚴(yán)重后果。

支付寶在對話框中輸入數(shù)字時(shí)會(huì)觸發(fā)轉(zhuǎn)賬按鈕（預(yù)測用戶輸入數(shù)字時(shí)會(huì)有轉(zhuǎn)賬需求）；截圖后一段時(shí)間內(nèi)點(diǎn)擊加號(hào)按鈕自動(dòng)出現(xiàn)最近的截圖（預(yù)測用戶在截圖后會(huì)將圖片發(fā)送好友的行為）。這兩個(gè)功能性導(dǎo)引主要是為了提高用戶的操作效率。

（3）通知導(dǎo)引

通知導(dǎo)引位于頁面主要內(nèi)容的頂部，通常用戶需點(diǎn)擊操作進(jìn)入新信息的內(nèi)容頁面，返回后原頁面通知導(dǎo)引消失，起到警示和提醒的作用。

秀動(dòng)的通知導(dǎo)引位于資源位和風(fēng)格推薦模塊之間，QQ、小紅書位于列表上方，其視覺樣式都有別于頁面主要內(nèi)容，并且用戶操作后會(huì)消失。

（4）紅點(diǎn)導(dǎo)引

紅點(diǎn)導(dǎo)引就是頁面中常見的小紅點(diǎn)，常用于未讀消息的提醒，可以是小紅點(diǎn)，也可以是小紅點(diǎn)+數(shù)字的形式。通過視覺聚焦的形式提高用戶點(diǎn)擊。

（5）文字導(dǎo)引

文字導(dǎo)引常出現(xiàn)在列表中，用于補(bǔ)充功能說明/活動(dòng)說明，一般會(huì)使用醒目的字體顏色或是伴隨紅點(diǎn)，引導(dǎo)用戶點(diǎn)擊。

（6）Toast導(dǎo)引

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

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

3. 混合型

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

（1）空白頁導(dǎo)引

空白頁導(dǎo)引有整個(gè)頁面和局部頁面兩種表現(xiàn)形式，同時(shí)包含跳轉(zhuǎn)按鈕，可以繼續(xù)操作。通過狀態(tài)描述、內(nèi)容描述或步驟描述等方式作為立意點(diǎn)引導(dǎo)用戶進(jìn)一步操作。

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

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

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

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

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

這一類對比導(dǎo)引常用于購物場景，用戶需要對比不同商品的具體參數(shù)，了解哪一種商品更符合自己的購買需求。當(dāng)所有數(shù)據(jù)攤開后一一對比，會(huì)使得商品之間的差異非常清晰。

汽車之家將復(fù)雜的汽車參數(shù)一一列出，因?yàn)槠噷儆诟呦M(fèi)商品，所以用戶需要仔細(xì)查看汽車配置，這一功能對用戶來說十分便利。

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

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

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

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

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

通用設(shè)計(jì)法則1：好的無障礙設(shè)計(jì)，具有四大要素

作者：Mills張聿彤

來源：微信公眾號(hào)“三分設(shè)（ID：sanfen-design）”

本文由 @三分設(shè) 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。