編輯導(dǎo)讀：二手車工具是為了解決用戶在交易二手車過程中產(chǎn)生的問題，促進(jìn)二手車交易。本文作者通過對線上業(yè)務(wù)深挖，對客戶的問題進(jìn)行了分析并提煉出設(shè)計需求，從品牌提升、體驗提升、一致性提升這三個方面進(jìn)行了改進(jìn)，與大家分享。

01 介紹

1. 行業(yè)痛點(diǎn)

用戶對二手車的抗性，主要集中在車況和車價這兩大問題上。由于車況不透明，價格不清晰讓用戶在交易過程中心存顧慮。導(dǎo)致二手車行業(yè)潛力沒有得到釋放。

2. 工具對二手車購買的重要性

在購車流程中瀏覽車源、聯(lián)系看車、實地看車這3個環(huán)節(jié)涉及車況與價格問題，會直接影響用戶購買，可能存在比如：是否存在事故、是否合理保養(yǎng)、是否屬于合理的市場價格、是否符合遷入地排放標(biāo)準(zhǔn)…等問題。

通過讓用戶了解真實車況給出合理價格并結(jié)合交易相關(guān)需求，推動用戶進(jìn)行購車決策。

3. 商家/個人

在二手車工具的場景下，商家與個人因有較高的相似問題，因此取消了B端工具C端工具的差異化設(shè)計。

02 背景/痛點(diǎn)

1. 推廣

二手車現(xiàn)有23個工具，通過“工具大全”的方式為業(yè)務(wù)賦能，與競品工具形成差異，因此對現(xiàn)有工具產(chǎn)品進(jìn)行了整體思考。

（1）視覺識別

通過歸納工具使用到的色彩、圖形、組件及排版等設(shè)計特征，將視覺內(nèi)容定義清晰，從而提升工具產(chǎn)品的視覺識別度。

（2）體驗差、不好用

（3）一致性問題

交互形式：主要體現(xiàn)在工具結(jié)構(gòu)上，并非統(tǒng)一從查詢頁到達(dá)結(jié)果頁到基礎(chǔ)結(jié)構(gòu)，以及選項的信息選擇方式等。

視覺感受：填選項的外部視覺，配圖的視覺，按鈕的視覺及顏色上的使用…

2. 節(jié)約開發(fā)成本

將相似的UI組件進(jìn)行整合，減少同類視覺樣式，將常用的車型選擇、里程輸入等組件進(jìn)行復(fù)用，避免前端重復(fù)開發(fā)同類型的視覺組件。

03 設(shè)計

1. 設(shè)計目標(biāo)

突出品牌、體驗升級、解決一致性。

2. 工具分類

對現(xiàn)有23個工具進(jìn)行盤點(diǎn)，根據(jù)服務(wù)內(nèi)容的方向。將工具分為市場類、車況類、售賣類及信息類。

3. 突出品牌

（1）查詢頁

1）色彩

根據(jù)這4種不同方向的工具類別進(jìn)行色彩匹配。為了讓用戶感受工具產(chǎn)品的理性及真實感，低了色彩飽和度。并通過調(diào)整色相在色環(huán)中的數(shù)值延展出更多“鄰近色”的色彩方案，豐富工具的色彩系統(tǒng)。

2）圖形

不同圖形會影響視覺的一致性，因此從2個方向?qū)D形進(jìn)行了優(yōu)化

1. 圖標(biāo)：因為與工具內(nèi)容需要緊密結(jié)合，圖標(biāo)的風(fēng)格與二手車整體業(yè)務(wù)進(jìn)行統(tǒng)一。
2. 背景圖：考慮到背景圖主要起到對工具內(nèi)容進(jìn)行渲染的作用，因此將主要的圖形元素統(tǒng)一處理成漸變的矢量效果。

3）通用表單

依據(jù)從左到右的閱讀習(xí)慣，將表單字體字號、圖標(biāo)樣式進(jìn)行統(tǒng)一，增加表單高度放大點(diǎn)擊區(qū)域，并增加表單區(qū)域的陰影效果讓視覺與頁面分出層級。

（2）結(jié)果頁

4）排版

在讓內(nèi)容一目了然，以極簡的排版視覺，通過柵格的方式將頁面信息規(guī)整。增大重要信息字號，減少頁面分割線的使用，加強(qiáng)文字分割信息層級，提升可讀性。

并結(jié)合用戶實際使用的操作體驗，對特別重要的信息增加陰影的使用。

4. 體驗升級

1）數(shù)據(jù)可視化

市場類工具主要以數(shù)據(jù)為主，通過數(shù)據(jù)可視化的方式幫助用戶閱讀。

使用了一些常用的設(shè)計方法，在表格設(shè)計時對異常數(shù)據(jù)進(jìn)行高亮，在趨勢圖設(shè)計時使用平滑折線讓走勢更有連續(xù)性。

2）即時反饋

由于車險等售賣類工具，用戶對價格非常敏感。因此通過將保險內(nèi)容與價格結(jié)果在同一個頁面中展現(xiàn)的方式，將價格信息即時反饋給用戶，增強(qiáng)用戶使用中的互動。

3）付費(fèi)查詢預(yù)覽樣例

付費(fèi)查詢是工具產(chǎn)品進(jìn)行直接商業(yè)變現(xiàn)的方案之一，因此我們希望增強(qiáng)用戶使用付費(fèi)查詢的意愿。付費(fèi)查詢功能主要是針對具體車輛進(jìn)行車況查詢，因為用戶不清楚車況信息具體包含什么結(jié)果，所以通過增加示例讓用戶能直觀的了解到付費(fèi)后查詢的內(nèi)容，提升用戶主動使用付費(fèi)查詢的意愿。

4）層級關(guān)系

在查詢結(jié)果中涵蓋了大量車況信息，如果將信息全部平鋪頁面就會非常的長。如果只是增加導(dǎo)航的話，用戶可能會漏掉一些關(guān)鍵節(jié)點(diǎn)的信息。因此通過增加概述的方式將信息逐層細(xì)化的瀏覽、對細(xì)節(jié)內(nèi)容采用層層展開，方便用戶快捷的追溯完整內(nèi)容細(xì)節(jié)。

5. 一致性

1）頁面結(jié)構(gòu)

為保證工具產(chǎn)品體驗的一致性，對工具頁面結(jié)構(gòu)的一致性進(jìn)行了通用，查詢頁以工具頭圖、表單、按鈕為作為基本機(jī)構(gòu)。結(jié)果頁以概述、導(dǎo)航條，內(nèi)容卡片作為基本機(jī)構(gòu)。在不違背頁面結(jié)果基本原則的基礎(chǔ)上，增減頁面內(nèi)容完成頁面功能。

2）控件

控件部分主要包含城市選擇、區(qū)域選擇、車型選擇及公里輸入等控件。以城市選擇控件為例，因為二手車政策、交易多集中在一線二線三線城市，因此結(jié)合實際情況采用一行4個城市的方式縮短頁面長度，讓城市選擇控件能應(yīng)用與各種場景下的城市選擇功能中。

3）設(shè)計基礎(chǔ)元素

根據(jù)平臺提供的SKETCH組件庫進(jìn)行搭建，通過補(bǔ)充工具產(chǎn)品獨(dú)有的設(shè)計元素，完成工具產(chǎn)品的視覺界面。

04 推動力

優(yōu)先級

23個工具產(chǎn)品對于設(shè)計與開發(fā)資源的占用還是較為巨大，通過了解用戶的使用頻率與結(jié)合業(yè)務(wù)的重要度。將這些工具進(jìn)行優(yōu)先級排序，對優(yōu)先完成排序較高的工具產(chǎn)品優(yōu)先設(shè)計開發(fā)，保障產(chǎn)品進(jìn)入有效的迭代過程。

05 總結(jié)

本次二手車工具產(chǎn)品的設(shè)計過程中，通過尋找行業(yè)痛點(diǎn)，結(jié)合業(yè)務(wù)目標(biāo)。對品牌提升、體驗提升、一致性提升這三個方面，進(jìn)行了有針對的的解決與優(yōu)化。，以視覺與交互兩方面幫助二手車工具增強(qiáng)專業(yè)度，提升用戶使用的上手程度。

其次了解產(chǎn)品的推廣目標(biāo)以設(shè)計與交互為主導(dǎo)，對工具進(jìn)行增加與迭代的推動，與產(chǎn)品共同完成工具的推廣價值。以工具形式解決二手車交易問題，輔助用戶進(jìn)行買賣決策，提升二手車用戶完成買賣交易的轉(zhuǎn)化效率。

作者：呂志鴻、吳立杰

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗設(shè)計中心（微信公眾號@58UXD），作者@呂志鴻、吳立杰

題圖來自Unsplash，基于CC0協(xié)議