球鞋 App 设计:商品页改版前后对比
一个球鞋商品页:照片上塞了四个图标和三个标签,价格淹没在五个数字里,尺码选中了也看不出来。同一个页面修好之后是什么样。每处改动并排对比,附上原因和免费 Figma 文件。
顾客打开球鞋页面,是为了回答三个问题:它长什么样,多少钱,有没有我的尺码。下面的初稿把三个答案都放进去了,却让顾客自己去找。修复版保持同样的商品和同样的价格,只是按顾客提问的顺序摆放答案。
整个页面,改版前后
新手初稿
修复后
左边,顾客在看到商品名之前,先撞上照片上的七个小标记。右边,先是照片,然后是名称和价格,唯一的深色按钮就是负责购买的那个。
| 新手初稿 | 修复后 | |
|---|---|---|
| 照片上的图标 | 4 | 2 |
| 照片上的标签 | 3 | 0 |
| 价格 | 一行 5 个数字之一 | 单独一行,旧价划掉,旁边是 19% off |
| 尺码框 | 41 x 32 px,一行 8 个 | 44 px 按钮,2 行网格 |
| 选中的尺码 | 1 px 边框 | 填充 #111111 |
| 售罄的尺码 | 和其他看起来一样 | 灰底划掉 |
| 购买按钮 | 2 个大写按钮和一个链接 | 固定栏里 1 个按钮 |
| 标签页 | 5 | 无 |
| 侧边距 | 左 14 px,右 12 px | 两侧各 20 px |
| 文字大小 | 9 到 14 px | 12 到 22 pt |
修复 1:照片上什么都不放
改版前
改版后
照片上四个图标加三个标签,对比只有返回和收藏两个按钮。
初稿把整家商店都压在商品上。顶部排着返回、分享、收藏和带红色“3”的购物车。左下角堆着“New arrival”“-19%”和“Free shipping”,正好盖在鞋头上。
修复版在照片上只保留两个 40 px 的圆形按钮:返回和收藏。其余的都搬到了该去的地方。折扣放在价格旁边,运费说明放在底栏总价下面,计数照片的圆点放在照片下方。
可复用的规则:商品照片就是商品。任何无助于顾客判断这双鞋的东西,都应该放到别处。
修复 2:先名称,后价格
改版前
改版后
价格挤在一排数字里,对比价格独占一行。
初稿把品牌设成 9 px 灰色大写字母,商品名折成两行,然后是一整行:“$129.00 | 4.8 (2,341 reviews) | 1.2k sold”。五个数字同样大小挤在一行,价格还得在其中去找。
修复版让名称用大号字单独成行。价格也独占一行:大号的“$129”,旁边划掉的旧价“$159”,还有一个小小的“19% off”标签。评分、评论和销量放在下面更安静的一行,因为它们辅助决策,而价格才是决策本身。两个页面的数字相同:129 除以 159 是 0.81,所以 19% off 是真的。
可复用的规则:几个数字共用一行时,总有一个是顾客真正需要的。给它单独的一行和尺寸。
需要核对的价格规则
划掉的价格在某些地方有法律问题。
修复 3:让选中状态一目了然的尺码
改版前
改版后
八个小框,对比一个状态清晰可见的按钮网格。
初稿的尺码框是 41 x 32 px,排成一行。选中的 8.5 只有 1 px 的深色边框,售罄的 9.5 看起来和有货的尺码一样。三个颜色圆点没有名称。
修复版把每个尺码做成 44 px 的按钮,排成两行,每行四个。选中的填充 #111111,配白色文字。售罄的在灰底上划掉,所以不用点就知道没货。颜色在色块下面有了名称:Crimson、Black 和 Lime,选中的带一圈环。
44 px 的高度很重要。Apple 的指南要求点按目标至少 44 x 44 点,而一行八个的 32 px 小框很容易点偏。
可复用的规则:每个选项都需要三种可见状态:可选、已选和不可用。用填充来表达,而不是靠一条细线。
修复 4:一个负责购买的栏
改版前
改版后
两个大写按钮加一个链接,对比价格加一个按钮。
初稿的结尾是数量加减器、描边的“ADD TO CART”、黑色的“BUY NOW”和一个小小的“Add to Wishlist”链接。两个分量几乎相同的按钮,逼顾客先选一种购买方式,而且它们会随页面滚走。
修复版用一个停在底部的栏收尾:“$129”,下面是“Free shipping”,再加一个黑色的“Add to Bag”按钮。心愿单就是照片上的收藏按钮。标签栏也撤掉了,因为买入栏下面再放五个标签,只会和它争抢注意力。
可复用的规则:主操作只给一个按钮,并把价格放在它旁边。
更细的修复
- 统一的左边缘。 初稿的边距是左 14 px、右 12 px。修复版两侧都用 20 px。
- 真正的字号体系。 文字从 9 到 14 px,改为 iOS 的 12 到 22 pt。
- 句首大写。 大写的“ADD TO CART”和“BUY NOW”变成了“Add to Bag”。
- 更安静的链接。 蓝色的“Size Chart”变成灰色的“Size guide”,因为它辅助选择,而不是选择本身。
审查你自己的商品页
| 问题 | 为什么重要 |
|---|---|
| 照片上除了返回和收藏,是否什么都没有? | 顾客是来看商品的 |
| 价格是否独占一行? | 这是每个顾客都在找的数字 |
| 隔着房间能分辨出选中的尺码吗? | 细边框不算一种状态 |
| 售罄的尺码在点按之前就不一样吗? | 能省掉一次无效点击 |
| 页面滚动时价格还留在屏幕上吗? | 价格和操作属于一起 |
FAQ
球鞋商品页应该先展示什么?
照片,上面只有返回和收藏。然后是名称,再然后是单独一行的价格。
如何设计鞋子的尺码选择器?
把每个尺码做成至少 44 px 的按钮,选中的用深色填充,售罄的划掉。选中尺码周围的细边框太淡,看不清。
商品页上的促销价应该怎么展示?
大号显示现价,旁边划掉旧价,再用一个小标签显示折扣百分比。这里两个页面都用 $129、$159 和 19% off。请查看当地关于可以展示哪个旧价的规定。
商品页应该同时有“加入购物车”和“立即购买”吗?
一个主按钮更清晰。两个分量相同的按钮,会让顾客在决定购买之前先选购买方式。
商品页应该有标签栏吗?
这个页面不要。页面只有一件事,买入栏下面的标签栏会和它争抢。
来源
- 两个页面都是我们自己在 Figma 中设计并测量的。商品名、品牌、价格和评论均为虚构。
- 商品照片来自 Pexels,作者 Ahimsa - OM。
- Apple Human Interface Guidelines: Typography,修复版页面使用的 iOS 字号出处。
- Apple Human Interface Guidelines: Accessibility,44 pt 触控目标尺寸出处。
- European Commission notice on the interpretation of Article 6a of Directive 98/6/EC,先前价格规则出处。
- 最初作为轮播图发布在 App Brainy。
Want this for your own app? Our team redesigns product pages and shop apps like this one, from the first audit to the finished components.
Get Started
