來源：網易H5

這兩天，很多人都在朋友圈曬出了《人生必做的100件事》。 

從2月21日晚上6點至今，這個H5點擊量達到2300萬，同名微博話題也有2400萬閱讀。

 “一輩子很短，要把時間花在有意義的事上。” 忙碌的生活讓人們忘記時間的流逝，繁瑣低效的生活很容易讓人們喪失熱情。 而這支H5，點燃了大家對生活的熱情，對自己的人生有了新的期待。 網易噠噠也再一次證明： H5依舊是刷屏利器。

我們采訪了噠噠的策劃同事，全面還原這支爆款H5的一切，相信可以帶給你不少啟發。

01
H5的創意思路

一開始，網易噠噠就把H5的選題方向定在“清單”類內容，打算做一個讓大家都能參與進來、并且都愿意分享的H5。 按照這個思路去找能覆蓋更多人、與大家生活強相關的選題，于是又將思路細化為“人生清單”。

接下來需要對選題是否具有討論度進行驗證。 在搜索的過程中，噠噠團隊看到很多關于“人生必看的100本好書”、“人生必看的100部高分電影”、“100條遺愿清單”、“100件情侶必做的小事”這類完成事項的選題熱度頗高。

把清單內容框定為100件事，比單純的“人生清單”更加具體，又能在數字上產生更明顯的差異化，所以最后就將主題定為《人生必做的100件事》。 總有人認為，自己還年輕，什么事都還早，殊不知時間就是這樣一點點在流逝。 現在，《人生必做的100件事》來提醒你：你還有很多事沒做過。

有的人說，這支H5是在給我們的人生設限，其實不然。 人生并沒有限制，噠噠團隊只是把大家對人生的經歷和憧憬單獨拿出來，匯總成“可供參考的人生”。 當你在觀看別人的人生時，也是在回憶自己的生活。

你會因為想到，自己曾錯過一場校園戀愛而遺憾；也會想起和喜歡的人用一個耳機聽歌時的臉紅心跳。 你以為的平淡生活，其實挺有意義。  

02
內容篩選

100件事的篩選，可以說是整個H5策劃中最艱難的一步。 網易噠噠的策劃團隊，在各種網站上篩選了大量的資料，調研更多人認為的“人生必做的事”。 然后是內部反復投票，讓大家選出“最想做的”、“最遺憾的”、“最沒感覺的”。 一遍遍的篩選，花費了不少時間。

牽動情感，用戶強相關 

由于是“人生必做的100件事”，過于小眾和個性化自然不行，這些選項應該上覆蓋更多普通人，有很多人經歷過、憧憬過、遺憾過的事。 還有一些事相對而言比較普通，比如帶隱形眼鏡、打耳洞等，雖然很多人經歷過，但是沒什么意義，不能聯系到什么情感和回憶。 所以這類選項也pass掉。

而跟我們絕大多數人相關的，容易牽動我們情感的事情，大多與親情、愛情、友情、夢想有關。 于是就有了“拍一次全家福”、“遇到過令你心動的人”、“與朋友徹夜談心”...... 有網友開玩笑說，這“人生必做的100件事”都是需要錢來完成。 如果真是事事都要雄厚的經濟實力，那不如叫“人生做不到的100件事”好了。 “用第一筆工資給父母買禮物”、“給未來的自己寫封信”、“ 對家人說我愛你”...... 這些都是再普通不過的人生活中的小確幸，沒有任何門檻，但又意義非凡。 

而還有一些事，是只有在特定的年齡段才會發生，一旦錯過，就再也回不去了。 “談一場校園戀愛”、“邀請親友參加畢業典禮”......這些沒做過，看到就會覺得遺憾。 遺憾 、回憶、感動、啟發，這些小小的情感牽扯著我們的心，也讓大家對這支H5抱有了別樣的感情，也更愿意通過分享它來表達自己。

放寬參與程度

考慮到H5的可玩性，不能把事情都設定的太難完成，也不能都太容易完成。為了防止大家對事件選項的理解不同，文案上會具體落到某件事，也會盡量的放寬參與要求，讓大家能夠獲得更多的滿足感。

比如“（曾經/正在）和寵物一同生活”這一條。 如果只是“養一只寵物”，那么一些曾經養過寵物、現在沒有養寵物的人可能就會忽略這個選項。 而“曾經和寵物一同生活”，則會喚起很多小時候養過寵物的人的童年回憶。

一些本該被忽略、以為自己沒做過的事情，通過放寬的具體描述，可以讓很多人想起“啊我原來是做過這樣的事的”，能夠牽動大家的回憶。

03
視覺設計

整體畫風

圖案、顏色、文字所呈現給用戶良好的視覺印象，能夠輕松抓住用戶的注意力。 《人生必做的100件事》開屏即是醒目的噠噠黃。 高飽和度的黃色代表著活潑與生機，整支H5色彩鮮艷，傳達出的感情豐富多彩，帶給人視覺上的動感與張力。

扁平化的插畫畫風高級但不幼稚，大面積的色塊簡約直觀，盡顯摩登與時尚感。 為了確定整支H5的設計風格，設計師多次嘗試不同風格的插畫，每張插畫都與策劃及時溝通。

在確認每張畫的呈現內容和畫面構圖之后，再進行下一步的繪制。 噠噠團隊希望用精美的圖畫語言來表現必做之事，所繪制人物時線條柔和，抽象但有韻律，兩位設計師加班加點繪制了一周多，才完成100張插畫的最終設計。

在上線前，由于封面動畫效果，H5加載渲染時間需要約5秒，但為了讓參與者立即打開H5，最終上線版本還是減掉了H5封面的動畫渲染，保證1秒內可以打開H5。

結果頁要素

H5的結果頁，要能讓用戶一眼就牢記主題。分享在朋友圈中，精致的結果頁也不會失了逼格，更容易吸引用戶的目光。最近，大家總是覺得朋友圈不夠刷，希望好友們多發朋友圈，給無聊的自己找到一些樂趣。 這時，分享一張好看的圖片到朋友圈，更是收獲點贊的好方法。 考慮到100件事的數量，如果單純地用文字來排列組合成一張海報，未免會有些乏味，視覺上也很難構成強烈的沖擊。

因此，噠噠把100件事做成圖畫。 用戶在選擇必做之事時，腦海中會不自覺陷入當時的回憶中，對自己的必做之事有一個心理預期。當他們看到圖畫版的必做之事時，也會有一種熟悉的既視感，喚起情緒共鳴。

結果頁中，最亮眼的地方就超大的數字：已完成的數量。 豐富的圖畫給予用戶視覺上的美感，而數字則能直觀地刺激到用戶心理。 放大的數字突出完成的數量，具有強烈的社交屬性，用戶的窺探、羨慕和比較情緒由此而生。  

04
交互設計

“傻瓜”式的交互玩法， 比起復雜炫酷、不知道從哪下手的交互設計更討人歡心。 噠噠這次依然使用了簡單的交互手勢，以保證每個人迅速上手，操作體驗更加流暢。 不止如此，一貫嚴格把控細節和用戶體驗的噠噠，在交互上還隱藏著種種小心思。 

拋棄列表點選，改用弧形滑選

不同于列表排列的flag，H5大膽進行了滑動點選的設計，選擇頁面就像轉盤一樣可以360°自由滑動。

考慮到100件事的數量，清單選擇型的文字排版很有可能讓人看得眼花繚亂，劃不到底，即使對主題感興趣，也不一定能夠耐心看完。而環狀的排列方式，每組滑到用戶屏幕中的選項不超過5個，一共滑動20次左右，保證用戶能夠看清每件事，并且不會感到煩躁。 搭配清新的音樂節奏，將原本繁多的事項拆分成流星一般，整體感覺十分治愈。

調整事件順序

在選擇頁面中，用戶點擊的順序對應結果頁呈現的位置。用戶選擇的必做之事越多，海報也會越長。 如果用戶想將點擊靠后的選項提前，用戶可以在H5的右上角處的“收藏夾”里，拖動該選項的位置。

噠噠觀察到，很多用戶都有著選擇困難癥，機會在手時總會猶豫不決。 而每位用戶在選擇必做之事時標準不同，很有可能當時腦子靈光選擇的某個選項，之后又開始后悔自己的手太快。 考慮到用戶會有反復修改選項的需求，H5從用戶體驗出發，可以更改事件的位置，給予用戶極大的DIY權利，以得到專屬自己的個性化結果。

自定義姓名

還有一個最容易被忽略的小細節。 很多H5為了方便用戶使用，常會出現自動調取微信頭像、名稱的情況。 這種“授權調取”的行為，其實藏著很多尷尬。 當海報分享到朋友圈時，如果頂著沙雕網名，或者一串誰都看不懂的文字/符號，去完成人生必做的100件事，總感覺不夠應景。 為了避免尷尬，噠噠這支H5選擇只讀取頭像，名字由用戶自定義。 

05

任何刷屏作品背后，都是對生活和情感的深刻洞察。希望《人生必做的100件事》能夠重新喚起大家對生活的期待，等到疫情轉好之后，我們才能真正的走出家門，去完成這些“必做的事”。

經授權轉載至成都，轉載請遵守規范
作者公眾號：網易H5（ID: wangyih5）