跳到主要內容區塊

政府網站營運交流平台-中文

網路趨勢與社群應用分享

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

網站現況

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

網站目標使用者分析

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

氣象局網站使用者分析

網站問題分析

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

導入目標與策略

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

導入目標

•提升氣象局網站之易用性、易讀性
•使⽤者能夠更輕易操作網站及取得資訊
•提供使用者正確、即時、實用、豐富的網站瀏覽體驗
•提升跨裝置瀏覽友善性

導入策略

使用者經驗面相
•版面內容區塊順序調整-進入網站以最新公告、新聞稿、服務專區等區塊為主要資訊。
•增加網站頁面內容,讓使用者可以透過網站初步找尋到相關資料,增加對網站的信賴度,減少直接跳轉離開或僅使用google搜尋才找得到資料的情況。
•考量使用者過去經驗,調整字詞完整性與精確性。

使用者介面面相
•改善使用者介面型態,以扁平化及不同資料呈現方式的設計(如icon、文字連結、banner設計),並增加微互動設計。
•制定文字、圖像的統一風格視覺標準。
•增加圖像或圖像化的應用:如 icon、圖表、圖形等。
•減少條列式的⽂字的使⽤。

導入手法

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

視覺風格導入目標

一、延續既有設計風格
二、留白呼吸空間與提升版塊區間辨識性
三、廣告圖面、按鈕與Icon元素圖像優化

視覺風格導入解析

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

色彩計畫

目前氣象局網站色彩使用以深藍色作為主色,白色與淺藍色為基底,維持原網頁色彩設配置即可。

文字規範

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

導入成果