植物商店 App 设计:电商首页改版

植物商店已经解决了最容易的部分:商品本身很上镜。下面的初稿有真实的植物和真实的照片,却把它们埋在拥挤的头部、三个下拉筛选、一大段养护提示和每张卡片下的七项内容之下。修改后的版本保留了所有功能,只是把空间还给了植物。

整个页面的前后对比

初级版草稿

修改后

左边,用户要先读完头部、筛选栏、三句建议和一堆商品细节,才能完整看到一株植物。右边,三个简短的区块之后就是第一批植物,每张卡片就是一株完整的植物加一个价格,绿色只承担一个任务:标出可以点按的东西。

促销两个页面里都保留着。Pilea 售价 $24.99,划掉的原价是 $31.00;袖珍椰子售价 $28.00,划掉的原价是 $35.00。商店、价格和评论都是为练习编造的,植物是真的。

修改 1:只留 logo、搜索和购物车

修改前

修改后

一个菜单、logo 和三个小图标,对比同一个 logo 加两个大的圆形按钮。

草稿的头部塞了菜单、logo、搜索、爱心和购物车。爱心是心愿单,而修改后的页面给心愿单安排了一个标签页“收藏”,所以爱心不必再待在头部。购物车保留位置,因为它是用户期望在商店顶部找到的唯一控件,角标会显示里面有多少件东西。

剩下的图标变大了:两个 44 px 的按钮,取代四个小图标。手机是单手握持的,更大的点按目标更容易点中。两个页面的 logo 是同一个字标,这正是重点:头部是靠做减法修好的,而不是给品牌换了造型。

角标从红色改成了品牌绿。红点表示出了问题或很紧急。商品数量两者都不是。

修改 2:看得见的筛选,而不是下拉菜单

修改前

修改后

分类、价格和尺寸是三个收起的下拉菜单外加一个排序链接,对比室内、室外、多肉和宠物友好四个标签,其中“室内”被选中。

下拉菜单把选项藏了起来。用户要先点一下,读一个列表,选择,然后列表又收起。三个下拉菜单就是三趟这样的往返,而屏幕上还没有一株植物发生变化。它们还只告诉你存在哪种筛选,而不是里面有什么。

标签把选项摆在明面上。室内、室外、多肉和宠物友好,是植物买家真正会问的问题,所以点一下就回答其中一个,绿色的选中标签显示当前状态。四个标签刚好放进 350 px 的一行,还余 6 px,所以没有被截断,也不需要滚动。

修改 3:一张卡片就是一整株植物

修改前

修改后

照片、角标、爱心、两个名称、价格、星级、评论数和一个通栏按钮,对比照片、简短名称、价格和一个圆形按钮。

草稿的卡片在照片下堆了七样东西:植物的拉丁学名、常用名、价格、原价、星级、评论数和一个通栏的“加入购物车”按钮。照片上还有折扣角标和爱心。这一切都挤在只有半个屏幕宽的卡片里。

修改后只保留两行和一个按钮。名称很短(“Pilea”“Calathea”),价格在它下面,有促销时原价划掉。一个圆形加号按钮取代了宽宽的“加入购物车”条,因为商品卡片上的加号是用户早已熟悉的模式。

照片也改了。草稿的裁剪切掉了植物,花盆也没有对齐。修改后把每张照片都裁成整株植物居中,约占画面高度的 70%,每个花盆在同一条线上。这样一排卡片读起来就是一排,而不是四张不同的图。

修改 4:养护提示变成三条要点

修改前

修改后

绿色框里的三句建议,对比三个图标,每个配一个标签和一个词。

草稿说的内容没错,但用户得读三句话才能找到它们。这三个要点是浇水、光照,以及这株植物对宠物是否安全,每一条都能用一个词说完:每周、间接、安全。

修改后给每条要点配一个图标、一个小标签和一个加粗的词。整张卡片一眼就能读完。想找“能放在我家猫旁边吗?”的植物买家,不用读文字就能找到“宠物:安全”。

其他小修改

• 四个标签页,不是五个。 首页、商店、收藏和我的。心愿单变成了收藏,购物车从标签栏移到了头部。
• 统一边距。 草稿左边用 14 px,右边用 12 px。修改后两侧都是 20 px,区块之间 12 到 14 px。
• 照片上不放角标。 红色的 -20%、蓝色的 NEW 角标,以及每张照片上的爱心都去掉了。促销仍然看得见,因为划掉的原价还在。
• 一个强调色。 草稿的绿色旁边还有红色和蓝色角标。修改后所有可点按的东西只用一种品牌绿 #1F7A4D。
• 真正的字号体系。 文字从 8 到 20 px 改成了 iOS 的 11 到 20 pt。
• 更短的区块标题。 “Popular Plants”变成“Popular”,因为整个页面本来就是关于植物的。

审视你自己的商店 App

获取 Figma 文件

免费文件包含作为组件的两个页面、每处修改的前后对比、颜色变量和 iOS 文字样式。

免费 Figma 文件

植物商店首页,修改前后

两个页面以及每个修改过的部分,都以 Figma 组件形式提供。免费,仅可查看,可复制到你的草稿中。

在 Figma 中打开

常见问题

电商 App 首页应该先展示什么?

一个简短的头部,有 logo、搜索和购物车,然后是作为标签的筛选和第一批商品。所有不是商品的内容,比如提示或横幅,都要保持小巧。

购物 App 的筛选应该用下拉菜单还是标签?

对用户最常用的少数筛选,用标签。标签不用点按就能显示选项,选中的那个显示当前状态。价格和尺寸这类长列表,再用下拉菜单或筛选面板。

购物 App 的商品卡片应该显示什么?

完整商品的照片、名称、价格和一个加购按钮。评分和长名称之类的细节可以放在商品页。

如何在 App 里展示养护说明?

用带图标的几条简短要点,每条一个词,比如“浇水:每周”。长句可以放在更深一层的点按之后。

购物 App 应该有几个标签页?

四个或五个。把重复的入口并进用户本来就会去看的地方,比如购物车放在头部,心愿单放在“收藏”标签里。

来源

• 两个页面都是我们自己的作品,在 Figma 中设计并测量。商店、价格和评论都是编造的,植物名称是真的。
• 照片来自 Pexels,作者为 Kulbir、Gül Işık 和 Kaboompics。
• Apple Human Interface Guidelines: Typography,修改后页面使用的 iOS 文字大小出自这里。
• 最初作为轮播图发布在 App Brainy。