记得几年前,有次在户外进行拍摄相关的工作,厦门突如其来的大雨,直接把我困在公园里的大树下。遇到这样的情况时,我们通常会面临选择:是一直待在原地等雨停,还是淋着雨跑出去呢?我想答案要取决于这突如其来的大雨会持续多久。那时候,是彩云天气给了我答案,打开彩云天气 app,便能预知当前的大雨接下来会有什么样的变化。

公交车窗外的雨,摄于上海

除了可以得到几分几时雨停的信息之外,彩云天气提供的小时天气信息我也特别喜欢,在苏州生活时,二楼露台上的花植经不起大风摧残,我会通过查看小时的风力预测信息来调整露台的抗风工作。

每次和朋友聊到天气相关的话题时,由于精准实用的街道分钟级降雨预测,我总忍不住给他们推荐彩云天气。 

2020 年 2 月 29 日,我发了这样一条微博:

微博发出之后,我在彩云科技开发平台注册了账号,申请了对应的接口权限,但由于种种原因,开发工作一直未开始。

2021 年 7 月 8 日,时间过去了一年多,我本来在准备另一款 app 的大版本更新,但进程有些曲折,便偶然想起要不停下一会儿,试试彩云天气的数据接口玩一下。就这样,我开始了新的学习之旅。

我将这款新的 app 取名为白云天气,原因很简单:我希望它能相对彩云天气简单一些。

设计:一目了然感知天气

为了让我的学习之旅看起来更有收获,我决定用 Figma 来完成设计工作。一直以来,我都听说 Figma 是一款非常优秀的设计工具,但从未上手过。借这次机会,我正好熟悉它。

白云天气设计稿

此前的 奇妙组件 是我第一次尝试用渐变色彩来做设计,白云天气延续了这样的色彩风格。针对不同的天气现象,我分别设计了对应不同的背景色彩。相比于大部分的天气软件,白云天气的背景色彩会显得更加轻盈写意一些。

日落前和刚入夜时的背景色彩

白云天气的背景色彩做了很详尽的细分。比如说,小雨、中雨、大雨、暴雨这四种气象虽然都是雨,但它们也有着不同的色彩;再比如,在每天傍晚至深夜这个时间段里,白云天气的背景色彩会按日落前、日落时、日落后、刚入夜、深夜进行细分变化,为了遵循现实生活里的经验,针对日出日落这样的细分变化仅会出现在多云和晴天的时候。

在实际的 app 里,白云天气的色彩表现会比设计稿上来得更有趣一些。

1 级风和 10 级以上大风时的背景变化速度

白云天气的背景色彩会通过我预先调好的几种渐变规则进行随机变化,同时,它们的变化速度会根据当前天气的风速而调整。大部分的时候,白云天气的背景色彩就像呼吸一样在流动,但如果你遇见了 10 级以上大风(陆地生活里几乎不会出现的),那么背景色彩的变换速度会达到极值,像是警告信号一样闪烁不止。

代码:用 SwiftUI 边学边写

除了设计工具采用了陌生的 Figma 以外,为了学习更彻底,白云天气也是我的第一款完全使用 SwiftUI 开发完成的 app。

就个人粗浅的感受来说,除去那些偶然让人捉摸不透的 bug 来说,SwiftUI 对于用户界面的实现,的确要舒适畅快许多。白云天气里有不少的界面设计都是直接在撰写代码的过程中边写边设计调整而完成的。

两个直接在代码里完成设计的界面

同样得益于 SwiftUI,我可以较为轻松地实现一些动态效果。除了早先介绍的动态背景色彩外,白云天气的另一特点是预设了跟随实际雨雪雾等气象而进行变化的动画,这两者结合在一起,能帮助你轻松感知当前的天气状况。

例如,在遇到下雨气象时,动态动画会呈现下雨的样式,并且雨水落下的速度、大小、数量以及角度会跟随着降雨量的情况以及当时的风速而调整。

中雨和大雨时呈现的对应动画

和雨雪气象时动画跟随降雨降雪量及风速调整不同,雾霾、浮尘等天气时呈现的动画将会跟随当时空气质量的 PM 2.5 值而进行调整。这类天气的具体效果我就不截图展示了,希望大家都遇不上这类坏天气。

功能:一切都是熟悉的

进入首页,白云天气提供的所有信息都铺在这里,这类似于 iOS 系统天气的布局,想查看更多信息,只需轻轻滑动即可。在滑动查看小时天气数据时,我设计了一个会跟随滑动操作移动的小光标,光标指哪里,提示文字就会对应更新,以告诉你当前查看的天气信息具体是哪个时间什么样的,如果没有这样的提示,我们仅通过小时字样和图标可能难以识别出具体信息内容。

在城市列表里,长按卡片会进入编辑模式,轻点卡片将删除收藏的天气卡片;在搜索界面里,搜索会在键入文字后自动进行,你不必再多点一次搜索按钮。

在小时信息方面,我做了自定义的功能。除了开篇提到的小时风力信息外,用户还可以根据自己需要,选择显示云量、湿度、气压、能见度以及短波辐射这些小时天气数据。

如你所见,在功能与交互方面,白云天气没什么特别的。它只是一个纯粹简单的天气 app,尽可能在保持轻盈的同时提供准确的天气数据,我希望它没有额外的学习成本,因为在这里最重要的是把天气看明白。

小组件:延续风格

当前版本的白云天气设计了三个尺寸的基础小组件,它们的功能几乎与彩云天气或系统天气的小组件无差,你可以通过长按 - 编辑小组件来设定显示不同的城市和特定天气数据。

和白云天气的主程序一样,小组件的背景颜色也会跟随气象的不同而进行调整。不过,受限于系统针对小组件的刷新机制,小组件很难做到完全及时更新,基于这个原因,我更推荐你将白云天气的小组件用于装饰和粗略参考的作用,如果想查看准确的天气信息时,还是打开主程序最靠谱。

老实讲,在这个时间段去做一款全新的天气 app,多少有些不太理智。如我所讲,对于白云天气,我的出发点是想完成自己之前的一个小心愿,为了让这个过程更有意义一些,我强迫自己使用对我而言比较陌生的 Figma 和 SwiftUI 来完成整个产品的设计和开发工作,以达到在一个实际项目里进行学习的目的。

如今,这个小项目完成了,比我预期的完成度更高一些,它足以满足我的简单需求。如果你和我一样对于天气预报的需求相对简单,那么白云天气可能也适合你。

你可以在 App Store 免费下载白云天气,年订阅价格 28 元。受限于天气数据接口的权限以及付费成本,白云天气暂时无法提供彩云天气的所有功能,小组件和城市查询等功能需要通过订阅付费的形式来进行解锁。

如果你有任何关于白云天气的好建议,欢迎与我联系。

送码 (已结束)

恭喜 @廷彬同學、@zolo 获得兑换码,请留意站内私信。

在评论区说说你对白云天气的建议,以及你对于天气 App 的需求和看法,下周一 (08.30) 选 2 位读者送出年订阅兑换码。 

 

> 下载 少数派 2.0 客户端、关注 少数派公众号,解锁全新阅读体验 📰

> 实用、好用的 正版软件,少数派为你呈现 🚀