超實(shí)用!通用設(shè)計(jì)法則解析之「導(dǎo)引手冊」
設(shè)計(jì)師必須具備雄厚的知識貯備,在各個(gè)行業(yè)中找尋雷同的規(guī)律和事物的本源。經(jīng)過多年的沉淀,前輩們留下了大量的通用設(shè)計(jì)法則,小編匯集法則進(jìn)行講解,抓取法則在用戶界面設(shè)計(jì)中的呈現(xiàn),幫助大家更好的理解和運(yùn)用。法則包含跨學(xué)科的專業(yè)知識,重拾那些被忽略的本源,將其融入日常設(shè)計(jì)和用戶體驗(yàn)系統(tǒng)中,活用法則來驗(yàn)證本身的設(shè)計(jì)過程和設(shè)計(jì)成果。
良好的設(shè)計(jì)師偶然會(huì)漠視設(shè)計(jì)法則。但當(dāng)他們?nèi)缭S做的時(shí)候,通常會(huì)有一些補(bǔ)償性的措施。除非你確定你能做得那么好,否則最好照舊遵守這些法則?!に固貍惪耍╓illiam Strunk)
一、「導(dǎo)引手冊」
「導(dǎo)引手冊」(Advance Organizer)是指:在給出新信息之前,提供一些簡單的說明,以筆墨、圖畫、聲音等情勢呈現(xiàn),幫助大家更容易了解新信息?!笇?dǎo)引手冊」相比「概述」和「擇要」來說情勢更為多樣。
使用「導(dǎo)引手冊」需以線性體例呈現(xiàn)。(例如在教學(xué)時(shí),先從入門介紹開始,由淺入深,漸漸增長難度)
二、「導(dǎo)引手冊」的種類
導(dǎo)引手冊分為兩種:說明型和比較型。
說明型導(dǎo)引手冊——適用于對于新信息一竅不通或不了解的教授對象(例如下載一個(gè)新的 APP,用戶打開界面會(huì)有新功能提醒)
比較型導(dǎo)引手冊——適用于對于有相干知識背景的教授對象(例如購買車輛時(shí),有經(jīng)驗(yàn)的買家會(huì)從專業(yè)性網(wǎng)站或 APP 上查找資料對比車輛性能配置)
下圖為移動(dòng)端導(dǎo)引手冊的結(jié)構(gòu)腦圖:
三、說明型導(dǎo)引手冊
「導(dǎo)引手冊」在移動(dòng)端應(yīng)用十分常見,用戶指導(dǎo)就是典型的說明型導(dǎo)引手冊,幫助用戶快速了解下載的應(yīng)用以及新增功能,給予用戶指導(dǎo),削減誤操作,進(jìn)步產(chǎn)品的用戶體驗(yàn)。
1. 全局型
全局型:在主功能網(wǎng)頁之前呈現(xiàn),占有整個(gè)網(wǎng)頁,去除其他干擾用戶的因素,使用戶細(xì)致力聚焦于指導(dǎo)內(nèi)容。(包括新手導(dǎo)引、操作導(dǎo)引、閃屏導(dǎo)引、彈窗導(dǎo)引)
新手導(dǎo)引
新手導(dǎo)引通常使用網(wǎng)頁遮罩+提醒的體例,是一種阻斷型的設(shè)計(jì),較為強(qiáng)勢的說明產(chǎn)品功能的使用方法,視覺結(jié)果直觀,可以幫助用戶快速學(xué)習(xí)核心功能或新增功能。必要細(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)和題目展示(演習(xí)社)的功能入口是難以理解的。
操作導(dǎo)引
指導(dǎo)用戶去完成某種指定的操作義務(wù),常用于完美資料、認(rèn)證身份、充值、珍藏、關(guān)注、簽到等功能流。另外,在網(wǎng)頁中增強(qiáng)視覺體現(xiàn)力,吸引用戶操作的設(shè)計(jì)也屬于操作導(dǎo)引。(如 FAB按鈕、簽到功能、icon 的動(dòng)效等)
東家APP 在用戶「登錄/注冊」過程中,通過按鈕上的筆墨(發(fā)送驗(yàn)證碼、下一步、完成等)轉(zhuǎn)變,指導(dǎo)用戶按照步驟完美信息,從而順勢完成整個(gè)「登錄/注冊」流程。
閃屏導(dǎo)引
閃屏導(dǎo)引的重要類型為:常規(guī)閃屏、廣告閃屏、活動(dòng)閃屏、節(jié)日閃屏、大版本升級閃屏。大版本升級閃屏?xí)蛔鳛檎f明型導(dǎo)引手冊,向用戶展示新功能和操作方法。
大眾點(diǎn)評在閃屏中使用筆墨、圖片的情勢展示產(chǎn)品的新功能、視覺風(fēng)格和品牌理念。
彈框?qū)б?/strong>
彈框?qū)б龝?huì)打斷用戶操作,吸引用戶細(xì)致力,使用有透明度的黑色折罩(60%~80%)加上不同情勢的彈窗組成。彈窗可以使用體系自帶的,也可以個(gè)性化定制,彈窗導(dǎo)引一樣平常必要用戶作出選擇或繼承操作。
西柚月經(jīng)助手、票噠噠理財(cái)、大眾點(diǎn)評的彈窗阻斷用戶當(dāng)前操作,強(qiáng)關(guān)注新內(nèi)容,并附帶筆墨、圖片、按鈕指導(dǎo)用戶繼承操作。(也可以選擇關(guān)閉)
2. 局部型
局部型:采用弱交互的體例,在用戶必要指導(dǎo)的功能四周出現(xiàn),輕量的吸引用戶細(xì)致新的新信息。(包括對話式導(dǎo)引、功能性導(dǎo)引、關(guān)照導(dǎo)引、紅點(diǎn)導(dǎo)引、筆墨導(dǎo)引、Toast導(dǎo)引)
對話式導(dǎo)引
對話式導(dǎo)引一樣平常出如今新增功能旁,懸浮在網(wǎng)頁上,點(diǎn)擊屏幕或等待幾秒就會(huì)主動(dòng)消散。視覺結(jié)果顯明(或帶有動(dòng)效),增長用戶的查看欲望。相比新手指導(dǎo),對話式指導(dǎo)的視覺重量較輕,不會(huì)阻斷用戶操作。
網(wǎng)易云音樂運(yùn)用了對話式導(dǎo)引,用戶操作/點(diǎn)擊屏幕后導(dǎo)引便隨之消散。如許的處理體例在不打斷用戶操作的情況下,輕量化的提醒削減對用戶的打攪。
大姨媽APP 登錄網(wǎng)頁中第三方賬號登錄入口旁常常會(huì)提醒上次登錄的賬號;美柚對新用戶頭像會(huì)進(jìn)行提醒,提示可以上傳更清晰的頭像;更美用動(dòng)效(紅點(diǎn)帶有動(dòng)效)吸引用戶查看日記詳情。
功能性導(dǎo)引
功能性導(dǎo)引比較潛伏,一樣平常安放在用戶觸發(fā)緊張功能時(shí),預(yù)防用戶誤操作造成的緊張后果。
付出寶在對話框中輸入數(shù)字時(shí)會(huì)觸發(fā)轉(zhuǎn)賬按鈕(展望用戶輸入數(shù)字時(shí)會(huì)有轉(zhuǎn)賬需求);截圖后一段時(shí)間內(nèi)點(diǎn)擊加號按鈕主動(dòng)出現(xiàn)最近的截圖(展望用戶在截圖后會(huì)將圖片發(fā)送摯友的舉動(dòng))。這兩個(gè)功能性導(dǎo)引重要是為了進(jìn)步用戶的操作服從。
關(guān)照導(dǎo)引
關(guān)照導(dǎo)引位于網(wǎng)頁重要內(nèi)容的頂部,通常用戶需點(diǎn)擊操作進(jìn)入新信息的內(nèi)容網(wǎng)頁,返回后原網(wǎng)頁關(guān)照導(dǎo)引消散,起到警示和提示的作用。
秀動(dòng)的關(guān)照導(dǎo)引位于資源位和風(fēng)格保舉模塊之間,QQ、小紅書位于列表上方,其視覺樣式都有別于網(wǎng)頁重要內(nèi)容,并且用戶操作后會(huì)消散。
紅點(diǎn)導(dǎo)引
紅點(diǎn)導(dǎo)引就是網(wǎng)頁中常見的小紅點(diǎn),常用于未讀新聞的提示,可以是小紅點(diǎn),也可以是小紅點(diǎn)+數(shù)字的情勢。通過視覺聚焦的情勢進(jìn)步用戶點(diǎn)擊。
筆墨導(dǎo)引
筆墨導(dǎo)引常出如今列表中,用于增補(bǔ)功能說明/活動(dòng)說明,一樣平常會(huì)使用奪目的字體顏色或是伴隨紅點(diǎn),指導(dǎo)用戶點(diǎn)擊。
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)網(wǎng)頁;脈脈的 toast 導(dǎo)引用于提示新動(dòng)態(tài),屬于常規(guī)功能。
3. 混合型
混合型:這種模式的體現(xiàn)手法既有全局型,也有局部型。(包括空白頁導(dǎo)引)
空白頁導(dǎo)引
空白頁導(dǎo)引有整個(gè)網(wǎng)頁和局部網(wǎng)頁兩種體現(xiàn)情勢,同時(shí)包含跳轉(zhuǎn)按鈕,可以繼承操作。通過狀況描述、內(nèi)容描述或步驟描述等體例作為立意點(diǎn)指導(dǎo)用戶進(jìn)一步操作。
唱吧、淘寶、餓了么的空白頁導(dǎo)引運(yùn)用的是全局型,阻斷用戶操作,分別闡述了當(dāng)前內(nèi)容狀況/使勤奮能前提說明/后續(xù)步驟說明,指導(dǎo)用戶前往了解并選擇是否必要開通功能。
喜馬拉雅、小紅書、拼多多使用的是局部型空白頁導(dǎo)引,占有網(wǎng)頁一屏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)引常用于購物場景,用戶必要對比不同商品的詳細(xì)參數(shù),了解哪一種商品更吻合本身的購買需求。當(dāng)所稀有據(jù)放開后逐一對比,會(huì)使得商品之間的差異特別很是清晰。
汽車之家將復(fù)雜的汽車參數(shù)逐一列出,由于汽車屬于高消耗商品,所以用戶必要細(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)化方向等信息。
迎接關(guān)注作者的微信公眾號:「三分設(shè)」
圖片素材作者:Pedro Fernandes
本文地址:http://pkvc.cn/tutorial/di4166.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏