导航应用设计:驾驶界面重设计,前后对比
一个有十七个控件、转弯指示只有 11 px 的驾驶导航界面,以及修好后的同一屏:一张大转弯卡片、两个地图按钮、一眼就能看清的限速牌,以及只有一个红色结束按钮的行程栏。每一处改动并排展示,附免费 Figma 文件。
驾驶界面只有一条规则:司机每次看屏幕大约只有一秒,下一个转弯必须在这一秒内读完。下面的初稿把转弯信息塞进绿色条里一句 11 px 的文字,然后在道路四周堆了十七个控件、一条广告和四个地图图钉。司机想要的功能它全都有,可没有一个能在行驶中看清。
修改后保留了所有功能。它让下一个转弯成为屏幕上最大的元素,并把所有与接下来这一分钟无关的东西从路面上移走。
整个界面,前后对比
新手初稿
修改后
左边的指示是一整句话。司机必须在车辆行驶时用 11 px 的字号读完“In 400 ft turn right onto 16th St, then continue for 0.2 mi and turn left onto Mission St”。路线只是一条 4 px 的细线,车是一个 13 px 的圆点,一条咖啡广告和四个图钉还在和道路抢注意力。明明没有人会在开车时切换标签,标签栏却占据了屏幕底部。
右边的界面分为三块:顶部是转弯,中间是道路,底部是行程。路线宽到足以跟随,车是一个清晰的圆形标记,地图上只显示道路。
改了什么,用数据说话
| 新手初稿 | 修改后 | |
|---|---|---|
| 下一个转弯 | 绿色条里一句 11 px 的话 | 一张卡片:52 pt 箭头、28 pt 距离、17 pt 街道名 |
| 再下一个转弯 | 混在同一句话里 | 附在卡片下方的小标签“Then” |
| 路线 | 4 px 线条,车是 13 px 圆点 | 14 px 白色描边上的 9 px 蓝色路线,32 pt 的车标 |
| 地图按钮 | 五个 38 px 按钮,圆形方形混用,外加一组缩放按钮 | 两个 40 pt 白色圆形按钮:回到当前位置和音量 |
| 速度 | 36 px 的限速框和 36 px 的车速圆圈 | 48 × 60 pt 的限速牌,旁边是 32 pt 的“23” |
| 行程栏 | 一行 10 px 文字和五个 30 px 按钮,标签是 9 px 大写 | 绿色 24 pt 的“18 min”、距离和到达时间,一个红色结束按钮 |
| 标签栏 | 五个,图标填充和线框混用 | 驾驶时没有 |
| 屏幕上的控件 | 十七个 | 四个 |
修改 1:把句子变成一条大指示
之前
之后
一条细长的绿色条,里面一行小字写着两个转弯;对比一张绿色卡片,有一个大转弯箭头、“400 ft”和“16th St”,左下边缘还附着一个带左转箭头的小标签“Then”。
司机需要三个信息:往哪边、多远、在哪里。那句话里都有,但顺序是人说话的顺序,所以眼睛得从左读到右才能找到关键的那个。第二个转弯被埋在句尾,要么最后才读到,要么根本没读到。
修改后让每个信息有自己的大小。箭头说明方向,400 ft 说明距离,街道名在下方用较小字号,因为那是你拿来和路牌核对的部分。第二个转弯变成固定在卡片上的小标签,读起来是“然后”,而不是同等分量的第二条指令。
可复用的规则:当用户只有一秒时,把句子变成图形和数字。
修改 2:地图上只留两个按钮
之前
之后
一张地图,右边缘有五个按钮(图层、车、指南针、旗帜和音量,有圆有方),左侧有缩放按钮组,还有一条咖啡广告和四个图钉;对比一张干净的地图,右下角只有两个白色圆形按钮:回到当前位置和音量。
路面上的每个按钮,都可能诱使司机在行驶中去点。初稿右边有五个,左边有两个缩放按钮,圆形和方形混杂,让每个按钮看起来像是不同类型的东西。广告和四个图钉又在路线上方增加了更多点击目标和更多颜色。
修改后保留了司机行程中会用的两个:地图被拖动后用的回到当前位置,以及音量。缩放用双指捏合。图层、路况、指南针和上报按钮收进行程栏的一个箭头后面,所以什么都没删,只是挪到了乘客或停好的车能够得着的地方。广告和图钉从路面上消失了,因为只有路线才应该有颜色。
可复用的规则:车辆行驶时能点的东西越少,发生的点击就越少。
修改 3:把限速画成真正的标志牌
之前
之后
地图左边缘叠放着一个写着 LIMIT 25 的小框和一个写着 23 mph 的深色圆圈;对比一个白色标签,里面是写着 SPEED LIMIT 和大号 25 的限速牌,旁边是大号的 23 和小号的 mph。
司机早就知道限速牌长什么样:白底、黑边、SPEED LIMIT 字样、一个大数字。初稿用的是一个小框和一个深色圆圈,看起来和司机见过的任何东西都不像,还上下叠放,必须比较着看。
修改后画出了真正的标志牌,尺寸 48 × 60 pt,边框 2 px,数字 26 pt,并把当前车速以 32 pt 放在它旁边。两个数字并排,回答的是同一个问题:我超速了吗?一瞥即可,无需阅读。
可复用的规则:当现实中的物体已经承载了含义,就画出那个真实的物体。
修改 4:把行程精简到你会查看的内容
之前
之后
一行 10 px 的文字,写着 18 min (4.2 mi)、Arrive 9:59 AM、Fastest route、Light traffic,下面是五个同样大小的按钮:Exit、Steps、Share、Search 和 Add Stop;对比一张白色面板,上面是绿色大字 18 min,下方是 4.2 mi 和 9:59 AM,还有一个红色结束按钮和一个箭头。
行程中司机会查看三件事:还剩多久、还有多远、几点到达。初稿把它们塞进一行 10 px 的文字,还加了两个别的信息,然后又加了五个同样大小、9 px 大写字母的按钮,于是用来结束行程的“Exit”和“Share”看起来一模一样。
修改后把剩余时间用 24 pt 绿色显示,距离和到达时间放在下面,再加一个红色的结束胶囊按钮。用红色,是因为结束行程是唯一有代价的操作。Steps、Share、Search 和 Add Stop 收到箭头后面,乘客点一下就能用。
可复用的规则:给人们查看最多的数字最大的空间,给唯一有代价的操作唯一的警告色。
其他细节修改
- 换了一张地图。 修改后的界面用了自己的地图,裁切得更宽,车位于屏幕偏下的位置,路线从车向上延伸,显示前方的路而不是刚走过的路。
- 干净的描边。 路线在 9 px 蓝线下有 14 px 的白色描边,所以无论在黄色道路还是灰色街区上都清晰可读。
- 没有标签栏。 驾驶视图里去掉了五个标签。Drive、Explore、Saved、Trips 和 Profile 是车停好以后才用的。
- 按钮只用一种形状。 只用圆形,40 pt,让点击目标看起来就像点击目标。
审查你自己的驾驶界面
| 问题 | 为什么重要 |
|---|---|
| 下一个转弯能在一秒内读完吗? | 句子是用来读的,图形和数字是用来看的 |
| 车辆行驶时有多少东西可以点? | 每一个都是一次误触的机会 |
| 限速是否画成了标志牌? | 司机无需阅读就能解读 |
| 路线是否从道路中脱颖而出? | 细线在繁忙的地图上会迷失 |
| 唯一有代价的按钮是不是唯一的红色? | 警告色只能用一次 |
| 地图上有没有与接下来这一分钟无关的东西? | 广告和图钉属于停车后的界面 |
获取 Figma 文件
免费文件包含两个界面,每个修改后的部分都是组件。
免费 Figma 文件
驾驶导航重设计,前后对比
两个界面以及每个部分的 Figma 组件。免费,仅可查看,复制到你的草稿即可使用。
FAQ
导航应用在驾驶时应该显示什么?
下一个转弯、到转弯处的距离、街道名、当前车速和限速、剩余时间,以及一个结束行程的方式。其他一切都可以放在一次点击之后。
驾驶应用中的转弯指示应该多大?
大到一瞥就能读懂:在这次重设计中,箭头是 52 pt,距离是 28 pt。11 px 的单行句子需要阅读,而司机没有时间读。
驾驶时地图界面应该有多少个按钮?
两个就够了:回到当前位置和音量。缩放用双指捏合,图层、路况和上报可以收在箭头后面,留给乘客或停好的车使用。
应用里应该如何显示限速?
用司机早已熟悉的标志牌,有边框、SPEED LIMIT 字样和一个大数字,并放在当前车速旁边,这样两者一瞥即可比较。
为什么要从导航界面移除标签栏?
开车时没有人会切换标签,而标签栏会占用空间并分散对道路的注意力。行程结束后它再回来。
结束行程按钮应该是什么颜色?
红色,而且应该是屏幕上唯一的红色。结束行程是唯一有代价的操作,所以它得到唯一的警告色。
来源
- 两个界面都是我们自己在 Figma 中设计并测量的。这个应用 Waymark 是虚构的,23 mph、25 限速、18 min、4.2 mi 和 9:59 AM 仅作示意,两边保持一致。
- 路线沿用旧金山 Mission 区的真实街道:Valencia St、16th St 和 Mission St。地图数据:OpenStreetMap contributors。
- 图标:Phosphor Icons(MIT)。
- 最初以轮播形式发布在 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
