文章插图
这些差异导致了中美用户面对同一界面的不同感知，中国人相比美国人更擅长接受理解复杂的界面 。淘宝、京东那样的复杂界面对于国内用户来说琳琅满目，但对于美国用户来说非常眼花缭乱、认知困难 。
因此，面向美国用户的详情页在视觉上可能需要更加克制、减负 。
文章插图
2. 数据分析当前用户设备中，1280px、1366px的小屏用户占据近30%以上 。但是由触达率数据发现，小屏用户一屏内无法看全主图、变体，而且物流信息以及四个行动点都处在盲区，这可能是导致高跳出的主要原因 。
文章插图
3. 问题走查通过团队的问题走查，也发现了几个明显问题：
- 比如页面层级过于杂乱、视觉噪音较多；
- 主图尺寸过大、占用大量空间；
- Price（现价）和MSPR（建立零售价）不易区分，利润难认知，尤其对于注重利润的买家来说很致命；
- 先变体后行动的动线产生SKU维度误解；
- 查看多变体信息时，需要手动一个个切换，较多操作负荷 。
文章插图
三、定义问题通过前期发散得到了一系列问题，总体来说可以定义为四个方面：视觉噪音、层级混乱、屏效过低和操作低效 。因此，接下次的设计策略就可以围绕这四个方向来制定：信息降噪、层级清晰、提升屏效和链路优化 。
文章插图
四、设计策略1. 层级优化层级优化前需要先进行信息分级 。基于B类买家问卷调研的结果，与项目侧重新确认信息优先级并达成一致，后续的层级优化将主要参考此分级结果 。
文章插图
然后，通过一维分析法梳理现有层级的问题，并按照上述分级结果重新调整 。比如合并层级、并通过两端布局提升屏效；大幅度的去色降噪；垂直布局来易于买家的阅读比价；行动点前置来降低买家触达成本等等，具体细节不再赘述 。
文章插图
文章插图
2. 网格布局确立最小原子为5px，建立margin=40px，gutter=10px，总宽1200px的栅格系统；以及5px、10px、15px、20px、40px的间距系统 。所有的元素尽量按照此框架进行布局，进一步优化层级，建立页面秩序感和舒适的阅读节奏 。
文章插图
3. 链路优化对应走查中的链路问题 。对于B类买家来说，他们并非和C类买家一样出于自用的目的，他们需要全面对比商品的变体、价格、库存等因素 。但当前变体的呈现和对比很不直观，买家查看不同变体子商品信息时需要大量的操作成本，重复低效，不便于买家快速决策 。
这里调研了四类包含了变体表格的主流竞品：Modalyst、Spocket、Eprolo和Oberlo 。Spocket和Oberlo使用了弹窗来承载，Modalyst和Eprolo分别使用了下侧tabs和右侧功能区进行承载 。
文章插图
考虑到触达成本以及空间利用率，借鉴了Spocket、Oberlo的做法，新增链接入口，以弹窗的形式承载所有变体子商品的信息，帮助买家直观比对促进决策；同时在子商品右侧提供加购操作，便于加购意向买家的快速操作 。
文章插图
五、方案呈现以下便是评审时最终达成一致的方案（具体的细节呈现有出很多方案，这里就不放了） 。
文章插图
再上一波方案对比 。项目侧认为比以前的更清爽、干净了，不过不太确定数据的走向，毕竟整体改动很大，所以就需要最后的验证阶段 。
秒懂生活扩展阅读
- 电商高速发展，实体店闭店潮
- 看淘宝天猫与抖音电商的边界
- 农村淘宝激发了农村电商新势能
- 淘宝评价激励是什么？如何在宝贝详情页透出？
- 淘宝商品详情页转化较低，是哪里出问题了吗？事项解析
- 天猫国际晚到必赔是什么？怎么赔付？
- 天猫双十一物流太慢怎么办？
- 农村电商盈利模式是什么
- 手淘详情页这5个模块，你知道怎样装修吗？
- 淘宝商品详情页制作之商家可以从哪些方面入手？