iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
自我挑戰組

30 天重新設計印度氣象局官網首頁系列 第 3

Day 3 資訊結構與階層分析-(topbar + navbar)

做設計並不是一開始就開幹,真正開始著手規劃之前,會先大規模的了解並且並且收集資訊去做比較,等到對於整個狀況有全盤的了解之後,才能著手進行資訊架構的部分,我猜這個狀況跟寫程式的架構師有點類似。

以 IA 架構層面而言,會將所有資訊全部攤開審視,並比較競品的優缺點;那以設計層面而言,我之前在做網頁設計時會先製作 mood board (心情板),將所蒐集到約 20 個不錯的網頁設計版型和配色,緊湊的配置在一張畫紙上,整體遠觀就是這份網頁主視覺會給人的感受。

接下來,我們要來好好的認識這個網站,包含釐清他是如何架構與處理資訊的,之後會比較各國氣象局的網頁,歸納出所需的資訊,再決定此頁所需的必要和次要資訊。

整個網頁可以簡單區分成數個部分,先簡單條列一下這個頁面各項區塊功能:

Top Bar:
Top Bar裡面有「社群連結」、「索引搜尋框」和「語言」選項。通常 Top Bar 會放置跟個人有點關係的,比如說登入、社群不會放在這裏

Header
Header 和 Top bar其實有點混雜在一起了,Header 的範圍我會定義在位置有點模棱兩可的「網頁標題+副標題」和「兩個 Logo」。

三、Navigation
導覽列有明顯區分出主次(雖然次要導覽列是個有點不大正規的命名,不過先姑且這麼叫吧)。
主要導覽列是藍底白字的那行,包含「首頁」、「部門網站」、「關於我們」、「政府官員」、「出版品」、「SOP」、「服務」。
整體而言,資訊階層的重要性和屬性有點不大吻合彼此。比如說,「政府官員」和「關於我們」同值性相當高,也許收在一處會更好;而「SOP」、「出版品」會連結至一些較為學術與艱澀的文件(PDF),我們的TA使用率應該是偏低的,也不大應該放置在重要的 NAV 中。

次要的導覽列以黃紅底色為主,包含了:
各區天氣警告,分為各大縣市和各區,可以看到大約五天前(包含今天)的警告地圖

現在天氣狀況,分為個大縣市,警告地圖

民眾反應氣象資訊

Weather realized天氣真實數值地圖,可以看到真實的一維平面圖

各式天氣預報,下拉式選單裡有另開分頁、也有PDF連結,還有一個flood是404。有些項目使用率可能偏高的,如閃電、旅遊、將與、空氣預報等等,也許將部分資訊整合進首頁的圖中會好一點。


上一篇
Day 2 重新設計 - 檢視與分析頁面問題
下一篇
Day 4 資訊結構與階層分析- (main content + footer)
系列文
30 天重新設計印度氣象局官網首頁22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言