當您次開啟一款應用的時候常常會看到精美的引導頁設計,它們在您未使用產品之前提前告知您產品的主要功能與特點,次印象的好壞會極大地影響到後續的產品使用體驗。因此各個公司都在努力將這幾個頁面設計好,從一開始就引人入勝。那接下來我跟大家一起來探討關於引導頁的設計。
1 、文案言簡意賅,突出核心。
根據愛爾蘭哲學家漢密爾頓觀察發現的 7±2 效應,一個人的短時記憶至少能回憶出 5 個字,多回憶 9 個,即 7±2 個。因此展示的文案要控制在 9 個字以內,超過後多使用者容易遺忘、出現記憶偏差。如果表達起來困難,可以輔助一小段文字進行解釋或補充。因此在終文案的確定上,要突出重點,多餘的文字儘可能地進行刪減。如果文案刪減後字數還是過多,因考慮對文字進行分層,透過空格或逗號或換行的方式進行視覺最佳化。
精準貼切的文案也十分重要,將的術語轉換成多使用者聽得懂的語言。尤其對於透過照片來表現主題的引導頁設計,文案與照片的吻合度,直接影響到情感傳達的效果。
產品設計 引導頁設計 多使用者體驗
2 、視覺聚焦
在單個引導頁中,資訊不宜過多,只闡述一個目的,所有元素都圍繞這個目的進行展開。視覺聚焦包括兩部分,一是文案的處理,要注意層次,主標題與副標題要形成對比;二是引導頁中的介面、場景、文案具象化元素,要有一個視覺聚焦點,多個視覺元素的排布採用中心擴散的方式,聚焦點的視覺面積大,同時與擴散的元素拉開對比。這樣多使用者能清晰地看到核心文案資訊與文案對應的視覺表現元素。同時結合視線流動的規律,從上到下,從左到右,從大到小。因此可以根據這個視線流的規律來進行引導頁的設計。
3 、富於情感化
A 、文案具象化
透過具體的元素、場景來表現文案,採用寫實、半寫實的方式進行表現,有些應用還會配以水彩風格。以天貓為例,天貓是一款購物應用,在設計上透過商場、店鋪的實際場景的具體描繪,渲染輕鬆、歡快的購物過程。
B 、頁面動效、頁面間互動方式的差異化
之前對於表現方式的歸類已經講到了動畫及頁面切換方式,如果增加了頁面動效,利用動效,包括放大、縮小、平移、滾動、彈跳,表現形式更加多樣化,會讓引導頁更有趣,注意力更為集中。
而頁面間的切換方式除了傳統的卡片左右滑動的方式外,可以結合線條、箭頭等進行引導,通常會配合動效。例如網易新聞客戶端、印象筆記·食記,它們在引導頁的設計上採用了線條作為主線貫穿整個引導頁面,小圓點顯示當前的瀏覽進度,滑動的過程中有滾動視差的效果。
4 、與產品、公司基調相一致
引導頁在視覺風格與氛圍的營造上要與該產品、公司形象相一致,這樣在多使用者還未使用具體產品前就給產品定下一個對應的基調。產品的特性決定了引導頁的風格,產品是消費類、娛樂類、工具類還是其他,根據不同的產品特性決定了引導頁是走輕鬆娛樂、小清新,還是規整、趣味性的風格,在終的表現形式上也就會有完全不同的展現,是插圖、介面、動畫還是其他。如淘寶的娛樂、豆瓣的清新文藝、百度的工具、蟬遊記的休閒等等,透過對比就能發現他們在引導頁設計上的差異。
這樣一方面有利於產品一脈相承,與產品使用體驗相一致;另一方面也會進一步強化公司形象。
以來往為例,來往是一款針對個人多使用者的及時通訊應用,主打扎堆、閱後即焚、敲門等與 WordPress 微信不一樣有趣的功能,也是想給多使用者創造不一樣的 IM 溝通方式。因此在引導頁的設計上透過趣味性、甚至有點搞怪的動作與表情來表現來往是這樣一款有趣、歡樂多的產品。
總之:想做好引導頁的設計,在理解多使用者對引導頁需求的基礎上,懷揣熱愛產品的情懷,依靠精緻的佈局,巧妙的構思,貼切的氛圍渲染,再加一點點特色。當然光講是枯燥的,還是需要設計師在具體的設計中不斷實踐,總結出新的觀點與方法,探索出別具一格的引導頁設計。