當(dāng)你第一次打開(kāi)一款應(yīng)用的時(shí)候常常會(huì)看到精美的引導(dǎo)頁(yè)設(shè)計(jì)蜕窿，它們?cè)谀阄词褂卯a(chǎn)品之前提前告知你產(chǎn)品的主要功能與特點(diǎn)，第一次印象的好壞會(huì)極大地影響到后續(xù)的產(chǎn)品使用體驗(yàn)监右。因此各個(gè)公司都在努力將這幾個(gè)頁(yè)面設(shè)計(jì)好埂伦，從一開(kāi)始就引人入勝顿涣。那接下來(lái)我跟大家一起來(lái)探討關(guān)于引導(dǎo)頁(yè)的設(shè)計(jì)漩符。
一一喘、目的區(qū)分
根據(jù)引導(dǎo)頁(yè)的目的、出發(fā)點(diǎn)不同嗜暴，可以將其分為功能介紹類(lèi)凸克、使用說(shuō)明類(lèi)、推廣類(lèi)闷沥、問(wèn)題解決類(lèi)萎战，一般引導(dǎo)頁(yè)不會(huì)超過(guò)5頁(yè)。
1.功能介紹類(lèi)
功能介紹類(lèi)引導(dǎo)頁(yè)主要是對(duì)產(chǎn)品的主要功能進(jìn)行展示舆逃，讓用戶對(duì)產(chǎn)品主功能有一個(gè)大致的了解蚂维。采用的形式大多以文字配合界面、插圖的方式來(lái)展現(xiàn)路狮。
以易信為例虫啥，采用文字與水彩插圖結(jié)合的方式，文字分為2個(gè)層次奄妨，大標(biāo)題與小標(biāo)題孝鹊，大標(biāo)題是對(duì)主功能的概括，小文字是對(duì)其功能模塊的詳細(xì)描述或進(jìn)一步補(bǔ)充說(shuō)明展蒂。
2、使用說(shuō)明類(lèi)
使用說(shuō)明類(lèi)引導(dǎo)頁(yè)是對(duì)用戶在使用產(chǎn)品過(guò)程中可能會(huì)遇到的困難苔咪、不清楚的操作锰悼、誤解的操作行為進(jìn)行提前告知。這類(lèi)引導(dǎo)頁(yè)大多采用箭頭团赏、圓圈進(jìn)行標(biāo)識(shí)箕般，以手繪風(fēng)格為主。以蝦米音樂(lè)的引導(dǎo)頁(yè)為例舔清，對(duì)于較難發(fā)現(xiàn)的播放隊(duì)列丝里、歌詞的操作方式進(jìn)行的箭頭引導(dǎo)來(lái)說(shuō)明曲初。
3、推廣類(lèi)
推廣類(lèi)引導(dǎo)頁(yè)除了有一些產(chǎn)品功能的介紹外杯聚，更多是想傳達(dá)產(chǎn)品的態(tài)度臼婆，讓用戶更明白這個(gè)產(chǎn)品的情懷，并考慮與整個(gè)產(chǎn)品風(fēng)格幌绍、公司形象相一致颁褂。這一類(lèi)的引導(dǎo)頁(yè)如果做的不夠吸引人，用戶只會(huì)不耐煩地想快速劃過(guò)傀广。而制作精良颁独、有趣的引導(dǎo)頁(yè)，用戶會(huì)駐足觀賞伪冰。
以淘寶旅行為例誓酒，淘寶旅行通過(guò)清新、生活化場(chǎng)景的插圖營(yíng)造產(chǎn)品是一款樂(lè)享生活贮聂、跟著感覺(jué)走的出行應(yīng)用靠柑，在你出行前就幫你計(jì)劃好所有的行程安排，只要一個(gè)行李箱寂汇，說(shuō)走就走病往，與產(chǎn)品的理念相契合。而另外一款應(yīng)用骄瓣，選用恬靜停巷、安逸的照片配以簡(jiǎn)潔的文字來(lái)渲染產(chǎn)品的基調(diào)。
4榕栏、問(wèn)題解決類(lèi)
問(wèn)題解決類(lèi)通過(guò)描述在實(shí)際生活中會(huì)遇到的問(wèn)題畔勤，直擊痛點(diǎn)，通過(guò)最后的解決方案讓用戶產(chǎn)生情感上的聯(lián)系扒磁，讓用戶對(duì)產(chǎn)品產(chǎn)生好感庆揪，增加產(chǎn)品粘度。例如QQ瀏覽器的引導(dǎo)頁(yè)設(shè)計(jì)妨托，通過(guò)形象的插圖直接明了地說(shuō)明了QQ瀏覽器解決了其他瀏覽器所遇到的問(wèn)題（搜不到小說(shuō)缸榛、看小說(shuō)花錢(qián)、小說(shuō)更新需要等）兰伤。
二内颗、表現(xiàn)方式
1、文字與界面組合
這是最常見(jiàn)的引導(dǎo)頁(yè)面敦腔，簡(jiǎn)短的文字+該功能的界面均澳，主要是運(yùn)用在功能介紹類(lèi)與使用說(shuō)明類(lèi)引導(dǎo)頁(yè)。這種方式能較為直接地傳達(dá)產(chǎn)品的主要功能，缺點(diǎn)在與過(guò)于模式化找前，顯得千篇一律糟袁。
2、文字與插圖組合
文字與插圖的組合方式也是目前常見(jiàn)的形式之一躺盛。插圖多具象项戴，以使用場(chǎng)景、照片為主颗品，來(lái)表現(xiàn)文字內(nèi)容肯尺。
3、動(dòng)態(tài)效果與音樂(lè)
除了靜態(tài)頁(yè)面外躯枢，開(kāi)始流行具有動(dòng)態(tài)效果的頁(yè)面则吟。在單個(gè)頁(yè)面采用動(dòng)畫(huà)的形式，考慮好各個(gè)組件的先后快慢锄蹂，打破原有的沉寂氓仲，讓頁(yè)面動(dòng)起來(lái)。同時(shí)結(jié)合動(dòng)效可以考慮頁(yè)面間切換的方式得糜，將默認(rèn)的左右滑動(dòng)改為上下滑動(dòng)或過(guò)幾秒自動(dòng)切換到下一頁(yè)敬扛。在瀏覽引導(dǎo)頁(yè)的時(shí)候，可以試著加入一些與動(dòng)效節(jié)奏相符合的音樂(lè)朝抖，會(huì)是一種更加新穎的方式啥箭。
4、視頻展示
在打開(kāi)后通過(guò)播放視頻的方式來(lái)介紹產(chǎn)品或傳遞一種理念治宣，這種方式多見(jiàn)于偏生活記錄類(lèi)的應(yīng)用急侥，如拍照、運(yùn)動(dòng)類(lèi)應(yīng)用侮邀，給人傳達(dá)青春活力坏怪、積極樂(lè)觀的生活態(tài)度。優(yōu)點(diǎn)：直觀绊茧，動(dòng)感铝宵，生活化。缺點(diǎn)：應(yīng)用較大华畏，視頻播放會(huì)出現(xiàn)卡頓的情況鹏秋。
三、總結(jié)
以上已經(jīng)針對(duì)引導(dǎo)頁(yè)的目的差異以及表現(xiàn)方式進(jìn)行了相關(guān)歸類(lèi)亡笑，在具體的設(shè)計(jì)中還得注意一些原則,它們會(huì)讓你的設(shè)計(jì)更加吸引人拼岳，信息傳達(dá)的效果更好。
1况芒、文案言簡(jiǎn)意賅，突出核心。
根據(jù)愛(ài)爾蘭哲學(xué)家漢密爾頓觀察發(fā)現(xiàn)的7±2效應(yīng)绝骚，一個(gè)人的短時(shí)記憶至少能回憶出5個(gè)字耐版，最多回憶9個(gè)，即7±2個(gè)压汪。因此展示的文案要控制在9個(gè)字以內(nèi)粪牲，超過(guò)后用戶容易遺忘、出現(xiàn)記憶偏差止剖。如果表達(dá)起來(lái)困難腺阳，可以輔助一小段文字進(jìn)行解釋或補(bǔ)充。因此在最終文案的確定上穿香，要突出重點(diǎn)亭引，多余的文字盡可能地進(jìn)行刪減。如果文案刪減后字?jǐn)?shù)還是過(guò)多皮获，因考慮對(duì)文字進(jìn)行分層焙蚓，通過(guò)空格或逗號(hào)或換行的方式進(jìn)行視覺(jué)優(yōu)化。
精準(zhǔn)貼切的文案也十分重要洒宝，將專(zhuān)業(yè)的術(shù)語(yǔ)轉(zhuǎn)換成用戶聽(tīng)得懂的語(yǔ)言购公。尤其對(duì)于通過(guò)照片來(lái)表現(xiàn)主題的引導(dǎo)頁(yè)設(shè)計(jì)，文案與照片的吻合度雁歌，直接影響到情感傳達(dá)的效果宏浩。
2、視覺(jué)聚焦
在單個(gè)引導(dǎo)頁(yè)中靠瞎，信息不宜過(guò)多比庄，只闡述一個(gè)目的，所有元素都圍繞這個(gè)目的進(jìn)行展開(kāi)较坛。視覺(jué)聚焦包括兩部分印蔗，一是文案的處理，要注意層次丑勤，主標(biāo)題與副標(biāo)題要形成對(duì)比华嘹；二是引導(dǎo)頁(yè)中的界面、場(chǎng)景法竞、文案具象化元素耙厚，要有一個(gè)視覺(jué)聚焦點(diǎn)，多個(gè)視覺(jué)元素的排布采用中心擴(kuò)散的方式岔霸，聚焦點(diǎn)的視覺(jué)面積最大薛躬，同時(shí)與擴(kuò)散的元素拉開(kāi)對(duì)比。這樣用戶能清晰地看到核心文案信息與文案對(duì)應(yīng)的視覺(jué)表現(xiàn)元素呆细。同時(shí)結(jié)合視線流動(dòng)的規(guī)律型宝，從上到下，從左到右，從大到小趴酣。因此可以根據(jù)這個(gè)視線流的規(guī)律來(lái)進(jìn)行引導(dǎo)頁(yè)的設(shè)計(jì)梨树。
如下圖為天貓客戶端的引導(dǎo)頁(yè)，分析其視覺(jué)流發(fā)現(xiàn)岖寞，瀏覽的順序從插圖到主文案抡四，再到輔助文案，缺點(diǎn)在首次看到的是插圖而不是文案仗谆，插圖相對(duì)文字理解相對(duì)困難指巡，因此未能快速地獲取該頁(yè)的主要信息，可以考慮將文案與插圖的位置進(jìn)行互換隶垮，這樣會(huì)好一些藻雪。
3、富于情感化
A岁疼、文案具象化
通過(guò)具體的元素阔涉、場(chǎng)景來(lái)表現(xiàn)文案，采用寫(xiě)實(shí)捷绒、半寫(xiě)實(shí)的方式進(jìn)行表現(xiàn)瑰排，有些應(yīng)用還會(huì)配以水彩風(fēng)格。以天貓為例暖侨，天貓是一款購(gòu)物應(yīng)用椭住，在設(shè)計(jì)上通過(guò)商場(chǎng)、店鋪的實(shí)際場(chǎng)景的具體描繪字逗，渲染輕松京郑、歡快的購(gòu)物過(guò)程。
B葫掉、頁(yè)面動(dòng)效些举、頁(yè)面間交互方式的差異化
之前對(duì)于表現(xiàn)方式的歸類(lèi)已經(jīng)講到了動(dòng)畫(huà)及頁(yè)面切換方式，如果增加了頁(yè)面動(dòng)效俭厚，利用動(dòng)效户魏，包括放大、縮小、平移、滾動(dòng)柔滔、彈跳，表現(xiàn)形式更加多樣化令哟，會(huì)讓引導(dǎo)頁(yè)更有趣，注意力更為集中。
而頁(yè)面間的切換方式除了傳統(tǒng)的卡片左右滑動(dòng)的方式外，可以結(jié)合線條星立、箭頭等進(jìn)行引導(dǎo)爽茴，通常會(huì)配合動(dòng)效。例如網(wǎng)易新聞客戶端贞铣、印象筆記·食記闹啦，它們?cè)谝龑?dǎo)頁(yè)的設(shè)計(jì)上采用了線條作為主線貫穿整個(gè)引導(dǎo)頁(yè)面，小圓點(diǎn)顯示當(dāng)前的瀏覽進(jìn)度辕坝，滑動(dòng)的過(guò)程中有滾動(dòng)視差的效果。
4荐健、與產(chǎn)品酱畅、公司基調(diào)相一致
引導(dǎo)頁(yè)在視覺(jué)風(fēng)格與氛圍的營(yíng)造上要與該產(chǎn)品、公司形象相一致江场，這樣在用戶還未使用具體產(chǎn)品前就給產(chǎn)品定下一個(gè)對(duì)應(yīng)的基調(diào)纺酸。產(chǎn)品的特性決定了引導(dǎo)頁(yè)的風(fēng)格，產(chǎn)品是消費(fèi)類(lèi)址否、娛樂(lè)類(lèi)餐蔬、工具類(lèi)還是其他，根據(jù)不同的產(chǎn)品特性決定了引導(dǎo)頁(yè)是走輕松娛樂(lè)佑附、小清新樊诺，還是規(guī)整、趣味性的風(fēng)格音同，在最終的表現(xiàn)形式上也就會(huì)有完全不同的展現(xiàn)词爬，是插圖、界面权均、動(dòng)畫(huà)還是其他顿膨。如淘寶的娛樂(lè)、豆瓣的清新文藝叽赊、百度的工具恋沃、蟬游記的休閑等等，通過(guò)對(duì)比就能發(fā)現(xiàn)他們?cè)谝龑?dǎo)頁(yè)設(shè)計(jì)上的差異必指。
這樣一方面有利于產(chǎn)品一脈相承囊咏，與產(chǎn)品使用體驗(yàn)相一致；另一方面也會(huì)進(jìn)一步強(qiáng)化公司形象取劫。
以來(lái)往為例匆笤，來(lái)往是一款針對(duì)個(gè)人用戶的及時(shí)通訊應(yīng)用，主打扎堆谱邪、閱后即焚炮捧、敲門(mén)等與微信不一樣有趣的功能，也是想給用戶創(chuàng)造不一樣的IM溝通方式惦银。因此在引導(dǎo)頁(yè)的設(shè)計(jì)上通過(guò)趣味性咆课、甚至有點(diǎn)搞怪的動(dòng)作與表情來(lái)表現(xiàn)來(lái)往是這樣一款有趣末誓、歡樂(lè)多的產(chǎn)品。
又如網(wǎng)易彩票书蚪，引導(dǎo)頁(yè)的主色選用了與網(wǎng)易自身的紅色相一致的紅色喇澡，在公司產(chǎn)品系統(tǒng)性上保持高度的一致性。
總之：想做好引導(dǎo)頁(yè)的設(shè)計(jì)殊校，在理解用戶對(duì)引導(dǎo)頁(yè)需求的基礎(chǔ)上晴玖，懷揣熱愛(ài)產(chǎn)品的情懷，依靠精致的布局为流，巧妙的構(gòu)思呕屎，貼切的氛圍渲染，再加一點(diǎn)點(diǎn)特色敬察。當(dāng)然光講是枯燥的秀睛，還是需要設(shè)計(jì)師在具體的設(shè)計(jì)中不斷實(shí)踐，總結(jié)出新的觀點(diǎn)與方法莲祸，探索出別具一格的引導(dǎo)頁(yè)設(shè)計(jì)蹂安。
文章來(lái)源：網(wǎng)易用戶體驗(yàn)中心
