乐器商城设计：同一版式里的三种规格

这套乐器商城设计在白底上展示金色镲片、绿色包袋和黄色T恤，选择区的位置相近，控件却没有强行统一。直径、颜色和服装尺码各用合适的形式，购物袋再用文字保留结果。对跨品类商城而言，这种一致与差异的配合很实用。

核心结论

• 同样的选择位置容纳直径、色样和服装尺码，兼顾统一与品类差异。
• 试听片段邻近规格，购物袋通过文字继续保留选择结果。

位置一致，选择器可以不同

移动详情都先展示商品图片与名称，规格在下，黑色加入按钮继续向下排列。镲片使用直径圆钮，包袋用色点，T恤用字母尺码。读者换品类时仍知道在哪里选，却不必把不同规格硬读成同一种下拉列表。

白底与浅灰细线让金属、织物和衣服本身成为颜色主体，黑色动作也容易找到。商品规格选择既有统一节奏，又保留了实物差异，这是这组图值得学习的地方。

购物袋重复Diameter、Color和Size，并保留数量与移除入口。它重复的不是宣传，而是这一单的身份。界达设计更看重字段名称能否与商品页对应：颜色最好有文字，直径需要单位，服装尺码也应明确当前值。

镲片详情给了看和听两种观察方式

桌面镲片详情左侧用大网格排列正反面、侧面与局部图片，右侧是名称、直径与Hear this cymbal，几个试听片段有独立名称。图片观察轮廓与材质，试听提供另一种了解入口，两者相邻而没有相互挤压。

这种乐器商品页设计适合感官差异明显的品类。片段名称比一个无说明播放键更具体，读者知道当前在听哪一类演奏方式。不过改变直径后试听属于哪个规格，仍应有清楚标注。

界达设计会把当前规格与播放状态放在一起检查。图中没有音频实际播放，也没有切换过程，不能当作音色证明。说明、图片和试听各有用途，详情区无需要求一种媒介解释全部差异。

结账把商品和地址分开排

结账示意用左右两份页面展示购物车和表单，商品照片、名称与小字段在一侧，联系、配送和方式选择在另一侧。小幅图片足以认出对象，规格信息让读者不必凭记忆确认。

这里有一处值得停下来核对：标题写Cart(3)，左栏却展示镲片、鼓槌、包袋和耳机四行商品。分项金额相加与940总额相符，问题在于标题究竟统计商品种类、件数还是其他对象。上线前应让这个计数口径与列表明确对应，不能仅因页面排得整齐就略过。

实际检查可以修改一件商品的数量和规格，再核对标题、小计、总额是否同步，其他商品与地址是否保留。跨品类购买的关键，是刚才选过的条件一直跟到订单里。页面的白与黑已经足够统一，不必为视觉一致删掉品类字段。

常见问题

跨品类商城要统一规格控件吗？

可以统一位置、标签和操作节奏，控件形式按数据类型安排。色样、直径与服装尺码不必强行变成一种下拉框。

设计检查清单

• 检查试听与当前规格的对应说明。
• 修改购物袋后核对规格、小计和已填地址。