來源：餓了么 UED（微信號：elemeued）
作者：小胡子
2015年底，UED 小伙伴們一起做了個(gè)「外賣時(shí)光機(jī)」。
2016年底，大家就琢磨著再做個(gè)類似的項(xiàng)目，于是「餓了么8年賬單」項(xiàng)目就這么開啟了。
此次H5的內(nèi)容策劃、框架構(gòu)建、插畫動(dòng)圖、音效配樂等等皆由我們UED完成。
從決定要在年底做一個(gè)賬單開始，我們就堅(jiān)定了絕不走「賬單老路」的想法，即：
不轉(zhuǎn)化數(shù)據(jù)（如：你今年花了xx塊錢，能兌換xx個(gè)蘋果手機(jī)）
不給用戶貼標(biāo)簽（如：你超過了x％的人，是名副其實(shí)的大土豪）
用的次數(shù)多了就沒意思了，真的。
于是我們寫了一個(gè)故事：
故事發(fā)生在寒冷的冬季，主人公在屋內(nèi)收到了一封餓了么8年賬單，哆嗦著打開賬單一看，居然少了幾條信息！緊接著，開啟了一場密室尋賬單之旅……
掃描二維碼，并在瀏覽器中打開，
跳轉(zhuǎn)到餓了么 App 后即可回顧八年賬單！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識(shí)別）
查看案例詳情：http://www.sh-jinniu.com/projects/20738.html
從接到任務(wù)到產(chǎn)品上線花了一個(gè)月左右的時(shí)間，下面我就按階段分享創(chuàng)作細(xì)節(jié)。
第一階段：方案構(gòu)思（又名：「逼」出來的密室）
很多人都會(huì)問，為什么會(huì)想到將密室和賬單相結(jié)合。
其實(shí)原設(shè)定是，主人公通過與他人的對話逐漸獲得了賬單信息，最終合成了一張賬單。
但 @品牌部 的小伙伴給我們提了個(gè)需求：在一開始就要把賬單展示給用戶。
「用戶進(jìn)來就看完了賬單，還會(huì)愿意繼續(xù)看接下來的故事嗎？」這個(gè)需求讓我和另一個(gè)用研小伙伴 @老王 很頭疼。
我們不得不重新整理思路：既要在 H5 開頭展示賬單，又要有足夠吸引用戶看下去的點(diǎn)……那不如將幾條賬單信息安排在接下去的情節(jié)里吧！
往這個(gè)思路嘗試了一番后，我們發(fā)現(xiàn)「密室」是這個(gè)方案的最佳表現(xiàn)方式。@老王 微微一笑，操起 Apple Pencil，「餓了么 8 年賬單」的雛形就這么出來了。
第二階段：框架構(gòu)建
這個(gè)階段主要做了三件事：
確認(rèn)需求：在行動(dòng)之前，我們就數(shù)據(jù)字段、品牌/業(yè)務(wù)需求與相關(guān)部門做了反復(fù)確認(rèn)。
時(shí)間安排：協(xié)調(diào)好時(shí)間很重要，你們懂得。
全面部署：我們整理出了頁面交互邏輯（有數(shù)據(jù)賬單 & 無數(shù)據(jù)賬單 & 賬單分享鏈接）、密室互動(dòng)明細(xì)（動(dòng)效 & 音效）、文案等多個(gè)文檔。單「動(dòng)效 & 音效清單」文檔就前前后后修改了 61 多次，其他文檔的修改量可見一斑。
第三階段：產(chǎn)品表現(xiàn)
有用戶在微博評論說：密室的小細(xì)節(jié)做得很棒。
那我們是如何從無到有，構(gòu)建出一個(gè)密室來的呢？
根據(jù)故事的設(shè)定，主人公是一名在外租房打拼的上班族。所以我們通過新老家具的布置、數(shù)量不多的碗筷、收納衣架等體現(xiàn)出租房的特征；通過電腦、「加班王」獎(jiǎng)狀、部門集體照等體現(xiàn)上班族的特征。就像布置拍攝現(xiàn)場一樣，只有布置地越符合人物氣質(zhì)，才越有代入感。
設(shè)計(jì)師 @蛋卷 負(fù)責(zé)項(xiàng)目的所有插畫、動(dòng)圖及圖標(biāo)設(shè)計(jì)。為了增強(qiáng)密室的互動(dòng)性，她將原設(shè)定的「一屏」密室增大到「三屏」，也就有了更多的空間去豐富畫面。
每次討論我們都會(huì)有新點(diǎn)子蹦出來，但每加一個(gè)東西，她的工作量就會(huì)大很多，一個(gè)看似簡單的動(dòng)圖的背后往往是十幾張圖片的組合（如下圖）。但她總是霸氣地小手一揮：「工作量對我而言不是問題，只要效果好，熬我都會(huì)熬出來。」
在 @蛋卷 繪制的同時(shí)，我和 @老王 也在準(zhǔn)備著配音和配樂。在正式開始找配音前，我就每個(gè)物件的動(dòng)效和音效在圖上做了標(biāo)注，并和 @蛋卷 進(jìn)行了多次核對，以保證我找的配音能和她制作的動(dòng)效配合上。這張圖也方便了我們之后和研發(fā)同事的解說溝通。
秉著此項(xiàng)目「零成本」制作的原則，整個(gè)H5的配樂就由萬能的 @老王 親手譜寫，花了不到兩天就做出了三首曲子。配樂的基調(diào)從密室前的陰森詭異、到密室中的輕松活潑、再到騎手出現(xiàn)后的柔和溫暖，隨著情節(jié)的設(shè)定層層遞進(jìn)，為整個(gè) H5 增色不少。
因?yàn)樯暇€的時(shí)間挨著圣誕節(jié)，@老王 還貼心地在結(jié)尾配樂中加入了鈴鐺聲來烘托節(jié)日氛圍～
第四階段：設(shè)計(jì)對接
此次和我們對接的是北京研發(fā)部門的同事。由于地理位置的關(guān)系，我們無法當(dāng)面交流，這大大增加了溝通的難度。
密室的細(xì)節(jié)眾多，除了在前期通過在圖片上標(biāo)注進(jìn)行解說，在后期我們還建立了「走查清單」，對每個(gè)物件的最終效果進(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è)計(jì)驅(qū)動(dòng)可以帶來的無形價(jià)值。而這份寶貴的經(jīng)驗(yàn)，也幫助我們在設(shè)計(jì)驅(qū)動(dòng)的道路上，更多的邁進(jìn)。
轉(zhuǎn)載請?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（2條）