原副标题：工程项目TRAP：跨境B2C详情页的更新结构设计归纳
很多结构雕塑家好友在做一些比较大的工程项目更新时，常常林美珠陷于结构设计技术细节之中，导致或者耽搁工程进度无法大力推进，或者最后的呈现出千疮百孔、方法论纷乱。而解决这些难题的一个通用型思路，就是转作两套专精的第二层数学模型来辅导不间断。责任编辑译者根据在项目组负责管理过的一次更新工程项目，跟大家撷取具体内容该怎么做，希望对你有所启迪。
一、更新大背景 1. 工程项目如是说
本次更新第一类属跨境B2C应用领域的Doba工程项目，它是面向海外市场的Dropshipping（两件上海联和投资有限公司）网络平台，透过两件上海联和投资有限公司的竞争优势，来协助分销商无须任何如上所述生产成本方可顺利进行B2C成功之路。
布季谢订货产生时，分销商将lvguang15194895813发送到网络平台，再由网络平台将商品透过仓储交货至终端产品
虫霉科虫疠主要有四类：自T8300零售商、服务器端网络平台分销商和初进阶的初学者。
2. 原有难题
Doba自上架一两年后，透过数据调阅辨认出了详情页的难题，辨认出无论是刊载转化成，还是珍藏转化成都相对较低，并且跳脱极高。因此有了此次工程项目更新，目标很单纯：提高现阶段详情页转化成、并减少跳脱。
3. 数学模型辅导
类似于这种繁杂的、小型的工程项目更新，就可以如上所述化专精的第二层数学模型。本次采用了如前所述双钻数学模型强化后的三钻数学模型来辅导业务流程大力推进。
整个结构设计业务流程被拆分为三个阶段：洞察、实施和验证阶段，三者形成闭环缺一不可。
另外，它会有阶段性的发散和收敛，比如洞察阶段，优先透过难题走查、用户如上所述化、数据分析等方法来辨认出难题，之后根据业务价值、用户价值来进行难题收敛，完成难题的定义。这个过程是为了做正确的事。
接着，实施阶段，透过竞品分析、头脑风暴、理论搜集等方法来制定结构设计策略，透过优劣分析、方案评审来确认最终方案。此过程为了把事情做正确。
最后，验证阶段，透过ab测试、定性反馈等方法来衡量指标，透过原因分析、方法沉淀来TRAP归纳。这个过程是去检验有没有做正确。
以这样的模式来大力推进业务流程，很大程度上避免了因缺失方法或者多早钻研技术细节导致的种种难题。
4. 详情页的意义
详情页是买家了解商品的主要途径，它所承载的意义是协助买家查看lvguang15194895813从而进行决策，重要性可见一斑。但是相比传统的C端详情页，在用户侧又存在两大难点：一类是B端，一类是海外。
二、辨认出、定义难题 1. 用户研究
关于B类买家：
B类和海外用户这两类属性距离我们相对遥远，所以需要透过用户研究来提前了解用户。如前所述前期的问卷调研，辨认出B类买家基本都会存在以下这些决策点：本地仓发货、免邮、变体丰富、热卖变体、方便变体对比、利润空间、库存够、商品质量好。
不符合B类买家的心智。
关于美国用户：
密歇根大学心理学系的Hannah教授如前所述一系列实验在《Cultural variation in eye movements during scene perception》这篇论文指出，相比关注均衡、强调集体主义的中国用户，美国用户更关注单个第一类，更强调个人主义。
《News Week》一篇专栏文章，从生理学的角度提出，亚裔美国人和非亚裔美国人在面对繁杂、繁忙的场景时，会使用到不同的大脑活动区域。亚裔美国人的大脑活动集中在处理图形与大背景关系的区域，而非亚裔美国人的大脑活动集中在识别物体的区域。
这些差异导致了中美用户面对同一界面的不同感知，中国人相比美国人更擅长接受理解繁杂的界面。淘宝、京东那样的繁杂界面对于国内用户来说琳琅满目，但对于美国用户来说非常眼花缭乱、认知困难。
因此，面向全国美国用户的详情页在视觉上可能需要更加克制、减负。
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类买家一样出于自用的目的，他们需要全面对比商品的变体、价格、库存等因素。但现阶段变体的呈现出和对比很不直观，买家查看不同变体子lvguang15194895813时需要大量的操作生产成本，重复低效，不便于买家快速决策。
这里调研了四类包含了变体表格的主流竞品：Modalyst、Spocket、Eprolo和Oberlo。Spocket和Oberlo使用了弹窗来承载，Modalyst和Eprolo分别使用了下侧tabs和右侧功能区进行承载。
考虑到触达生产成本以及空间利用率，借鉴了Spocket、Oberlo的做法，新增链接入口，以弹窗的形式承载所有变体子商品的信息，协助买家直观比对促进决策；同时在子商品右侧提供加购操作，便于加购意向买家的快速操作。
五、方案呈现出
以下便是评审时最终达成一致的方案（具体内容的技术细节呈原有出很多方案，这里就不放了）。
再上一波方案对比。工程项目侧认为比以前的更清爽、干净了，不过不太确定数据的走向，毕竟整体改动很大，所以就需要最后的验证阶段。
六、验证、TRAP
上架后观察数据的表现，辨认出基本都是正向（以下数据均脱敏处理）——珍藏转化成提高了6.0%，刊载转化成提高了2.6%，跳脱减少了10.2%，人均会话时长提高了16.6%。由此基本能得出一个结论：这是一次成功的结构设计更新，并且对业务侧贡献了价值。
为了能够复用到项目组其他工程项目，就需要做一些方法的沉淀。比如对美国用户的降噪、对B类买家的信息分级等，甚至是三钻数学模型本身都可以沉淀下来。让大家拿来即用，不用花时间去重复思考。
这个过程不限形式，可以像我一样写篇文章、可以ppt汇报、也可以专门做个结构设计撷取。
七、最后
以上便是如前所述宏观数学模型辅导下进行的一次工程项目更新，每个小伙伴都可以结合自己具体内容的业务、用户情况来参考使用。希望对你有所启迪。
我是结构雕塑家Andrew，我们下期再见。
参考文章：
张宏波：方寸屏幕，指尖空间——结构设计双钻数学模型的延展及运用
Sharon Begleyo：How different cultures shape the brain
Hannah Faye Chua：Cultural variation in eye movements during scene perception
专栏作家
Andrewchen；微信公众号：转行人的结构设计笔记，人人都是产品经理专栏作家。中科院硕士自学转行，擅长透过文字协助年轻结构雕塑家成长和提效。延迟满足、长期主义。
题图来自 Unsplash，如前所述CC0协议。
