如何做好詳情頁改版？來看58的實(shí)戰(zhàn)案例

隨著58APP整體體驗(yàn)升級(jí)，又趕上7月份超職季活動(dòng)的契機(jī)，我們展開了招聘詳情頁的改版升級(jí)，期望打造一個(gè)更年輕，更有溫度的招聘詳情頁，給用戶煥然一新的視覺感知，同時(shí)也為求職者提供更好的使用體驗(yàn)。

接下來會(huì)從設(shè)計(jì)流程，設(shè)計(jì)思路，和總結(jié)思考三個(gè)方面來講講我們這次的改版故事：

設(shè)計(jì)流程

從研究到設(shè)計(jì)——發(fā)現(xiàn)問題，解決問題。

從設(shè)計(jì)研究到設(shè)計(jì)輸出，我們分兩階段進(jìn)行：

STAGE1/研究探索——將業(yè)務(wù)目標(biāo)轉(zhuǎn)化為設(shè)計(jì)目標(biāo)

項(xiàng)目初期，我們通過體驗(yàn)走查，用戶研究，數(shù)據(jù)分析，競品分析的形式，發(fā)現(xiàn)當(dāng)前存在三個(gè)主要體驗(yàn)問題：頁面一致性低，查找信息效率低，用戶信任度低。

為了優(yōu)化這些問題，我們將體驗(yàn)優(yōu)化的業(yè)務(wù)目標(biāo)細(xì)化，確定了我們的兩個(gè)主要設(shè)計(jì)目標(biāo)：

• 優(yōu)化信息結(jié)構(gòu)，提高頁面一致性和閱讀效率；
• 設(shè)計(jì)「情境感」，增強(qiáng)頁面情感體驗(yàn)。

STAGE2/設(shè)計(jì)產(chǎn)出——先發(fā)散，再聚焦

明確了設(shè)計(jì)目標(biāo)后，我們開始了方案設(shè)計(jì)，因?yàn)榇舜胃陌娓赜隗w驗(yàn)層面，在設(shè)計(jì)上有一定的主導(dǎo)權(quán)，同時(shí)也希望能產(chǎn)出更多的創(chuàng)意，在設(shè)計(jì)流程上，我們也突破常規(guī)，嘗試采用「合力設(shè)計(jì)」的形式。

從前期調(diào)研分析到最后產(chǎn)出方案，交互與視覺同學(xué)合力配合。一方面更高效快速產(chǎn)出完整方案，一方面也通過合作的方式激發(fā)了更多創(chuàng)新的想法。

設(shè)計(jì)思路

從「信息高效獲取」到「增強(qiáng)情感連接」

「信息重組」—— 提升頁面一致性，查找效率

在前期研究的過程中我們發(fā)現(xiàn)，詳情頁作為連接企業(yè)與求職者的信息傳達(dá)頁面，主要價(jià)值是幫求職者更方便快捷地查詢職位信息、與招聘方進(jìn)行連接，這也是用戶使用的核心場景。

針對于信息層級(jí)不夠清晰，標(biāo)簽類目多不易理解，用戶關(guān)注信息位置偏低的問題，我們的解決思路主要是信息精簡和重組。

首先，我們將職位信息/發(fā)布人信息/職位詳情/公司信息等模塊重新分類，提高重要信息的優(yōu)先層級(jí)，按照用戶對信息關(guān)注優(yōu)先級(jí)排序，提高閱讀查找效率。

另外，標(biāo)簽類目多樣式不一致，造成用戶不易理解，導(dǎo)致混亂。我們將不同類型的標(biāo)簽與重組后的信息模塊進(jìn)行融合，同時(shí)在視覺風(fēng)格上進(jìn)行精簡，提升一致性。

「設(shè)計(jì)情境感」——增強(qiáng)頁面的情感體驗(yàn)

但是如何在清晰高效展示信息、輔助決策的同時(shí)，滿足用戶的情感訴求，讓詳情頁更有溫度，是更值得我們?nèi)ニ伎嫉慕嵌取?/p>

Step 1.情境打造

什么是情境感呢？我們將情境感拆分為場景+人物+情感的的結(jié)合。

在我們的情境中，人物就是求職者和公司hr，場景就是求職/找工作的場景。

Step 2.情感設(shè)計(jì)

圍繞著我們營造的找工作情境，根據(jù)用戶找工作時(shí)的心理狀態(tài)，我們主要從參與感和信任感兩個(gè)方面來滿足用戶的情感體驗(yàn)。

參與感：設(shè)計(jì)瀏覽動(dòng)線，與頁面有互動(dòng)

我們在詳情頁中為用戶劃定一個(gè)有情境感的瀏覽動(dòng)線，從「用戶主動(dòng)查找」到「引導(dǎo)用戶參與其中」進(jìn)行瀏覽。瀏覽動(dòng)線如下：

大概看看主要信息——hr展開講解，有問題隨時(shí)可聊——感受企業(yè)環(huán)境氛圍——查看自己的競爭力——感覺不合適推薦更多。希望增強(qiáng)用戶與頁面的互動(dòng)性。

信任感：保障標(biāo)識(shí)，舉報(bào)信息

同樣在之前調(diào)研中，我們發(fā)現(xiàn)信任感在用戶查看職位詳情頁的體驗(yàn)中也占據(jù)重要地位，職位信息真實(shí)性是用戶關(guān)注的重點(diǎn)，也是對用戶求職前期的重要保障。

在無法控制信息質(zhì)量的基礎(chǔ)上，如何才能通過設(shè)計(jì)提高信任感？我們從兩個(gè)方面進(jìn)行了嘗試，一是將保障標(biāo)簽轉(zhuǎn)化為信息的一部分，減弱標(biāo)簽感；二是將舉報(bào)信息和風(fēng)險(xiǎn)提示整合為一個(gè)完整模塊露出，給用戶固定舉報(bào)入口，嘗試提升用戶信任感。

Step 3.情境延伸——差異化情境

在滿足用戶的同時(shí)，為了滿足業(yè)務(wù)的訴求，針對于運(yùn)營和特殊企業(yè)的定制化需求，我們將情境感進(jìn)一步延伸，進(jìn)行差異化情境的設(shè)計(jì)。

在基本模塊保持一致的基礎(chǔ)上，可對顏色，個(gè)別模塊內(nèi)容及順序進(jìn)行適配。例如超職季一類的大型運(yùn)營活動(dòng)，我們提供頭部/職位詳情模塊/公司信息模塊的靈活配置能力，提升運(yùn)營承載能力。

總結(jié)思考

隨著上線走查的結(jié)束，詳情頁項(xiàng)目告一段落，我們也對這次改版進(jìn)行了復(fù)盤總結(jié)，希望能沉淀下來一些經(jīng)驗(yàn)和方法，為之后的改版設(shè)計(jì)積累值得參考的內(nèi)容。

1. 滿足業(yè)務(wù)訴求的基礎(chǔ)上，量化設(shè)計(jì)目標(biāo)

在前期更深入了解項(xiàng)目（包括業(yè)務(wù)模型、組織模型、運(yùn)營模型…），將產(chǎn)品目標(biāo)最大程度轉(zhuǎn)化為可實(shí)行的設(shè)計(jì)目標(biāo)，同時(shí)兼顧用戶及B/C兩端需求，化繁為簡，尋找設(shè)計(jì)結(jié)合點(diǎn)，基于可量化的明確目標(biāo)，建立設(shè)計(jì)的數(shù)據(jù)評估驗(yàn)證標(biāo)準(zhǔn)。

2. 提高整體設(shè)計(jì)效率，關(guān)注主路徑

關(guān)注主路徑，在設(shè)計(jì)之初不在細(xì)節(jié)上花費(fèi)太多時(shí)間；確定主風(fēng)格后，交互和UI同學(xué)應(yīng)該從主路徑出發(fā)，梳理出分支的各個(gè)場景（提示、彈窗、缺省等），相互配合提升整體設(shè)計(jì)效率。

3. 提前溝通可行性，推動(dòng)設(shè)計(jì)成果落地

提前一步，設(shè)計(jì)稿做完之前或者做之初就和開發(fā)溝通一輪可行性，在設(shè)計(jì)之初先去了解產(chǎn)品的底層邏輯，以避免出現(xiàn)設(shè)計(jì)方案同現(xiàn)有邏輯相悖而導(dǎo)致延期或被砍的風(fēng)險(xiǎn)。

有些功能點(diǎn)雖然因?yàn)榉N種原因可能無法成功推動(dòng)改進(jìn)，但是換個(gè)角度看，這也為之后的改版儲(chǔ)備了更多的方案。

設(shè)計(jì)改版雖然會(huì)一次又一次的來，但是依然是件又有意思的事情，希望大家在設(shè)計(jì)改版的道路上不斷有更新更好的想法