機關網站使用者介面(UI)與體驗(UX)案例分析_氣象局

1. CISA 2019
機關網站使用者介面(UI)與體驗(UX)案例分析
氣象局
1

2. 簡報大綱
2
01
網站分析
02
導入目標
與策略
03
導入手法
04
導入成果

3. 網站分析

4. 網站分析
4
中央氣象局網站提供一般民眾生活不可或缺的天
氣預報、天氣觀測、海象觀測、衛星雲圖、雷達
回波等，還有緊急的天氣即時訊息、颱風消息、
大雷雨訊息、地震報告等警示訊息，網站必須以
最快速、最正確、最即時來呈現，以服務廣大族
群為目標。
另外還有天文、氣候、科普等其他資料數據檢索
之功能。
網站現況

5. 網站分析
5
1. 一般民眾
生活氣象、旅遊氣象查詢。
2. 專家學者
防災、政府學校單位、天文與地震愛好者專
業資訊查詢。
網站目標使用者分析

6. 網站分析
6
問題1-介面上部分功能不明確
部分重複性功能與過於精簡的文字或功能標示，
容易使人混淆用途。
網站問題分析
問題2-部分資料不易取得
進入網站後能大致了解天氣概況，但要再深入了
解詳細內容時，需花費時間尋求管道才能找到所
需的資料。
問題3-版面風格不一致
網站部分區塊之視覺呈現與網站整體風格調性不
一，缺乏一致視覺感受。

7. 導入目標與策略

8. 導入目標與策略
8
中央氣象局現有網站的改版建議著重在介面功能的完整性，並提升易用性與易讀性，讓使用者
能夠更輕易操作網站，取得需要的資訊。使用者介面優化目標在於提供使用者正確、即時、實
用、豐富的網站瀏覽體驗，並進一步提升跨裝置瀏覽的友善性。
• 提升氣象局網站之易用性、易讀性
• 使用者能夠更輕易操作網站及取得資訊
• 提供使用者正確、即時、實用、豐富的網站瀏覽體驗
• 提升跨裝置瀏覽友善性
導入目標

9. 導入目標與策略
9
導入策略
• 改善使用者介面型態，以扁平化及不
同資料呈現方式的設計(如icon、文字
連結、banner設計)，並增加微互動設
計。
• 制定文字、圖像的統一風格視覺標準。
• 增加圖像或圖像化的應用：如 icon、
圖表、圖形等。
• 減少條列式的⽂字的使用。
• 版面內容區塊順序調整－進入網站以
最新公告、新聞稿、服務專區等區塊
為主要資訊。
• 增加網站頁面內容，讓使用者可以透
過網站初步找尋到相關資料，增加對
網站的信賴度，減少直接跳轉離開或
僅使用google搜尋才找得到資料的情
況。
• 考量使用者過去經驗，調整字詞完整
性與精確性。
UX UI

10. 導入手法

11. 導入手法
11

12. 導入手法
12
鑑於過去使用者對於氣象局網站之既定印象，於2019年初剛改版之網站，整體風格簡約且目
標導向明確，因此，建議本次網站設計風格調整建議以延續既有設計風格，強化留白呼吸空間
與提升版塊區間辨識性，並將廣告圖面、按鈕與Icon元素圖像優化做為目標。
一、延續既有設計風格
二、留白呼吸空間與提升版塊區間辨識性
三、廣告圖面、按鈕與Icon元素圖像優化
視覺風格導入目標

13. 導入手法
13
一、延續既有設計風格
既有網站風格具備代表氣象局品牌意象之樣貌，故延續目前網頁視覺設計風格。
二、留白呼吸空間與提升版塊區間辨識性
加大區塊與區塊之間的留白距離，以提升閱讀瀏覽舒適度與辨識度，另將「常用功能」與「影
音專區」分隔版面，使介面功能更容易區隔。
三、廣告圖面、按鈕與Icon元素圖像優化
廣告圖面「首頁banner區域」、按鈕與icon元素「好站介紹」，目前視覺風格較為老舊，與
網站現代、簡潔之設計風格不符，故建議所使用的廣告圖面，需注意網站整體風格。
視覺風格導入解析

14. 導入手法
14
目前氣象局網站色彩使用以深藍色
作為主色，白色與淺藍色為基底，
維持原網頁色彩設配置即可。
色彩計畫

15. 導入手法
15
網站的文字更為清晰與簡潔，建議整體使用無襯線的黑體字，加強標題粗體字的粗度，並依
據現有網站之文字大小微調：
1.內文－16px
2.選單－18px
3.大標題－30px
4.一般標題－20px
為了提升網站閱讀性，讓使用者瀏覽文字時更加舒適，更符合人的閱讀習慣，文字段落的行
距建議訂定於1.2－1.4倍之間，段落的前後盡量避免標點符號與落單的字。
文字規範

16. 導入成果

17. 導入成果
17
主要功能區塊
調整版面設計，將常用地點與看更多資訊頁面區隔，避免資訊混淆，提升
易讀性；增加天氣小叮嚀，方便使用者留意外出狀況。並且增設縣市區域
天氣查詢按鈕，以便於找到詳細地區的天氣資訊。
最新消息
此區塊包含最新消息、新聞稿與政府公開資訊，將此區塊展開配置於版面
左側，右區塊則放置宣傳文宣，將消息、新資訊等類型功能一同配置，有
助於提升易用性。

18. 導入成果
18
最新天氣圖資
建議補上完整圖資，以利各目標對象搜尋瀏覽。因應此區圖像風格不一，
建議調整標題位置；增加圖片與圖片之間的距離，並賦予淺藍色背景，增
加形象包覆感，提升整體一致性。
常見功能
此區塊獨立呈現，圖像搭配標題文字呈現，清楚適當Icon尺寸大小，也更
適合在響應式網頁裡呈現。

19. 導入成果
19
影音專區
在使用者瀏覽大部分氣象局網站的內容後，再讓使用者接觸影片，可以延
長使用者停留於該網站的時間。影片作為推廣至一般民眾的工具，而將其
版面尺寸增加，也更加引人注目。
好站介紹
減少裝飾的圖文型態，易於使用者辨識，也容易製作管理。

20. 導入成果-細部說明

21. 導入成果-細部說明
21
After
調整版面設計，將常用地點與看更多資訊頁面區隔，避免資訊混淆，提升易讀性；增加天氣小
叮嚀，方便使用者留意外出狀況。並且增設縣市區域天氣查詢按鈕，以便於找到詳細地區的天
氣資訊。
Before
主要功能與方向

22. 導入成果-細部說明
v22
After
此區塊包含最新消息、新聞稿與政府公開資訊，將此區塊展開配置於版面左側，右區塊則放置
宣傳文宣，將消息、新資訊等類型功能一同配置，有助於提升易用性。
Before
最新消息

23. 導入成果-細部說明
v23
After
建議補上完整圖資，以利各目標對象搜尋瀏覽。因應此區圖像風格不一，建議調整標題位置；
增加圖片與圖片之間的距離，並賦予淺藍色背景，增加形象包覆感，提升整體一致性。
Before
最新消息

24. 24
After
Before
此區塊獨立呈現，圖像搭配標題文字呈現，清楚適當Icon尺寸大小，也適合在響應式網頁裡
呈現。
常見功能
導入成果-細部說明

25. 導入成果-細部說明
25
在使用者瀏覽大部分氣象局網站的內容後，再讓使用者接觸影片，可以延長使用者停留於該網
站的時間。影片作為推廣至一般民眾的工具，而將其版面尺寸增加，也更加引人注目。
AfterBefore
影音專區

26. 導入成果-細部說明
26
減少裝飾的圖文型態，易於使用者辨識，也容易製作管理。
After
Before
好站介紹

27. 28
簡報結束