阿贾克斯对热刺 www.utsvcz.com.cn

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

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

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

點贊
收藏 2
繼續閱讀相關文章

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
評論 收藏