如何做好詳情頁(yè)改版？來(lái)看58的實(shí)戰案例

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

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

設計流程

從研究到設計——發(fā)現問(wèn)題，解決問(wèn)題。

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

STAGE1/研究探索——將業(yè)務(wù)目標轉化為設計目標

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

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

• 優(yōu)化信息結構，提高頁(yè)面一致性和閱讀效率；
• 設計「情境感」，增強頁(yè)面情感體驗。

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

明確了設計目標后，我們開(kāi)始了方案設計，因為此次改版更偏重于體驗層面，在設計上有一定的主導權，同時(shí)也希望能產(chǎn)出更多的創(chuàng )意，在設計流程上，我們也突破常規，嘗試采用「合力設計」的形式。

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

設計思路

從「信息高效獲取」到「增強情感連接」

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

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

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

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

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

「設計情境感」——增強頁(yè)面的情感體驗

但是如何在清晰高效展示信息、輔助決策的同時(shí)，滿(mǎn)足用戶(hù)的情感訴求，讓詳情頁(yè)更有溫度，是更值得我們去思考的角度。

Step 1.情境打造

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

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

Step 2.情感設計

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

參與感：設計瀏覽動(dòng)線(xiàn)，與頁(yè)面有互動(dòng)

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

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

信任感：保障標識，舉報信息

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

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

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

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

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

總結思考

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

1. 滿(mǎn)足業(yè)務(wù)訴求的基礎上，量化設計目標

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

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

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

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

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

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

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

來(lái)源鏈接：https://www.xinnet.com/knowledge/522572858.html

本站聲明:網(wǎng)站內容來(lái)源于網(wǎng)絡(luò ),如有侵權,請聯(lián)系我們,我們將及時(shí)處理。