引導(dǎo)式設(shè)計(jì)原則及應(yīng)用方式交互探索
大部分APP都會(huì)有引導(dǎo)設(shè)計(jì),以幫助新人快速上手。那你知道這些引導(dǎo)設(shè)計(jì)有哪些要求和方法嗎?這篇文章,我們看看作者整理的五種類(lèi)型,你們用的是哪一種呢?
一、設(shè)計(jì)原則
- 簡(jiǎn)潔性:內(nèi)容簡(jiǎn)潔明了,避免過(guò)多的文字和復(fù)雜的概念,重點(diǎn)突出產(chǎn)品的核心功能和關(guān)鍵操作;
- 直觀性:采用直觀的視覺(jué)設(shè)計(jì)和交互方式,如圖片、圖標(biāo)、動(dòng)畫(huà)等,讓用戶(hù)能夠快速理解引導(dǎo)信息并進(jìn)行相應(yīng)操作;
- 漸進(jìn)性:按照用戶(hù)的認(rèn)知和操作流程,逐步展開(kāi)引導(dǎo)內(nèi)容,避免信息的復(fù)雜造成過(guò)多干擾;
- 互動(dòng)性:增加互動(dòng)元素,如點(diǎn)擊、滑動(dòng)、輸入等,讓用戶(hù)積極參與到新手引導(dǎo)過(guò)程中,提高用戶(hù)的注意力和學(xué)習(xí)效果;
- 友好性:支持可跳過(guò),為有經(jīng)驗(yàn)或急于使用產(chǎn)品的用戶(hù)提供跳過(guò)新手引導(dǎo)的選項(xiàng),尊重用戶(hù)的自主選擇。
二、引導(dǎo)方式
1. 遮罩式(蒙層引導(dǎo))
1)定義
蒙層引導(dǎo)的特點(diǎn)是讓用戶(hù)將注意力聚焦到被圈定的某個(gè)特定功能上,不被其他內(nèi)容干擾;
通常出現(xiàn)在用戶(hù)首次操作時(shí)做全局引導(dǎo),也會(huì)在產(chǎn)品的各個(gè)功能點(diǎn)等待用戶(hù)的觸發(fā);根據(jù)內(nèi)容一次顯示一個(gè)或多個(gè)提示;
2)組成結(jié)構(gòu)
黑色蒙層+高亮內(nèi)容+內(nèi)容介紹(圖文/視頻)+操作引導(dǎo);
3)使用規(guī)則
分為單頁(yè)面功能引導(dǎo)和多頁(yè)面多功能引導(dǎo),單頁(yè)面引導(dǎo)全局信息量不能過(guò)多;多頁(yè)面引導(dǎo)控制在5步以?xún)?nèi),提示契機(jī)保證用戶(hù)需要的時(shí)候出現(xiàn),不做過(guò)多干擾;
4)使用場(chǎng)景
分類(lèi)場(chǎng)景:展示新產(chǎn)品/功能特色介紹(新功能上新的告知、特色重點(diǎn)功能宣傳)、產(chǎn)品/功能更新迭代(說(shuō)明界面中功能位置的改動(dòng)、服務(wù)內(nèi)容的變動(dòng)等)、操作行為引導(dǎo)(講解操作方式、體現(xiàn)特定的手勢(shì)交互劃分說(shuō)明界面的整體結(jié)構(gòu));
2. 開(kāi)屏引導(dǎo)
1)定義
引導(dǎo)頁(yè)出現(xiàn)在用戶(hù)首次打開(kāi)APP的時(shí),在用戶(hù)使用產(chǎn)品前先給用戶(hù)營(yíng)造好產(chǎn)品的基調(diào)和氛圍,宣傳產(chǎn)品功能和亮點(diǎn)或告知用戶(hù)最核心的操作方式;
基本上由3-5個(gè)頁(yè)面組成,保證能帶給用戶(hù)新鮮感和吸引他們的注意力,否則對(duì)用戶(hù)來(lái)說(shuō)反而是干擾,只會(huì)直接選擇快速劃過(guò);
2)組成結(jié)構(gòu)
文字介紹+圖片介紹+操作引導(dǎo);
3)使用規(guī)則
引導(dǎo)頁(yè)最多不超過(guò)5頁(yè);圖片介紹表達(dá)簡(jiǎn)單且符合真實(shí)的使用場(chǎng)景;盡量明確的操作引導(dǎo)查看下一步的操作,
4)使用場(chǎng)景
用戶(hù)首次啟動(dòng)APP,全局展示APP的整體功能架構(gòu)和大的功能模塊分類(lèi)
3. 彈窗引導(dǎo)
1)定義
用戶(hù)進(jìn)入使用某功能或某交互方式變化時(shí),彈出彈窗予以解釋并介紹相應(yīng)的操作,屬于即時(shí)的強(qiáng)提醒方式;
彈窗引導(dǎo)更重,阻斷行更強(qiáng),需考慮使用的場(chǎng)景和傳達(dá)內(nèi)容的重要程度;
2)組成結(jié)構(gòu)
彈窗+圖/文信息+操作按鈕;
3)使用規(guī)則
更多使用于單項(xiàng)服務(wù)的介紹;彈窗內(nèi)盡可能以圖文方式介紹,避免大片文字,內(nèi)容清晰明確,操作按鈕指代清晰;
4)使用場(chǎng)景
告知用戶(hù)有新功能上線(xiàn)(如何找到新功能、新功能如何使用,并提供直接鏈接跳轉(zhuǎn)去對(duì)應(yīng)服務(wù))、變更功能提醒(功能變更后提示去哪找到)、告知用戶(hù)一些隱藏菜單的內(nèi)容(引導(dǎo)用戶(hù)使用)、以及查看/點(diǎn)擊等交互操作變更等;
4. 氣泡/浮層引導(dǎo)
1)定義
同樣是作為即使提醒的方式,作為引導(dǎo)提示、提醒提示、解釋提示,讓用戶(hù)快速了解此服務(wù)/功能的內(nèi)容
氣泡屬于輕量級(jí)的提示方式,打斷感弱,內(nèi)容傳遞量不大但聚焦;
2)組成結(jié)構(gòu)
彈窗+圖文信息+操作按鈕;
3)使用規(guī)則
彈窗內(nèi)盡可能以圖文方式介紹,避免大篇文字,內(nèi)容明確,操作按鈕指代清晰;
4)使用場(chǎng)景
聚焦在單一功能場(chǎng)景,更貼近某個(gè)服務(wù)的引導(dǎo)和告知,告知用戶(hù)有新功能上線(xiàn)、引導(dǎo)用戶(hù)使用、或告知用戶(hù)一些隱藏菜單的內(nèi)容,當(dāng)前提示內(nèi)容較為重要,且內(nèi)容較多,建議使用彈窗。
5. 操作引導(dǎo)
1)定義
操作式引導(dǎo)會(huì)結(jié)合產(chǎn)品實(shí)際使用場(chǎng)景,一步一步地引導(dǎo)你進(jìn)行操作,鼓勵(lì)用戶(hù)參與其中
這種方式很容易讓用戶(hù)沉浸其中、快速學(xué)習(xí),并且因?yàn)橛屑皶r(shí)的操作反饋,所以用戶(hù)很容易獲得強(qiáng)烈的成就感;
2)組成結(jié)構(gòu)
內(nèi)容介紹+引導(dǎo)內(nèi)容+操作引導(dǎo)
3)使用規(guī)則
操作引導(dǎo)突出且明確指示出操作的方式,否則用戶(hù)很容易因?yàn)椴僮魇〉拇鞌「卸艞?;保持?nèi)容與操作的親密性;操作成功后及時(shí)給予反饋。
4)使用場(chǎng)景
多應(yīng)用在工具類(lèi)產(chǎn)品和游戲:比如養(yǎng)雞活動(dòng)、拼多多的種農(nóng)作物、螞蟻森林種樹(shù)等最開(kāi)始使用此功能時(shí),或者很久未進(jìn)入的用戶(hù)下次進(jìn)入;
本文由 @宮宮宮宮 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!