招才貓直聘是一款58旗下的B端專業(yè)招聘平臺，期望用戶可以在這里高效便捷的找到合適的人才，從此招聘不再犯愁；我們用4個多月的時間，完成了從設(shè)計語言的制定到設(shè)計改版的落地；希望我本次的分享內(nèi)容，能夠?qū)τ谀阌幸欢ǖ膯l(fā)。

在總結(jié)之前，我想說：招才貓產(chǎn)品基礎(chǔ)功能目前已搭建完成，那么究竟是什么促成了這次迭代呢？

1. 現(xiàn)有功能邏輯無法支持新的業(yè)務(wù)融入
2. 用戶體驗不夠高效
3. 現(xiàn)風(fēng)格不符合設(shè)計趨勢

01 問題來源

改版之前，我們收集了三種聲音，分別是用戶的聲音、業(yè)務(wù)的聲音以及設(shè)計師的聲音。

1. 用戶的聲音

我們對用戶的聲音進(jìn)行了2次收集；第一次收集我們發(fā)現(xiàn)招才貓的用戶群體主要分為兩個行業(yè)分別是餐飲和美業(yè)，抽取比較典型的用戶畫像，我們不難發(fā)現(xiàn)很多用戶的感受其實是相通的；比如界面比較混亂、求職者搜索入口隱藏太深、面試功能體驗不好等。

同時在近期我們又進(jìn)行了二次收集主要針對視覺層面，我們?nèi)≌胁咆埖娜栈钣脩簦ㄟ^站內(nèi)push的方式發(fā)放，共收集了62條用戶的聲音。提取出7種設(shè)計相關(guān)的聲音，歸為三類感受，界面信息混亂、視覺風(fēng)格老舊、操作效率低效。

2. 業(yè)務(wù)的聲音

我們定時周期會議的形式與產(chǎn)品一起討論本次的產(chǎn)品規(guī)劃和設(shè)計目標(biāo)，發(fā)現(xiàn)以前的產(chǎn)品邏輯和視覺表現(xiàn)已經(jīng)不支持同時透傳58招聘和趕集直招兩個產(chǎn)品，為了更好的解決體驗問題，我們新增體驗走查的流程，共發(fā)現(xiàn)100多個產(chǎn)品體驗層的問題，所以本次的改版迫在眉睫。

3. 設(shè)計的聲音

我們對招才貓進(jìn)行了競品調(diào)研，運(yùn)用TCMC的方法（T-Target、C-Competitive Product、M-Analytical Method、C-Analysis Conclusion）分別調(diào)研直接競品和間接競品，并從這兩種類型中總結(jié)出我們的產(chǎn)品具有設(shè)計風(fēng)格老舊，一致性差、品牌透傳度低等問題。

（注釋：TCMC是58UXD招聘組內(nèi)部自研的調(diào)研設(shè)計分析方法）

02 分析問題

通過對以上三種聲音的梳理和提煉，確立了我們本次的設(shè)計目標(biāo)分別是：更高效便捷的、更專業(yè)可靠的、更凸顯品牌的設(shè)計。

03 解決思路

1. 設(shè)計理念

根據(jù)我們的設(shè)計目標(biāo)，制定了設(shè)計理念，分別是高效性、一致性、品質(zhì)感、差異化，我們希望本次的設(shè)計語言能夠給用戶帶來效率高、有節(jié)奏、簡潔的、可靠的、品質(zhì)的、專業(yè)的、個性的以及親切的8種主觀感受，要達(dá)到這個目標(biāo)我們需要在視覺上進(jìn)行信息降噪、制定視覺規(guī)范以及設(shè)計差異化的超級符號。

2. 超級符號

首先來講超級符號的設(shè)計：為了能夠更好的向用戶透傳趕集品牌的加入，我們?nèi)∽在s集的基礎(chǔ)形狀，圓與方；而方代表理性，圓則代表感性；本次的B端改版期望運(yùn)用二八原則（感性與理性相互平衡的設(shè)計方法傳遞有溫度的設(shè)計）。并且我們在普通圓角的基礎(chǔ)上，進(jìn)行了平滑圓角的處理，提高視覺流暢度，增強(qiáng)親和力。

我們將超級符號融入在頭像、圖標(biāo)設(shè)計中，卡片和按鈕也配合使用大圓角的方式，增強(qiáng)品質(zhì)感和差異化，未來還可以在運(yùn)營中有更多的透傳。

3. 色彩實驗

除了超級符號的融入，為了滿足我們這次高效的設(shè)計目標(biāo)，我們對信息降噪這件事做到了極致，為了使趕集更加和諧的融入，我嘗試了多種色彩的搭配，當(dāng)信息模糊后我們能更清楚的看到顏色之間的關(guān)系，紅色與黃色的搭配雖然屬于品牌色的延展，但是在情感傳遞上相對感性，不符合B端產(chǎn)品理性的特質(zhì)，綠色與紅色的搭配在UI中延展性不高。

所以我們最終選取了紅色與藍(lán)色的搭配，既符合我們男女占比1:1的特點(diǎn)、也符合B端產(chǎn)品的職業(yè)氣質(zhì)。

此外，我們這次也對原來的色彩系統(tǒng)進(jìn)行了升級，由單一的品牌色，升級為一主多輔的配色方案，增加了漸變色的融入。

4. 提升效率

【柵格設(shè)計】為了提升閱讀效率，我們將用戶信息卡片柵格排列，【信息降噪】頭部去色處理、減少標(biāo)簽顏色、去掉多余的分割線，最大化的將用戶的視覺中心轉(zhuǎn)移到卡片信息中。

【縮短用戶操作路徑】在當(dāng)前頁面就可以發(fā)消息、標(biāo)記面試狀態(tài)。

5. 設(shè)計規(guī)范

為了保證后續(xù)的設(shè)計一致性，我們還制定了設(shè)計手冊，主要包括：文字、色彩、圖標(biāo)、柵格、圓角、陰影、間距、卡片等視覺規(guī)范。

04 問卷反饋

改版后，我們對新舊設(shè)計進(jìn)行了用戶印象問卷調(diào)研，較老版本對比，分別在8項目標(biāo)印象上均有提升，其中”品質(zhì)感”提升16.7%“親切感”提升13%，整體滿意度提升10%，驗證了本次改版的有效性。

05 寫在最后

經(jīng)過一系列的操作，最終我們通過三種聲音發(fā)現(xiàn)并解決了問題，同時也確定了我們?nèi)碌脑O(shè)計語言，應(yīng)用到本次改版落地中；在未來，對用戶體驗的優(yōu)化仍是我們長期堅守的目標(biāo)和職責(zé)，過程中會進(jìn)行不斷的設(shè)計驗證，旨在打磨出一款高效便捷的商企招聘平臺；也希望大家都能保持對設(shè)計的初心，不斷解決問題，賦能業(yè)務(wù)增長，共創(chuàng)良好的產(chǎn)品設(shè)計。

作者：張瑞琦

來源公眾號：58UXD（ID：i58UXD），58UXD，全稱58同城用戶體驗設(shè)計中心。