2016-12-14 鶴鶴
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，?請點(diǎn)這里
當(dāng)你第一次打開一款應(yīng)用的時(shí)候常常會看到精美的引導(dǎo)頁設(shè)計(jì)，它們在你未使用產(chǎn)品之前提前告知你產(chǎn)品的主要功能與特點(diǎn)，第一次印象的好壞會極大地影響到后續(xù)的產(chǎn)品使用體驗(yàn)。因此各個(gè)公司都在努力將這幾個(gè)頁面設(shè)計(jì)好，從一開始就引人入勝。那接下來我跟大家一起來探討關(guān)于引導(dǎo)頁的設(shè)計(jì)。
一、 目的區(qū)分
根據(jù)引導(dǎo)頁的目的、出發(fā)點(diǎn)不同，可以將其分為功能介紹類、使用說明類、推廣類、問題解決類，一般引導(dǎo)頁不會超過5頁。
1.功能介紹類
功能介紹類引導(dǎo)頁主要是對產(chǎn)品的主要功能進(jìn)行展示，讓用戶對產(chǎn)品主功能有一個(gè)大致的了解。采用的形式大多以文字配合界面、插圖的方式來展現(xiàn)。
以易信為例，采用文字與水彩插圖結(jié)合的方式，文字分為2個(gè)層次，大標(biāo)題與小標(biāo)題，大標(biāo)題是對主功能的概括，小文字是對其功能模塊的詳細(xì)描述或進(jìn)一步補(bǔ)充說明。
2、使用說明類
使用說明類引導(dǎo)頁是對用戶在使用產(chǎn)品過程中可能會遇到的困難、不清楚的操作、誤解的操作行為進(jìn)行提前告知。這類引導(dǎo)頁大多采用箭頭、圓圈進(jìn)行標(biāo)識，以手繪風(fēng)格為主。以蝦米音樂的引導(dǎo)頁為例，對于較難發(fā)現(xiàn)的播放隊(duì)列、歌詞的操作方式進(jìn)行的箭頭引導(dǎo)來說明。
3、推廣類
推廣類引導(dǎo)頁除了有一些產(chǎn)品功能的介紹外，更多是想傳達(dá)產(chǎn)品的態(tài)度，讓用戶更明白這個(gè)產(chǎn)品的情懷，并考慮與整個(gè)產(chǎn)品風(fēng)格、公司形象相一致。這一類的引導(dǎo)頁如果做的不夠吸引人，用戶只會不耐煩地想快速劃過。而制作精良、有趣的引導(dǎo)頁，用戶會駐足觀賞。
以淘寶旅行為例，淘寶旅行通過清新、生活化場景的插圖營造產(chǎn)品是一款樂享生活、跟著感覺走的出行應(yīng)用，在你出行前就幫你計(jì)劃好所有的行程安排，只要一個(gè)行李箱，說走就走，與產(chǎn)品的理念相契合。而另外一款應(yīng)用，選用恬靜、安逸的照片配以簡潔的文字來渲染產(chǎn)品的基調(diào)。
4、問題解決類
問題解決類通過描述在實(shí)際生活中會遇到的問題，直擊痛點(diǎn)，通過最后的解決方案讓用戶產(chǎn)生情感上的聯(lián)系，讓用戶對產(chǎn)品產(chǎn)生好感，增加產(chǎn)品粘度。例如QQ瀏覽器的引導(dǎo)頁設(shè)計(jì)，通過形象的插圖直接明了地說明了QQ瀏覽器解決了其他瀏覽器所遇到的問題（搜不到小說、看小說花錢、小說更新需要等）。
二、表現(xiàn)方式
1、文字與界面組合
這是最常見的引導(dǎo)頁面，簡短的文字+該功能的界面，主要是運(yùn)用在功能介紹類與使用說明類引導(dǎo)頁。這種方式能較為直接地傳達(dá)產(chǎn)品的主要功能，缺點(diǎn)在與過于模式化，顯得千篇一律。
2、文字與插圖組合
文字與插圖的組合方式也是目前常見的形式之一。插圖多具象，以使用場景、照片為主，來表現(xiàn)文字內(nèi)容。
3、動態(tài)效果與音樂
除了靜態(tài)頁面外，開始流行具有動態(tài)效果的頁面。在單個(gè)頁面采用動畫的形式，考慮好各個(gè)組件的先后快慢，打破原有的沉寂，讓頁面動起來。同時(shí)結(jié)合動效可以考慮頁面間切換的方式，將默認(rèn)的左右滑動改為上下滑動或過幾秒自動切換到下一頁。在瀏覽引導(dǎo)頁的時(shí)候，可以試著加入一些與動效節(jié)奏相符合的音樂，會是一種更加新穎的方式。
4、視頻展示
在打開后通過播放視頻的方式來介紹產(chǎn)品或傳遞一種理念，這種方式多見于偏生活記錄類的應(yīng)用，如拍照、運(yùn)動類應(yīng)用，給人傳達(dá)青春活力、積極樂觀的生活態(tài)度。優(yōu)點(diǎn)：直觀，動感，生活化。缺點(diǎn)：應(yīng)用較大，視頻播放會出現(xiàn)卡頓的情況。
三、 總結(jié)
以上已經(jīng)針對引導(dǎo)頁的目的差異以及表現(xiàn)方式進(jìn)行了相關(guān)歸類，在具體的設(shè)計(jì)中還得注意一些原則,它們會讓你的設(shè)計(jì)更加吸引人，信息傳達(dá)的效果更好。
1、文案言簡意賅，突出核心。
根據(jù)愛爾蘭哲學(xué)家漢密爾頓觀察發(fā)現(xiàn)的7±2效應(yīng)，一個(gè)人的短時(shí)記憶至少能回憶出5個(gè)字，最多回憶9個(gè)，即7±2個(gè)。因此展示的文案要控制在9個(gè)字以內(nèi)，超過后用戶容易遺忘、出現(xiàn)記憶偏差。如果表達(dá)起來困難，可以輔助一小段文字進(jìn)行解釋或補(bǔ)充。因此在最終文案的確定上，要突出重點(diǎn)，多余的文字盡可能地進(jìn)行刪減。如果文案刪減后字?jǐn)?shù)還是過多，因考慮對文字進(jìn)行分層，通過空格或逗號或換行的方式進(jìn)行視覺優(yōu)化。
精準(zhǔn)貼切的文案也十分重要，將專業(yè)的術(shù)語轉(zhuǎn)換成用戶聽得懂的語言。尤其對于通過照片來表現(xiàn)主題的引導(dǎo)頁設(shè)計(jì)，文案與照片的吻合度，直接影響到情感傳達(dá)的效果。
2、視覺聚焦
在單個(gè)引導(dǎo)頁中，信息不宜過多，只闡述一個(gè)目的，所有元素都圍繞這個(gè)目的進(jìn)行展開。視覺聚焦包括兩部分，一是文案的處理，要注意層次，主標(biāo)題與副標(biāo)題要形成對比；二是引導(dǎo)頁中的界面、場景、文案具象化元素，要有一個(gè)視覺聚焦點(diǎn)，多個(gè)視覺元素的排布采用中心擴(kuò)散的方式，聚焦點(diǎn)的視覺面積最大，同時(shí)與擴(kuò)散的元素拉開對比。這樣用戶能清晰地看到核心文案信息與文案對應(yīng)的視覺表現(xiàn)元素。同時(shí)結(jié)合視線流動的規(guī)律，從上到下，從左到右，從大到小。因此可以根據(jù)這個(gè)視線流的規(guī)律來進(jìn)行引導(dǎo)頁的設(shè)計(jì)。
如下圖為天貓客戶端的引導(dǎo)頁，分析其視覺流發(fā)現(xiàn)，瀏覽的順序從插圖到主文案，再到輔助文案，缺點(diǎn)在首次看到的是插圖而不是文案，插圖相對文字理解相對困難，因此未能快速地獲取該頁的主要信息，可以考慮將文案與插圖的位置進(jìn)行互換，這樣會好一些。
3、富于情感化
A、文案具象化
通過具體的元素、場景來表現(xiàn)文案，采用寫實(shí)、半寫實(shí)的方式進(jìn)行表現(xiàn)，有些應(yīng)用還會配以水彩風(fēng)格。以天貓為例，天貓是一款購物應(yīng)用，在設(shè)計(jì)上通過商場、店鋪的實(shí)際場景的具體描繪，渲染輕松、歡快的購物過程。
B、頁面動效、頁面間交互方式的差異化
之前對于表現(xiàn)方式的歸類已經(jīng)講到了動畫及頁面切換方式，如果增加了頁面動效，利用動效，包括放大、縮小、平移、滾動、彈跳，表現(xiàn)形式更加多樣化，會讓引導(dǎo)頁更有趣，注意力更為集中。
而頁面間的切換方式除了傳統(tǒng)的卡片左右滑動的方式外，可以結(jié)合線條、箭頭等進(jìn)行引導(dǎo)，通常會配合動效。例如網(wǎng)易新聞客戶端、印象筆記·食記，它們在引導(dǎo)頁的設(shè)計(jì)上采用了線條作為主線貫穿整個(gè)引導(dǎo)頁面，小圓點(diǎn)顯示當(dāng)前的瀏覽進(jìn)度，滑動的過程中有滾動視差的效果。
4、與產(chǎn)品、公司基調(diào)相一致
引導(dǎo)頁在視覺風(fēng)格與氛圍的營造上要與該產(chǎn)品、公司形象相一致，這樣在用戶還未使用具體產(chǎn)品前就給產(chǎn)品定下一個(gè)對應(yīng)的基調(diào)。產(chǎn)品的特性決定了引導(dǎo)頁的風(fēng)格，產(chǎn)品是消費(fèi)類、娛樂類、工具類還是其他，根據(jù)不同的產(chǎn)品特性決定了引導(dǎo)頁是走輕松娛樂、小清新，還是規(guī)整、趣味性的風(fēng)格，在最終的表現(xiàn)形式上也就會有完全不同的展現(xiàn)，是插圖、界面、動畫還是其他。如淘寶的娛樂、豆瓣的清新文藝、百度的工具、蟬游記的休閑等等，通過對比就能發(fā)現(xiàn)他們在引導(dǎo)頁設(shè)計(jì)上的差異。
這樣一方面有利于產(chǎn)品一脈相承，與產(chǎn)品使用體驗(yàn)相一致；另一方面也會進(jìn)一步強(qiáng)化公司形象。
以來往為例，來往是一款針對個(gè)人用戶的及時(shí)通訊應(yīng)用，主打扎堆、閱后即焚、敲門等與微信不一樣有趣的功能，也是想給用戶創(chuàng)造不一樣的IM溝通方式。因此在引導(dǎo)頁的設(shè)計(jì)上通過趣味性、甚至有點(diǎn)搞怪的動作與表情來表現(xiàn)來往是這樣一款有趣、歡樂多的產(chǎn)品。
又如網(wǎng)易彩票，引導(dǎo)頁的主色選用了與網(wǎng)易自身的紅色相一致的紅色，在公司產(chǎn)品系統(tǒng)性上保持高度的一致性。
總之：想做好引導(dǎo)頁的設(shè)計(jì)，在理解用戶對引導(dǎo)頁需求的基礎(chǔ)上，懷揣熱愛產(chǎn)品的情懷，依靠精致的布局，巧妙的構(gòu)思，貼切的氛圍渲染，再加一點(diǎn)點(diǎn)特色。當(dāng)然光講是枯燥的，還是需要設(shè)計(jì)師在具體的設(shè)計(jì)中不斷實(shí)踐，總結(jié)出新的觀點(diǎn)與方法，探索出別具一格的引導(dǎo)頁設(shè)計(jì)。
（注：本文裝載自網(wǎng)易用戶體驗(yàn)設(shè)計(jì)中心）
藍(lán)藍(lán)設(shè)計(jì)( m.qdjdjx.cn?)是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)?、 cs界面設(shè)計(jì)?、 ipad界面設(shè)計(jì)?、 包裝設(shè)計(jì)?、 圖標(biāo)定制?、 用戶體驗(yàn) 、交互設(shè)計(jì)、?網(wǎng)站建設(shè)?、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.qdjdjx.cn
