活动购票 App 设计:首页改版前后对比

活动 App 只卖一件事:一个出门玩的夜晚。下面的初稿里活动没选错,但全被埋掉了。它一上来就是 50 个字符的搜索提示、八种彩色分类、照片上 8 px 的街道地址,以及每一行六条信息。修改后保留活动和照片,把它们放在深色底上,让照片发光。

整个界面的前后对比

初级草稿

修改后

左边的界面有五个区块,没有一个是主角:带两个图标的页头、八个圆圈、照片上塞了四样东西的卡片,还有一个列表。右边,页头是一个问题,照片卡片是主角,列表就是列表。所有内容都从同一条 20 px 的边线开始,区块之间间隔 16 px。

修改 1:两行大标题和一个搜索框

之前

之后

一个小小的城市标签、一个铃铛和一个购物车,对比一个说明这个界面用途的大标题。

草稿的顶栏是个工具栏:小号粗体的城市名、铃铛、带角标的购物车,然后是一个提示长达 50 个字符的搜索框,“搜索活动、艺人、场馆、球队等……”,外加一个筛选图标。它告诉用户身在何处,给了用户一堆工具。

修改后给用户的是一句话。“今晚”是白色,“洛杉矶”是洋红色并带一个小箭头,所以仍然可以切换城市。28 pt 的它是屏幕上最大的字。

搜索框写着“艺人、场馆、活动”,保留了筛选图标。铃铛和购物车离开了页头,这次改版没有画出它们搬去了哪里。

可复用的规则:首页顶部应该用文字说清这个界面是干什么的。

修改 2:八个圆圈变成一行胶囊标签

之前

之后

两行八种颜色,对比一行同样式、选中项填充的胶囊。

草稿里的八个圆圈分别是粉、蓝、黄、紫、绿、橙、浅蓝和玫瑰色,是浅色模式的粉彩原封不动搬到了黑色界面上。它们占了两行,还没展示任何一个活动就要用户先做选择。

修改后是一行胶囊标签。“演唱会”填充品牌洋红色 #D6246E,其余都是朴素的深色胶囊。这一行可以滚动,所以“喜剧”被边缘故意截断,提示用户右边还有更多。

“更多”固定在末尾,完整列表始终一点即达。分类从八个减到七个胶囊,其余收进“更多”。

可复用的规则:筛选就该像筛选。一行、一个选中状态、一种颜色。

修改 3:一张主推卡片,一个按钮

之前

之后

一张带标签的照片、长标题、小字详情和两个按钮,对比一张大照片、一个名称和一个按钮。

草稿在照片上放了四样东西:红色“SELLING FAST!!”标签、一个爱心、全大写标题“NEON NIGHTS LIVE: THE WORLD TOUR 2026”,以及一行 8 px 的日期、时间、场地和街道地址。下面是含手续费的价格和两个全大写按钮,“BUY TICKETS”和“SHARE”。照片大半被文字盖住了。

修改后照片高 228 px,让舞台露出来。名称压在一层柔和的黑色渐变上,在标题下方从 0 渐变到 78%,所以白字在照片的任何位置都能读清。一个白色日期标签“OCT 24”取代了小字行里的日期。

场地和时间缩成“Marlow Theatre · Sat 8 pm”。照片下面,左边是“From $45”和“312 going”,右边是一个按钮“Get Tickets”。标签、街道地址和分享按钮都没了。

可复用的规则:一张卡片,一个动作。卡片的任务是换来一次点击,那就只给它一个。

修改 4:带日期、场地和价格的热门列表

之前

之后

一行灰字塞六条信息再加两个图标,对比日期、名称、场地和价格各就其位。

草稿里每一行都把名称、日期、时间、场地、年龄限制、价格区间和感兴趣人数塞进一行 8 px 的字里,还会换行。每行还有一个爱心和一个分享图标。合在一起读,就是一段话。

修改后每条信息都有自己的位置。日期在最上面,用品牌色大写:“FRI, OCT 30”。名称在下面加粗,再下面是灰色的场地,价格在右侧的圆角标签里,“$25”,取自草稿里“$25-$40”的起始价。

照片留着,变成方形缩略图。年龄限制、感兴趣人数、爱心和分享图标都离开了这一行,完整的 App 仍然需要给它们找个家。

可复用的规则:一行有很多信息时,给它们排序,让前四条各有自己的位置。

更小的修改

• 深色底,但不是纯黑。 草稿用纯 #000000,还留着浅色模式的粉彩。修改后用接近黑色的 #0B0B0F,配合 iOS 深色表面 #1C1C1E,让卡片从底色上浮起来。
• 一个强调色,再加一个给文字用的浅色。 品牌洋红 #D6246E 用于选中的胶囊和按钮。更浅的 #EC4F88 用于深色底上的洋红文字和图标,因为基础洋红在那里太暗,不好读。
• 一条左边线。 草稿左边 14 px、右边 12 px。修改后两侧都是 20 px,区块之间 16 px。

检查你自己的活动 App

获取 Figma 文件

免费文件里有两个界面的组件、每处修改的前后对比、颜色变量和 iOS 文字样式。

免费 Figma 文件

活动购票首页,改版前后

两个界面和每个修改部分的 Figma 组件。免费,仅可查看,复制到你的草稿里即可使用。

在 Figma 中打开

FAQ

活动购票 App 首页应该先展示什么?

先是一个说明界面用途的标题,比如“今晚,洛杉矶”,然后是一个搜索框和一行分类胶囊。主推活动紧随其后。

怎样设计主推活动卡片?

一张大照片,活动名称放在柔和的渐变上,日期做成标签,再加价格和一个按钮。街道地址、标签和分享按钮留给活动详情页。

活动 App 应该展示多少个分类?

大约七个胶囊,放在一行可滚动的列表里,选中项填充,“更多”固定在末尾。两行八个彩色圆圈会让人过早做选择。

活动 App 应该用深色模式吗?

很适合,因为舞台和人群的照片在深色底上会发光。用接近黑色的 #0B0B0F 搭配更浅的表面,而不是纯黑再留着浅色模式的颜色。

怎样在列表里展示活动详情?

给它们排序:先是强调色的日期,然后是名称、场地和价格。年龄限制、感兴趣人数和多余的图标留给详情页。

来源

• 两个界面都是我们自己的作品,在 Figma 中设计并测量。活动名称、场馆和街道地址均为虚构;日期已对照 2026 年日历核对。
• 照片来自 Pexels,摄影师为 Thibault Trillet(两个界面中的主推舞台)、Sid Dalal、julio cesar resendiz resendiz、Maor Attias 和 Martin Lopez。
• 对比度依据 WCAG 2.2 对比度公式检查:白色文字在 #D6246E 上为 4.8:1,#EC4F88 在深色底上为 5.7:1,而 #D6246E 只有 4.1:1。
• Apple Human Interface Guidelines: Typography,修改后界面所用的 iOS 字号参考。
• 最初以轮播图形式发布于 App Brainy。