起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識通用設計法則2：導引手冊
優秀的設計師有時會無視設計法則。但當他們這樣做的時候，通常會有一些補償性的措施。除非你確定你能做得那么好，否則最好還是遵守這些法則?！に固貍惪耍╓illiam Strunk）
設計師必須具備豐富的知識儲備，在各個行業中找尋相通的規律和事物的本源。經過多年的沉淀，前輩們留下了大量的通用設計法則，小編匯集法則進行講解，抓取法則在用戶界面設計中的呈現，幫助大家更好的理解和運用。法則包含跨學科的專業知識，重拾那些被忽略的本源，將其融入日常設計和用戶體驗體系中，活用法則來驗證自己的設計過程和設計成果。
一、「導引手冊」
「導引手冊」（Advance Organizer）是指：在給出新信息之前，提供一些簡單的說明，以文字、圖畫、聲音等形式呈現，幫助大家更容易了解新信息?！笇б謨浴瓜啾取父攀觥购汀刚箒碚f形式更為多樣。
使用「導引手冊」需以線性方式呈現。（例如在教學時，先從入門介紹開始，由淺入深，逐漸增加難度）
二、「導引手冊」的種類
導引手冊分為兩種：說明型和比較型。
- 說明型導引手冊——適用于對于新信息一無所知或不了解的教授對象（例如下載一個新的 APP，用戶打開界面會有新功能提示）
- 比較型導引手冊——適用于對于有相關知識背景的教授對象（例如購買車輛時，有經驗的買家會從專業性網站或 APP 上查找資料對比車輛性能配置）
下圖為移動端導引手冊的結構腦圖：
三、說明型導引手冊
「導引手冊」在移動端應用十分常見，用戶引導就是典型的說明型導引手冊，幫助用戶快速了解下載的應用以及新增功能，給予用戶引導，減少誤操作，提高產品的用戶體驗。
1.?全局型
全局型：在主功能頁面之前呈現，占據整個頁面，去除其他干擾用戶的因素，使用戶注意力聚焦于引導內容。（包括新手導引、操作導引、閃屏導引、彈窗導引）
（1）新手導引
新手導引通常使用頁面遮罩+提示的方式，是一種阻斷型的設計，較為強勢的說明產品功能的使用方法，視覺效果直觀，可以幫助用戶快速學習核心功能或新增功能。需要注意幾個要點：觸發功能時進行引導；突出產品的重點功能；文字盡量精簡；采用分步式展示。
京東金融使用阻斷型設計的新手導引強制用戶觀看功能說明，為了讓用戶快速了解產品功能，減少誤操作，加強了金融類產品在安全性維度的用戶心智。
新氧使用新手導引進行說明，提前幫助用戶理解功能。對于新人用戶而言，僅通過圖標和標題展示（練習社）的功能入口是難以理解的。
（2）操作導引
引導用戶去完成某種指定的操作任務，常用于完善資料、認證身份、充值、收藏、關注、簽到等功能流。另外，在頁面中加強視覺表現力，吸引用戶操作的設計也屬于操作導引。（如 FAB按鈕、簽到功能、icon 的動效等）
東家APP 在用戶「登錄/注冊」過程中，通過按鈕上的文字（發送驗證碼、下一步、完成等）變化，引導用戶按照步驟完善信息，從而順勢完成整個「登錄/注冊」流程。
（3）閃屏導引
閃屏導引的主要類型為：常規閃屏、廣告閃屏、活動閃屏、節日閃屏、大版本升級閃屏。大版本升級閃屏會被作為說明型導引手冊，向用戶展示新功能和操作方法。
大眾點評在閃屏中使用文字、圖片的形式展示產品的新功能、視覺風格和品牌理念。
（4）彈框導引
彈框導引會打斷用戶操作，吸引用戶注意力，使用有透明度的黑色折罩（60%～80%）加上不同形式的彈窗組成。彈窗可以使用系統自帶的，也可以個性化定制，彈窗導引一般需要用戶作出選擇或繼續操作。
西柚月經助手、票噠噠理財、大眾點評的彈窗阻斷用戶當前操作，強關注新內容，并附帶文字、圖片、按鈕引導用戶繼續操作。（也可以選擇關閉）
2.?局部型
局部型：采用弱交互的方式，在用戶需要引導的功能周圍出現，輕量的吸引用戶注意新的新信息。（包括對話式導引、功能性導引、通知導引、紅點導引、文字導引、Toast導引）
（1）對話式導引
對話式導引一般出現在新增功能旁，懸浮在頁面上，點擊屏幕或等待幾秒就會自動消失。視覺效果明顯（或帶有動效），增加用戶的查看欲望。相比新手引導，對話式引導的視覺重量較輕，不會阻斷用戶操作。
網易云音樂運用了對話式導引，用戶操作/點擊屏幕后導引便隨之消失。這樣的處理方式在不打斷用戶操作的情況下，輕量化的提示減少對用戶的打擾。
大姨媽APP 登錄頁面中第三方賬號登錄入口旁常常會提示上次登錄的賬號；美柚對新用戶頭像會進行提示，提醒可以上傳更清晰的頭像；更美用動效（紅點帶有動效）吸引用戶查看日記詳情。
（2）功能性導引
功能性導引比較隱蔽，一般安放在用戶觸發重要功能時，預防用戶誤操作造成的嚴重后果。
支付寶在對話框中輸入數字時會觸發轉賬按鈕（預測用戶輸入數字時會有轉賬需求）；截圖后一段時間內點擊加號按鈕自動出現最近的截圖（預測用戶在截圖后會將圖片發送好友的行為）。這兩個功能性導引主要是為了提高用戶的操作效率。
（3）通知導引
通知導引位于頁面主要內容的頂部，通常用戶需點擊操作進入新信息的內容頁面，返回后原頁面通知導引消失，起到警示和提醒的作用。
秀動的通知導引位于資源位和風格推薦模塊之間，QQ、小紅書位于列表上方，其視覺樣式都有別于頁面主要內容，并且用戶操作后會消失。
（4）紅點導引
紅點導引就是頁面中常見的小紅點，常用于未讀消息的提醒，可以是小紅點，也可以是小紅點+數字的形式。通過視覺聚焦的形式提高用戶點擊。
（5）文字導引
文字導引常出現在列表中，用于補充功能說明/活動說明，一般會使用醒目的字體顏色或是伴隨紅點，引導用戶點擊。
（6）Toast導引
Toast 導引較輕量，不操作3秒左右消失，屬于弱交互，與傳統 toast 不同在于可以手勢操作，引導用戶查看新信息。
人人視頻和優酷視頻的 toast 導引是活動時期使用的，導引點擊進入活動頁面；脈脈的 toast 導引用于提醒新動態，屬于常規功能。
3.?混合型
混合型：這種模式的表現手法既有全局型，也有局部型。（包括空白頁導引）
（1）空白頁導引
空白頁導引有整個頁面和局部頁面兩種表現形式，同時包含跳轉按鈕，可以繼續操作。通過狀態描述、內容描述或步驟描述等方式作為立意點引導用戶進一步操作。
唱吧、淘寶、餓了么的空白頁導引運用的是全局型，阻斷用戶操作，分別闡述了當前內容狀態/使用功能前提說明/后續步驟說明，引導用戶前往了解并選擇是否需要開通功能。
喜馬拉雅、小紅書、拼多多使用的是局部型空白頁導引，占據頁面一屏1/2或1/3的面積，引起用戶的強關注，但是不打斷用戶操作。
四、比較型導引手冊
比較型導引手冊在移動端中的應用比較少見，適用于專家用戶（對某些領域熱愛鉆研/互聯網從業者熱衷于研究APP）。比較型導引手冊的重點在于對比，從對比中發現所需的信息，了解產品差異，可以是幾個產品之間進行對比，也可以是產品自身的對比。
1. 相互對比導引
這一類對比導引常用于購物場景，用戶需要對比不同商品的具體參數，了解哪一種商品更符合自己的購買需求。當所有數據攤開后一一對比，會使得商品之間的差異非常清晰。
汽車之家將復雜的汽車參數一一列出，因為汽車屬于高消費商品，所以用戶需要仔細查看汽車配置，這一功能對用戶來說十分便利。
電子產品的參數繁多，中關村在線的「VS」功能可以幫助用戶詳細對比參數。
淘寶的找相似功能也是比較型導引，找出商品的相似款，幫助用戶對比價格和質量的差異，省時省力的找到合適的商品。
2. 自身對比導引
應用商店的「版本歷史記錄」功能，就是產品自身的對比，進入功能后點擊更多，可以看到每個版本提升/新增的功能點?；ヂ摼W從業者或是喜愛研究各類 APP 的用戶可以更詳細的了解 APP。
QQ音樂的版本歷史記錄非常詳細，對比每一次的更新內容，可以了解產品的優化點、優化速度、優化方向等信息。
相關閱讀
作者：Mills張聿彤
來源：微信公眾號“三分設（ID：sanfen-design）”
本文由 @三分設 授權發布于人人都是產品經理，未經作者許可，禁止轉載。
謝謝分享
謝謝分享