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