租车 App 设计：租车首页改版前后对比
一个租车首页，打开就是五个字段的表单，横幅指向虚无，车图只有 100×60。再看修好的同一屏：一个搜索框，优惠挂在真实车辆上，一行车型，整宽照片。每处改动并排对比，附免费 Figma 文件。
租车 App 的首页只有一个任务：让人找到想要的车。下面的初稿有司机需要的一切，但它一打开就是五个字段的表单，横幅大喊 25% off 却指向虚无，车辆被排到最后，只有 100×60 像素，参数还是 8 px 的小字。
修改版保留所有功能，把车放在最前面。它参考了 Turo 的布局：白色底、一个搜索框、整宽车辆卡片，价格放在照片下面。下面每一处改动你都可以直接照抄。
整个页面，改版前后
新手初稿
修改后
左边，车是屏幕上最小的东西。司机看到一辆车之前，要先经过五个表单字段、一个复选框、一个按钮、一个横幅和三个下拉菜单。每辆车都是 100×60 的缩略图，配 8 px 的参数和一个 BOOK 按钮。
右边，页面按司机做决定的顺序来读：去哪儿，哪种车，哪一辆。搜索是一个 48 px 的字段，车图是 350×190，文字 13 到 18 px，而初稿是 8 到 15 px。
改了什么，用数字说话
| 新手初稿 | 修改后 | |
|---|---|---|
| 搜索 | 五个字段（取车、还车、两个日期、司机年龄）加一个按钮 | 一个 48 px 字段，日期在右侧边缘 |
| 优惠 | 一个整宽横幅，带“!!!”和“T&C apply” | 车上一个 25% off 标签，$89/day，$119 被划掉 |
| 筛选 | 三个下拉菜单：Type、Price、Seats | 一行 34 px 的标签，可滑出屏幕边缘 |
| 车辆 | 100×60 的图，8 px 参数行，全大写 BOOK 按钮 | 350×190 的图，名称和价格在下面 |
| 边距 | 左 14，右 12 | 两侧 20，模块之间 14 |
| 标签栏 | 五个，实心和线性图标混用 | 四个，在悬浮栏里，第三辆车从下面穿过 |
修改 1：把表单折叠成一个字段
之前
之后
Find a Rental Car 表单，有取车地点、还车地点、取车日期、还车日期、带 Change 链接的司机年龄复选框、一个橙色 Search Cars 按钮和一行小字。对比一个圆角字段：放大镜、Pick up at SFO，右侧边缘是 Nov 8 to 10。
初稿让司机先填表，再看到哪怕一辆车。大部分答案其实早就知道了：还车地点和取车一样，年龄 25 岁以上，日期就是这个周末。表单却全都要问，而且分量一样，所以司机真正要决定的那一件事，得到的关注并不比他们根本不会碰的四件事多。
修改后的页面只留下两个重要的答案，在哪儿和什么时候，并放进一个字段。这和 Uber 的目的地字段是同一种模式。点一下会弹出一个面板，里面有还车、还车时间和司机年龄，所以什么都没删，只是挪到了再点一下的地方。
可复用的规则：展示默认值，只问会变的东西。
修改 2：把优惠放在真实的车上
之前
之后
一个整宽的橙色横幅：UP TO 25% OFF THIS WEEKEND!!!，右侧是 *T&C apply。对比一张高大的车辆卡片：照片上有 25% off 标签，Sport Coupe，2 seats 和 Auto，$89/day 和被划掉的 $119。
写着“up to 25% off”的横幅没说是哪辆车。司机得滚动页面去猜折扣适用于哪辆，三个感叹号和 10 px 的“T&C apply”，读起来更像警告，而不是优惠。
修改后的页面，折扣就在它所属的车上。照片上一个小标签写着 25% off，价格行显示 $89/day，旁边是旧的 $119。$119 减 25% 是 $89.25，所以这个数字是诚实的，优惠终于有东西可卖了。Turo 也是这么做的，优惠放在车辆信息上，而不是悬在它上面。
可复用的规则：优惠需要一个对象。把它挂在被打折的东西上。
修改 3：把三个下拉菜单换成一行
之前
之后
三个等宽的下拉菜单，分别写着 Type、Price 和 Seats，每个都带箭头。对比一行胶囊标签：All 选中为黑色，然后是 Electric、SUV、Coupe 和 Convertible，一直延伸到右侧边缘之外。
下拉菜单在点开之前会藏起选项，司机得点开 Type 才知道有 Electric、SUV 和 Coupe。并排放三个，还让 Price 和 Seats 和人们真正常用的那个筛选，也就是车型，拥有同样的分量。
标签不用点就能看到选项。选中的标签是黑色填充，这一行可以滑动，最后一个标签被屏幕边缘截断，告诉司机还有更多。Price 和 Seats 依然存在，现在从搜索框的筛选里打开。
可复用的规则：如果一个筛选有五个或更少的值，就直接展示。别把它们藏在菜单后面。
修改 4：给每辆车一张整宽照片
之前
之后
Popular Cars 下面四行，每行有一张 100×60 的照片、名称、一行 8 px 的参数、价格和一个橙色 BOOK 按钮。对比两张整宽卡片：一张带爱心的 350×190 照片，然后名称和价格在同一行，下面一行细节。
车就是产品，而初稿给它的空间最少。100×60 的时候，车只是一块有颜色的形状。参数行把座位、变速箱、燃料、0-60 加速、保险和评分挤进 8 px，一个都看不清，还全都在和价格抢注意力。
修改后的卡片给车一张带圆角的 350×190 照片，名称和日租价放在同一行。下面是一行 13 px 的细节，座位和变速箱。BOOK 按钮没了，因为整张卡片就是按钮：点一下，车自己的页面会显示参数、评分和 Book。
可复用的规则：商品列表就是照片列表。不是照片、名称或价格的东西，都放到再深一层。
其他小修改
- 只用一种品牌色。 橙色（#FF5A1F）只用来标 25% off 标签，别无他用。初稿把它用在横幅、搜索按钮、复选框、Change 链接、四个 BOOK 按钮和当前标签上。
- 更大的边距。 两侧 20 px，取代左 14、右 12，模块之间 14。
- 更平静的顶栏。 初稿的爱心和铃铛都挤在字标旁边。修改后的顶栏只保留铃铛，爱心现在是 Saved 标签。
- 悬浮标签栏。 四个标签（Explore、Trips、Saved、Profile）放在 62 px 的悬浮栏里，第三辆车从它下面穿过，暗示页面还在继续。
- 统一图标风格。 初稿的标签栏混用了实心和线性图标，现在全是线性。
- 名称对应任务。 Bookings 改成 Trips，Search 变成顶部那个字段。
- 删掉多余文案。 “Car of the Week”和 0-60 那一行没了，因为它们都帮不了人选车。
审查你自己的租车 App
| 问题 | 为什么重要 |
|---|---|
| 司机和第一辆车之间隔着多少个字段？ | 每个字段都是离开的理由 |
| 页面是否在询问它已经知道的答案？ | 默认值该展示，而不是询问 |
| 你的折扣指向什么？ | 没有对象的优惠只是噪音 |
| 筛选值是否藏在下拉菜单后面？ | 五个选项一行就放得下 |
| 车的照片有多宽？ | 人们买的就是车 |
| 卡片需要按钮，还是卡片本身就是按钮？ | 和卡片一样大的点击区域更容易点中 |
| 你的品牌色标记了多少种东西？ | 一种颜色，一项任务 |
获取 Figma 文件
免费文件包含新手初稿、修改后的页面，以及每个部件的组件。
免费 Figma 文件
租车首页改版，前后对比
两个页面和每个部件的 Figma 组件。免费，仅可查看，复制到你的草稿即可。
FAQ
租车 App 首页应该怎么设计？
先是一个带取车地点和日期的搜索框，然后是一行车型，再是整宽的车辆卡片，每张照片下面是名称和价格。把还车、还车时间和司机年龄放在搜索框后面再点一下的地方。
租车搜索应该有几个字段？
第一屏需要多少就几个：在哪儿和什么时候。还车、还车时间和司机年龄通常保持默认值，所以可以放进从搜索框打开的面板里。
租车折扣应该放在哪里？
放在它适用的那辆车上。照片上一个标签，加上新价格旁边被划掉的旧价格，比如 $119 和 $89/day，就能告诉司机什么在打折、打多少。指向虚无的横幅做不到。
车型应该用下拉菜单还是标签？
大约五个的时候用标签。一行可滑动的标签不用点就能展示 All、Electric、SUV、Coupe 和 Convertible，被屏幕边缘截断的标签表明还有更多。
租车 App 里的车辆照片应该多大？
占满整列宽度，手机上大约 350×190 像素。100×60 的缩略图会把车变成一块有颜色的形状，司机没法判断。
来源
- 两个页面都是我们自己的，在 Figma 中设计并测量。App Torque、价格和参数都是虚构的，也没有指明任何品牌或车型。布局参考 Turo：白色底、一个搜索框和整宽车辆卡片，价格在照片下面。单字段搜索参考了 Uber 的目的地字段。
- $119 减 25% 是 $89.25，显示为 $89/day。
- 图标来自 Phosphor（MIT）。状态栏根据实测的真实 iPhone 截图绘制。
- 照片来自 Pexels：Dextar Studio、Jae Park、miata7 MX-5、Furkan Ceylan 和 Can AGBULUT。
- 最初作为轮播图发布在 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
