Day 7 重新设计资讯架构 (IA面)

两天前刚接了一个大案,刚好又忙铁人赛,真是整死人...
可能字也有点懒的打,大家看图吧呜呜呜


忘记补充一下,这次 redesign 主要所改变的阶层,主要为资讯架构以上,直至视觉设计,所以我会尽量避开改变功能,画面上有的选项尽力地保留。

在工作中的 redesign 很常会遇到这种状况,有些设计师认为很多余或根本不需要的选项和功能,客户会十分坚持要保留(几乎没有那种可以大手大脚动作的重新设计,有遇到是谢天谢地)。

所以设计师们会退而求其次,不重要或次要的选项在无法删除的情况下,会用选单或其他格局、色彩配置将他们藏起来。

资讯架构层(IA)

在进行着手设计印度气象局官网之前,我会将资讯结构理清楚,通常会用 Evernote或相关笔记软件写出底下的架构。

这些架构通常蛮零散,细节不会花时间刻的非常的清晰,但可以提供我一个有用的指引来进行设计草图。

原则:
尽量不要删减原有页面的资讯,有技巧的藏起一些对 TA 来说不必要的资讯,比如说我会选择将出版(publications)还有新闻稿 (press release) 藏起来。

各区块所做的改变

资讯架构我做的改变简单解释一下:

Topbar

尽量乾净,留下about、语言等等比较跟个人资讯有关的

navbar (user)

因为导览列资讯有点过多了,所以我打算把它分成 nav–民众在意的资讯 ,另外一个是 sidebar–比较少用的资讯

何谓少用资讯?
比如说部门网站、关於IMD、一些以PDF呈现的资讯、还有 services ,比较过各国气象局网站後,这些资讯我判断是相对少用的。
(但因为没有很严谨的使用者研究,所以这些其实大多是臆测><)

sidebar 侧边栏 (other info)

至於其他的部门网站似乎用处不太大,比较像是各州的讯息发布来源,主要天气在 IMD 首页是看得到的,所以我也会将它放进比较不重要的侧边栏中。

main map

中间的大地图和常用的天气 icon 清楚的显示出资讯,我会将警告放在上方,右边可以观看城市天气细节,而天气预报影片经考虑过後会放在下方。

cities forcast:

时间轴可以选择想要观看的天气预报日期。
大城市天气预报:我会将它往上提,使用者可以即时去看到其他城市的天气。

news section

新闻我会选择将它放在比较後面的位置。

footer

最底下我会放比较少用到的产品、天气预报查询系统、和其他拉拉杂杂的连结,我会选择将四个产品手机APP联络资讯和相关网站都放在这里。

为何我要这样设计?

我觉得设计的原因,比起美感还重要。

首先,民众会倾向直接看到自己所属地区的资讯,所以我会将天气概况放在互动式地图中的导览列。

主要的地图部分要呈现的资讯,最重要的是温度和降雨机率,风向其它可能就比较偏其次。

底下我会选择放各大县市的天气,更底下才会放新闻和天气预报的影片。主要是新闻和影片是辅助的作用,亦即它提供更多的资讯,上面的互动式地图已经拥有基本的必要资讯。

至於各大县市天气,对於亲友在外地或是想观察台风或梅雨来临时整体状况的使用者,可能会更重要一点。所以我会倾向把它放在上面。(事实上大部分国家的县市天气都是放在上面的位置)

资讯架构可以写的非常的谨慎复杂,也可以像这样简单的画个树状结构就好(我懒),下一篇终於可以来画草稿了~


<<:  [DAY-08] 增进诚实敢言 把一切摊在阳光下

>>:  Progressive Web App Shortcuts: 程序快速启动选单 (9)

JavaScript入门 Day02_如何撰写

首先要写 JavaScript 肯定要有编辑器,Visual Studio Code 是个好选择 再...

7.移转 Aras PLM大小事-汇入Aras如何有效执行

关於汇入工具这档事情,我自己是重新写了一支汇入程序 主要是原厂提供的程序并不好用 1.Log记录档不...

Day18 Helm

今天我们要先来介绍一下 Helm,由於 Open-Match 是基於微服务建立的分散式架构,在部署上...

第二十二天:试写 Gradle Plugin

在使用了 Gradle 这麽多天後,您应该会发现,几乎所有的专案都至少会用到几个 Plugin 来增...

Day.9 「我实际不存在 DOM 里~」 —— CSS 伪类选择器(Pseudo classes) 与 伪元素(Pseudo element)

为什麽会有个「伪」字呢? 伪(Pseudo)这个意思有虚幻虚无的意思,类选择器是用来处理 DOM ...