來源：網(wǎng)易H5

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

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

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

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

01
H5的創(chuàng)意思路

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

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

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

有的人說，這支H5是在給我們的人生設(shè)限，其實(shí)不然。 人生并沒有限制，噠噠團(tuán)隊(duì)只是把大家對人生的經(jīng)歷和憧憬單獨(dú)拿出來，匯總成“可供參考的人生”。 當(dāng)你在觀看別人的人生時，也是在回憶自己的生活。

你會因?yàn)橄氲剑约涸e過一場校園戀愛而遺憾；也會想起和喜歡的人用一個耳機(jī)聽歌時的臉紅心跳。 你以為的平淡生活，其實(shí)挺有意義。  

02
內(nèi)容篩選

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

牽動情感，用戶強(qiáng)相關(guān) 

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

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

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

放寬參與程度

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

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

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

03
視覺設(shè)計(jì)

整體畫風(fēng)

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

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

在確認(rèn)每張畫的呈現(xiàn)內(nèi)容和畫面構(gòu)圖之后，再進(jìn)行下一步的繪制。 噠噠團(tuán)隊(duì)希望用精美的圖畫語言來表現(xiàn)必做之事，所繪制人物時線條柔和，抽象但有韻律，兩位設(shè)計(jì)師加班加點(diǎn)繪制了一周多，才完成100張插畫的最終設(shè)計(jì)。

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

結(jié)果頁要素

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

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

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

04
交互設(shè)計(jì)

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

拋棄列表點(diǎn)選，改用弧形滑選

不同于列表排列的flag，H5大膽進(jìn)行了滑動點(diǎn)選的設(shè)計(jì)，選擇頁面就像轉(zhuǎn)盤一樣可以360°自由滑動。

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

調(diào)整事件順序

在選擇頁面中，用戶點(diǎn)擊的順序?qū)?yīng)結(jié)果頁呈現(xiàn)的位置。用戶選擇的必做之事越多，海報(bào)也會越長。 如果用戶想將點(diǎn)擊靠后的選項(xiàng)提前，用戶可以在H5的右上角處的“收藏夾”里，拖動該選項(xiàng)的位置。

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

自定義姓名

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

05

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

經(jīng)授權(quán)轉(zhuǎn)載至成都，轉(zhuǎn)載請遵守規(guī)范
作者公眾號：網(wǎng)易H5（ID: wangyih5）