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