深聊一組效果顯著的引導頁設計案例

 　　最全面的設計優秀案例全面解讀!今天騰訊的同學分別從產品屬性、設計載體、屏間交互以及扁平風4方面各自挑選了一組頂尖的案例來分析，在引導頁設計方面木有經驗的設計師，將這4個方面作為參考借鑒，工作起來容易上手，非常方便，強烈推薦喲。

　　隨著蘋果ios8的發布，可以看到App store貨架上，眾多主流App迫不及待地向人們展示產品視頻預覽，接下去會是被設計師、市場宣傳相繼關注的焦點，產品宣傳的下一輪引爆點。作為能在App store上先發觸達地形成前期推廣的視頻預覽，又會否影響到App安裝完畢後的引導頁呈現?我們不得而知。鑒於兩者形式的展現，間隔於安裝App前後，多少會規避重復性。不管怎樣，趁著手機App和扁平風熱潮，一起來細數歸納下對手機引導頁的所見所想。 早期我們會見到比較多成熟的PC軟件或者網頁產品的產品安裝包或新特性指引頁。近幾年在移動端平台上興起了各種門類，形式精彩紛呈的引導頁。

　　功能決定屬性

　　引導頁在視覺表現上呈現繁多，歸納起來可以從以下幾個功能來分類：

　　1. 新特性新功能

　　最常見的屬這類，當一個產品持續穩定迭代，每推出一些新功能，便跟隨版本包裝發布。

　　2. 推廣運營

　　包含類似市場專題推廣、情感化內容運營兩類。前者多為電商投資收益等產品，後者類似內容的片段剪輯，比如輕博客Lofter，引導頁隨機呈現博客用戶的心路歷程;或是”食色”，一壺茶、一段心情志，感受人生五味，預覽的同時還能加以喜愛分享。

　　3. 品牌展現

　　整體鋪開去展現產品的核心亮點和品牌思想，這一類應用產品基調偏功能長期穩定、內容維護居多，甚至內嵌視頻打包品牌概念和軟件界面功能展示。

　　想展現有腔調的品牌?那麼最好來學學這些設計技巧!《讓設計更簡單!品牌運營專題的5個設計規律》

　　Yummly開屏傳達給用戶，這裡可以浏覽收集食譜和清單，溫暖色調直擊內心，盡情享受美食烹饪。

　　4. 說明指引

　　多適用於操作較復雜的工具類應用，當用戶首次打開App，會進入半透明黑屏蒙版模式，開啟新手指引環節。這種方式一定程度上也存在弊端，用戶會厭惡一上來就強制被教育。因此也有不少App換作白底，稍作輕量去展示教程。除了前面提到的傳統說明教程，還存在另外兩種改良方式：一種是在用戶觸發功能行為的時候跟隨出現指引，匹配合適的場景模式，強化臨場感。另一種，弱化初始化引導，固定收攏在界面的一角，讓用戶自主去觸發。

　　500px，典型的全屏蒙版引導，避免去采用細節的界面說明，可在實際應用中出現操作引導。

　　也有類似Sketches Help, 將產品的核心功能以手勢的方式簡要呈現。

　　Oggl 引導頁由繁至簡，如今的版本更多介紹放在次一層級。

　　Cycloramic 是比較特殊的一類表現方式，通過前期的短小視頻，讓你對產品有直觀的大致印象並產生好奇，再轉換到界面說明頁，使過程顯得更為自然不突兀。

　　5. 信息定位

　　目前多見的應用，在情感品牌化的層面設計引導頁，也有不乏一些直擊重點的App，把了解用戶信息作為首要任務。

　　Elevate Brain Training是一款借用游戲提高大腦的應用，引導頁拋出提問定制你的訓練目標，針對理解力、注意力、處事能力等不同層面能力進行提升。

　　載體隨時代的演進

　　隨著技術演進和大環境提升，確實看到了引導頁以不同的載體，從靜過渡到動甚至流媒體。 這裡主要劃分為大背景位圖和矢量圖形，後者表現多樣化，國內外已有許多層出不窮的設計，不在此處贅述。 位圖分為靜、動、動靜結合：

　　1. 大背景

　　通常運用高質量的位圖作為背景，前後頁的切換會伴隨淡入淺出的效果，這類應用對外營造一種高端的產品氣質，圖片傳達出向上、美好、靜谧的正能量氣息。多見於互動社交類或生活記錄應用，例如 Path在這方面表現得淋漓盡致，後續也有更多App類似的呈現，但它的畫面感仍然讓人怦然心動，沒有乏味感，選圖和前後圖片過渡銜接很重要。

　　2. 視頻動態影像

　　隨著跨界趨同，移動端與PC網頁端的用戶體驗和視覺呈現未來將會更多地齊平。視頻流媒體也被越來越多地用於網站MiniSite，是一種效果直接信息量豐富的品牌推廣方式。當然考慮到安裝包數據限制的問題，移動端引導頁視頻相對少。除了前面提到的品牌宣傳、也有諸如Camu這類以拍照視頻為主要的應用，會首選視頻流媒體。用於拍延時攝影的Hyperlase在引導頁呈現獨特視角的延時作品，富有沖擊力。

　　3. 動靜皆宜

　　這裡指靜態位圖擬動態流暢地位移，模擬自然界的節奏，回歸仰望白雲海灘拾貝的宜人輕松情緒。微動的影像就像一段催眠序曲，讓用戶快速切入沉浸式狀態。例如Flipboard，從早期創新式的局部微動簡化至現在的鏡頭位移。LinkedIn、Pinterest也是較有代表性的應用。這樣細想來，鏡頭感的位移在渲染氛圍的同時，也是萌發了讀者想要挖掘發現更多，卻又嘎然而止到下一個畫面，多少有點半飽的意味。是否覺得恰與這些信息采集類的應用氣質相符呢。

　　其次，我們會發現位圖的使用多展現於國外或主流App，相對於位圖傳達的高端大氣沉穩，矢量圖形的發揮自由度更大，在多語意傳達和目標對齊上，處於一個關鍵的角色。

　　在海報平面招貼多樣化的今天，我們可以在刊物、宣傳單、海報招貼、燈箱、網頁等一切可以傳遞信息的介質上看到推廣宣傳。在過去，傳統燈箱或許只是幾張幻燈片畫面切換。現在，可以看到地鐵站的三聯式燈箱，加入了視頻，模擬互動式的聯動滾屏。這種借助多屏的滾動方式和手機端的引導頁路徑原理有點相似，然而在手掌大小的空間裡，可以展示的內容是有限的，屏與屏之間的串聯交互方式，眾多App在找尋創意可能。

　　屏間交互方式

　　由於手機端天然的觸屏行為屬性，通過滑動觸發用戶注意力，吸引用戶關注下一秒迸發的畫面內容，讓整個觀賞過程成為用戶的參與互動體驗。

　　1. 屏幕原生路徑

　　早些時候網頁元素隨著頁面滾屏出現各種交互動畫，這種方式剛盛行不久，移動端也進行了跨平台遷移，食記是最早一班引導頁體驗趨同網頁動畫的應用，動畫難點在於把握好元素的動律節奏，進出舞台的關鍵點。

　　DIY的walkthrough，隨著後景過山車似的連綿山脈，野外篝火，探險宇航員，手機記錄，酷似玩了一把視覺體驗享受。

　　2. 前後銜接

　　視頻動畫中鏡頭切換的蒙太奇手法，用美學原則聯結前後鏡頭，通過縮放拉伸、形變、位移、顏色變換等補間動畫巧妙地成為下一個鏡頭的關鍵元素。形式上激發讓人出乎意外，情理之中的視覺感受;內容上精簡干練有力，作為關鍵變換元素是每一屏講述的重