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

開屏設(shè)計是產(chǎn)品每次進行大版本更新的時候，經(jīng)常會遇到的設(shè)計需求；產(chǎn)品的大版本迭代往往包含了整個平臺信息架構(gòu)的調(diào)整、新功能上線發(fā)布、頁面布局的重組等等一系列變更，開屏作為新版與用戶的第一個觸點，承載了將上述重要變化進行可視化的關(guān)鍵作用。

根據(jù)不同產(chǎn)品的迭代訴求和企業(yè)團隊的資源儲備，開屏往往分為沉浸式動畫、可交互動畫、靜態(tài)引導(dǎo)頁等幾類：

• 動畫的設(shè)計開發(fā)成本高，由于還涉及到動畫腳本組織和故事板搭建，設(shè)計師需要不斷保持和產(chǎn)品同學(xué)的溝通校對，確保創(chuàng)意的合理性和完整性；
• 靜態(tài)引導(dǎo)頁相對節(jié)省資源，但在功能引導(dǎo)的易懂性和情感設(shè)計的趣味性上，難免落后于前兩種形式。

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

一、雪球

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

它的12.0版本于2019年底發(fā)布，定性為一次重磅改版，重新突出社區(qū)定位，相對弱化證券服務(wù)平臺定位。

產(chǎn)品架構(gòu)由原本的首頁、自選、行情、動態(tài)、交易5大頻道重組為雪球、行情、交易、我的4大頻道；核心功能的改變是主頁“雪球”頻道，這里聚集了社區(qū)服務(wù)。

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

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

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

在10秒時長里，動畫腳本敘述了3大故事板，對應(yīng)3個視覺場景。設(shè)計采用擬人化的手法將聊天氣泡框物化為一個小白投資者的形象，也著重表達了社交屬性。

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

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

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

[場景2] – 小白投資者跳躍著來到了艷陽高照的雪球社區(qū)，學(xué)習(xí)了很多點贊收藏排名靠前的大咖觀點，一路晉升（心思細膩的股民會發(fā)現(xiàn)，這里其實埋了一個大盤晴雨表的梗）。

[場景3] – 沖出社區(qū)以后，小白已經(jīng)不再是小白，而成了市場內(nèi)段位（海拔高度）很高的用戶，跑贏了大部分投資者。

動畫的風(fēng)格雖然抽象，但10秒看完之后，確實有記憶點。若從設(shè)計層面去分析，我們可以發(fā)現(xiàn)這段開屏有這么4類特點：

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

由于動畫腳本經(jīng)一條故事線完整串聯(lián)，轉(zhuǎn)場沒有斷點，我們也可以稱之為串聯(lián)式動畫。

有串聯(lián)則有并聯(lián)，接著一起來看下并聯(lián)式開屏動畫：

二、高德

高德地圖大概是從4個月前的10.25.0版本開始（了解詳情的同學(xué)請更正），每一次熱更新后的開屏就采用了并聯(lián)式動畫的功能引導(dǎo)設(shè)計；所謂并聯(lián)，就是將幾個功能特性分別做成短動畫進行輪播，由用戶控制進程。

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

頗有意思的是，高德近年來不斷優(yōu)化自己的打車體驗，在網(wǎng)約車領(lǐng)域動作不斷，與有國資背景介入的滴滴相比，兩者都在都在集聚各方力量，拓寬自己的賽道（看來網(wǎng)傳必有一戰(zhàn)，并非空穴來風(fēng)）。

話說回來，基于這樣的戰(zhàn)略基礎(chǔ)，我們來分析高德近期改版的開屏動畫。

依然從設(shè)計層面來總結(jié)，特點如下：

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

三、最后

總體來看，每一次改版的開屏設(shè)計對于用戶而言，無異于一次新產(chǎn)品的推介路演；有哪些新增、有哪些優(yōu)化、有哪些整合，產(chǎn)品都希望用戶通過這十幾秒的時間輕松地理解，并樂于接受和轉(zhuǎn)化；往大了看，這似乎不亞于創(chuàng)業(yè)者們捧著路演PPT找資方講故事。

所以開屏動畫，這本身好像就是一個微型產(chǎn)品設(shè)計。

既然如此，我們不妨試著從用戶體驗五要素來總結(jié)一下，開屏動畫設(shè)計遵循什么原則，以及怎么落地實現(xiàn)：

• 戰(zhàn)略層 – 實現(xiàn)階段性業(yè)務(wù)目標、滿足用戶需求，由產(chǎn)品宏觀策略決定現(xiàn)階段跑什么賽道；
• 范圍層 -定義產(chǎn)品改版的功能和特性，挖掘用戶在不同需求下的細分使用場景，創(chuàng)建故事板；
• 結(jié)構(gòu)層 -由故事板拆解出開屏畫面需要什么樣的腳本進行組織，時長多久，串聯(lián)or并聯(lián)，是否需要關(guān)聯(lián)交互行為，梳理信息架構(gòu)；
• 框架層 -根據(jù)信息架構(gòu)決定畫面元素的布局，“以體驗為中心”確定元素的優(yōu)先級，使符合可用性原則；
• 表現(xiàn)層 -用色、形、字、構(gòu)、質(zhì)五維分析法定義設(shè)計風(fēng)格，使畫面符合品牌調(diào)性，清晰易懂、生動有趣；

設(shè)計團隊的介入往往是在范圍層以后，但我們一定要善于、樂于去接觸更高層面的產(chǎn)品思維和格局，終將能使開屏動畫在觸達用戶的一瞬間，抓住用戶的注意力，精準傳遞出你的“創(chuàng)業(yè)故事”。

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

本文由 @賞酒二兩 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。