編輯導(dǎo)讀：在產(chǎn)品的迭代升級(jí)過(guò)程中，改版設(shè)計(jì)是常常會(huì)遇到的問(wèn)題。文章對(duì)寵物活體交易與服務(wù)運(yùn)營(yíng)平臺(tái)——58心寵詳情頁(yè)的升級(jí)改版進(jìn)行了詳細(xì)的梳理，對(duì)遇到的一些問(wèn)題進(jìn)行了分析總結(jié)，供大家參考學(xué)習(xí)。

01 寫在前面

隨著突飛猛進(jìn)的經(jīng)濟(jì)社會(huì)發(fā)展，人們的物質(zhì)生活得到不斷改善，但快節(jié)奏、高強(qiáng)度的工作生活方式也相應(yīng)帶來(lái)了人們心靈上的壓力和空虛。為了緩解緊張壓力情緒、排遣孤獨(dú)無(wú)聊，更為了生活中增添一縷色彩，養(yǎng)一只萌寵成為許多人的第一選擇。

當(dāng)下的寵物不僅是作為看家護(hù)院的存在，更多人將寵物當(dāng)作家中不可缺少的一部分，寵物的圖片和視頻也經(jīng)常占據(jù)著他們朋友圈中的大片篇幅。同時(shí)大量網(wǎng)紅貓、網(wǎng)紅狗的涌現(xiàn)，使不少人萌生了養(yǎng)寵物的念頭，養(yǎng)寵也漸漸變成了一種時(shí)尚，人們對(duì)寵物的需求量大大提升。

但寵物行業(yè)部分方面不規(guī)范，存在缺少監(jiān)督和管理的問(wèn)題，再加上寵物交易的特殊性，養(yǎng)寵人士很容易吃虧受騙，寵物的品相、寵物的健康都難以得到保證。如何使寵物市場(chǎng)更健康、更規(guī)范，如何讓每一位養(yǎng)寵人士都能放心購(gòu)寵、放心養(yǎng)寵，這是寵物行業(yè)一直不斷探索想要解決的問(wèn)題。

58心寵是什么

58心寵是專注于寵物活體交易與服務(wù)運(yùn)營(yíng)的專業(yè)平臺(tái)。通過(guò)與優(yōu)質(zhì)的商戶合作為購(gòu)寵用戶提供有利的保障，我們通過(guò)自己的努力規(guī)范環(huán)境混亂的寵物交易市場(chǎng)，做到“幼寵實(shí)拍+種犬/貓備案+防疫管控+售后質(zhì)保”四重保障。是鏈接B端商戶與C端用戶的一道橋梁。

58心寵于2015年9月正式獨(dú)立運(yùn)營(yíng)。今年2月，58心寵正式回歸58同城，將繼續(xù)專注于推動(dòng)國(guó)內(nèi)寵物交易市場(chǎng)的健康發(fā)展，打造優(yōu)質(zhì)寵物交易信息平臺(tái)，構(gòu)建全流程購(gòu)寵服務(wù)保障。

02 改版背景

心寵回歸58后首先要與集團(tuán)業(yè)務(wù)進(jìn)行融合，除了B端業(yè)務(wù)的打通，在C端視覺(jué)風(fēng)格上也要與集團(tuán)業(yè)務(wù)保持一致，舊版頁(yè)面因?yàn)殚L(zhǎng)時(shí)間未做改版，樣式陳舊，設(shè)計(jì)規(guī)范性差，功能體驗(yàn)不足等問(wèn)題也日趨明顯。

且詳情頁(yè)作為用戶使用產(chǎn)品時(shí)的必經(jīng)頁(yè)面，承載著用戶決策的重要信息。原有頁(yè)面信息層級(jí)混亂，核心信息優(yōu)先級(jí)較低，現(xiàn)有結(jié)構(gòu)已經(jīng)不能滿足用戶的需求。為提升心寵的流量，保證設(shè)計(jì)的一致性對(duì)心寵詳情頁(yè)進(jìn)行改版。

1. 發(fā)現(xiàn)問(wèn)題

本次改版主要解決以下兩個(gè)問(wèn)題：

在改版前我們分析了原有頁(yè)面存在的一些問(wèn)題：

03 解決問(wèn)題

針對(duì)于上述的問(wèn)題，我們分別在視覺(jué)層和框架層分別入手進(jìn)行改版優(yōu)化：

1. 視覺(jué)層

大黃頁(yè)下類目繁多，心寵做為黃頁(yè)類目的一部分，既要保持其品類獨(dú)有的差異性。也要保證整個(gè)黃頁(yè)風(fēng)格的統(tǒng)一。

提升頁(yè)面一致性：在視覺(jué)上根據(jù)以下幾點(diǎn)做了統(tǒng)一

• 頭圖：改版后詳情頁(yè)由H5頁(yè)面改為native頁(yè)面，所以產(chǎn)品頭圖可以與黃頁(yè)詳情保持統(tǒng)一。
• 字號(hào)：心寵原有版本整體字號(hào)偏小，改版后與黃頁(yè)規(guī)范字號(hào)大小保持統(tǒng)一。
• 色值：將頁(yè)面內(nèi)心寵主色#FF2737改為平臺(tái)主色#FF552E，統(tǒng)一色值。
• 卡片：信息卡片由直角改為大圓角
• tab:統(tǒng)一tab切換方式，底部tab使用平臺(tái)通用組件，保證設(shè)計(jì)的一致性。

下圖是改版前和改版后以及和黃頁(yè)寵物詳情的對(duì)比，整體頁(yè)面風(fēng)格都有了一個(gè)大的變化。

差異化設(shè)計(jì)：在保證設(shè)計(jì)統(tǒng)一性的同時(shí)，與黃頁(yè)原有寵物品類也要做相應(yīng)的差異化處理，讓用戶了解自己進(jìn)入到的是心寵的還是黃頁(yè)的寵物詳情頁(yè)，所以改版后在店鋪的位置增加了心寵的logo，增加心寵品牌的露出，強(qiáng)調(diào)心寵品牌。這樣不僅可以加深用戶對(duì)品牌的認(rèn)知，還能明顯區(qū)分心寵寵物詳情和黃頁(yè)寵物詳情，使用戶不會(huì)產(chǎn)生混淆。同時(shí)在保障圖標(biāo)上也做了相應(yīng)的顏色區(qū)分。

幼寵的驅(qū)蟲防疫信息是用戶判斷寵物是否健康有保障的重要決策信息。改版前以表格的形式展示，但是關(guān)系對(duì)應(yīng)性差，用戶的理解成本較高。所以我們將其改為了平鋪展示，通過(guò)顏色區(qū)分每一針的強(qiáng)度，使信息展示更清晰。

2. 框架層

針對(duì)框架層出現(xiàn)的問(wèn)題，我們做了如下的解決方案：

交易流程改版前在詳情圖片的下方展示，如果用戶沒(méi)有繼續(xù)瀏覽頁(yè)面，將會(huì)看不到這部分信息。但交易流程會(huì)告訴用戶我們?cè)谫?gòu)寵過(guò)程中能給用戶帶來(lái)什么樣的保障。所以此次改版我們將交易流程的優(yōu)先級(jí)提升到了頁(yè)面首屏，體現(xiàn)心寵的標(biāo)準(zhǔn)化服務(wù)，減少跳轉(zhuǎn)率。

改版前詳情圖片由寵物照片和店鋪介紹兩部分組成，用戶通過(guò)橫滑操作的方式瀏覽圖片，點(diǎn)擊展開(kāi)信息按鈕查看全部文字信息，想要查看完整信息分別需要有兩次操作。改版后我們將兩部分信息整合到了一起，通過(guò)展開(kāi)下滑的方式查看，大大減少用戶的操作成本，提升用戶的決策點(diǎn)。

04 項(xiàng)目總結(jié)

此次改版是心寵回歸58后在C端的改版，最主要的目的是在提升用戶體驗(yàn)的同時(shí)，統(tǒng)一視覺(jué)，與集團(tuán)業(yè)務(wù)融合。

但是因?yàn)闀r(shí)間比較緊急，沒(méi)有交互同學(xué)的參與，所以在很多地方還是缺乏更深度的打磨與思考，在之后我們會(huì)逐步將列表，店鋪依次改版，進(jìn)行融合。希望通過(guò)后續(xù)不斷的優(yōu)化，提升用戶體驗(yàn)，解決用戶的訴求。

作者：李國(guó)輝，視覺(jué)設(shè)計(jì)師

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

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