酒店预订 App 设计:首页改版前后对比
一个以四字段表单开场的初级酒店预订首页,以及修好后的同一屏。每处改动并排对比,附上背后的理由和免费 Figma 文件。
旅行 App 的首页,得先让人想出发,再去问他任何问题。下面这版初稿恰恰相反:一上来就是四字段表单,目的地只是干巴巴的文字,一个价格还摊成了六行。修改后的版本保留了所有功能,只改变了你看到内容的顺序。
整个页面,改版前后
初级初稿
修改后
左边,屏幕上的第一件事是一项任务:目的地、入住、退房、人数,然后是一个渐变按钮。地点只在表单之后出现,还是五个灰色的文字胶囊。右边,搜索只是一张卡片,屏幕一半以上是地点和住宿的照片。
所有功能都保留了。你依然可以按地点、日期和人数搜索,浏览目的地,查看酒店价格。修改只是把繁琐的填写收进一张紧凑的卡片,把空间还给人们打开旅行 App 的真正原因。
| 初级初稿 | 修改后 | |
|---|---|---|
| 内容出现前的输入项 | 4 个字段和一个 44 px 按钮 | 1 个字段和 2 个标签 |
| 目的地 | 5 个文字胶囊 | 带城市和国家的照片磁贴 |
| 每张酒店卡片的价格行数 | 6 | 1,外加一条细节 |
| 头部 | 一句口号和两个图标 | 一个问题和一个图标 |
| 标签栏 | 5 | 4 |
修改 1:提出问题,去掉口号
之前
之后
“探索世界,与我们一起找到你的完美住所!”旁边是一颗心和一个铃铛,对比“下一站去哪?”旁边是一个带红点的铃铛。
首页上的口号是写给公司看的。问题是写给拿着手机的人看的,而且直接指向下方的搜索卡。“下一站去哪?”也正是朋友会问的话,这正是旅行 App 想要的语气。
心形图标离开了头部,因为收藏的地点已经有了自己的标签。铃铛留了下来,有新消息时显示红点,因为降价或预订变更,是唯一值得打断用户的事。
修改 2:一张搜索卡,日期和人数做成标签
之前
之后
四个堆叠的字段(目的地、入住、退房、人数)和一个橙色渐变按钮,对比一个目的地字段,加上“11月14日至16日”和“2位客人”两个标签,以及一个圆形箭头按钮。
四字段表单要求人们在还没看到任何一个地点之前,就做出每一个决定。大多数打开 App 的人还没准备好:他们只是在逛。一个占据三分之一屏幕的表单,对他们来说就是一堵墙。
日期和人数在两次搜索之间很少变化,所以修改后把它们显示为带合理默认值的标签,需要改时点一下即可。只有目的地需要打字。入住和退房合成一个标签“11月14日至16日”,因为没人会把一次住宿看成两个独立的日期。
修改 3:展示地点,而不是名字
之前
之后
“里斯本、京都、开普敦、巴厘岛、巴黎”做成灰色文字胶囊,对比里斯本和京都的照片磁贴,名字下方标着国家,下一块磁贴从边缘探出头来。
人们用眼睛挑选目的地。“京都”这个词要读者自己去想象那个地方;而黄昏里一座宝塔的照片,已经替他们想象好了。这就是这个板块的全部任务,文字胶囊做不到。
右边缘被切掉一截的磁贴是故意的。它不需要箭头或圆点,就告诉读者这一行可以滑动,轻轻一划就能发现更多地方。
修改 4:每个住宿只给一个价格
之前
之后
一张带 -30% 角标的小缩略图、五颗星、城市、划掉的 $320、每晚 $224、“+$38 税费”和两条绿色福利,对比一张大照片,配 4.8 评分、名称、“$224 每晚”和“里斯本,免费取消”。
初稿的卡片同时用四种方式展示价格:原价、现价、单位和额外费用,照片上的折扣角标还把它说了第五遍。读者得先做数学题,才能决定自己喜不喜欢这家酒店。
修改后只显示一个数字和一条细节。照片更大,因为是照片在推销住宿。这条细节是最能消除顾虑的那一个:免费取消。评分用一个可以比较的数字,取代了五颗画出来的星星。
那些较小的修改
- 四个标签,不是五个。 探索、收藏、行程和我的。首页和探索合并成一个标签“探索”,因为首页本来就是探索发生的地方。
- 用人们会说的词。 “心愿单”变成了“收藏”,“预订”变成了“行程”,这是旅行者真正会说的词。
- 一个强调色。 初稿的按钮用了橙色渐变,福利用绿色,折扣用红色。修改后操作用黑色,把颜色交给照片。
- 更短的名字。 卡片上的“Grand Riviera Resort & Spa”变成了“Grand Riviera Resort”,这样名字能和价格一起放进一行。
审视你自己的旅行 App
| 问题 | 为什么重要 |
|---|---|
| 用户能在填写任何字段之前先看到一个地点吗? | 首页上,随便逛逛的人比真正下单的人多 |
| 日期和人数是预填好的,并能以标签形式编辑吗? | 它们在两次搜索之间很少变化 |
| 目的地是照片吗? | 人们用眼睛挑选地点 |
| 每个住宿只显示一个价格吗? | 四个价格会让读者做数学题 |
| 有没有两个标签通向同一个地方? | 重复的入口让人不确定 |
获取 Figma 文件
免费文件包含两个屏幕的组件、每处修改的前后对比、颜色变量以及 iOS 文本样式。
免费 Figma 文件
酒店预订首页,改版前后
两个屏幕和每个修改部分,均为 Figma 组件。免费,仅可查看,复制到你的草稿即可使用。
FAQ
酒店预订 App 的首页应该先展示什么?
一个简短的问题、一个搜索框和地点照片。日期和人数可以作为可编辑的标签放在搜索卡里,这样浏览先于任何表单。
App 里的酒店价格应该怎么展示?
每个住宿一个清晰的价格,配一条辅助细节,比如免费取消。有强制性费用的地方,把它们计入标题价格。
旅行 App 的目的地该用照片还是文字?
用照片。人们是凭视觉选地点的,而在屏幕边缘被切掉一截的磁贴,无需额外控件就能表明这一行可以滑动。
预订 App 应该有几个标签?
四个或五个。把通向同一个地方的任意两个标签合并,并用旅行者常说的词来命名,比如“收藏”和“行程”。
来源
- 两个屏幕均为我们自己在 Figma 中设计并测量。
- 照片来自 Unsplash,摄影师为 Vali Sachadonig、Zion C、Asher Pardey、Roberto Nickson 和 Travis Chen。
- FTC 关于不公平或欺骗性费用的规定,涵盖短期住宿,2025 年 5 月 12 日生效。
- 最初以轮播图形式发布于 App Brainy。
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
