編輯導語：說到開屏頁，大家一定都不陌生，我們在進入一個APP時首先看到的就是它的開屏頁，在APP啓動時，開屏頁也是爲了讓APP啓動更加的順利和流暢；本文作者分享了關於開屏頁的一些思考和作用，我們一起來了解一下。

開屏設計是產品每次進行大版本更新的時候，經常會遇到的設計需求；產品的大版本迭代往往包含了整個平臺信息架構的調整、新功能上線發佈、頁面佈局的重組等等一系列變更，開屏作爲新版與用戶的第一個觸點，承載了將上述重要變化進行可視化的關鍵作用。

根據不同產品的迭代訴求和企業團隊的資源儲備，開屏往往分爲沉浸式動畫、可交互動畫、靜態引導頁等幾類：

• 動畫的設計開發成本高，由於還涉及到動畫腳本組織和故事板搭建，設計師需要不斷保持和產品同學的溝通校對，確保創意的合理性和完整性；
• 靜態引導頁相對節省資源，但在功能引導的易懂性和情感設計的趣味性上，難免落後於前兩種形式。

來看兩個例子，雪球和高德：

一、雪球

雪球股票是一款投資交流交易APP，對於股民來說一定不陌生；它定位於社交化投資平臺，爲投資者提供實時行情、新聞資訊、投資策略、交易服務，目前涵蓋A股/港股/基金/美股交易；通過與第三方券商合作來滿足投資者的需求，其最突出的特色是將社交和投資結合，也是區別於大智慧、同花順等老牌競品最顯著的差異。

它的12.0版本於2019年底發佈，定性爲一次重磅改版，重新突出社區定位，相對弱化證券服務平臺定位。

產品架構由原本的首頁、自選、行情、動態、交易5大頻道重組爲雪球、行情、交易、我的4大頻道；核心功能的改變是主頁“雪球”頻道，這裏聚集了社區服務。

“雪球”頻道里面提供了三個簡單的板塊，是關注、推薦、熱門；分別對應出現用戶關注的球友們發表的觀點；用戶可能感興趣的球友和他們的觀點；以及當天全球資本市場正在發生的熱門事件，不管是7×24小時還是雪球熱股榜，都可以讓用戶快速有效地發現當下投資機會。

總而言之，深挖社交化這條賽道。

在這個改版定位的背景下，我們來看下雪球12.0的開屏動畫；整個動畫時長約10秒，爲一鏡到底的沉浸式播放；爲保證GIF觀看流暢，我已將錄屏壓縮爲2倍速（5秒左右），下同。

在10秒時長裏，動畫腳本敘述了3大故事板，對應3個視覺場景。設計採用擬人化的手法將聊天氣泡框物化爲一個小白投資者的形象，也着重表達了社交屬性。

整條故事線用一句話來概括就是：一個小白投資者起初在茫茫股市中面對海量信息不知如何選擇，來到雪球社區後通過和圈內大咖學習交流使自身得到進階，最終投資收益跑贏了市場上大部分投資者。

十分簡潔的一個故事，看一遍就能懂。我們也不妨拆解一下畫面中都是採用什麼語言去表達的。

[場景1] – 小白投資者身處下着雨的灰暗星球，身邊圍繞着複雜多變的股市行情信息，小白情緒低落。

[場景2] – 小白投資者跳躍着來到了豔陽高照的雪球社區，學習了很多點贊收藏排名靠前的大咖觀點，一路晉升（心思細膩的股民會發現，這裏其實埋了一個大盤晴雨表的梗）。

[場景3] – 衝出社區以後，小白已經不再是小白，而成了市場內段位（海拔高度）很高的用戶，跑贏了大部分投資者。

動畫的風格雖然抽象，但10秒看完之後，確實有記憶點。若從設計層面去分析，我們可以發現這段開屏有這麼4類特點：

• 沉浸式視覺體驗：HOW丨設計採取了躍屏轉場的分鏡設計、輕量化的視覺風格來營造沉浸式視覺體驗；
• 連貫的故事場景：HOW丨採用場景的腳本組織、小白主角的打造來串聯故事場景；
• 容易形成品牌記憶：HOW丨使用品牌色彩體系、生動活潑的風格來固化品牌記憶；
• 情感化設計表達：HOW丨運用擬人化設計和與用戶共情的表達形式來體現情感化設計；

由於動畫腳本經一條故事線完整串聯，轉場沒有斷點，我們也可以稱之爲串聯式動畫。

有串聯則有並聯，接着一起來看下並聯式開屏動畫：

二、高德

高德地圖大概是從4個月前的10.25.0版本開始（瞭解詳情的同學請更正），每一次熱更新後的開屏就採用了並聯式動畫的功能引導設計；所謂並聯，就是將幾個功能特性分別做成短動畫進行輪播，由用戶控制進程。

高德近期版本更新的開屏中，短動畫的數量最多爲4個，最少爲2個，時間週期在3~5秒左右，每一段短動畫都覆蓋一個具體的業務場景；這些場景包含了路口等候、打車、訂酒店、附近搜索、結伴出遊、景點門票預訂等出行體驗，背靠阿里的流量和資源，通過與飛豬、口碑、支付寶等平臺異業合作，高德完成了從地圖導航到出行場景全覆蓋的定位蛻變。

頗有意思的是，高德近年來不斷優化自己的打車體驗，在網約車領域動作不斷，與有國資背景介入的滴滴相比，兩者都在都在集聚各方力量，拓寬自己的賽道（看來網傳必有一戰，並非空穴來風）。

話說回來，基於這樣的戰略基礎，我們來分析高德近期改版的開屏動畫。

依然從設計層面來總結，特點如下：

• 高度還原需求場景：HOW丨採取細分出行場景的故事板和擬真化的設計元素來組織畫面；
• 清晰引導體驗流程：HOW丨高還原地表現用戶解決痛點的真實體驗流程，引起共鳴；
• 息息相關，便於記憶：HOW丨精準切入痛點，採用簡潔易懂的視覺元素進行可視化；

三、最後

總體來看，每一次改版的開屏設計對於用戶而言，無異於一次新產品的推介路演；有哪些新增、有哪些優化、有哪些整合，產品都希望用戶通過這十幾秒的時間輕鬆地理解，並樂於接受和轉化；往大了看，這似乎不亞於創業者們捧着路演PPT找資方講故事。

所以開屏動畫，這本身好像就是一個微型產品設計。

既然如此，我們不妨試着從用戶體驗五要素來總結一下，開屏動畫設計遵循什麼原則，以及怎麼落地實現：

• 戰略層 – 實現階段性業務目標、滿足用戶需求，由產品宏觀策略決定現階段跑什麼賽道；
• 範圍層 -定義產品改版的功能和特性，挖掘用戶在不同需求下的細分使用場景，創建故事板；
• 結構層 -由故事板拆解出開屏畫面需要什麼樣的腳本進行組織，時長多久，串聯or並聯，是否需要關聯交互行爲，梳理信息架構；
• 框架層 -根據信息架構決定畫面元素的佈局，“以體驗爲中心”確定元素的優先級，使符合可用性原則；
• 表現層 -用色、形、字、構、質五維分析法定義設計風格，使畫面符合品牌調性，清晰易懂、生動有趣；

設計團隊的介入往往是在範圍層以後，但我們一定要善於、樂於去接觸更高層面的產品思維和格局，終將能使開屏動畫在觸達用戶的一瞬間，抓住用戶的注意力，精準傳遞出你的“創業故事”。

作者：賞酒二兩；公衆號：賞酒二兩

本文由 @賞酒二兩 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。