爆款團(tuán)隊(duì)內(nèi)部復(fù)盤公開：關(guān)于《人生必做100件事》H5的一切 - 成都

時(shí)間：2020-02-27

來(lái)源：網(wǎng)易H5

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

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

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

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

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

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

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

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

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

你會(huì)因?yàn)橄氲?，自己曾錯(cuò)過(guò)一場(chǎng)校園戀愛而遺憾；也會(huì)想起和喜歡的人用一個(gè)耳機(jī)聽歌時(shí)的臉紅心跳。 你以為的平淡生活，其實(shí)挺有意義。

02
內(nèi)容篩選

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

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

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

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

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

放寬參與程度

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

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

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

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

整體畫風(fēng)

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

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

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

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

結(jié)果頁(yè)要素

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

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

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

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

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

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

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

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

調(diào)整事件順序

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

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

自定義姓名

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