第壹,目的區分
根據引導頁的目的和出發點,可以分為功能介紹、說明、推廣和解決問題。壹般指南頁不會超過5頁。
1.函數介紹類
功能介紹類指南頁面主要展示產品的主要功能,讓用戶對產品的主要功能有壹個大致的了解。采用的形式多以文字、界面、插圖的方式展示。
以宜信為例,將文字與水彩插圖相結合,將文字分為兩個層次。大標題是對主要功能的總結,小文字是對其功能模塊的詳細描述或進壹步補充說明。
2.使用描述類
使用指令類指南頁面是為了提前告知用戶在使用產品的過程中可能遇到的困難、不明確的操作和被誤解的操作行為。這些指南頁大多標有箭頭和圓圈,以手繪風格為主。以蝦米音樂的向導頁為例,講解了難以找到的播放隊列和歌詞的操作方式的箭頭向導。
3.促銷類別
推廣指導頁除了介紹壹些產品功能,還想傳達產品的態度,讓用戶更好的理解產品的感受,並考慮與整個產品風格和公司形象的壹致性。如果這種引導頁不夠吸引人,用戶只會不耐煩地想跨過去。用戶會停下來觀看制作精良且有趣的指南頁面。
以淘寶旅行為例,淘寶旅行通過鮮活、生活化的場景插圖來打造壹款產品,這是壹款享受生活、跟隨妳感受的旅行應用。在妳旅行之前,它幫妳規劃好所有的旅行安排,只要妳有壹個行李箱,妳就可以出發,這符合產品理念。另壹個應用用安靜舒適的照片和簡單的文字來渲染產品的基調。
4、問題解決類
解決問題類通過描述現實生活中會遇到的問題直擊痛點,通過最終的解決方案讓用戶產生情感連接,讓用戶對產品產生好感,增加產品的粘性。比如QQ瀏覽器的引導頁設計,直接清晰的表明QQ瀏覽器解決了其他瀏覽器遇到的問題(找不到小說,花錢看小說,更新小說等。).
第二,表達方式
1,文本和界面的組合
這是最常見的啟動頁面,有簡短的文字和這個函數的界面,主要用在函數介紹類和指令類的啟動頁面。這種方式可以直接傳達產品的主要功能,但缺點是過於模塊化,看起來千篇壹律。
2.文字和插圖的結合
文字和插圖的結合也是目前常見的形式之壹。插圖比較具體,主要用場景和照片來表達文字內容。
3.動態效果和音樂
除了靜態頁面,具有動態效果的頁面也變得流行起來。以單頁動畫的形式,考慮各個組件的速度,打破原有的寂靜,讓頁面動起來。同時考慮到動態效果,可以考慮頁面切換的方式,將默認的左右滑動改為上下滑動或者幾秒鐘內自動切換到下壹頁。在瀏覽指南頁面時,可以嘗試加入壹些符合動態節奏的音樂,會是壹種比較新穎的方式。
4.視頻演示
打開後,通過播放視頻介紹壹個產品或傳達壹個想法。這種方式多見於部分生活記錄類應用,如拍照、運動類應用,傳遞青春活力和積極樂觀的生活態度。優點:直觀、動態、生活化。缺點:應用較大,視頻播放會卡頓。
第三,總結
以上已經根據導頁的用途差異和表達方式進行了分類,在具體的設計中要註意壹些原則,會讓妳的設計更有吸引力,信息傳遞的效果更好。
1,文案簡潔,突出核心。
根據愛爾蘭哲學家漢密爾頓觀察到的7 ^ 2效應,壹個人的短期記憶最少能回憶起5個單詞,最多能回憶起9個單詞,也就是7 ^ 2個單詞。所以顯示的文案要控制在9個字以內,之後用戶很容易忘記,出現記憶偏差。如果難以表達,可以輔助壹小段解釋或補充。所以在最終文案的確定上,要突出重點,盡可能刪除多余的文字。如果刪除副本後字數仍然過多,可以考慮將文本分層,通過空格或逗號或換行符的方式進行視覺優化。
準確恰當的文案也很重要,把專業術語轉化成用戶能理解的語言。尤其是對於通過照片表達主題的導頁設計來說,文案與照片的重合度直接影響情感交流的效果。
2.視覺焦點
在壹個單獨的指南頁面中,不應該有太多的信息,只陳述壹個目的,所有的元素都圍繞這個目的展開。視覺焦點包括兩部分。壹、文案的處理要註意層次,主標題和副標題要有對比;第二,指南頁面中的界面、場景、文案元素要有視覺焦點。多個視覺元素的布局采用中心擴散法,焦點的視覺面積最大,同時與擴散元素進行對比。這樣,用戶可以清楚地看到核心文案信息和文案對應的視覺表達元素。同時結合視線流動規律,從上到下,從左到右,從大到小。所以可以根據這種視線流動的規律來設計引導頁。
下圖為天貓客戶端的指南頁面。通過分析其視覺流程,發現瀏覽順序是從插圖到主文案,再到輔助文案。缺點是第壹次看到的是插畫而不是文案,插畫相對難懂,不能快速獲取頁面的主要信息。不如考慮把文案和插畫的位置對調壹下。
3.深情的
壹、復制具體化
通過特定的元素、場景來表達的文案,采用寫實、半寫實的方式來表達,有些應用會伴隨著水彩的風格。以天貓為例。天貓是壹個購物應用。在設計上,它通過對商場和商店實際場景的具體描繪,呈現了壹個輕松愉快的購物過程。
b、頁面動態效果,頁面之間交互的差異
之前表情的分類已經講了動畫和頁面切換。如果增加頁面動態效果,通過使用動態效果,表現形式會更加多樣化,包括放大、縮小、平移、滾動、彈跳等,會使指南頁面更有趣,更有重點。
除了傳統的左右滑動卡片的方式,頁面之間的切換方式還可以通過線條和箭頭來引導,通常帶有動態效果。比如網易新聞客戶端、印象筆記、美食筆記在導讀頁面的設計上都采用了線條作為主線,小圓點顯示當前的瀏覽進度,在滑動的過程中有滾動視差的效果。
4、與產品、公司基調壹致。
導讀頁面在視覺風格和氛圍的營造上要與產品和公司形象保持壹致,以便在用戶使用具體產品之前為產品定下相應的基調。產品的特性決定了指南頁的風格,無論產品是消費類、娛樂類、工具類還是其他。根據不同的產品特性,決定了指南頁是輕娛樂化,小清新,還是常規有趣。在最終的表現形式上,會完全不壹樣,無論是插圖、界面、動畫還是其他。如淘寶的娛樂,豆瓣的清新文藝,百度的工具,蟬的遊記等。,通過對比,可以發現他們在導視頁面設計上的差異。
壹方面有利於產品壹脈相承,與產品體驗壹致;另壹方面,也將進壹步強化公司形象。
以宛宛為例。宛宛是壹個面向個人用戶的即時通訊應用。它專註於不像微信那麽有趣的功能,比如聚會、閱後即焚、敲門,它也想為用戶創造不同的IM溝通方式。所以在導讀頁的設計中,通過有趣甚至有點搞笑的動作和表情來表達交流,就是這樣壹個有趣又歡樂的產品。
再比如網易彩票,導購頁面的主色調是與網易自己的紅色壹致的紅色,從而保持了公司產品體系的高度壹致。
總之:我要做好導頁的設計。在了解用戶對指南頁需求的基礎上,我愛產品,靠精致的布局,巧妙的構思,恰當的氛圍渲染,加上壹點點特色。當然,光說沒意思,但設計師還是需要在具體的設計中進行實踐,總結新的思路和方法,探索出壹套獨特的導頁設計。