打车应用设计:打车首页的改版前与改版后

打开打车应用的人,通常站在某个地方,想去另一个地方。下面这版初稿能用,但在第一次点击之前就向用户索取太多:地图上漂着六个控件和一条黄色横幅,底部面板有两个地址输入框、六种颜色各异的服务,还有一排标签。改版保留了所有重要功能,却只问一个问题。

整个屏幕的改版前与改版后

初级版草稿

改好后

左边,地图被控件盖满,面板像一张表单。右边,地图就是地图,面板只有一个输入框、四行和四项服务。地图也变矮了,从 380 px 降到 270 px,所以真正重要的面板起点更高。

修改 1:地图上只留两个按钮

之前

之后

六个控件、四种形状加一条横幅,对比一个菜单和一个定位按钮。

初稿在街道上叠了菜单方块、搜索圆钮、图层方块、路况胶囊、缩放按钮组和绿色定位圆钮,顶部还横着一条大写的促销横幅。这些都是乘客可能想要的东西。但没有一个是乘客来这里要做的事,合在一起还盖住了用户想看的地图。

改版保留两个 44 px 的按钮:菜单和我的位置。搜索圆钮只是通往面板里同一个搜索的第二个入口。横幅则下移到面板里,变成一行。

图层、路况和缩放按钮组不在这个屏幕上,而这次改版也没有画出它们的归宿,所以真实的应用需要给它们找个家。地图双指缩放并不需要两个按钮。

可复用的规则:地图上只放会改变你当下所见内容的控件,其余的另找地方安置。

修改 2:用一个问题取代两个输入框

之前

之后

两个地址输入框加一个交换按钮,对比一个问“去哪儿”的输入框。

初稿打开就是一张表单:带绿点的上车点输入框,带黑点的目的地输入框,还有一个交换箭头。上方地图上已经有一个蓝点显示乘客的位置,所以第一个输入框问的,屏幕早就说过了。

改版在一个 52 px 的输入框里问“去哪儿?”。右边是一个“现在”标签,时间就放在这里:想稍后用车的人去改它,其他人根本不会读它。交换按钮也随着上车点输入框一起消失了。

可复用的规则:只问你不知道的那一件事,能猜到的就做成可修改的标签。

修改 3:四项服务,统一风格

之前

之后

六项服务六种颜色,对比四项服务一种灰色加一种绿色。

当每项服务都有自己的颜色,颜色就不再代表任何意义。初稿的六个图块是绿、橙、蓝、紫、粉和青,每个图标又重复自己图块的颜色,文字只有 9 到 12 px。这一排里没有任何东西告诉乘客通常该选哪个。

改版画出四项服务,快车、包裹、预约和租车,做成大图块,放在同一种柔和灰上,图标用品牌绿 #16A34A。它们够宽,可以一边点一边读。摩托和 XL 不在这个首页上,这是本次改版并不回避的取舍,因为我们没有画出它们的去处。

可复用的规则:让一种品牌色代表“这就是这个应用”,再用形状和图标区分各个选项。

修改 4:常用地点做成行,并显示地址

之前

之后

没有地址的标签加两条很长的最近记录,对比带名称、地址和点击区域的行。

一个写着“家”的标签,只有在乘客信任它的时候才能告诉他要去哪儿。初稿的标签不显示地址,下面的最近记录是“Ferry Building, The Embarcadero, San Francisco, CA 94111”这样的长串,连邮编都用 12 px 写出来了。

改版把每一个都做成一行:图标、加粗的名称,下面是短地址,“家,Hayes St 24 号”。渡轮大楼是最近地点,下面写“The Embarcadero”,城市和邮编都去掉了,因为乘客本来就在那座城市里。30% 优惠成了第四行,带绿色标签,下面是“优惠码 NEWRIDE”,字号和地点行一样。

优惠仍然在,只是不再满地图地大喊大叫。

可复用的规则:快捷方式应该显示它通向哪里,促销可以是一行。

其他小修改

• 统一左边缘。 初稿的面板左边距 14 px,右边距 12 px。改版两侧都用 20 px。
• 统一强调色。 初稿横幅用黄色,定位按钮用绿色,服务用六种色调。改版在当前标签、服务图标和优惠标签上用品牌绿,其余用灰色。
• 真正的字阶。 文字从 9 到 12 px 改为 iOS 的 13 到 17 pt。
• 四个标签,不是五个。 首页、行程、钱包、优惠和账户,变成首页、活动、钱包和账户。优惠没了,因为优惠现在是首页上的一行。
• 更矮的地图。 地图高度从 380 px 降到 270 px,所以那个问题的位置更高。

审视你自己的打车应用

获取 Figma 文件

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

免费 Figma 文件

打车应用首页,改版前后

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

在 Figma 中打开

FAQ

打车应用首页应该展示什么?

一张带两个按钮的地图、一个“去哪儿?”输入框,以及下方几个快捷方式。服务、常用地点和优惠属于面板,不属于地图。

地图屏幕应该有多少个控件?

首页上两个就够:菜单和我的位置。图层、路况和缩放可以放在别处,毕竟地图用双指就能缩放。

如何设计“去哪儿”搜索框?

做成一个大输入框,把问题放在里面,右侧放一个“现在”标签用来管理时间。地图已经显示用户所在位置时,不要先问上车点。

打车应用该如何展示快车、XL 和包裹等服务?

用统一风格的大图块,图标用品牌色。首页放得下四个,其余的需要自己的位置。

打车应用里如何展示优惠码?

做成与地点同样风格的一行,配简短标题,优惠码写在下面。地图上的横幅会盖住乘客来看的内容。

打车应用应该用多大的字号?

用平台的文字规格。改好的屏幕使用 iOS 的 13 到 17 pt,地图按钮为 44 px。

来源

• 两个屏幕都是我们自己在 Figma 中设计并测量的。地图是我们自己用矢量绘制的街道、公园和小溪。渡轮大楼和甲骨文球场是旧金山的公共地标;家和公司的地址是编造的。没有使用照片。
• Apple Human Interface Guidelines: Typography,改好的屏幕使用的 iOS 文字大小出自这里。
• Apple Human Interface Guidelines: Accessibility,44 pt 触控目标尺寸出自这里。
• 最初作为轮播图发布在 App Brainy。