聲明：本文來自於微信公眾號 網易H5(ID：wangyih5)，作者：阿木木&玖捌，授權站長之家轉載發布。
這兩天，很多人都在朋友圈曬出了《人生必做的 100 件事》。
從 2 月 21 日晚上 6 點至今，這個H5 點擊量達到 2300 萬，同名微博話題也有 2400 萬閱讀。
「一輩子很短，要把時間花在有意義的事上。」
忙碌的生活讓人們忘記時間的流逝，繁瑣低效的生活很容易讓人們喪失熱情。
而這支H5，點燃了大家對生活的熱情，對自己的人生有了新的期待。
網易噠噠也再一次證明：
H5 依舊是刷屏利器。
我們採訪了噠噠的策劃同事，全面還原這支爆款H5 的一切，相信可以帶給你不少啟發。
一開始，網易噠噠就把H5 的選題方向定在「清單」類內容，打算做一個讓大家都能參與進來、並且都願意分享的H5。
按照這個思路去找能覆蓋更多人、與大家生活強相關的選題，於是又將思路細化為「人生清單」。
接下來需要對選題是否具有討論度進行驗證。
在搜索的過程中，噠噠團隊看到很多關於「人生必看的 100 本好書」、「人生必看的 100 部高分電影」、「 100 條遺願清單」、「 100 件情侶必做的小事」這類完成事項的選題熱度頗高。
把清單內容框定為 100 件事，比單純的「人生清單」更加具體，又能在數字上產生更明顯的差異化，所以最後就將主題定為《人生必做的 100 件事》。
總有人認為，自己還年輕，什麼事都還早，殊不知時間就是這樣一點點在流逝。
現在，《人生必做的 100 件事》來提醒你：你還有很多事沒做過。
有的人說，這支H5 是在給我們的人生設限，其實不然。
人生並沒有限制，噠噠團隊只是把大家對人生的經歷和憧憬單獨拿出來，匯總成「可供參考的人生」。
當你在觀看別人的人生時，也是在回憶自己的生活。
你會因為想到，自己曾錯過一場校園戀愛而遺憾;也會想起和喜歡的人用一個耳機聽歌時的臉紅心跳。
你以為的平淡生活，其實挺有意義。
100 件事的篩選，可以說是整個H5 策劃中最艱難的一步。
網易噠噠的策劃團隊，在各種網站上篩選了大量的資料，調研更多人認為的「人生必做的事」。
然後是內部反覆投票，讓大家選出「最想做的」、「最遺憾的」、「最沒感覺的」。
一遍遍的篩選，花費了不少時間。
| 牽動情感，用戶強相關
由於是「人生必做的 100 件事」，過於小眾和個性化自然不行，這些選項應該上覆蓋更多普通人，有很多人經歷過、憧憬過、遺憾過的事。
還有一些事相對而言比較普通，比如帶隱形眼鏡、打耳洞等，雖然很多人經歷過，但是沒什麼意義，不能聯繫到什麼情感和回憶。
所以這類選項也pass掉。
而跟我們絕大多數人相關的，容易牽動我們情感的事情，大多與親情、愛情、友情、夢想有關。
於是就有了「拍一次全家福」、「遇到過令你心動的人」、「與朋友徹夜談心」......
有網友開玩笑說，這「人生必做的 100 件事」都是需要錢來完成。
如果真是事事都要雄厚的經濟實力，那不如叫「人生做不到的 100 件事」好了。
「用第一筆工資給父母買禮物」、「給未來的自己寫封信」、「 對家人說我愛你」......
這些都是再普通不過的人生活中的小確幸，沒有任何門檻，但又意義非凡。
而還有一些事，是只有在特定的年齡段才會發生，一旦錯過，就再也回不去了。
「談一場校園戀愛」、「邀請親友參加畢業典禮」......這些沒做過，看到就會覺得遺憾。
遺憾 、回憶、感動、啟發，這些小小的情感牽扯著我們的心，也讓大家對這支H5 抱有了別樣的感情，也更願意通過分享它來表達自己。
| 放寬參與程度
考慮到H5 的可玩性，不能把事情都設定的太難完成，也不能都太容易完成。
為了防止大家對事件選項的理解不同，文案上會具體落到某件事，也會儘量的放寬參與要求，讓大家能夠獲得更多的滿足感。
比如「(曾經/正在)和寵物一同生活」這一條。
如果只是「養一隻寵物」，那麼一些曾經養過寵物、現在沒有養寵物的人可能就會忽略這個選項。
而「曾經和寵物一同生活」，則會喚起很多小時候養過寵物的人的童年回憶。
一些本該被忽略、以為自己沒做過的事情，通過放寬的具體描述，可以讓很多人想起「啊我原來是做過這樣的事的」，能夠牽動大家的回憶。
| 整體畫風
圖案、顏色、文字所呈現給用戶良好的視覺印象，能夠輕鬆抓住用戶的注意力。
《人生必做的 100 件事》開屏即是醒目的噠噠黃。
高飽和度的黃色代表著活潑與生機，整支H5 色彩鮮豔，傳達出的感情豐富多彩，帶給人視覺上的動感與張力。
扁平化的插畫畫風高級但不幼稚，大面積的色塊簡約直觀，盡顯摩登與時尚感。
為了確定整支H5 的設計風格，設計師多次嘗試不同風格的插畫，每張插畫都與策劃及時溝通。
在確認每張畫的呈現內容和畫面構圖之後，再進行下一步的繪製。
噠噠團隊希望用精美的圖畫語言來表現必做之事，所繪製人物時線條柔和，抽象但有韻律，兩位設計師加班加點繪製了一周多，才完成 100 張插畫的最終設計。
在上線前，由於封面動畫效果，H5 加載渲染時間需要約 5 秒，但為了讓參與者立即打開H5，最終上線版本還是減掉了H5 封面的動畫渲染，保證 1 秒內可以打開H5。
| 結果頁要素
H5 的結果頁，要能讓用戶一眼就牢記主題。分享在朋友圈中，精緻的結果頁也不會失了逼格，更容易吸引用戶的目光。
最近，大家總是覺得朋友圈不夠刷，希望好友們多發朋友圈，給無聊的自己找到一些樂趣。
這時，分享一張好看的圖片到朋友圈，更是收穫點讚的好方法。
考慮到 100 件事的數量，如果單純地用文字來排列組合成一張海報，未免會有些乏味，視覺上也很難構成強烈的衝擊。
因此，噠噠把 100 件事做成圖畫。
用戶在選擇必做之事時，腦海中會不自覺陷入當時的回憶中，對自己的必做之事有一個心理預期。
當他們看到圖畫版的必做之事時，也會有一種熟悉的既視感，喚起情緒共鳴。
結果頁中，最亮眼的地方就超大的數字：已完成的數量。
豐富的圖畫給予用戶視覺上的美感，而數字則能直觀地刺激到用戶心理。
放大的數字突出完成的數量，具有強烈的社交屬性，用戶的窺探、羨慕和比較情緒由此而生。
「傻瓜」式的交互玩法， 比起複雜炫酷、不知道從哪下手的互動設計更討人歡心。
噠噠這次依然使用了簡單的交互手勢，以保證每個人迅速上手，操作體驗更加流暢。
不止如此，一貫嚴格把控細節和用戶體驗的噠噠，在交互上還隱藏著種種小心思。
| 拋棄列表點選，改用弧形滑選
不同於列表排列的flag，H5 大膽進行了滑動點選的設計，選擇頁面就像轉盤一樣可以360°自由滑動。
考慮到 100 件事的數量，清單選擇型的文字排版很有可能讓人看得眼花繚亂，劃不到底，即使對主題感興趣，也不一定能夠耐心看完。
而環狀的排列方式，每組滑到用戶屏幕中的選項不超過 5 個，一共滑動 20 次左右，保證用戶能夠看清每件事，並且不會感到煩躁。
搭配清新的音樂節奏，將原本繁多的事項拆分成流星一般，整體感覺十分治癒。
| 調整事件順序
在選擇頁面中，用戶點擊的順序對應結果頁呈現的位置。用戶選擇的必做之事越多，海報也會越長。
如果用戶想將點擊靠後的選項提前，用戶可以在H5 的右上角處的「收藏夾」裡，拖動該選項的位置。
噠噠觀察到，很多用戶都有著選擇困難症，機會在手時總會猶豫不決。
而每位用戶在選擇必做之事時標準不同，很有可能當時腦子靈光選擇的某個選項，之後又開始後悔自己的手太快。
考慮到用戶會有反覆修改選項的需求，H5 從用戶體驗出發，可以更改事件的位置，給予用戶極大的DIY權利，以得到專屬自己的個性化結果。
| 自定義姓名
還有一個最容易被忽略的小細節。
很多H5 為了方便用戶使用，常會出現自動調取微信頭像、名稱的情況。
這種「授權調取」的行為，其實藏著很多尷尬。
當海報分享到朋友圈時，如果頂著沙雕網名，或者一串誰都看不懂的文字/符號，去完成人生必做的 100 件事，總感覺不夠應景。
為了避免尷尬，噠噠這支H5 選擇只讀取頭像，名字由用戶自定義。
任何刷屏作品背後，都是對生活和情感的深刻洞察。
希望《人生必做的 100 件事》能夠重新喚起大家對生活的期待，等到疫情轉好之後，我們才能真正的走出家門，去完成這些「必做的事」。