「餓了么8年賬單」項(xiàng)目，從接到任務(wù)到產(chǎn)品上線花了一個月左右的時間，本文作者按階段分享創(chuàng)作細(xì)節(jié)。

2015年底，UED 小伙伴們一起做了個「外賣時光機(jī)」。

2016年底，大家就琢磨著再做個類似的項(xiàng)目，于是「餓了么8年賬單」項(xiàng)目就這么開啟了。

此次H5的內(nèi)容策劃、框架構(gòu)建、插畫動圖、音效配樂等等皆由我們UED完成。

從決定要在年底做一個賬單開始，我們就堅(jiān)定了絕不走「賬單老路」的想法，即：

• 不轉(zhuǎn)化數(shù)據(jù)（如：你今年花了xx塊錢，能兌換xx個蘋果手機(jī)）
• 不給用戶貼標(biāo)簽（如：你超過了x％的人，是名副其實(shí)的大土豪）

用的次數(shù)多了就沒意思了，真的。

于是我們寫了一個故事：

故事發(fā)生在寒冷的冬季，主人公在屋內(nèi)收到了一封餓了么8年賬單，哆嗦著打開賬單一看，居然少了幾條信息！緊接著，開啟了一場密室尋賬單之旅……

從接到任務(wù)到產(chǎn)品上線花了一個月左右的時間，下面我就按階段分享創(chuàng)作細(xì)節(jié)。

第一階段：方案構(gòu)思（又名：「逼」出來的密室）

很多人都會問，為什么會想到將密室和賬單相結(jié)合。

其實(shí)原設(shè)定是，主人公通過與他人的對話逐漸獲得了賬單信息，最終合成了一張賬單。

但 @品牌部 的小伙伴給我們提了個需求：在一開始就要把賬單展示給用戶。

「用戶進(jìn)來就看完了賬單，還會愿意繼續(xù)看接下來的故事嗎？」這個需求讓我和另一個用研小伙伴 @老王 很頭疼。

我們不得不重新整理思路：既要在 H5 開頭展示賬單，又要有足夠吸引用戶看下去的點(diǎn)……那不如將幾條賬單信息安排在接下去的情節(jié)里吧！

往這個思路嘗試了一番后，我們發(fā)現(xiàn)「密室」是這個方案的最佳表現(xiàn)方式。@老王 微微一笑，操起 Apple Pencil，「餓了么 8 年賬單」的雛形就這么出來了。

第二階段：框架構(gòu)建

這個階段主要做了三件事：

1. 確認(rèn)需求：在行動之前，我們就數(shù)據(jù)字段、品牌/業(yè)務(wù)需求與相關(guān)部門做了反復(fù)確認(rèn)。
2. 時間安排：協(xié)調(diào)好時間很重要，你們懂得。
3. 全面部署：我們整理出了頁面交互邏輯（有數(shù)據(jù)賬單 & 無數(shù)據(jù)賬單 & 賬單分享鏈接）、密室互動明細(xì)（動效 & 音效）、文案等多個文檔。單「動效 & 音效清單」文檔就前前后后修改了 61 多次，其他文檔的修改量可見一斑。

第三階段：產(chǎn)品表現(xiàn)

有用戶在微博評論說：密室的小細(xì)節(jié)做得很棒。

那我們是如何從無到有，構(gòu)建出一個密室來的呢？

根據(jù)故事的設(shè)定，主人公是一名在外租房打拼的上班族。所以我們通過新老家具的布置、數(shù)量不多的碗筷、收納衣架等體現(xiàn)出租房的特征；通過電腦、「加班王」獎狀、部門集體照等體現(xiàn)上班族的特征。就像布置拍攝現(xiàn)場一樣，只有布置地越符合人物氣質(zhì)，才越有代入感。

設(shè)計師 @蛋卷 負(fù)責(zé)項(xiàng)目的所有插畫、動圖及圖標(biāo)設(shè)計。為了增強(qiáng)密室的互動性，她將原設(shè)定的「一屏」密室增大到「三屏」，也就有了更多的空間去豐富畫面。

每次討論我們都會有新點(diǎn)子蹦出來，但每加一個東西，她的工作量就會大很多，一個看似簡單的動圖的背后往往是十幾張圖片的組合（如下圖）。但她總是霸氣地小手一揮：「工作量對我而言不是問題，只要效果好，熬我都會熬出來。」

在 @蛋卷 繪制的同時，我和 @老王 也在準(zhǔn)備著配音和配樂。在正式開始找配音前，我就每個物件的動效和音效在圖上做了標(biāo)注，并和 @蛋卷 進(jìn)行了多次核對，以保證我找的配音能和她制作的動效配合上。這張圖也方便了我們之后和研發(fā)同事的解說溝通。

秉著此項(xiàng)目「零成本」制作的原則，整個H5的配樂就由萬能的 @老王 親手譜寫，花了不到兩天就做出了三首曲子。配樂的基調(diào)從密室前的陰森詭異、到密室中的輕松活潑、再到騎手出現(xiàn)后的柔和溫暖，隨著情節(jié)的設(shè)定層層遞進(jìn)，為整個 H5 增色不少。

因?yàn)樯暇€的時間挨著圣誕節(jié)，@老王 還貼心地在結(jié)尾配樂中加入了鈴鐺聲來烘托節(jié)日氛圍～

第四階段：設(shè)計對接

此次和我們對接的是北京研發(fā)部門的同事。由于地理位置的關(guān)系，我們無法當(dāng)面交流，這大大增加了溝通的難度。

密室的細(xì)節(jié)眾多，除了在前期通過在圖片上標(biāo)注進(jìn)行解說，在后期我們還建立了「走查清單」，對每個物件的最終效果進(jìn)行一一核對和調(diào)整。

經(jīng)過了反復(fù)的打磨和優(yōu)化，產(chǎn)品最終確保完整上線。在此感謝同我們?nèi)找箠^戰(zhàn)的 @北研 小伙伴，也感謝 @品牌部 @大數(shù)據(jù)部 @運(yùn)營部 小伙伴的傾力配合！

伴隨產(chǎn)品上線而來的，是意想不到的收獲：有 UGC 的好評，也有媒體的贊譽(yù)。

網(wǎng)易新聞

賬單攻略

微博反饋

得到的肯定讓我們更加堅(jiān)信創(chuàng)新和設(shè)計驅(qū)動可以帶來的無形價值。而這份寶貴的經(jīng)驗(yàn)，也幫助我們在設(shè)計驅(qū)動的道路上，更多的邁進(jìn)。

作者：小胡子

來源：微信公眾號【餓了么UED】