天气应用设计:首页改版前后对比

人们打开天气应用,是为了回答一个问题:外面现在怎么样,接下来会怎样?下面的初稿确实回答了,但它没有停下,因为它把预报返回的一切都摆了出来:完整的地名、精确到秒的时间戳、九个 9 px 的方块和十天的彩色图标。修正版保留同样的数据,并先想清楚首页到底是干什么的。

整屏对比:改版前与改版后

新手初稿

修正后

左边,第一张卡片里塞着地名、时间戳、单位切换、温度、天气状况,还有四条额外信息挤在一小行里。下面是三个装着小字的白框。右边,屏幕顶部只有三样东西:城市、数字和天空。下面的一切都是同一片蓝色上的卡片。

右边的每张卡片都从同一条 20 px 的左边缘开始,天气图标是一轮黄色太阳躲在白云后面,放在第一块的右侧,正对着温度数字。

修正 1:城市和一个大数字

之前

之后

带州和国家的地名、时间戳、切换开关和一小行事实,对比城市、大数字、天空状况和当天温度范围。

初稿的第一张卡片,就是一张塞满预报数据的表单。“New York, NY, United States”是同一个地方的三个名字,而用户早就知道自己在哪儿。“Updated 10/24/2026 09:41:12”精确到秒,对用户却毫无用处:没人会根据时间戳决定穿什么。单位切换还被放在最重要那张卡片的角落里。

修正版只写“纽约”和“72°”,并把数字做到 84 px,成为屏幕上最大的元素,因为它就是问题的答案。接着用文字说天空状况,“多云”,然后是当天范围,“H 75° L 61°”。体感温度和降雨概率离开了这个区块:体感温度被移到下面的细节里,有了自己的卡片。

可复用的规则:首页顶部只留给那一个答案。人们第二步才会查的数据,往下放一级。

修正 2:六小时,一张卡片,留出阅读空间

之前

之后

带边框横条里的八个窄列,对比六个宽列加一个白话标题。

初稿把八个小时挤进一行,于是每一列都很窄,字也很小。修正版只显示六个:现在、10 am、11 am、12 pm、1 pm 和 2 pm。少了两列,每个小时就能有更大的图标和更大的数字。

卡片标题从一个标签变成了一句话:“Sunny spells until 3 pm”。它告诉读者这六列加起来意味着什么,所以不用逐个扫图标去找天气什么时候变化。

可复用的规则:一行数据应该配一个标题,告诉人们该从中得到什么。

修正 3:四项细节,每项一个大数字

之前

之后

白色卡片里的九个小方块,对比四张更大的卡片和大字号数字。

九个 9 px 的方块把每项细节都当成同等重要,而且没有一个能一眼读清。气压、露点和能见度确实是真实数据,但并不是修正版优先展示的内容。

修正版保留四项:体感温度、湿度、风和紫外线指数。每项一张卡片,配图标、小标签,以及比初稿大得多的数字。“6 High”和“8 mph NW”在一臂远的距离也能读清。另外六项,气压、能见度、露点、日出、日落和空气质量,不在这个首页上。

完整的天气应用仍然需要给它们找个去处,比如详情页,而这次改版没有画这一页。

这是一笔诚实的取舍。首页读起来更快了,其余数据需要另一个家。

修正 4:三天预报,每天一条范围条

之前

之后

十行带降雨百分比和高低温的文字,对比三行每天带一条范围条。

十行“75° / 61°”,就是十道让读者在脑子里比较的算式。哪天最暖?从哪天开始变冷?答案就在数字里,但眼睛得自己去挖。

范围条替你做了比较。每天的最低温和最高温都落在 50° 到 78° 的同一刻度上,所以条越长或越靠右,就代表那天越暖或温差越大,条上的颜色从冷蓝渐变到暖黄。降雨百分比离开了这些行。10 月 24 日星期六是“Today”,接下来是后两天。

可复用的规则:当问题是一系列数据怎么比较时,就把比较画出来。

其他较小的修正

• 一条左边缘。 初稿左边距 14 px、右边距 12 px,各区块互不对齐。修正版每个区块都从 20 px 的边缘开始,卡片之间间距 12 px。
• 更深的蓝。 天空是从 #1D4ED8 到 #3B82F6 的渐变,初稿自己的蓝作为浅的一端。卡片铺在 24%(#1E3A8A)的深蓝薄层上,看起来是天空的一部分,而不是放在上面的白盒子。
• 蓝底上读得清的白字。 初稿在 #3B82F6 上的 9 px 白字是屏幕上最弱的搭配。在更深的卡片上用更大的字就解决了。
• 真正的字号体系。 文字从 8 到 13 px 改成 iOS 的 13 到 28 pt,顶部是 84 px 的温度。
• 四个标签页,而不是五个。 修正版去掉了一个标签页。
• 主卡片上不放单位切换。 华氏/摄氏开关离开了第一张卡片。

审视你自己的天气应用

获取 Figma 文件

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

免费 Figma 文件

天气首页,改版前后

两个屏幕和每个修正部分,均为 Figma 组件。免费,仅可查看,可复制到你的草稿。

在 Figma 中打开

FAQ

天气应用首页应该先显示什么?

城市和一个大大的温度,然后是天空状况以及当天的最高温和最低温。其他都往下放一级:接下来几小时、几项细节和一个简短的预报。

天气应用首页应该显示多少项细节?

对大多数人来说四项就够了:体感温度、湿度、风和紫外线指数。气压、能见度、露点以及日出日落放到详情页。

天气应用应该如何展示逐小时预报?

一张卡片放大约六个小时,用大图标和大数字,再配一个说明这些小时总体意味着什么的标题,比如“Sunny spells until 3 pm”。

应用里如何展示多日预报?

首页放三天,每天一条从当天最低温到最高温的条,并共用同一个刻度。更长的列表应该有自己的屏幕。

天气应用应该用多大的字号?

使用平台的文字比例,比如 iOS 文字大小,并让温度远大于其他任何内容。修正后的屏幕从 13 到 28 pt,温度为 84 px。

来源

• 两个屏幕都是我们自己在 Figma 中设计和测量的。地点、温度和日期都是为练习虚构的。
• 对比度使用 WCAG 2.2 对比度公式检查:修正后每张卡片上的白字都达到 4.6:1 或更高,而初稿在 #3B82F6 上的 9 px 白字只有 3.7:1。
• Apple Human Interface Guidelines: Typography,修正后屏幕使用的 iOS 文字大小出自这里。
• 最初作为轮播图发布在 App Brainy。