UI設(shè)計中的引導(dǎo)頁就是一個APP的門面。而一個好的引導(dǎo)頁不僅會讓新用戶很快能夠上手你的APP，還能帶來良好的用戶體驗，給用戶留下深刻的印象，從而留住用戶。但是怎么給自己的APP做一個好的引導(dǎo)頁呢，今天給大家?guī)淼奈恼戮褪墙o大家解決這個問題的，圖文并茂，看完大家一定會有所收獲。 隨著蘋果 ios8 的發(fā)布，可以看到 App store 貨架上，眾多主流 App 迫不及待地向人們展示產(chǎn)品視頻預(yù)覽，接下去會是被設(shè)計師、市場宣傳相繼關(guān)注的焦點(diǎn)，產(chǎn)品宣傳的下一輪引爆點(diǎn)。作為能在 App store 上先發(fā)觸達(dá)地形成前期推廣的視頻預(yù)覽，又會否影響到 App 安裝完畢后的引導(dǎo)頁呈現(xiàn)？我們不得而知。鑒于兩者形式的展現(xiàn)，間隔于安裝 App 前后，多少會規(guī)避重復(fù)性。不管怎樣，趁著手機(jī) App 和扁平風(fēng)熱潮，一起來細(xì)數(shù)歸納下對手機(jī)引導(dǎo)頁的所見所想。 早期我們會見到比較多成熟的 PC 軟件或者網(wǎng)頁產(chǎn)品的產(chǎn)品安裝包或新特性指引頁。近幾年在移動端平臺上興起了各種門類，形式精彩紛呈的引導(dǎo)頁。 功能決定屬性 引導(dǎo)頁在視覺表現(xiàn)上呈現(xiàn)繁多，歸納起來可以從以下幾個功能來分類： 1 ? 新特性新功能 最常見的屬這類，當(dāng)一個產(chǎn)品持續(xù)穩(wěn)定迭代，每推出一些新功能，便跟隨版本包裝發(fā)布。 2 ? 推廣運(yùn)營 包含類似市場專題推廣、情感化內(nèi)容運(yùn)營兩類。前者多為電商投資收益等產(chǎn)品，后者類似內(nèi)容的片段剪輯，比如輕博客 Lofter，引導(dǎo)頁隨機(jī)呈現(xiàn)博客用戶的心路歷程；或是 ” 食色 “，一壺茶、一段心情志，感受人生五味，預(yù)覽的同時還能加以喜愛分享。   3 ? 品牌展現(xiàn) 整體鋪開去展現(xiàn)產(chǎn)品的核心亮點(diǎn)和品牌思想，這一類應(yīng)用產(chǎn)品基調(diào)偏功能長期穩(wěn)定、內(nèi)容維護(hù)居多，甚至內(nèi)嵌視頻打包品牌概念和軟件界面功能展示。 Yummly 開屏傳達(dá)給用戶，這里可以瀏覽收集食譜和清單，溫暖色調(diào)直擊內(nèi)心，盡情享受美食烹飪。 ?4 ? 說明指引 多適用于操作較復(fù)雜的工具類應(yīng)用，當(dāng)用戶首次打開 App，會進(jìn)入半透明黑屏蒙版模式，開啟新手指引環(huán)節(jié)。這種方式一定程度上也存在弊端，用戶會厭惡一上來就強(qiáng)制被教育。因此也有不少 App 換作白底，稍作輕量去展示教程。除了前面提到的傳統(tǒng)說明教程，還存在另外兩種改良方式：一種是在用戶觸發(fā)功能行為的時候跟隨出現(xiàn)指引，匹配合適的場景模式，強(qiáng)化臨場感。另一種，弱化初始化引導(dǎo)，固定收攏在界面的一角，讓用戶自主去觸發(fā)。 500px，典型的全屏蒙版引導(dǎo)，避免去采用細(xì)節(jié)的界面說明，可在實際應(yīng)用中出現(xiàn)操作引導(dǎo)。 也有類似 Sketches Help, ? 將產(chǎn)品的核心功能以手勢的方式簡要呈現(xiàn)。 Oggl ? 引導(dǎo)頁由繁至簡，如今的版本更多介紹放在次一層級。 Cycloramic ? 是比較特殊的一類表現(xiàn)方式，通過前期的短小視頻，讓你對產(chǎn)品有直觀的大致印象并產(chǎn)生好奇，再轉(zhuǎn)換到界面說明頁，使過程顯得更為自然不突兀。 ? ?信息定位 目前多見的應(yīng)用，在情感品牌化的層面設(shè)計引導(dǎo)頁，也有不乏一些直擊重點(diǎn)的 App，把了解用戶信息作為首要任務(wù)。 Elevate Brain Training 是一款借用游戲提高大腦的應(yīng)用，引導(dǎo)頁拋出提問定制你的訓(xùn)練目標(biāo)，針對理解力、注意力、處事能力等不同層面能力進(jìn)行提升。 載體隨時代的演進(jìn) 隨著技術(shù)演進(jìn)和大環(huán)境提升，確實看到了引導(dǎo)頁以不同的載體，從靜過渡到動甚至流媒體。 這里主要劃分為大背景位圖和矢量圖形，后者表現(xiàn)多樣化，國內(nèi)外已有許多層出不窮的設(shè)計，不在此處贅述。 位圖分為靜、動、動靜結(jié)合： 1 大背景 通常運(yùn)用高質(zhì)量的位圖作為背景，前后頁的切換會伴隨淡入淺出的效果，這類應(yīng)用對外營造一種高端的產(chǎn)品氣質(zhì)，圖片傳達(dá)出向上、美好、靜謐的正能量氣息。多見于互動社交類或生活記錄應(yīng)用，例如 ? Path 在這方面表現(xiàn)得淋漓盡致，后續(xù)也有更多 App 類似的呈現(xiàn)，但它的畫面感仍然讓人怦然心動，沒有乏味感，選圖和前后圖片過渡銜接很重要。 2 ? 視頻動態(tài)影像 隨著跨界趨同，移動端與 PC 網(wǎng)頁端的用戶體驗和視覺呈現(xiàn)未來將會更多地齊平。視頻流媒體也被越來越多地用于網(wǎng)站 MiniSite，是一種效果直接信息量豐富的品牌推廣方式。當(dāng)然考慮到安裝包數(shù)據(jù)限制的問題，移動端引導(dǎo)頁視頻相對少。除了前面提到的品牌宣傳、也有諸如 Camu 這類以拍照視頻為主要的應(yīng)用，會首選視頻流媒體。用于拍延時攝影的 Hyperlase 在引導(dǎo)頁呈現(xiàn)獨(dú)特視角的延時作品，富有沖擊力。 3 ? 動靜皆宜 這里指靜態(tài)位圖擬動態(tài)流暢地位移，模擬自然界的節(jié)奏，回歸仰望白云海灘拾貝的宜人輕松情緒。微動的影像就像一段催眠序曲，讓用戶快速切入沉浸式狀態(tài)。例如 Flipboard，從早期創(chuàng)新式的局部微動簡化至現(xiàn)在的鏡頭位移。LinkedIn、Pinterest 也是較有代表性的應(yīng)用。這樣細(xì)想來，鏡頭感的位移在渲染氛圍的同時，也是萌發(fā)了讀者想要挖掘發(fā)現(xiàn)更多，卻又嘎然而止到下一個畫面，多少有點(diǎn)半飽的意味。是否覺得恰與這些信息采集類的應(yīng)用氣質(zhì)相符呢。   其次，我們會發(fā)現(xiàn)位圖的使用多展現(xiàn)于國外或主流 App，相對于位圖傳達(dá)的高端大氣沉穩(wěn)，矢量圖形的發(fā)揮自由度更大，在多語意傳達(dá)和目標(biāo)對齊上，處于一個關(guān)鍵的角色。 在海報平面招貼多樣化的今天，我們可以在刊物、宣傳單、海報招貼、燈箱、網(wǎng)頁等一切可以傳遞信息的介質(zhì)上看到推廣宣傳。在過去，傳統(tǒng)燈箱或許只是幾張幻燈片畫面切換。現(xiàn)在，可以看到地鐵站的三聯(lián)式燈箱，加入了視頻，模擬互動式的聯(lián)動滾屏。這種借助多屏的滾動方式和手機(jī)端的引導(dǎo)頁路徑原理有點(diǎn)相似，然而在手掌大小的空間里，可以展示的內(nèi)容是有限的，屏與屏之間的串聯(lián)交互方式，眾多 App 在找尋創(chuàng)意可能。 屏間交互方式 由于手機(jī)端天然的觸屏行為屬性，通過滑動觸發(fā)用戶注意力，吸引用戶關(guān)注下一秒迸發(fā)的畫面內(nèi)容，讓整個觀賞過程成為用戶的參與互動體驗。 1屏幕原生路徑 早些時候網(wǎng)頁元素隨著頁面滾屏出現(xiàn)各種交互動畫，這種方式剛盛行不久，移動端也進(jìn)行了跨平臺遷移，食記是最早一班引導(dǎo)頁體驗趨同網(wǎng)頁動畫的應(yīng)用，動畫難點(diǎn)在于把握好元素的動律節(jié)奏，進(jìn)出舞臺的關(guān)鍵點(diǎn)。 DIY 的 walkthrough，隨著后景過山車似的連綿山脈，野外篝火，探險宇航員，手機(jī)記錄，酷似玩了一把視覺體驗享受。   2 ?前后銜接 ? 視頻動畫中鏡頭切換的蒙太奇手法，用美學(xué)原則聯(lián)結(jié)前后鏡頭，通過縮放拉伸、形變、位移、顏色變換等補(bǔ)間動畫巧妙地成為下一個鏡頭的關(guān)鍵元素。形式上激發(fā)讓人出乎意外，情理之中的視覺感受；內(nèi)容上精簡干練有力，作為關(guān)鍵變換元素是每一屏講述的重點(diǎn)。相信看過絕望主婦的大家對它的片頭都印象深刻，更多精彩挑戰(zhàn)想象極限的鏡頭變換，不妨去欣賞下 ? 余志雄工作室 yU+Co 的作品。 Same 作為一款話題社區(qū)社交應(yīng)用，由早先的單色線性延展到新版的豐富形態(tài)和有趣變換。 Dropbox 配合一貫以來的強(qiáng)標(biāo)識蠟筆畫風(fēng)，讓觀賞者心情愉悅。 3趣味互動性 圍繞產(chǎn)品特性，設(shè)計趣味性的互動環(huán)節(jié)，會讓 App 增色不少。通過麥克風(fēng)吹氣、聲音、攝像等手機(jī)原生方式，營造一個類虛擬現(xiàn)實聯(lián)結(jié)的體驗過程。 Posegram 結(jié)合產(chǎn)品特性，與鏡頭互動的方式，讓用戶直觀地擺 pose 拗造型。 4 ?獨(dú)特視角 頁面間的轉(zhuǎn)場方式，除了 City Guides 的獨(dú)特城市轉(zhuǎn)場，Rovler 的引導(dǎo)頁刻意對畫面的局部做了動感模糊，模擬鏡頭搖晃，讓觀看者置身墻面其中。 5單屏內(nèi)交互方式 Dropbox 溫潤親和的，喜歡淡彩加線條風(fēng)的朋友，它的品牌風(fēng)格讓人愛不釋手。是否有幾分紙面上馬克筆工程設(shè)計圖的感覺。細(xì)膩的畫風(fēng)、動感的模糊處理方式，讓單屏內(nèi)的交互方式顯得沒有那么單一。 6文案的串聯(lián) 與圖形的交互串聯(lián)產(chǎn)生的效果不同，QQ 閱讀的文案抓住用戶核心痛點(diǎn)，對仗的陣勢一氣呵成。 張弛有力的扁平風(fēng) Luvocracy 的開啟 walkthrough，讓人眼前一亮，用色，鬧中取靜；版式，簡潔大氣；元素，構(gòu)建有序，愛心貫穿始終。作為一款購物社區(qū)應(yīng)用，會以讓用戶愉快的購物體驗從進(jìn)門這一刻開始。 UC 瀏覽器采用更多 ios7 的輕量大膽用色，讓整個產(chǎn)品基調(diào)趨于輕松、歡快、多彩。 Yahoo 的這款應(yīng)用的引導(dǎo)頁接受度是否高，或許有所保留，有一種美叫獵奇美，這么形容也許不恰當(dāng)，看完這個案例的用色，頓時會覺得 UC 的用色很平穩(wěn)。會讓人腦海中想到 ? ” 態(tài)度、沖撞、學(xué)術(shù)、微妙、復(fù)古 ” 這些關(guān)鍵詞。所以作為設(shè)計師和產(chǎn)品用戶，可以涉獵更多在過去常人不太接受的顛覆性事物，經(jīng)典的東西總是經(jīng)得住時間打磨，留下的都是值得去經(jīng)歷思考、重組、再生，無約束的事物本身蘊(yùn)藏可能性。 總結(jié) 與產(chǎn)品氣質(zhì)相符 ?，盡量避免過度設(shè)計，呈現(xiàn)的內(nèi)容要與產(chǎn)品氣質(zhì)能對應(yīng)上。就像 iCloud、Pages、keynote 的引導(dǎo)頁，僅用不同的顏色和嵌套內(nèi)容，達(dá)到了蘋果體系下的高標(biāo)準(zhǔn)統(tǒng)一化品牌定位。 用戶輕量體驗，不要讓界面上的內(nèi)容信息成為用戶的認(rèn)知負(fù)擔(dān)，即使是放在開篇位置的引導(dǎo)頁也不例外。少有顧客愿意在對他無意愿了解的業(yè)務(wù)介紹上給予過多停留，為產(chǎn)品本身能為用戶帶來的價值而服務(wù)設(shè)計。 兼顧技術(shù)實現(xiàn)，通常情況下技術(shù)仍然會對軟件包容量進(jìn)行限制，視頻在信息可視化上占據(jù)豐富有利，另辟蹊徑借助移動端觸屏交互優(yōu)勢，尋找巧妙方式也不失為一個好辦法。 勿忘文案魅力，人類對于復(fù)雜信息的處理，最直接觸達(dá)到大腦被解讀的還是語言，一句好文案配上應(yīng)景的圖片，能達(dá)到的效果是不可估量的。 原文地址：ui中國 原文作者：Lvchin

其他推薦文章： 3秒即滅，APP引導(dǎo)頁如何閃亮 22個講故事的APP啟動引導(dǎo)頁（設(shè)計欣賞） APP引導(dǎo)頁UI設(shè)計教程（靈智飛揚(yáng)第六期YY設(shè)計課）

轉(zhuǎn)載請注明：靈智飛揚(yáng) » 細(xì)數(shù)那些精彩紛呈的引導(dǎo)頁 登錄收藏

學(xué)UI就上靈智飛揚(yáng)！越努力，越幸運(yùn)！

“靈智飛揚(yáng)www.lingzhifeiyang.com?”最值得關(guān)注的UI學(xué)習(xí)平臺！ 每天發(fā)布高質(zhì)量的設(shè)計教程和分享設(shè)計經(jīng)驗，服務(wù)于20萬UI設(shè)計師,幫助初學(xué)者快速轉(zhuǎn)型。 ，給大家提供更多免費(fèi)學(xué)習(xí)的機(jī)會。想成為設(shè)計師的你快來關(guān)注吧！ 【特色推薦】 “APP截圖站www.lingzhifeiyang.com”??海量APP截圖，讓你靈感爆發(fā)！國內(nèi)最好的APP截圖站。 “國內(nèi)最棒的UI設(shè)計導(dǎo)航站” 專為UI設(shè)計學(xué)習(xí)者打造的資源＋學(xué)習(xí)，雙用途的網(wǎng)址導(dǎo)航站。親愛的，你收藏了嗎？ 【靈智飛揚(yáng) 原創(chuàng)文章 ，也可以找各個群的管理】  給靈智飛揚(yáng)打氣，加油 ?猛點(diǎn)這里?>>