iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
自我挑戰組

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

Day 6 一樣的風格,不一樣的體驗 - 澳洲跟印度 氣象局官網分析

看完了印度整體的網頁規劃,這個時候我會做一點競品分析,不免俗的先去看看其他人怎麼做這個產品,畢竟踩在巨人肩上總看得更遠。

先來看一下澳洲如何運用跟印度一樣版面的配置

比較顯著的更動為:主要城市的氣溫和天氣資訊,被放到main content,而導覽列僅僅列出各大洲,省略了大部分不太需要的資訊,像是People, SOP, publication等等。

同時,這個網站也把「重要但少用」的資訊,如:關於我們、媒體報導、聯絡我們和首頁,放到了top bar。

在黃色的警告列中列出了所有州,讓人可以迅速的點進自己所在的位置去查看警告訊息,而印度的設計是放在分區細節裡面,使用者必須進行總共兩次的點擊才能到目的地。

接下來我們來比較一下澳洲跟印度氣象局官網。

在蒐集了許多資料之後,我發現這兩個國家的官網版面配置是非常相似的,包含顏色、字體、網頁排版、顯示的資訊內容等等。(可能是改字同樣的模板?)

城市概覽


服務

由標題+icon所組成,資訊量比較大的新聞活動和預報

forecast


warning


如出一轍的輸入框XD


footer

footer 一樣是使用大量的線段區分內容

一樣的設計風格,不一樣的體驗

但很奇怪的是,我們很明顯的感受到澳洲的官網比較整齊,看起來比較舒服、易讀性也比較高。簡單來說,就是比較賞心悅目。這是為什麼呢?

從三點基本 UI 面來分析:

Align 對齊|不無聊的保險

澳洲的版面整齊程度是相當高的。
該置中、該對齊、和色塊安排也相當的簡潔有秩序。如果忽略掉它有點歪掉的聯絡我們(可能是些微的跑版),但不會影響到閱讀。

Color Scheme 色彩|別讓顏色說髒話

再來,我將兩張截圖放到 Adobe XD 裡面,用滴管工具去取色。很明顯的發現,印度氣象局所使用的顏色比澳洲多了幾乎一半以上!
色彩是有力量的,水能載舟、亦能覆舟。當使用越多的顏色,使用者便必須花費更多心力去辨別與判斷各項功能,所以你的配置與設計技巧必須越優秀。

Spacing 留白|內容要呼吸呢

澳洲氣象局也有給內容適當的間距留白,讓 user 在字裡行間有空間可以喘氣,不會一次性地被資訊轟炸(然後你就會得到一個跳出率超高的網頁)。

Spacing 階層|別長幼不分

澳洲標題字大過於內容許多,視線只要輕輕地掃過去,就可以看得出這個區塊內容是什麼,要強調什麼。

Spacing 一致性|這不是五個小網頁

澳洲所使用的 icon 也相對簡潔,但似乎大小與精細度沒有統一,會有點局促不安的。

Readability 可讀性|秒懂完勝繁複精美

雖然我覺得在 footer 澳洲(灰底)的線條還是有點過多,其實可以僅用間隔來區分就好,或者是將連結與連結之間的分隔線改成淺白色,不過都是影響不大的 UI 面。

下篇來分析資訊階層~


上一篇
Day 5 他國氣象局網站分析(加、日、台)
下一篇
Day 7 重新設計資訊架構 (IA面)
系列文
30 天重新設計印度氣象局官網首頁22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言