这个由设计师亲手开发的小程序,就是这么简洁好看 | 晓组织 #16

16

罗曼罗兰曾说过:

世上只有一种真正的英雄主义,那就是认清生活的真相后,依然热爱生活。

我热爱生活,是个理想主义者,也是个射手座。我热爱文学,却学了设计,我热爱设计,却学了开发。我想,我所做的一切,只是想更准确地表达自己。

感谢知晓程序(微信号 zxcx0101)给了我一次表述自己的机会。

小天气是什么?

小天气」是我做的一个实时查询天气的小程序。

排版简约精致,布局条理分明。

它采用精准的天气数据,提供分钟级的降雨提醒、实时天气、污染指数、48 小时逐时预报、五日预报、天气预警,以及其它单项天气信息。

为了让更多人看见,我选择了小程序

我很普通,自学了三年前端,踩了很多坑,也走了很多弯路,当然也获得了更多的成就感。

我做 web 前端,浏览器即是载体,因为无法让许多人打开浏览器,输入网址访问我的网站,所以我来到了微信。

说到「小天气」,也是因为一个很偶然的原因。

我的另一个移动 web 项目(文艺日签类,类似 one 一个,一言等产品)需要实现一个功能,就是用 Canvas 生成图片时,加上地理位置与本地天气。这使得我接触到了天气接口。

就此我找了许多天气接口提供商。然而,免费的数据不全,且调用量有限制,而且质量不一,要么少这个数据,要么少那个数据。收费的更是参差不齐,好坏不一。

「小天气」 1.0 版本采用的并不是现有的接口,而是采用的一家数据较全,而且数据都是已处理好的数据。

可惜,看着不错,调用方便,但是天气不准。这,是硬伤。

所以,我在考察了很多数据的全面性和准确性后,更换了第二个版本的数据。API 市场提供的天气 API 不适合做天气小程序,更适用于日历或外卖等平台使用的简单天气状况。

另外,我也找到了雅虎天气的 API,但由于返回的数据英文偏多,所以放弃使用。在此之前,我是使用彩云天气的,相对来说彩云天气比较精准。而此次发现彩云天气也是提供天气 API 的,最终决定选用彩云天气的 API。

相比第一版采用的 API,彩云 API 提供的数据更加原始,这也增加了很多自定义数据加工的方式。

比如关于风,返回的数据为风向角与风速,根据官方文档判断风向,风力,以及可以自定义风的具像化;比如一级风,对应炊烟直上。

这使得一个产品可以利用自定义而更具特色,我的想法是一套简约的文字,但是目前并没准备好。

不会设计的前端,不是好的程序员

我做「小天气」并没想太多,比如要做成爆款之类。

我是一名设计师,所以 UI 必须得到位。我理解的到位即是简约但精致,友好与实用,这也是「小天气」整体的设计理念。

我的女朋友很少看天气,但是我的女朋友很支持我做的事情,我想,我做完了,我的女朋友一定会看天气的。于我,于我女朋友,我都必须以一个最好的态度与知识,去完成「小天气」。

对此,我参考了众多 Dribbble 大神的天气作品,以及 App store 的天气 app。最终,定下了初稿,有了大的思路。

(著名创意交流网站 Dribbble)

每种天气状况对应相应的颜色,易于用户对界面有一个更加真实的直观感受,并且每种天气状况也都应该有自己的动画,这样搭配在一起,像极了主题,直观统一。

「小天气」至此更新了好几次,大多是因为 UI 优化,可能因为学的设计,在一些细节的处理上会犯强迫症。

在这次开发过程中也遇到过难点,主要是一些数组的处理加工。

比如逐时天气,需要在零点之后显示新的一天的日期,要不 48 小时天气很容易让人有一种眼花缭乱的感觉。这就需要在原数组中,添加新的一天的日期,然后在 WXML 里进行判断调用。

后来也做了预警信息模块,以及两小时每五分钟降雨量模块。但是,这两个模块在平常天气下不会显示。只在有当地气象局发布预警信息时,或两小时内有降雨数据时才会分别显示。这样做的原因,是让用户在最短的时间阅读完最重要、最需要的天气信息。

「小天气」在以后的更新中,UI 会继续优化,并且会增加地理位置切换,查询其它地区天气的功能。另外,还会利用 Canvas 生成今日天气的图片,排版会细致一些,利于大家保存与分享。

当然啦,许许多多的小细节都需要完善,谢谢大家的支持~

小天气内有联系方式,欢迎大家一起交流。

「小天气」小程序使用链接

https://minapp.com/miniapp/3811/

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-08-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

统一回复《怎么学JavaScript?》

于时不时,有同学私信问我怎么学前端的问题。 这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了。 首先说句题外话。关于有人管我叫大神的...

3455
来自专栏北京马哥教育

头条 Python 工程师面经分享:一年经验也能进大公司!

博主本人 2015 年毕业于郫县某 985 大学通信工程系,因为大学期间一直自己创业所以错过了大四秋招春招,毕业后又在北京继续创业一年,但在创业公司一直无法沉淀...

1763
来自专栏微信公众号:Java团长

很认真的聊一聊程序员的自我修养

大公司有厉害的程序员,优秀的架构师,但大量的小公司也有很多普通的程序员。在我这些年的工作经历中,也越来越深刻的感受到普通程序员的影响和力量。对于高阶程序员,所谓...

1182
来自专栏Crossin的编程教室

给伸手党的福利:Python 新手引导

这是一篇 Python 入门指南,针对那些没有任何编程经验,从零开始学习 Python 的同学。不管你学习的出发点是兴趣驱动、拓展思维,还是工作需要、想要转行,...

4388
来自专栏程序员互动联盟

学不好编程的三个原因

学习编程的是一个艰辛的历程,一不小心就走上了岔路。磕磕盼盼跌跌撞撞,甚至头破血流,直至放弃。在学习过程中我们尽量避免误入歧途。我们应该时刻谨记。 回头看学生时代...

3095
来自专栏微信公众号:Java团长

Java工程师书单(初级、中级、高级)

怎样学习才能从一名Java初级程序员成长为一名合格的架构师,或者说一名合格的架构师应该有怎样的技术知识体系,这是不仅一个刚刚踏入职场的初级程序员也是工作一两年之...

2452
来自专栏大数据钻研

很认真的聊一聊程序员的自我修养

程序员提高自我修养是为了什么? 程序写的好有人崇拜,有妹子喜欢?还是到博客、论坛、社区发表文章进行分享获得就?我想这是少数人的追求,也是更高的追求,在这之前 ...

2674
来自专栏CDA数据分析师

Python告诉你:这类程序员最赚钱!

都说程序员钱多靠谱话稳重,那么我们身边的程序员究竟月薪高到什么程度呢?本文将以Python爬虫、数据分析、全栈开发、运维开发、机器学习、架构师这7个岗位,从某招...

3372
来自专栏我是业余自学C/C++的

complete_code_Chapter2 原

通过把你不太理解的东西和一些你较为理解、且十分类似的东西做比较,你可以对这些不太理解的东西产生更深刻的理解。这种使用隐喻的方法叫做“建模(modeling)”.

832
来自专栏Danny的专栏

2013 年度回忆录

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

1093

扫码关注云+社区

领取腾讯云代金券