时尚商店 App 设计：服装店首页改版前后对比

时尚商店 App 的首页只有一个任务：让人想要这些衣服。下面的初稿把折扣放在了第一位。顶部拉着一条红色跑马灯，下面是六个带下划线的链接，每个商品卡片都在一张小照片下面堆着标签、星级、两个价格、颜色圆点和一个按钮。

修改版保留了所有功能，让衣服自己去承载促销。跑马灯变成一张满幅牛仔照片，优惠用两行字放在它下面，顶栏回归简洁，每张卡片换成一张大大的 3:4 照片，只配一个价格。

整个屏幕，改版前后

初级设计师初稿

修改后

左边，所有东西都在用同一个音量喊叫。跑马灯是红的，标签是红的，价格是红的，按钮是黑的，眼睛无处下手，而衣服成了屏幕上最小的东西。

右边，顺序很清楚：品牌、去哪里、唯一的优惠、然后是商品。照片更大，文字数量更少，红色只留给一个词：Sale。

改动了什么，用数字说话

修复 1：卖衣服，不卖折扣

之前

之后

一条细细的通栏红色横幅，白色大写字母写着夏季促销，最高五折，外加免运费，代码 SUMMER50，对比一张穿着的牛仔夹克满幅照片，上面是大号衬线字体的 The Denim Edit，下面是灰色的 Up to 50% off。

跑马灯就是横幅，而人们早就学会了跳过横幅。这一条用 10 px 的字塞了四条信息：季节、折扣、免运费和优惠码。没有一条展示任何一件衣服，所以打开时尚 App 的人首先看到的是一张警告标签。

修改版给优惠配上了图片。照片是模特身上的商品，从下巴以下裁切，让夹克填满画面，没有圆角也没有渐变，所以能铺满整个宽度。照片下面，两行字承担了跑马灯的工作：28 px 的系列名称和 14 px 的折扣说明。优惠码和免运费承诺移到了主图后面的页面，点进去的人已经准备好阅读条款了。

价格计算保持诚实。$178 打五折是 $89，和初稿的价格一样。

可复用的规则：展示在卖的东西，并在它下面用普通文字说出优惠。如果照片需要一条横幅来解释，那就换一张更好的照片。

修复 2：简洁的顶栏，和能告诉你身在何处的标签页

之前

之后

左对齐的顶栏，有菜单图标、OLEA 字标，然后是搜索、爱心和带红色角标的购物袋，下面是六个带下划线的链接：Women、Men、Kids、New、Brands 和红色的 Sale，对比左侧是菜单图标、居中的大号 OLEA 字标和带深色小角标的购物袋，下面是文字标签页，其中 Women 是深色带下划线，Sale 是红色，其余是灰色，并延伸出右边缘。

初稿里，四个图标和一个字标挤在一条 364 px 的行里，下面六个链接全都带下划线。下划线的意思是“这是当前项”，所以六条下划线等于什么都没说。根本没有选中状态。

修改版做了两件事。字标移到中间，大小能让人看清，顶栏减到两个图标，因为搜索和爱心已经在标签栏里了。然后分类去掉下划线，让下划线重新只表示一件事：Women 是深色带线，其他是灰色，Sale 是红色，因为它是唯一不属于某个品类的分类。这一行延伸出屏幕边缘，告诉人们它可以滚动。

可复用的规则：让下划线表示“你在这里”，颜色只用一次，给需要标记的那一项。

修复 3：一张照片，一个价格

之前

之后

一排三个商品卡片，每个都有一张穿牛仔夹克的人的小竖版照片、红色负 50% 标签、爱心、9 px 的名称、带评分的五颗金色星星、红色价格和划线原价、三个颜色圆点和一个黑色 ADD TO CART 按钮，对比两个更大的卡片，照片是夹克本身，照片上有爱心和加号，下面是名称、一个价格和三个颜色色块。

初稿的一个卡片装了九样东西：照片、标签、爱心、名称、星级、评分、两个价格、圆点和一个按钮。在 117 px 宽的空间里，每样东西只分到几个像素，照片反而是最小的部分。人脸占满画面，商品几乎看不见。

修改版保留四样：照片、名称、价格和色块。

照片是 169 x 225，标准的 3:4，直角，每张都裁切到服装本身，所以牛仔面料的质感就是画面。爱心留在照片上。加入购物车变成照片角上的一个加号，功能一点即达，不用在每个卡片下面放一条黑色按钮。星级和第二个价格移到商品页，那是购物者决定细看的地方。

一排两张照片而不是三张，也意味着每个名称在 13 px 下能放进一行，而且标签栏悬浮在下一排卡片上方，滚动永远不会撞墙。

可复用的规则：列表页的卡片回答的是“我喜欢吗，多少钱”。其他一切都放到深一层的页面。

更细小的修复

• 所有功能依然可达。 加入购物车是每张照片上的加号，筛选和排序藏在滑块图标后面，搜索是第二个标签，菜单仍在左上角，Brands 仍在分类行里，其他商品在更下面的滚动区域。
• 均匀的边距。 初稿左边 14 px，右边 12。修改版两侧都用 20，区块之间用 10。
• 白底，单一墨色。 白底黑字是唯一的界面颜色。其余颜色由照片提供。
• 照片裁切到衣服。 每张图都放大并在裁切框内偏移，让夹克填满画面。照片里有人，但主角是服装。
• 更平静的标签栏。 一个小型悬浮栏里的四个图标，取代了带文字标签、实心和线框图标混用的五个标签。
• 真正的字号体系。 文字从 13 到 28 px，而初稿是 8 到 15 px。

审查你自己的商店屏幕

获取 Figma 文件

免费文件包含初级设计师初稿、修改后的屏幕，以及每个部分的组件。

免费 Figma 文件

时尚商店首页改版，前后对比

两个屏幕和每个部分都是 Figma 组件。免费，仅可查看，复制到你的草稿即可使用。

在 Figma 中打开

常见问题

时尚商店 App 的首页应该怎么设计？

以商品的满幅照片开头，把优惠用两行文字放在它下面。接着是纯文字分类，然后是两列卡片，配大大的 3:4 照片，每张下面只有一个价格和几个颜色色块。

服装 App 里的商品照片应该多大？

服装的标准是 3:4 竖版比例。这里的卡片在 390 px 宽的屏幕上是 169 x 225 px，每行两个，直角，照片裁切到服装本身。

时尚 App 应该显示促销横幅吗？

避免不带任何商品的横幅。一张照片加下面一行简短的优惠说明就能完成同样的工作，红色可以留给 Sale 标签页，这样折扣容易找到，又不会主导屏幕。

商品卡片应该显示多少细节？

列表页有四项就够了：照片、名称、价格和颜色色块。评分、原价和尺码属于商品页，加入购物车可以是照片上的一个加号。

购物 App 的分类导航应该是什么样？

用文字标签页，一个加下划线表示当前项，其余用灰色，只给 Sale 一个强调色。让这一行延伸出屏幕边缘，人们就知道它能滚动。

商店 App 的标签栏应该放什么？

四个图标就够了：商店、搜索、收藏和个人。购物袋留在顶栏，那里能看到它的数量。

来源

• 两个屏幕都是我们自己的作品，在 Figma 中设计和测量。App OLEA、它的商品和价格都是虚构的。两个屏幕上的价格是一致的：$178 打五折是 $89，$118 打五折是 $59。
• 研究的模式：Zara 和 SSENSE 的时尚 App，白底、简洁顶栏、文字标签页、满幅主图和直角 3:4 卡片。
• 照片来自 Pexels：主图由 Thomas Nguka 拍摄，夹克卡片由 Arturo A 拍摄，Bleached Trucker 由 Kristina Polianskaia 拍摄。图标来自 Phosphor (MIT)。
• 最初作为轮播图发布于 App Brainy。