Day 12 wireframe 大城市综览 + 天气预报( side project 配对单有意者请进)

今天开了配对单给大家做 side project,有兴趣可以来找找夥伴,前後端 / UIUX 皆可~

side project 配对单连结:
https://docs.google.com/spreadsheets/d/1-6YCUfqaB7dQLQa34pbuCHgYvXU3eYZ0dvDcPszhE4g/edit?usp=sharing

昨天的半完成线稿

今天要继续把黑白线稿完成,昨天已经完成了互动式地图和预报资讯,现在要来解决底下大城市天气预览、天气预报新闻区、天气系统查询区三个地方。

虽然实际没有去做太多的用户研究,但在印度闪电频率似乎非常的重要(在多处看到),所以我後来也加了进去。

大城市天气综览

大城市天气资讯主要是解决两个问题:
第一、可以迅速的了然各大城市目前的天气状况
第二、法国气象局的客制化城市设计我很喜欢,但因为导览列已经有点满了,所以我决定把它合并。使用者自由的添加城市,新城市便会覆盖前一个预设城市。

做设计就是各种不同的尝试XD
我尝试了几种不同的设计,後来我选择了最右边的。我只留下了风速、降雨机率、天气 icon 、与温度,尽量保持简洁。

模拟不同长度的县市名称

再来,我又考虑到不同长度的县市名称。
印度有许多非常长的县市名称,那这样子网页版该怎麽设计会比较好呢?

尝试了一些不同的方法,想要尽量让画面看起来是整齐一致。

我发现最长的地名大概是 2-3 行,但两行为大宗,所以我会给他一个 min-height ,让他的标题可以对齐,这样子不管标题是几行,都可以尽量保持一致。

看起来好多了~~~

天气预报新闻区

天气预报区,我想要把最近的天气预报放在这里,一进气象局官网能够看到最近 / 未来1周的预报,整体体验会相当的不错(至少我会期待看到)。

旁边是3到4则最近的新闻,或是政府的宣导事项。

天气系统查询区

根据之前在资讯架构面做的4个分类,选择的相对应的icon,不过这里还没完成XDD

我使用了之前收集的Icon,别人做好的东西就是好好用

今天得去忙接案的事情,明天再加上footer好好的弄完。
先这样,晚安嗷嗷~~


<<:  Day12:终於要进去新手村了-Javascript-资料型态转换-将字串变成数字

>>:  Day12 - 409. Longest Palindrome

.obj 之绘制 & Skybox

大家好,我是西瓜,你现在看到的是 2021 iThome 铁人赛『如何在网页中绘制 3D 场景?从 ...

从架构开始重新认识Day2

MVC介绍 希望能将复杂的东西简单化 如果给我一句话我会说下面这句 Model、View、Contr...

Windows Server IIS 如何安装 PHP 网页服务器

PHP 是众多网页开发者所使用的程序语言,想要快速学习网页程序语言的话,PHP 是值得推荐的选择。 ...

IEEE-754 与浮点数运算

本文目标 IEEE-754 规范对於工程发展的重要性 认识浮点数 使用演算法改善浮点数运算时带来的误...

postman

昨天介绍了API,今天要介绍一个postman的应用程序,它是一个可以让我们检查和实作API的app...