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

01 介紹

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

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

2. 工具對(duì)二手車購(gòu)買的重要性

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

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

3. 商家/個(gè)人

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

02 背景/痛點(diǎn)

1. 推廣

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

（1）視覺識(shí)別

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

（2）體驗(yàn)差、不好用

（3）一致性問(wèn)題

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

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

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

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

03 設(shè)計(jì)

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

突出品牌、體驗(yàn)升級(jí)、解決一致性。

2. 工具分類

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

3. 突出品牌

（1）查詢頁(yè)

1）色彩

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

2）圖形

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

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

3）通用表單

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

（2）結(jié)果頁(yè)

4）排版

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

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

4. 體驗(yàn)升級(jí)

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

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

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

2）即時(shí)反饋

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

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

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

4）層級(jí)關(guān)系

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

5. 一致性

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

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

2）控件

控件部分主要包含城市選擇、區(qū)域選擇、車型選擇及公里輸入等控件。以城市選擇控件為例，因?yàn)槎周囌摺⒔灰锥嗉性谝痪€二線三線城市，因此結(jié)合實(shí)際情況采用一行4個(gè)城市的方式縮短頁(yè)面長(zhǎng)度，讓城市選擇控件能應(yīng)用與各種場(chǎng)景下的城市選擇功能中。

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

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

04 推動(dòng)力

優(yōu)先級(jí)

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

05 總結(jié)

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

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

作者：呂志鴻、吳立杰

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

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