Day 9 Prototype 制作 - 资讯配置与确认 (Adobe XD)

纵览

接下来，要使用软件将之前画的纸上原型实现成简单线稿，可能会花个三天慢慢做。

prototype 软件其实蛮多的，像是sketch/ figma，我会选择 Adobe XD 的原因是整合做得非常好，可以自由的在 XD 里面选取图片，放到 Photoshop 里面编辑亮度，他的整合平台 Adobe Cloud也非常的完整，使用的快捷键也是我很熟悉的，上手容易（我今年二月才学会）。

简单拉完版大概就是长这样，大家参考一下

topbar + nav

这部分我会选择只留下搜寻框和一些基本资讯，把社群放到 footer ，warning 放在醒目的标题下方，会比他应是塞在 topbar 更合适一点。

两个导览列（重要的我放了但忘记截图XD），另外一个使用 breadcrumb 把它收好。

timeline

即时天气地图可以自由地设定预测日期，所以我设计了一个时间轴，比起之前参考的法国气象局会更直观一点。

至於群众揭露（Public observation），因为国家民情不同，依靠民众举报的重要性在印度也许十分高，我设想 user 对於这个功能只有两种状况，第一种是完全不会用到，第二种是使用急迫性较高（土石流或山洪）。

所以我希望他要很清晰地被看到，但又不会遮挡视线，会用一个小小的icon浮动式的放在网页角落，让人可以即时举报。

思考了一下timeline的位置，放在下方不符合非本日的预报使用动线（确认地点 -> 确认日期 -> 查看细节），所以我会放在上方。

news

新闻试了几个版本，最新预报重要性仍是胜过新闻连结，主要是因为连结还要多点进去，决定要放在左边。

forecast

预报这里做的处理比较多，因为很多繁复的资讯都放在里面，所以我分别点进去研究了一下，并将它分类。

有四项属於跟「雨量」有关的，两项是跟「季风」有关系的，两项跟「台风」有关，剩下的是完全无关，甚至民众也非常少用到的。

还有一点，我研究这些名字完全不能理解它在做什麽，除非一个个点进去。

考虑到页面长度与视觉负荷，我会选择设计四个 TAB ，让 user 选择他今天是要看哪一种的资讯，点进去之後会看到 description ，等到确认这一个系统里面的使用方式是他需要的，最後再进入。

希望这样子能够减少一个一个的试错。

footer

我只有列三栏，第一项是相关的网站，举凡各区的网站或是比较大型的国家官方网站都放在这里。

中间是4个产品，最右边是联络方式、网站地图、QA，底下是目标 user 极少极少用到的 LINK，像是资料库登入登出，就全部塞在最底下。

今天喘喘气，下篇讲一下字体、版面、icon 相关的 style guide~