做一次開屏,不亞于一次創業路演?

0 評論 2370 瀏覽 6 收藏 12 分鐘

編輯導語:說到開屏頁,大家一定都不陌生,我們在進入一個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協議。

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!