前言:
引導(dǎo)是帶領(lǐng)用戶更快速更愉悅地達到目標的過程吹截,能在用戶使用產(chǎn)品遇到障礙之前給予及時的幫助。在移動互聯(lián)網(wǎng)的產(chǎn)品的設(shè)計中凝危,新手引導(dǎo)的設(shè)計則是在用戶初次使用該移動產(chǎn)品時波俄,給予的一些必須性的幫助以使得用戶能快速愉悅地了解這個產(chǎn)品的功能與具體操作方式。為了完成不同的引導(dǎo)內(nèi)容和引導(dǎo)的目標蛾默,移動端的引導(dǎo)設(shè)計會根據(jù)需求進行不同的多樣化處理懦铺。根據(jù)引導(dǎo)出現(xiàn)的時機,可以分為前置型的引導(dǎo)與過程中的引導(dǎo)支鸡。
前置型的引導(dǎo):在用戶還沒有正式開始使用這個產(chǎn)品時給出的一系列幫助內(nèi)容冬念。主要的設(shè)計方式為引導(dǎo)頁的設(shè)計。過程中的引導(dǎo):在用戶使用產(chǎn)品的過程中給出的一系列幫助內(nèi)容牧挣。主要的設(shè)計方式有空白頁的內(nèi)容引導(dǎo)急前,loading等等待狀態(tài)中的引導(dǎo),拆分包袱的逐步引導(dǎo)瀑构,巧設(shè)默認值的功能引導(dǎo)裆针,tips引導(dǎo),浮點引導(dǎo)寺晌,遮罩聚焦式引導(dǎo)世吨,觸發(fā)式引導(dǎo),任務(wù)演練式引導(dǎo)等呻征。
由于篇幅所限耘婚,本篇博文主要針對前置型引導(dǎo)的引導(dǎo)頁的設(shè)計詳細論述,而對于過程中的引導(dǎo)會在后續(xù)博文中奉上陆赋。
引導(dǎo)頁的設(shè)計探究
引導(dǎo)頁作為前置型引導(dǎo)沐祷,必然具備前置型引導(dǎo)的特征嚷闭。用戶是在使用前看到引導(dǎo)頁的內(nèi)容,此時用戶對這個產(chǎn)品的了解并不多戈轿,對于如產(chǎn)品的功能/頁面布局/具體使用等還沒有建立起完整的認知。所以引導(dǎo)頁更適合闡述產(chǎn)品的概況內(nèi)容(如具有產(chǎn)品的概念阵子,產(chǎn)品的核心功能思杯,具有競爭力的功能點或用戶痛點,以及會影響到初次使用的操作方式的內(nèi)容)挠进,建立起用戶對產(chǎn)品的大致認知色乾;而不太適用于闡述過于細節(jié)的產(chǎn)品內(nèi)容,因為此時用戶還無法進行相應(yīng)的信息匹配领突,細節(jié)內(nèi)容會不容易理解暖璧。
雖然引導(dǎo)頁有上述的限制,但是由于它具備的很多優(yōu)點君旦,讓它作為一種非常常見的方式來使用澎办。
具體的優(yōu)點:
1)篇幅設(shè)置可自由設(shè)定,在一定范圍內(nèi)可多可少金砍;
2)全屏或幾乎全屏的信息呈現(xiàn)的方式局蚀,使得信息的可承載量多;
3)內(nèi)容的編排自由恕稠,設(shè)計師可以自由發(fā)揮琅绅。
所以引導(dǎo)頁是一種在設(shè)計上較靈活自由的方式。但是在實際的使用中鹅巍,我們還是常常會發(fā)現(xiàn)設(shè)計的效果并不容易達不到預(yù)期千扶。用戶常常不會仔細瀏覽這些引導(dǎo)的信息,對于引導(dǎo)的內(nèi)容信息的接收程度會打折扣骆捧,很難全部吸收澎羞;還有不少情況下用戶會跳過引導(dǎo),忽略引導(dǎo)想提供的幫助信息敛苇。那么煤痕,如何做能讓我們設(shè)計的引導(dǎo)才能引起用戶的興趣,讓他們花費一點精力去吸收引導(dǎo)的內(nèi)容信息接谨,這需要一些技巧摆碉。
最核心的技巧有4點:精簡與合理使用? & ?細致編排 ?& ?有效的注意力 ?& ?構(gòu)建特色。
精簡與合理使用
在引導(dǎo)頁設(shè)計的泛濫時代脓豪,絕大多數(shù)的APP在首次使用中都會設(shè)計幾頁引導(dǎo)內(nèi)容巷帝。
設(shè)計師需要把控引導(dǎo)的內(nèi)容。只做必要的引導(dǎo)頁內(nèi)容扫夜。沒必要的引導(dǎo)內(nèi)容會增加信息的冗余性楞泼,沖淡真正需要用戶關(guān)注的信息的注意力與精力驰徊。
在設(shè)計之前,我們要對用戶初次使用該APP時的心理與使用行為進行分析堕阔,并不是所有情況都適合使用引導(dǎo)頁的棍厂,要對不適合的情況say no。
適合與否的依據(jù)主要是在真實的使用場景中超陆,用戶是希望能對這個產(chǎn)品有個大致的了解牺弹,還是希望快速啟動產(chǎn)品立即使用,在使用的過程中再慢慢學(xué)習(xí)时呀。如果用戶是希望快速啟動產(chǎn)品使用中出現(xiàn)過于的引導(dǎo)會引起用戶的方案张漂。
具體較適用的情況:
1.對于一個新概念的新產(chǎn)品,用戶需要對這些新的概念或內(nèi)容有所理解才能更好的使用產(chǎn)品谨娜。(下圖為Vida的引導(dǎo)截圖)
2.競爭力的或有吸引力的內(nèi)容點的介紹航攒。(下圖為支付寶和糯米團購的引導(dǎo)截圖)
細致編排
當確定了引導(dǎo)的內(nèi)容后,我們需要對引導(dǎo)的內(nèi)容進行細致的編排趴梢。具體的編排可以分為平鋪直敘述和講故事的方式漠畜。平鋪直敘是將一個一個內(nèi)容點羅列,之間沒有建立什么聯(lián)系坞靶。而講故事是將內(nèi)容串聯(lián)起來變成一個整體的故事盆驹。
1.講故事的方式,使引導(dǎo)具有情景性
講建立與用戶使用情景匹配的場景滩愁,讓用戶能建立一種熟悉的感受躯喇,能讓用戶對引導(dǎo)的功能點感同身受。
串聯(lián)的故事一般而言都是多頁的形式硝枉。一步拋出一個需告知的點廉丽,循序漸進的解說。故事可以只圍繞一個功能點來敘述妻味,也可以將多個功能點串聯(lián)起來變成一個故事正压。形成一個完整的故事。
由于每次一個告知點责球,多會采用聚焦的設(shè)計手法焦履,把視覺注意力吸引到每個告知點上。
講故事的主要目的是希望構(gòu)建用戶與產(chǎn)品之間的聯(lián)系雏逾。讓用戶感覺到產(chǎn)品與自己是有關(guān)系的嘉裤,現(xiàn)在所說的內(nèi)容是與我相關(guān)的,我需要花費精力來關(guān)注一下栖博。如果完全建立不起關(guān)聯(lián)屑宠,很容易讓用戶忽略。
微信4.0的引導(dǎo)就是一個編故事建立關(guān)系的好例子仇让。在微信在推出4.0版本的時候典奉,新增加了類似Path和Instagram一樣的相冊功能躺翻,并且可以把相冊分享到朋友圈。這個功能的加入拓展了之間僅是溝通聊天工具的產(chǎn)品定義卫玖。在4.0版本的新功能引導(dǎo)中公你,它非常成功的講訴了一個關(guān)于相冊功能的故事,并且在設(shè)計內(nèi)容時非常注意建立聯(lián)系假瞬。在故事闡述中它一直強調(diào)用戶可以怎么樣陕靠,讓用戶能明確感覺到與自己的關(guān)系。
2.講故事的主要手法——故事可以是以情動人笨触,痛點渲染懦傍,角色榜樣類比等方式
A. 動之以情
營造出具有濃烈感情色彩的場景雹舀,喚起用戶心底的情緒芦劣,讓用戶產(chǎn)生對產(chǎn)品的共鳴。當產(chǎn)品附加了感情的元素说榆,產(chǎn)品就會讓用戶形成一種情感上的聯(lián)系虚吟,用戶對產(chǎn)品的好感也會增加。
打感情牌的手法比較適用于具有社交性的產(chǎn)品引導(dǎo)签财。
在設(shè)計中不論是背景圖片還是文案都致力于感情氣氛的營造串慰。(下圖為人人網(wǎng)的引導(dǎo)截圖)
B. 痛點渲染
建立一個用戶在實際生活中會遇到的類似的不便的場景,讓用戶能感受到共鳴唱蒸,喚起用戶對所述功能的需要感邦鲫。然后給出該產(chǎn)品能給出的解決方案,可以讓用戶感覺神汹。
戳痛點的手法比較適用于實用的工具性的功能引導(dǎo)庆捺。在設(shè)計中文案:可采用痛點式文案,或者是非常具有顫動性的文案屁魏。
C. 角色榜樣類比
通過建立用戶熟悉的人物角色滔以,來描述其他人會用這個產(chǎn)品來做什么,這種方式可以拓寬對產(chǎn)品功能使用的場景與多種其他可能性氓拼。啟發(fā)用戶對這個產(chǎn)品的想象你画。建立的熟悉的人物形象會讓描述變得具體而形象,會從而引發(fā)當前使用的用戶形成一種類比的心理桃漾。
這種方式適用于對產(chǎn)品整體功能的介紹坏匪,對于新老產(chǎn)品的功能介紹都適用: ?1)老產(chǎn)品用此方法可以啟發(fā)用戶拓寬對既有功能使用的其他的可能性,拓寬使用場景撬统。2)新產(chǎn)品用此方法可以讓用戶對這個產(chǎn)品的整體功能有更多的認識剥槐。
設(shè)計要點:1)用戶角色渲染得讓人覺得可信,能讓人很容易聯(lián)想到自己也會遇到類似情況宪摧。2)文案:可采用比較具有親和力粒竖,質(zhì)樸的文案颅崩。
(下圖為印象筆記的引導(dǎo)截圖)
D. 范例吸引
將引導(dǎo)的內(nèi)容融入真實的界面中,通過合理選擇呈現(xiàn)的內(nèi)容來讓用戶可以通過界面上的信息來感知產(chǎn)品所具有的功能蕊苗。這種引導(dǎo)形式可以很好的在第一時間向用戶展示產(chǎn)品形態(tài)沿后,建立用戶的興趣;范例能讓用戶預(yù)知在使用產(chǎn)品時界面會是什么樣子朽砰,能讓用戶對實際界面有充分的了解尖滚,并且能讓用戶看到產(chǎn)品完整的功能與形態(tài)。但是這種方式是一種注重界面呈現(xiàn)瞧柔,用視覺效果去吸引用戶的方式漆弄,所以對產(chǎn)品本身有一定的要求。
適用條件:1)界面本身的設(shè)計需具有一定的創(chuàng)新性/美觀性/吸引力造锅,這樣融入到真實界面中的引導(dǎo)才能具有吸引力撼唾。2)產(chǎn)品本身若需要通過用戶的經(jīng)營才能慢慢達到一個完整的形態(tài),那么這種真實界面的范例的方式能勾引用戶增加對產(chǎn)品的使用的興趣哥蔚,并且能讓用戶對產(chǎn)品功能理解得比較充分與完善倒谷。
設(shè)計要點:1)引導(dǎo)中要呈現(xiàn)的內(nèi)容需仔細挑選,能把產(chǎn)品的典型功能與特征充分展示糙箍。2)文案最好是比較親切的渤愁。
(下圖為Path的引導(dǎo)截圖)
E.平鋪直敘的方式
如果內(nèi)容點無法串聯(lián),只能一一羅列深夯,那么在設(shè)計中我們可以——
1.對每個內(nèi)容建立場景抖格。
2.放置具有吸引人的或具有競爭力的內(nèi)容。
3.根據(jù)記憶的效果的原則合理排序咕晋。將最需要用戶關(guān)注的內(nèi)容放在最前面雹拄。(記憶的效果:最前面的內(nèi)容記憶效果>最后面的內(nèi)容記憶效果>中間部分的內(nèi)容的記憶效果)
4.精簡引導(dǎo)的內(nèi)容。不要放置太多的引導(dǎo)頁捡需。
5.對于每頁的設(shè)計可以參考下面的有效的注意力里的設(shè)計技巧办桨。
有效的注意力
注意力是記憶力的基礎(chǔ),記憶力是注意力的結(jié)果站辉。沒有良好的注意力就沒有良好的記憶力呢撞,良好的記憶力是建立在良好的注意力基礎(chǔ)上的。
我們所設(shè)計的引導(dǎo)頁也需要能吸引用戶的注意力饰剥,讓用戶能夠花費精力來閱讀我們想告知他們的信息殊霞,以達到一種有效的注意力。具體可以怎么做呢汰蓉?
我們可以從不同的內(nèi)容與設(shè)計方式上提高效果绷蹲,以下一一闡述。
1.聚焦
界面中不要有過多的視覺焦點,容易分散用戶的注意力祝钢,導(dǎo)致用戶不知道該看那里比规。
當界面中的信息聚焦在某一點上時,用戶能快速準確定位到需要閱讀的信息內(nèi)容上拦英,達到消化信息的目的蜒什。
聚焦的設(shè)計手法有很多種,如通過光影的方式疤估,將亮光的部分打在最需要用戶關(guān)注的信息上灾常;虛化背景的方式,突出前面的信息內(nèi)容铃拇;放大鏡方式钞瀑,將需要用戶關(guān)注的部分作為放大突出。當然除了所舉案例中的常見手法慷荔,還可以運用其他的方式來聚焦雕什,只要可以達到效果即可。
信息的聚焦需要設(shè)計師對信息的內(nèi)容進行取舍拧廊,盡量剔除不需要的內(nèi)容监徘。
若精簡后依然內(nèi)容較多晋修,那么可以通過拉開信息的層次來使得信息可以聚焦吧碾。在設(shè)計中盡量將內(nèi)容整體化,形成幾個大塊的信息墓卦,不要過于瑣碎【氪海瑣碎的內(nèi)容不利于信息的獲取。由于用戶對信息的認知是有整體到細節(jié)落剪,用戶在閱讀內(nèi)容的時候睁本,更習(xí)慣先將內(nèi)容先抽象成一個整體,然后再仔細閱讀整體中的細節(jié)內(nèi)容忠怖。所以我們的設(shè)計的過程中需要讓用戶能夠很快地抽象出整體的信息呢堰。
圖例為反例。案例中的設(shè)計讓頁面中形成了過于多的發(fā)散點凡泣,用戶的閱讀時難以梳理成整塊的信息枉疼,增加了信息獲取的難度。
2.優(yōu)化圖片所傳達的信息
人類對于圖片信息的閱讀能力是遠大于對于文字信息的理解的鞋拟。圖片可以更加直觀地讓用戶感知到所要傳遞的信息骂维。
在不同的圖片中,人們對人臉贺纲,美女航闺,笑容,具有動感的照片更容易引起用戶的注意。
同樣為美膚的功能引導(dǎo)潦刃,左側(cè)的設(shè)計不需要借助文字就可以讓用戶理解可以美膚侮措,而右側(cè)的設(shè)計若只看圖是無法理解的。左側(cè)的引導(dǎo)設(shè)計比右側(cè)的引導(dǎo)設(shè)計更加直觀好記憶乖杠。
3.除了靜態(tài)的視覺畫面萝毛,我們還可以增加用戶對于引導(dǎo)內(nèi)容的注意力。
現(xiàn)在的引導(dǎo)頁的設(shè)計多為靜態(tài)的視覺頁面滑黔。人類對于動態(tài)內(nèi)容的注意力> 對于靜態(tài)內(nèi)容的注意力笆包。所以除了靜態(tài)圖片的方式,我們完全可以通過適當增加動態(tài)內(nèi)容來吸引用戶的注意力略荡。
圖例為QQ水印相機和Flava的引導(dǎo)頁庵佣。
QQ水印相機的引導(dǎo)頁就是使用動態(tài)注意力,的每頁用一個圖釘釘著一副照片汛兜,而照片會已圖釘為圓心輕微地左右擺動巴粪。Flava同樣,中間的圖片的部分都是動態(tài)的演示粥谬。這2個設(shè)計都非常容易讓用戶對動態(tài)部分的內(nèi)容引起注意肛根,從而閱讀相關(guān)的內(nèi)容。
當然在動態(tài)內(nèi)容中漏策,我們也要注意視覺焦點的問題派哲,不能讓界面中的動態(tài)焦點太多。一般1個動態(tài)焦點會比較好掺喻。
當然除了已有的這些案例芭届,我們也可以思考,除了動態(tài)的內(nèi)容感耙,我們是否可以激發(fā)其他的感官來吸引用戶的注意力褂乍。比如可以通過增加一些音效。目前還沒有找到這樣的案例即硼,但是個人感覺也是可以嘗試的逃片。
4.改變屏與屏之間切換的交互方式
現(xiàn)在的引導(dǎo)頁的切屏交互方式基本都為左右滑動,我們也可以通過改變既有的交互方式增加用戶的注意力只酥。畢竟用戶對新的東西的好奇心還是有的褥实。但是不要盲目的為了改變而改變嫂便。交互的方式應(yīng)該要與設(shè)計的內(nèi)容相匹配逛裤。改變的交互方式要簡單易學(xué),在界面的設(shè)計中要有使用的隱喻線索涉兽,讓這種新的交互方式變得自然而容易叫胖,否則會引起用戶的反感草冈。
圖例為feedly的引導(dǎo)頁。改變了常用的左右滑動的方式,使用了向上滑動的方式怎棱。每張引導(dǎo)頁想一張卡片哩俭,閱讀過的引導(dǎo)頁向上滑動即被滑出屏幕。界面視覺對于新的交互方式有明確的引導(dǎo)拳恋,不會增加操作的難度凡资,會讓用戶感覺到是一家具有創(chuàng)新性的公司。
5.能有效傳達的文案
A. 字數(shù)的控制
從心理學(xué)的角度谬运,人類對于文案在短時間內(nèi)能記憶住的字符不超過9個隙赁。(這個是人類記憶的特性,人類對于內(nèi)容的短時記憶的容量有限梆暖,一般為7 ± 2項目伞访,一般為7 ± 2,即5 ~ 9個項目轰驳,這也就是平常我們所說的記憶廣度厚掷。)超過9個字符,用戶是很難記憶的且容易受到干擾而發(fā)生遺忘级解。文案的設(shè)計上應(yīng)該是挑重點的說冒黑,無意義的不必要的冗余文字應(yīng)果斷剔除。
如果精簡后依然超出極限字符數(shù)勤哗,那么可以對文案內(nèi)容分層次抡爹。
通過排版的方式,突出需要用戶記憶的字符俺陋,弱化其他字符豁延。一般而言突出的字符為2-7個是比較容易記憶的昙篙。
通過斷句的方式腊状,將長的文案變?yōu)槎痰淖訂卧@樣可以擴大短時記憶的容量苔可。斷句可以通過打標點缴挖,留空格,斷行的方式來實現(xiàn)焚辅。
(這個也是運用人類記憶的特性映屋,如果超過短時記憶的容量或插入其他活動,短時記憶容易受到干擾而發(fā)生遺忘同蜻。為擴大短時記憶的容量棚点,可采用組塊的方法,即將小的記憶單位組合成大的單位來記憶湾蔓,這時較大的記憶單位就叫做塊瘫析。)
B. 文案的內(nèi)容與行文風(fēng)格
文案的內(nèi)容可以融入時下熱點或話題,行文風(fēng)格上也可以具有時代的特征。讓用戶能感受到產(chǎn)品能緊跟時代贬循,貼近當前的社會生活咸包,比一般的文案容易引起用戶的注意度。
構(gòu)建特色
很多的引導(dǎo)頁在設(shè)計上同質(zhì)化問題嚴重杖虾,極度相似的設(shè)計手法烂瘫、設(shè)計風(fēng)格、排版風(fēng)格奇适、相似的文案內(nèi)容坟比、讓用戶很難記憶或引起關(guān)注。構(gòu)建產(chǎn)品引導(dǎo)頁的特色是區(qū)別于其他產(chǎn)品的好方式嚷往,特色可以讓引導(dǎo)頁脫穎而出温算。
那么如何構(gòu)建特色呢?
1.從設(shè)計方式上進行特色構(gòu)建
我們可以從引導(dǎo)頁面內(nèi)容的不同組成元素來尋找特色的構(gòu)建點间影。
背景圖片的攝影角度或風(fēng)格/后期處理/色調(diào)注竿;版式編排的設(shè)計風(fēng)格/版式布局/配色方案;文案的行文風(fēng)格魂贬;多屏切換方式也可以考慮
構(gòu)建特色并不需要對所有內(nèi)容的元素都進行巩割,即使只在一個內(nèi)容點上進行特色構(gòu)建也是可以的,但是需要做到的是這個點上的特色要非常明顯付燥,用戶容易感知到宣谈。
2.系列化引導(dǎo)設(shè)計的特色構(gòu)建
對于一些不斷更新迭代的產(chǎn)品,往往在重要版本升級的時候都會給出必要的新的引導(dǎo)的內(nèi)容键科。所以我們除了從單次引導(dǎo)內(nèi)容思考進行特色構(gòu)建以外闻丑,我們還可以把眼光拉遠一些,從一個系列化引導(dǎo)設(shè)計的角度去構(gòu)建特色勋颖。系列化的引導(dǎo)需要從一開始進行單次引導(dǎo)時就加以思考嗦嗡,為系列化構(gòu)思一個主題。下圖中的新浪微博的引導(dǎo)頁的設(shè)計就是一種系列化引導(dǎo)設(shè)計的特色構(gòu)建饭玲。它選用季節(jié)為主題侥祭,根據(jù)所處的季節(jié)的特征進行內(nèi)容的運營。這種方式可以讓用戶對多次引導(dǎo)的內(nèi)容感覺到一種新的整體化的特色茄厘,貼近當前生活的方式也讓產(chǎn)品感覺具有時新性矮冬,易于接受。
最后
當然次哈,引導(dǎo)并不是解決設(shè)計問題的方法胎署,引導(dǎo)只能作為一種點到為止的輔助方式。
文章中所總結(jié)的5個要點是我在實際的工作中的一些設(shè)計感悟與整理窑滞,其中必有一些較為主觀和不足的地方琼牧,歡迎大家拍磚與交流径筏。本次主要整理了一下前置引導(dǎo)的一些設(shè)計技巧,后續(xù)我還會繼續(xù)整理出過程中的引導(dǎo)的設(shè)計技巧的內(nèi)容障陶。感謝大家的關(guān)注滋恬。
來源:騰訊ISUX