一次H5項(xiàng)目的設(shè)計(jì)總結(jié)，其中不乏一些可以借鑒學(xué)習(xí)的點(diǎn)，希望對(duì)你有益。

?項(xiàng)目背景

『薪資大揭秘』活動(dòng)上線前，58招聘業(yè)務(wù)線下屬某產(chǎn)品運(yùn)營活動(dòng)模式較單一，微信關(guān)注量較少，為了增加微信活躍度，將老用戶分組， 便于后期精細(xì)化運(yùn)營。那么對(duì)于不經(jīng)常關(guān)注的用戶來說，一個(gè)有趣的H5形式的活動(dòng)，肯定會(huì)吸引這類用戶參，于是“薪資大揭秘”油然而生。

?前期風(fēng)格推導(dǎo)

項(xiàng)目初期，在了解了活動(dòng)背景后，我們進(jìn)行了頭腦風(fēng)暴，對(duì)該H5的風(fēng)格進(jìn)行了推導(dǎo)，并歸納總結(jié)出四個(gè)關(guān)鍵詞：文藝、風(fēng)格、幽默、走心。

根據(jù)關(guān)鍵詞的引導(dǎo)，我們又看了一些同品類及相關(guān)的H5視覺，分析了其表現(xiàn)手法與風(fēng)格，找出了幾款比較有代表性的方案。確定了手繪風(fēng)格。因?yàn)槭侨缃駛鬟_(dá)感情慣用手法之一，我們覺得手繪能較好的表達(dá)出情懷。

眾所周知，薪資不是隨便能問的，多數(shù)人都是談錢色變，那么，如何用手繪的形式輕松的將“薪資”這個(gè)沉重話題，輕松化處理呢？帶著這個(gè)問題，更深入細(xì)致的探討了一些具體執(zhí)行方案。與對(duì)風(fēng)格定位，走可愛風(fēng)，還是擬物風(fēng)，其實(shí)主要取決于你想要表達(dá)什么。于是，我們摒棄了以往的寫實(shí)風(fēng)，游戲風(fēng)，采用了圓珠筆手繪風(fēng)。我們覺得圓珠筆這種手繪風(fēng)格它的記憶點(diǎn)多一些，而且比較有質(zhì)感和年代感，它的紋理就很隨意，讓人感覺很輕松，會(huì)讓人想到上學(xué)時(shí)語文書上各種涂鴉，從而把“薪資這個(gè)沉重話題輕松化”。

結(jié)構(gòu)梳理

確定了設(shè)計(jì)風(fēng)格后，我們梳理了一下整個(gè)H5的層級(jí)和交互頁面邏輯，縱觀整個(gè)活動(dòng)原型，我們把H5活動(dòng)頁面大致歸納出5部分：loding頁、測試頁、估值頁、測試結(jié)果頁和二維碼頁面。

根據(jù)測試結(jié)果，本次嘗試了兩個(gè)方向展示：

1. 圍繞職位的縱向結(jié)果為導(dǎo)向，主打職業(yè)特色風(fēng)格來展示；
2. 橫向5種結(jié)果為導(dǎo)向結(jié)果之上。

經(jīng)討論和調(diào)研，多數(shù)人對(duì)測試類的活動(dòng)，還是比較在意其測試結(jié)果，而并非職業(yè)特點(diǎn)。所以最終我們還是采用以結(jié)果為導(dǎo)向方案，職業(yè)特性加之氣氛烘托和點(diǎn)綴。

角色設(shè)定

我們根據(jù)吃穿住用行歸納總結(jié)出，各行業(yè)、各結(jié)果的關(guān)鍵詞，從而推出我們?nèi)宋锝巧O(shè)定和結(jié)果頁的表現(xiàn)方式。

按測試結(jié)果：

• 屌絲：沒人愛、吃土，落葉、泡面、補(bǔ)丁、窮
• 奮斗青年：正能量、熱血、獨(dú)立、打雞血、爆發(fā)、拳擊手套、小喇叭
• 逼格青年：小資、文藝、coffee、麗江、小提琴、相機(jī)
• 中產(chǎn)階級(jí)：life、品質(zhì)、買買買 、mini、調(diào)性、悠閑
• 土豪：主要看氣質(zhì)、有錢任性、出境游、大捆錢、大金牙、大金鏈子、鉆石、約么

按職業(yè)提取元素：

• 物流：快遞員、快遞車、紙箱、快遞袋、快遞車、紅綠燈、小太陽、秤砣、電子秤、天氣
• 銷售：出租車、禮物、數(shù)據(jù)圖、KPI、合同、印章、筆、手提包、公文包、計(jì)算器、電話、郵件。
• 普工：錘子、安全帽、鉗子、板刷、工具箱、錐子、
• 服務(wù)員：飲料、盤子、端盤子、圍裙、西式餐廳帽、馬卡龍、菜、菜單、
• 客服：電話、耳麥、電腦、郵件、網(wǎng)絡(luò)、聲音符號(hào)、對(duì)話icon
• 導(dǎo)購：口紅、眼影、工卡、女鞋、購物小票、打折信息、價(jià)格、計(jì)算器、VIP

比如屌絲因?yàn)椤皼]人愛”，所以他是沮喪的，不高興的；因?yàn)椤案F”，所以給他打滿補(bǔ)丁。奮斗青年則是激昂的，沒跟頭發(fā)都散發(fā)著熱情；再比如，土豪形象，就給他鑲上了大金牙，帶上金鏈子，讓他悠閑地坐在沙發(fā)上抽煙。

設(shè)計(jì)實(shí)現(xiàn)

以物流行業(yè)為例：首先，我們將結(jié)果頁提取的關(guān)鍵詞進(jìn)行模版化處理，然后，我們提取了物流行業(yè)相關(guān)的視覺元素，如快遞車，膠帶，快遞袋，紅綠燈等等，并運(yùn)營了換衣秀的方式覆蓋各行業(yè)，使答題結(jié)果頁面更加精細(xì)化和走心。

相關(guān)數(shù)據(jù)

活動(dòng)上線前微信日活量為8%左右，活動(dòng)上線后微信日活大幅度提升了32%左右的成績。我們?cè)诮窈蟮脑O(shè)計(jì)生涯中，應(yīng)沉淀一下用戶的關(guān)注點(diǎn)，什么角度能夠更加吸引用戶，跳出固有思維，做更有趣的設(shè)計(jì)。

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@ 劉瑒