做一次開屏,不亞于一次創(chuàng)業(yè)路演?

0 評論 4171 瀏覽 11 收藏 12 分鐘

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

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

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

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

來看兩個(gè)例子,雪球和高德:

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

一、雪球

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

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

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

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

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

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

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

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

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

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

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

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

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

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

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

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

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

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

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

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

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

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

二、高德

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

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

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

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

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

依然從設(shè)計(jì)層面來總結(jié),特點(diǎn)如下:

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

做一次開屏,不亞于一次創(chuàng)業(yè)路演?

三、最后

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

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

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

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

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

 

作者:賞酒二兩;公眾號:賞酒二兩

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!