設(shè)計沉思錄|58心寵詳情頁改版設(shè)計總結(jié)

0 評論 8868 瀏覽 46 收藏 9 分鐘

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

01 寫在前面

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

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

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

58心寵是什么

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

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

02 改版背景

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

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

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

本次改版主要解決以下兩個問題:

在改版前我們分析了原有頁面存在的一些問題:

03 解決問題

針對于上述的問題,我們分別在視覺層和框架層分別入手進行改版優(yōu)化:

1. 視覺層

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

提升頁面一致性:在視覺上根據(jù)以下幾點做了統(tǒng)一

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

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

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

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

2. 框架層

針對框架層出現(xiàn)的問題,我們做了如下的解決方案:

交易流程改版前在詳情圖片的下方展示,如果用戶沒有繼續(xù)瀏覽頁面,將會看不到這部分信息。但交易流程會告訴用戶我們在購寵過程中能給用戶帶來什么樣的保障。所以此次改版我們將交易流程的優(yōu)先級提升到了頁面首屏,體現(xiàn)心寵的標準化服務(wù),減少跳轉(zhuǎn)率。

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

04 項目總結(jié)

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

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

 

作者:李國輝,視覺設(shè)計師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗設(shè)計中心(微信公眾號@58UXD),作者@李國輝

題圖來自pixabay,基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!