# 乐器商城设计：同一版式里的三种规格 原网页：https://www.jvds.cn/share/ui-design/zildjian-cymbal-store-concept-u061 语言：zh-CN 发布：2026-10-15 作者：界达设计工作室（JVDS） 这套乐器商城设计在白底上展示金色镲片、绿色包袋和黄色T恤，选择区的位置相近，控件却没有强行统一。直径、颜色和服装尺码各用合适的形式，购物袋再用文字保留结果。对跨品类商城而言，这种一致与差异的配合很实用。 ## 核心结论 - 同样的选择位置容纳直径、色样和服装尺码，兼顾统一与品类差异。 - 试听片段邻近规格，购物袋通过文字继续保留选择结果。 ## 位置一致，选择器可以不同 移动详情都先展示商品图片与名称，规格在下，黑色加入按钮继续向下排列。镲片使用直径圆钮，包袋用色点，T恤用字母尺码。读者换品类时仍知道在哪里选，却不必把[不同规格](https://www.jvds.cn/share/website-design/dtc-brand-ecommerce-design)硬读成同一种下拉列表。 白底与浅灰细线让金属、织物和衣服本身成为颜色主体，黑色动作也容易找到。商品规格选择既有统一节奏，又保留了实物差异，这是这组图值得学习的地方。 购物袋重复Diameter、Color和Size，并保留数量与移除入口。它重复的不是宣传，而是这一单的身份。界达设计更看重字段名称能否与商品页对应：颜色最好有文字，直径需要单位，服装尺码也应明确当前值。 ![Zildjian移动商城的镲片直径、绿色包袋色点、黄色T恤尺码和右侧购物袋](https://www.jvds.cn/upload/2026/1008/d187-tp/u061-i1.webp) 移动商品与购物袋四屏｜选择器各有形式，已选直径、颜色与尺码进入同一订单结构。 ## 镲片详情给了看和听两种观察方式 桌面镲片详情左侧用大网格排列正反面、侧面与局部图片，右侧是名称、直径与Hear this cymbal，几个试听片段有独立名称。图片观察轮廓与材质，试听提供另一种了解入口，两者相邻而没有相互挤压。 这种乐器商品页设计适合感官差异明显的品类。片段名称比一个无说明播放键更具体，读者知道当前在听哪一类演奏方式。不过改变直径后试听属于哪个规格，仍应有清楚标注。 界达设计会把当前规格与播放状态放在一起检查。图中没有音频实际播放，也没有切换过程，不能当作音色证明。说明、图片和试听各有用途，详情区无需要求一种媒介解释全部差异。 ![Zildjian镲片详情左侧多角度照片、右侧Diameter选项与Bell、Crescendo、Ride Pattern试听](https://www.jvds.cn/upload/2026/1008/d187-tp/u061-i2.webp) 桌面详情左右两栏｜照片与规格保持近邻，试听名称区分片段而非泛用播放图标。 ## 结账把商品和地址分开排 结账示意用左右两份页面展示购物车和表单，商品照片、名称与小字段在一侧，联系、配送和方式选择在另一侧。小幅图片足以认出对象，规格信息让读者不必凭记忆确认。 这里有一处值得停下来核对：标题写Cart(3)，左栏却展示镲片、鼓槌、包袋和耳机四行商品。分项金额相加与940总额相符，问题在于标题究竟统计商品种类、件数还是其他对象。上线前应让这个[计数口径](https://www.jvds.cn/share/ui-design/ecommerce-checkout-ux)与列表明确对应，不能仅因页面排得整齐就略过。 实际检查可以修改一件商品的数量和规格，再核对标题、小计、总额是否同步，其他商品与地址是否保留。跨品类购买的关键，是刚才选过的条件一直跟到订单里。页面的白与黑已经足够统一，不必为视觉一致删掉品类字段。 ![Zildjian桌面结账左侧Cart(3)与四行商品、TOTAL 940，右侧联系和配送表单](https://www.jvds.cn/upload/2026/1008/d187-tp/u061-i3.webp) 结账左栏｜Cart(3)与四行商品同屏，标题计数口径应与列表核对。 ## 常见问题 ### 跨品类商城要统一规格控件吗？ 可以统一位置、标签和操作节奏，控件形式按数据类型安排。色样、直径与服装尺码不必强行变成一种下拉框。 ## 设计检查清单 - 检查试听与当前规格的对应说明。 - 修改购物袋后核对规格、小计和已填地址。 ## 让不同品类共用清楚的购买结构 如果你的品牌商城同时销售器材、配件和周边，需要整理规格与订单摘要，可以从品类字段清单开始讨论。 界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。 [联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)