火星网校
跨境电商详情页改版设计总结及实例展示
发布时间：2024-08-14 13:08:43 浏览量：173次
很多设计师朋友在做一些比较大的项目改版时，总是会先陷入设计细节当中，导致要么耽误进度难以推进，要么最后的呈现支离破碎、逻辑混乱。而解决这些问题的一个通用思路，就是借用一套专业的顶层模型来指导全程。本文作者根据在团队负责过的一次改版项目，跟大家分享具体该怎么做，希望对你有所启发。
改版背景
1. 项目介绍
这次改版的对象是面向美国市场的Dropshipping平台，通过一件代发的优势，帮助零售商无需任何初始成本即可顺利开展电商之路，让用户专注于销售本身。
面向用户主要有三类：自建站零售商、第三方平台零售商和初入门的新手。
2. 现有问题
发现详情页的转化率偏低且跳出率较高，因此这次项目改版的目标是提升转化率、降低跳出率。
3. 模型指导
采用了基于三钻模型来指导流程推进，将设计流程分为洞察、实施和验证阶段，确保闭环运作。
避免因细节缺失导致的问题，确保项目顺利进行。
4. 详情页的意义
详情页是买家了解商品并决策的主要途径，重要性不言而喻。需要面对不同类型的用户需求进行设计。
发现、定义问题
1. 用户研究
通过问卷调研和用户研究，发现B类买家和海外用户有不同的决策点，需针对不同用户群体进行设计优化。
2. 数据分析
分析发现小屏用户一屏内无法完整查看重要信息，导致跳出率增加，需要优化屏幕布局和信息呈现。
3. 问题走查
- 页面层级过于复杂，视觉噪音较多；
- 主图占用过多空间；
- 价格和建议零售价不易区分，影响利润认知；
- 变体信息查看操作繁琐，负担过重。
定义问题
根据问题走查结果，定义为视觉噪音、层级混乱、屏效低和操作低效，制定信息降噪、层级清晰、屏效提升和链路优化方向。
设计策略
1. 层级优化
基于信息分级结果，通过一维分析法梳理现有层级问题，调整布局并去除噪音，优化页面结构。
建立栅格系统和间距系统，提升页面秩序感和阅读体验。
2. 网格布局
设定栅格系统和间距系统，统一元素布局，提升页面整体美感和阅读效果。
3. 链路优化
优化变体信息展示，通过弹窗形式承载信息，方便买家对比和决策，提高购买效率。
方案呈现
优化后的设计方案得到一致认可，呈现更清爽、干净，进一步验证阶段将确认数据效果。
验证、复盘
上线后数据表现较前有较大提升，收藏转化提升了6.0%，刊登转化提升了2.6%，跳出率降低了10.2%，人均会话时长提升了16.6%。成功的设计改版为业务带来了实际价值。
为团队其他项目提供方法沉淀，让设计流程更高效。这次成功的改版经验可以复用到其他项目中，实现更好的设计效果和用户体验。
设计师Andrew分享了这次项目改版的经验，期待下期再见。
想了解更多关于跨境电商的设计优化以及相关课程？点击咨询
参考文章：张宏波：方寸屏幕，指尖空间——设计双钻模型的延展及运用
Sharon Begleyo：How different cultures shape the brain
Hannah Faye Chua：Cultural variation in eye movements during scene perception
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
6. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
最新文章
