ux ui design works banner

台灣海象災防環境資訊平台設計

專案背景介紹 Background

遊石設計團隊與氣象局和資拓合作,重新規劃「台灣海象災防環境資訊平台」網站整體的操作動線規劃與介面設計,符合使用者的習慣與需求,營造良好的使用者體驗,海象災防平台是一個提供給航海、漁業等用戶來查詢海象或即時海況等相關資訊的平台。



“ 海象災防平台提供的資訊與功能非常大量,
容易造成使用者學習成本太高以及迷失在平台網站中。
透過良好的資訊層級的篩選與設計呈現,
可以讓重要的資訊更快速的被傳遞 ”


Challenge 挑戰

資料大量的情況下,如何確定欲傳達的資訊明確,以及是否有依據資訊的重要度做層次分別 。

網站的架構資訊量大,要考慮用戶在平台時查找資訊圖表的使用情境、將大量資訊架構的進行分級與重整、介面資訊呈現方式,以及在響應式網頁該如何呈現。

Goal 目標

節省使用者的時間

讓重要的資訊快速的被傳遞,進而幫助目標族群的使用者有效的獲得精準資訊,以及減少使用者完成目的任務花費的時間,並提高使用者體驗與節省更多的時間。

Goal 目標

圖1 台灣海象災防環境資訊平台平板介面

Process 設計執行

設計執行重點如下

1. 理解需求
了解用戶使用平台的最終目的與使用者的操作使用情境,並找出操作的過程中會遇到的問題以及痛點。並思考平台資訊間的層級與重要性,減少重要性較低或容易干擾的資訊。

2. 可讀性與易用性
除了考量圖表的使用情境之外,在響應式網頁如何呈現、介面資訊呈現方式,測試資訊圖表在可能載具上的可讀性是否一目了然也是非常重要的。

3. 架構進行分級與重整、介面資訊呈現方式
重新整理平台的資訊與重要性的分級,並且針對使用者的操作情境進行規劃。畫面維持在一禎範圍呈現,避免使用者忽略重要資訊。
圖資介面設計除了地圖、圖表、數據之外,其他細節還包含了,操控面板型態、參數控制鈕的操作方式、元件與頁面的觸發方式和轉場、資訊出現時機是同步還是逐步,平台提供的資訊項目必需是對使用者完成任務有有幫助,避免過多無用的資訊干擾使用者。建議在執行完流程線稿設計後,可初步針對使用者進行易用性測試,確保使用者能有效利用圖表獲得需要的資訊,並進行設計修正。

介面資訊呈現方式

圖2 左邊為功能模組、右邊該功能圖層參數的調整操作區、中間則是地圖資訊的結果顯示

4. 警示資訊
當平台有未來三天警示氣象、即時警報狀態時,會出現警示的彈窗與懸浮的警示的提醒。警示文字則固定用顯眼字型、尺寸顯示在明顯的地方,使用純色適當顏色當作強調重點資料。

警示資訊

圖3、4 未來三天警示氣象彈窗與懸浮的即時警示提醒

5. 地圖、圖層、colour bar 圖標一致
地圖、圖層名稱、colour bar的圖標統一對應,並且colour bar在hover時會顯示該圖層的資訊名稱,當有多筆圖層共用相同colour bar時,上方也會顯示對應的圖層圖標,讓使用者在操作時更直觀且容易理解,以及有效利用圖表獲得精確資訊,並進一步促使某些結果或行為的發生。

圖層圖標

圖5 地圖與colour bar圖標一致,且滑鼠hover至colour bar時會出現相對應的圖層名稱,多筆圖層共用colour bar上方會出現多個圖層圖標

圖層一致

圖6 圖層名稱開啟時,也會出現與地圖相對應的圖標,滑鼠hover到圖層名稱位置則顯示資料提供來源,點擊 i 會出現該圖層的詳細資訊彈窗

6. 功能與工具icon
以插畫的表現形式設計,透過視覺圖像化、或活潑的互動方式,吸引用戶注意力。並且將已開啟與未選擇狀態作出明顯區別,也讓使用者知道目前所在的功能位置。

功能狀態樣式

圖6 圖7 功能已開啟與尚未選擇時的狀態樣式

工具圖示

圖8 工具圖示已選擇與未選擇時的狀態樣式

7. 無障礙友善設計
除了一般使用者的需求外,對於年長者與視障人士,我們希望也能夠在最主要的功能上能夠有機會使用。因此,考慮年長與視障者的需求,提供切換字級大小、切換色弱模式的功能,並且在介面設計上調整控件按鈕顏色對比,有助於其使用上的方便性。

無障礙設計

圖9、10 在左邊功能選單的下方找到可選擇字級,與開啟色弱模式,並找出符合不同種類型的色盲都可以使用的colour bar

8. 增加個人化的設定
新增加到最愛、規劃我的航線、加入常用航線等個人化設定功能。
可將常用功能加入到我的最愛,在會員登錄後會預設展開我的最愛功能列表中。

我的最愛

圖11 我的最愛

規劃航線

圖12~15 規劃航線與我的航線畫面

9. 不同裝置螢幕大小的適配體驗
在戶外查詢海象資訊,有可能是使用手機或是平板等行動裝置。所以在設計上需考量使用時的場景,移動裝置的體驗就變得非常重要。要如何將大量的資訊整理到小尺寸螢幕上,介面設計需重新再進行調整。除了文字、控件按鈕、卡片尺寸的大小、資訊的收合、操作的步驟流程調整外,網頁的內容也會改轉換為適合裝置的閱讀排版。

規劃航線

圖16 移動設備的裝置設計上需考量使用時的場景,並將網頁的內容轉換為適合裝置的閱讀排版

Other Works

Contact Us