【 設計理論】精選效果顯著的網站引導頁設計案例

精選效果顯著的網站引導頁設計案例

這一次的教學是屬於設計理論領域中的設計理論的相關教學。

文章出處是來自優設的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

教學大綱:

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


設計理論教學開始

最全面的設計優秀案例全面解讀!今天騰訊的同學分別從產品屬性、設計載體、屏間交互以及扁平風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. 前後銜接

視頻動畫中鏡頭切換的蒙太奇手法,用美學原則聯結前後鏡頭,通過縮放拉伸、形變、位移、顏色變換等補間動畫巧妙地成為下一個鏡頭的關鍵元素。形式上激發讓人出乎意外,情理之中的視覺感受;內容上精簡幹練有力,作為關鍵變換元素是每一屏講述的重點。相信看過絕望主婦的大家對它的片頭都印象深刻,更多精彩挑戰想象極限的鏡頭變換,不妨去欣賞下 余志雄工作室yU+Co的作品。

精選效果顯著的網站引導頁設計案例

Same作為一款話題社區社交應用,由早先的單色線性延展到新版的豐富形態和有趣變換。

精選效果顯著的網站引導頁設計案例

Dropbox配合一貫以來的強標識蠟筆畫風,讓觀賞者心情愉悅。

3. 趣味互動性

圍繞產品特性,設計趣味性的互動環節,會讓App增色不少。通過麥克風吹氣、聲音、攝像等手機原生方式,營造一個類虛擬現實聯結的體驗過程。

精選效果顯著的網站引導頁設計案例

Posegram結合產品特性,與鏡頭互動的方式,讓用戶直觀地擺pose拗造型。

4. 獨特視角

頁面間的轉場方式,除了City Guides的獨特城市轉場,Rovler的引導頁刻意對畫面的局部做了動感模糊,模擬鏡頭搖晃,讓觀看者置身牆面其中。

精選效果顯著的網站引導頁設計案例

5. 單屏內交互方式

Dropbox溫潤親和的,喜歡淡彩加線條風的朋友,它的品牌風格讓人愛不釋手。是否有幾分紙面上馬克筆工程設計圖的感覺。細膩的畫風、動感的模糊處理方式,讓單屏內的交互方式顯得沒有那麼單一。

精選效果顯著的網站引導頁設計案例

6. 文案的串聯

與圖形的交互串聯產生的效果不同,QQ閱讀的文案抓住用戶核心痛點,對仗的陣勢一氣呵成。

精選效果顯著的網站引導頁設計案例

張弛有力的扁平風

Luvocracy的開啟walkthrough,讓人眼前一亮,用色,鬧中取靜;版式,簡潔大氣;元素,構建有序,愛心貫穿始終。作為一款購物社區應用,會以讓用戶愉快的購物體驗從進門這一刻開始。

精選效果顯著的網站引導頁設計案例

UC瀏覽器採用更多ios7的輕量大膽用色,讓整個產品基調趨於輕鬆、歡快、多彩。

精選效果顯著的網站引導頁設計案例

Yahoo的這款應用的引導頁接受度是否高,或許有所保留,有一種美叫獵奇美,這麼形容也許不恰當,看完這個案例的用色,頓時會覺得UC的用色很平穩。會讓人腦海中想到 “態度、衝撞、學術、微妙、復古 “這些關鍵詞。所以作為設計師和產品用戶,可以涉獵更多在過去常人不太接受的顛覆性事物,經典的東西總是經得住時間打磨,留下的都是值得去經歷思考、重組、再生,無約束的事物本身蘊藏可能性。

精選效果顯著的網站引導頁設計案例

總結

與產品氣質相符

盡量避免過度設計,呈現的內容要與產品氣質能對應上。就像iCloud、Pages、keynote的引導頁,僅用不同的顏色和嵌套內容,達到了蘋果體系下的高標準統一化品牌定位。

用戶輕量體驗

不要讓界面上的內容信息成為用戶的認知負擔,即使是放在開篇位置的引導頁也不例外。少有顧客願意在對他無意願了解的業務介紹上給予過多停留,為產品本身能為用戶帶來的價值而服務設計。

兼顧技術實現

通常情況下技術仍然會對軟件包容量進行限制,視頻在信息可視化上佔據豐富有利,另闢蹊徑藉助移動端觸屏交互優勢,尋找巧妙方式也不失為一個好辦法。

勿忘文案魅力

人類對於複雜信息的處理,最直接觸達到大腦被解讀的還是語言,一句好文案配上應景的圖片,能達到的效果是不可估量的。

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 精選效果顯著的網站引導頁設計案例