一、组件基础认知：什么是商品卡片
兰亭妙微ui设计公司分享：商品卡片是电商类 C 端产品的核心基础组件，适用范围不局限于实物商品，课程、旅游服务、游戏道具、会员套餐等全部可交易虚拟 / 实体品类，都依靠它承载核心信息，帮助用户快速抓取商品关键属性、完成浏览决策。
电商 App 内通用两套卡片展示视图，二者布局逻辑、信息承载上限存在明显差异，也是我们设计时需要重点区分的核心形式：网格视图、列表视图。
下文将拆解两种视图的排版规则、视觉规范、信息取舍逻辑，帮你标准化落地商品卡片组件。
二、核心设计要点（全文重点）
1. 两大基础布局：网格布局 & 列表布局
（1）网格布局
网格布局分为等距规整网格、瀑布流网格两类，二者都需要统一商品主图尺寸，避免画面杂乱无序。
- 瀑布流网格：允许卡片高度错落，但图片长宽比例需统一，错落幅度严格控制，视觉更轻盈；排版细节可参考往期《UI 组件瀑布流设计科普》。
- 规整对齐网格：行业最常用方案，固定图片、文本区域高度；针对标题长短不一的问题，提前预留多行文本空间，保证整行卡片视觉对齐。
网格视图受屏幕宽度限制，展示空间紧凑，不适合堆砌大量文字信息，复杂规格、长标签类内容建议省略。
（2）列表布局
列表采用「左图右文」横向排版，图片宽度统一，右侧文本区域高度灵活，分 3 种适配方案：
- 大信息量等高方案（京东类） 文本区域高度可超出图片高度，容纳规格、评价、店铺、满减等全量信息，适合搜索结果、商品分类页。
- 中等信息量等高方案（主流电商） 图文区域底部对齐，信息精简，视觉整洁均衡，是淘宝、拼多多搜索页通用规范。
- 极简短信息方案 仅保留图、标题、价格，强行对齐底部会造成卡片内部留白远大于卡片间距，破坏视觉亲密性；优化方案：卡片之间增加分割线，弱化对齐约束。
2. 卡片 3 种基础视觉形态
根据边框、背景、图片裁切规则，分为全包式、半包式、开放式，覆盖市面 99% 电商产品：
① 全包式（低频使用）
完整底色容器包裹商品图与全部文字，卡片四周统一圆角，整体感强，但视觉厚重，多用于品牌专题、活动会场。
② 半包式（行业主流）
商品图顶边、左右撑满卡片边界，仅底部文字区域在底色容器内；圆角规范重点：图片下方两个内角不做圆角，仅卡片外框设置圆角，避免视觉断层。
③ 开放式（轻量化首选）
无独立卡片底色，图片 + 文字自成一组信息单元；文字区域左右向内缩进，和图片形成层次区分，可单侧缩进、也可双侧缩进，清爽简约，适合极简风、出海电商。
3. 卡片标准信息层级（8 类模块）
不同品类、不同平台可按需删减模块，但商品主图、商品标题、售价是三大必选基础元素。
- 商品主图：视觉第一优先级，吸引用户点击
- 主标题：活动标签 + 商品全称，核心识别信息
- 辅助副标题：销量榜单、好评率、用户评价数
- 价格模块：现价、划线原价、已售人数
- 优惠标签：运费险、7 天无理由、满减、分期免息、优惠券
- 规格参数：尺寸、材质、型号、适配人群（网格布局优先删减）
- 店铺信息：自营 / 旗舰店标签、店铺名称、进店入口
- 交互按钮：收藏、加入购物车、快速购买
信息权重设计技巧
- 国内电商：价格、标题权重最高，优惠标签作为强视觉辅助；
- 海外品牌电商（ASOS、SHEIN）：放大价格字号，弱化标题，突出品牌简约调性；
- 网格 / 列表信息统一原则：两套视图核心字段保持一致，网格视图仅删减长文本规格类内容（如小米有品）。
4. 场景决定信息取舍：4 类高频场景差异化设计
卡片展示页面不同，用户核心诉求完全不同，信息模块需要针对性增减：
- 首页推荐流卡片 用户浏览目标泛、需要一屏展示更多商品，仅保留图、标题、价格、1 个核心活动标签，删除规格、店铺、评价等次要信息，降低单张卡片高度。
- 搜索结果 / 分类页卡片 用户有明确购买意向，信息完整展示，包含评价、销量、店铺、满减、规格，辅助用户对比筛选。
- 购物车卡片 用户已认知商品基础信息，核心需求：核对规格、修改数量、查看实付差价；新增规格选择器、数量加减框、单品优惠、凑单提示模块。
- 服务类商品（酒店、旅游） 区别实物电商，新增评分、距离、配套设施、入住日期、房型等专属字段，代表产品：马蜂窝、飞猪酒店列表。
5. 差异化商品卡片案例参考
（1）海外极简服饰电商：ASOS / Massimo Dutti / SHEIN
品牌调性克制高级，卡片极度轻量化，仅保留主图、售价、短标题、收藏按钮，无多余营销标签，适合出海国货 App 参考。
（2）本地生活服务卡片：马蜂窝、飞猪
服务类商品和实物商品字段体系完全区分，核心展示评分、地理位置、配套权益、起售价，是虚拟服务类组件的典型参考。
三、样式拓展：线上实战案例汇总
市面上成熟电商的商品卡片都基于以上规则做变体设计，可根据产品定位、运营需求调整圆角、留白、标签样式、色彩权重，搭建专属组件库。
结语
商品卡片是电商 C 端复用率最高的 UI 组件，设计核心逻辑永远围绕用户场景 + 信息优先级展开：先确定展示视图，再选择卡片视觉形态，最后根据页面场景增减信息模块。掌握这套标准化设计思路，就能快速完成全平台统一、可复用的商品卡片组件规范。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
