Day 13 wireframe 黑白线稿 （ 互动式地图设计 ＋ footer ）

来找设计师一起 side project，前後端 / UIUX 皆可ㄛ。配对单连结：
https://docs.google.com/spreadsheets/d/1-6YCUfqaB7dQLQa34pbuCHgYvXU3eYZ0dvDcPszhE4g/edit?usp=sharing

印度气象局官网：https://mausam.imd.gov.in/#.

prototype 大家自己玩玩看，应该会每天更新ㄅ:
https://xd.adobe.com/view/bd7fd57a-8e2f-44b0-bc26-322e98708133-e82c/

今天要来处理互动式地图，还有footer这两个地方，今天公司没啥事做，爽！

地图互动

互动式地图的部分，我会先准备素材，再加上 hover, toggle 等等的效果。

用钢笔工具圈起来

用钢笔工具将我想要显示预报资讯的区域圈起来（虽然我不太确定这里是不是新德里）

hover 效果

然後模拟出 hover 的效果。
将整个地图变成一个 component ，然後在 hover 的时候，将地图透明度降到 50%，并且加上红色的显示区域。

prototyping 软件没有办法非常完整，就简单的意思有到就好（唉因为我也算半个前端，别太费力弄原型细节，反正都是我要刻）。

toggle 效果

当 toogle 的时候，会切换成红色的选取区域，可以视情况调整为「一整块区域」还是「一个点」。

加上 color bar

最後加上Color bar，这一块我还没有做各点城市的天气概况，这个偏细节，明天再慢慢弄。

footer - 产品

再来是 footer ，原本的 footer 资讯跟上面重复许多，所以我把第一栏整个删掉，只留下二三四栏，并做资讯的整理。

原本长相

产品的部分有点看不太清楚原本是什麽样子，不过看起来就是 4 项产品，加上不同的下载类别，有一个再加上影片。

考虑颜色

考虑了一下颜色，决定让他们 hover 的时候提供一点颜色反馈，预设是白色。

一些样式选择

尝试了一些排列样式，这块偏向 UI 面，我觉得不用太刁钻，别太奇怪或难以辨识就好。

又尝试了一些样式，後来发现还是将他并排比较省空间，也比较弹性，最後就选择了以下这个形式。

完成

中间是 justify-content: space-between ，这样子文字不要太长都是可以容纳的，若太长则变为两行，高度变宽，也可以接受。

footer - contact

将 topbar 的社群连结全部下移，然後发现些神奇的事情。

连到免费的 wordPress 网站

footer contact 很有趣，点选最右边很像 Messenger 的 icon ，他会连到一个免费 wordpress 网站...(网址为.wordpress.com 结尾)

https://imdweather1875.wordpress.com/
一个国家级的网站出现这个有点奇怪啊><

内容看起来是一些公布事项和新闻，这一项其实我会 prefer 把它拿掉，塞到下面的 link，但最後还是整块放到 footer 的 contact 里面。

所以最後的长相大概是像这样子，下一篇就来将完整的资讯放入。

大家要找 side project 可以自己填喔，
今天先这样 拜拜～