超實用!通用設計法則解析之「導引手冊」 - 優設網 - UISDC

超實用!通用設計法則解析之「導引手冊」

2018/07/08 6545評論區

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

優秀的設計師有時會無視設計法則。但當他們這樣做的時候,通?;嵊幸恍┎鉤バ緣拇朧?。除非你確定你能做得那么好,否則最好還是遵守這些法則?!に固羋卓耍╓illiam Strunk)

一、「導引手冊」

「導引手冊」(Advance Organizer)是指:在給出新信息之前,提供一些簡單的說明,以文字、圖畫、聲音等形式呈現,幫助大家更容易了解新信息?!傅家植帷瓜啾取父攀觥購汀剛估此敵問礁嘌?。

使用「導引手冊」需以線性方式呈現。(例如在教學時,先從入門介紹開始,由淺入深,逐漸增加難度)

二、「導引手冊」的種類

導引手冊分為兩種:說明型和比較型。

說明型導引手冊——適用于對于新信息一無所知或不了解的教授對象(例如下載一個新的 APP,用戶打開界面會有新功能提示)

比較型導引手冊——適用于對于有相關知識背景的教授對象(例如購買車輛時,有經驗的買家會從專業性網站或 APP 上查找資料對比車輛性能配置)

下圖為移動端導引手冊的結構腦圖:

三、說明型導引手冊

「導引手冊」在移動端應用十分常見,用戶引導就是典型的說明型導引手冊,幫助用戶快速了解下載的應用以及新增功能,給予用戶引導,減少誤操作,提高產品的用戶體驗。

1.?全局型

全局型:在主功能頁面之前呈現,占據整個頁面,去除其他干擾用戶的因素,使用戶注意力聚焦于引導內容。(包括新手導引、操作導引、閃屏導引、彈窗導引)

新手導引

新手導引通常使用頁面遮罩+提示的方式,是一種阻斷型的設計,較為強勢的說明產品功能的使用方法,視覺效果直觀,可以幫助用戶快速學習核心功能或新增功能。需要注意幾個要點:觸發功能時進行引導;突出產品的重點功能;文字盡量精簡;采用分步式展示。

京東金融使用阻斷型設計的新手導引強制用戶觀看功能說明,為了讓用戶快速了解產品功能,減少誤操作,加強了金融類產品在安全性維度的用戶心智。

新氧使用新手導引進行說明,提前幫助用戶理解功能。對于新人用戶而言,僅通過圖標和標題展示(練習社)的功能入口是難以理解的。

操作導引

引導用戶去完成某種指定的操作任務,常用于完善資料、認證身份、充值、收藏、關注、簽到等功能流。另外,在頁面中加強視覺表現力,吸引用戶操作的設計也屬于操作導引。(如 FAB按鈕、簽到功能、icon 的動效等)

東家APP 在用戶「登錄/注冊」過程中,通過按鈕上的文字(發送驗證碼、下一步、完成等)變化,引導用戶按照步驟完善信息,從而順勢完成整個「登錄/注冊」流程。

閃屏導引

閃屏導引的主要類型為:常規閃屏、廣告閃屏、活動閃屏、節日閃屏、大版本升級閃屏。大版本升級閃屏會被作為說明型導引手冊,向用戶展示新功能和操作方法。

大眾點評在閃屏中使用文字、圖片的形式展示產品的新功能、視覺風格和品牌理念。

彈框導引

彈框導引會打斷用戶操作,吸引用戶注意力,使用有透明度的黑色折罩(60%~80%)加上不同形式的彈窗組成。彈窗可以使用系統自帶的,也可以個性化定制,彈窗導引一般需要用戶作出選擇或繼續操作。

西柚月經助手、票噠噠理財、大眾點評的彈窗阻斷用戶當前操作,強關注新內容,并附帶文字、圖片、按鈕引導用戶繼續操作。(也可以選擇關閉)

2.?局部型

局部型:采用弱交互的方式,在用戶需要引導的功能周圍出現,輕量的吸引用戶注意新的新信息。(包括對話式導引、功能性導引、通知導引、紅點導引、文字導引、Toast導引)

對話式導引

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

網易云音樂運用了對話式導引,用戶操作/點擊屏幕后導引便隨之消失。這樣的處理方式在不打斷用戶操作的情況下,輕量化的提示減少對用戶的打擾。

大姨媽APP 登錄頁面中第三方賬號登錄入口旁常?;崽崾舊洗蔚鍬嫉惱撕?;美柚對新用戶頭像會進行提示,提醒可以上傳更清晰的頭像;更美用動效(紅點帶有動效)吸引用戶查看日記詳情。

功能性導引

功能性導引比較隱蔽,一般安放在用戶觸發重要功能時,預防用戶誤操作造成的嚴重后果。

支付寶在對話框中輸入數字時會觸發轉賬按鈕(預測用戶輸入數字時會有轉賬需求);截圖后一段時間內點擊加號按鈕自動出現最近的截圖(預測用戶在截圖后會將圖片發送好友的行為)。這兩個功能性導引主要是為了提高用戶的操作效率。

通知導引

通知導引位于頁面主要內容的頂部,通常用戶需點擊操作進入新信息的內容頁面,返回后原頁面通知導引消失,起到警示和提醒的作用。

秀動的通知導引位于資源位和風格推薦??櫓?,QQ、小紅書位于列表上方,其視覺樣式都有別于頁面主要內容,并且用戶操作后會消失。

紅點導引

紅點導引就是頁面中常見的小紅點,常用于未讀消息的提醒,可以是小紅點,也可以是小紅點+數字的形式。通過視覺聚焦的形式提高用戶點擊。

文字導引

文字導引常出現在列表中,用于補充功能說明/活動說明,一般會使用醒目的字體顏色或是伴隨紅點,引導用戶點擊。

Toast導引

Toast 導引較輕量,不操作3秒左右消失,屬于弱交互,與傳統 toast 不同在于可以手勢操作,引導用戶查看新信息。

人人視頻和優酷視頻的 toast 導引是活動時期使用的,導引點擊進入活動頁面;脈脈的 toast 導引用于提醒新動態,屬于常規功能。

3.?混合型

混合型:這種模式的表現手法既有全局型,也有局部型。(包括空白頁導引)

空白頁導引

空白頁導引有整個頁面和局部頁面兩種表現形式,同時包含跳轉按鈕,可以繼續操作。通過狀態描述、內容描述或步驟描述等方式作為立意點引導用戶進一步操作。

唱吧、淘寶、餓了么的空白頁導引運用的是全局型,阻斷用戶操作,分別闡述了當前內容狀態/使用功能前提說明/后續步驟說明,引導用戶前往了解并選擇是否需要開通功能。

喜馬拉雅、小紅書、拼多多使用的是局部型空白頁導引,占據頁面一屏1/2或1/3的面積,引起用戶的強關注,但是不打斷用戶操作。

四、比較型導引手冊

比較型導引手冊在移動端中的應用比較少見,適用于專家用戶(對某些領域熱愛鉆研/互聯網從業者熱衷于研究APP)。比較型導引手冊的重點在于對比,從對比中發現所需的信息,了解產品差異,可以是幾個產品之間進行對比,也可以是產品自身的對比。

1. 相互對比導引

這一類對比導引常用于購物場景,用戶需要對比不同商品的具體參數,了解哪一種商品更符合自己的購買需求。當所有數據攤開后一一對比,會使得商品之間的差異非常清晰。

汽車之家將復雜的汽車參數一一列出,因為汽車屬于高消費商品,所以用戶需要仔細查看汽車配置,這一功能對用戶來說十分便利。

電子產品的參數繁多,中關村在線的「VS」功能可以幫助用戶詳細對比參數。

淘寶的找相似功能也是比較型導引,找出商品的相似款,幫助用戶對比價格和質量的差異,省時省力的找到合適的商品。

2. 自身對比導引

應用商店的「版本歷史記錄」功能,就是產品自身的對比,進入功能后點擊更多,可以看到每個版本提升/新增的功能點?;チ右嫡呋蚴竅舶芯扛骼?APP 的用戶可以更詳細的了解 APP。

QQ音樂的版本歷史記錄非常詳細,對比每一次的更新內容,可以了解產品的優化點、優化速度、優化方向等信息。

歡迎關注作者的微信公眾號:「三分設」

圖片素材作者:Pedro Fernandes

「如何做好用戶引導!這里有幾篇經典好文」

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/design-rule-guide-book

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 優設專訪 設計師干貨 優設大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 設計流程 AI教程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規范 用戶體驗設計 海報設計 設計趨勢 平面設計 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里