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