火星網(wǎng)校
跨境電商詳情頁改版設(shè)計總結(jié)及實例展示
發(fā)布時間：2024-08-14 13:08:43 瀏覽量：163次
很多設(shè)計師朋友在做一些比較大的項目改版時，總是會先陷入設(shè)計細(xì)節(jié)當(dāng)中，導(dǎo)致要么耽誤進(jìn)度難以推進(jìn)，要么最后的呈現(xiàn)支離破碎、邏輯混亂。而解決這些問題的一個通用思路，就是借用一套專業(yè)的頂層模型來指導(dǎo)全程。本文作者根據(jù)在團(tuán)隊負(fù)責(zé)過的一次改版項目，跟大家分享具體該怎么做，希望對你有所啟發(fā)。
改版背景
1. 項目介紹
這次改版的對象是面向美國市場的Dropshipping平臺，通過一件代發(fā)的優(yōu)勢，幫助零售商無需任何初始成本即可順利開展電商之路，讓用戶專注于銷售本身。
面向用戶主要有三類：自建站零售商、第三方平臺零售商和初入門的新手。
2. 現(xiàn)有問題
發(fā)現(xiàn)詳情頁的轉(zhuǎn)化率偏低且跳出率較高，因此這次項目改版的目標(biāo)是提升轉(zhuǎn)化率、降低跳出率。
3. 模型指導(dǎo)
采用了基于三鉆模型來指導(dǎo)流程推進(jìn)，將設(shè)計流程分為洞察、實施和驗證階段，確保閉環(huán)運作。
避免因細(xì)節(jié)缺失導(dǎo)致的問題，確保項目順利進(jìn)行。
4. 詳情頁的意義
詳情頁是買家了解商品并決策的主要途徑，重要性不言而喻。需要面對不同類型的用戶需求進(jìn)行設(shè)計。
發(fā)現(xiàn)、定義問題
1. 用戶研究
通過問卷調(diào)研和用戶研究，發(fā)現(xiàn)B類買家和海外用戶有不同的決策點，需針對不同用戶群體進(jìn)行設(shè)計優(yōu)化。
2. 數(shù)據(jù)分析
分析發(fā)現(xiàn)小屏用戶一屏內(nèi)無法完整查看重要信息，導(dǎo)致跳出率增加，需要優(yōu)化屏幕布局和信息呈現(xiàn)。
3. 問題走查
- 頁面層級過于復(fù)雜，視覺噪音較多；
- 主圖占用過多空間；
- 價格和建議零售價不易區(qū)分，影響利潤認(rèn)知；
- 變體信息查看操作繁瑣，負(fù)擔(dān)過重。
定義問題
根據(jù)問題走查結(jié)果，定義為視覺噪音、層級混亂、屏效低和操作低效，制定信息降噪、層級清晰、屏效提升和鏈路優(yōu)化方向。
設(shè)計策略
1. 層級優(yōu)化
基于信息分級結(jié)果，通過一維分析法梳理現(xiàn)有層級問題，調(diào)整布局并去除噪音，優(yōu)化頁面結(jié)構(gòu)。
建立柵格系統(tǒng)和間距系統(tǒng)，提升頁面秩序感和閱讀體驗。
2. 網(wǎng)格布局
設(shè)定柵格系統(tǒng)和間距系統(tǒng)，統(tǒng)一元素布局，提升頁面整體美感和閱讀效果。
3. 鏈路優(yōu)化
優(yōu)化變體信息展示，通過彈窗形式承載信息，方便買家對比和決策，提高購買效率。
方案呈現(xiàn)
優(yōu)化后的設(shè)計方案得到一致認(rèn)可，呈現(xiàn)更清爽、干凈，進(jìn)一步驗證階段將確認(rèn)數(shù)據(jù)效果。
驗證、復(fù)盤
上線后數(shù)據(jù)表現(xiàn)較前有較大提升，收藏轉(zhuǎn)化提升了6.0%，刊登轉(zhuǎn)化提升了2.6%，跳出率降低了10.2%，人均會話時長提升了16.6%。成功的設(shè)計改版為業(yè)務(wù)帶來了實際價值。
為團(tuán)隊其他項目提供方法沉淀，讓設(shè)計流程更高效。這次成功的改版經(jīng)驗可以復(fù)用到其他項目中，實現(xiàn)更好的設(shè)計效果和用戶體驗。
設(shè)計師Andrew分享了這次項目改版的經(jīng)驗，期待下期再見。
想了解更多關(guān)于跨境電商的設(shè)計優(yōu)化以及相關(guān)課程？點擊咨詢
參考文章：張宏波：方寸屏幕，指尖空間——設(shè)計雙鉆模型的延展及運用
Sharon Begleyo：How different cultures shape the brain
Hannah Faye Chua：Cultural variation in eye movements during scene perception
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
4. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
8. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
-
9. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
10. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
最新文章
