機關網站使用者介面(UI)與體驗(UX)案例分析_彰化縣政府

1. CISA 2019
機關網站使用者介面(UI)與體驗(UX)案例分析
彰化縣政府
1

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

3. 網站分析

4. 網站分析
4
彰化縣政府網站目前功能多元、資訊豐富，色調
搶眼。
網站現況

5. 網站分析
5
1. 地方居民與在地企業
工商、結婚登記或補助申請等業務資訊查詢
及申辦。
2. 外縣市訪客、遊客
遊憩需求為主，如地區景點遊憩資源、季節
活動、交通資訊等。
3. 縣市政府管考人員、議員及立委
施政績效與報告等資料查詢。
網站目標使用者分析

6. 網站分析
6
問題1-搶眼的主色比例較高，容易視覺疲勞
目前使用的紫色較為明亮刺眼，易使人在使用網
站時產生視覺疲勞。
網站問題分析
問題2-網站資料複雜，分類不清
資訊較多，且以文字為主，使用者較難找到需求
的單位或業務資訊

7. 導入目標與策略

8. 導入目標與策略
8
彰化縣政府網站主要在於提供民眾多元即時的服務，並能傳達相關活動訊息、與民同樂。提高
網站的易用性及易讀性，並能透過網站為縣府形象加分。
• 提升彰化縣政府之易用性、優使性。
• 讓使用者能夠更快速且直覺得完成任務或取得資訊。
• 提升民眾對於縣府網站的好感度。
• 塑造溫馨親切的縣府品牌形象。
導入目標

9. 導入目標與策略
9
導入策略
• 整體色調以溫暖親切的意象為主。
• 飽和度高的色調局部點綴，帶出視覺重
點。
• 背景以漸層引導使用者的視覺方向。
• 將民眾常用的功能以圖示icon分類，放
在主內容區塊的第一層，方便民眾查找
需求業務。
• 活動資訊以標籤分類，依最新刊登時間
排序，讓民眾能同時看到各類活動的最
新訊息。
UX UI

10. 導入手法

11. 導入手法
11

12. 導入手法
12
為提升彰化縣政府現有網站的易用性與易讀性，讓使用者在瀏覽網站時有更舒適的體驗。依據
彰化縣政府現有網站進⾏使用者介面設計調整，提升民眾對於縣府網站的好感度，塑造溫馨親
切的縣政府形象。
一、採用卡片式設計
二、親切柔性的圓角設計應用
三、導入品牌意識
視覺風格導入目標

13. 導入手法
13
一、採用卡片式設計
現⾏網站資訊較多，且以文字為主，使用者較難找到需求的單位或業務資訊，在使用者介面調
整採以簡潔現代的卡片式設計，多欄位的排版使網站更容易閱讀。。
二、親切柔性的圓角設計應用
網頁區塊使用圓角矩形的卡片式設計，方正加上圓角的矩形，塑造縣府專業、誠懇、親切的形
象。
三、導入品牌意識
網站經營需有清楚的品牌意識與形象營造目標，透過以縣府LOGO色系為基調的色彩計畫，建
立縣府企業識別意象，加深目標對象對於此網站之印象。
視覺風格導入解析

14. 導入手法
14
網站色彩可大幅度增強使用者對於
網站閱覽的印象，色彩意象更能詮
釋傳達品牌的精神與論點，建議以
縣府LOGO色系基調出發，並延伸
出暖色系漸層，營造溫馨親切之網
站形象，也可避免視覺疲勞。
文字以無彩色的黑、灰階、白來搭
配，亦可平衡整體網站色系。
色彩計畫

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

16. 導入手法
16
一. 親切柔性的圓角設計應用
網頁區塊使用圓角矩形的卡片式設計，方正加上圓角的矩形，塑造縣府專業、誠懇、親切
的形象。
圖形規範

17. 導入成果

18. 導入成果
18
主選單
為提升網站辨識度，將功能連結彙整至上排，讓LOGO能更顯眼，也較容
易閱讀。
歡迎區塊
為提升網站的溫馨親切形象，於首頁增加歡迎文案區塊，並可播放縣府影
音，增加互動性。

19. 導入成果
19
為民服務
為提升易用性，在主要內容的第一層區塊，設計各類服務icon，引導民眾
找到需求單位/業務。
活動快訊
為提升易讀性，將活動快訊排進活動照片或是banner，對於管理者，可彈
性選擇是否放置圖片，對於使用者更容易理解訊息、提高點閱意願。

20. 導入成果
20
縣長行程
文字分為2欄排列，日期在第一欄，方便依時間瀏覽。
相關連結
地方及友善連結數量較多，以文字一併列出，並簡化、統一設計，以顏色
分類，方便民眾一眼就可找到需求連結。

21. 導入成果-細部說明

22. 導入成果-細部說明
22
After
Menu及功能連結分區呈現，讓LOGO更顯眼，同時提高網站的辨識度和易讀性
Before
主選單

23. 導入成果-細部說明
23
服務類別設計一致性的icon呈現，並放在主要內容第一層，方便使用者找到需求業務。
為民服務
AfterBefore

24. 導入成果-細部說明
24
訊息以標籤分類，讓民眾在第一時間可以看到各類活動的最新快訊。
活動快訊
AfterBefore

25. 導入成果-細部說明
25
活動快訊以顏色標籤分類，使用者可以在第一時間看到各類活動的最新訊息，
並排入活動照片/banner增加網站的豐富度，多欄位的設計縮短文字的長度，讓
訊息更容易閱讀。
活動快訊 –設計參考

26. 導入成果-細部說明
26
縣長⾏程單獨區塊，提高網站易讀性，文字分為2欄排列，日期在第一欄方便依時間瀏覽。
縣長行程
AfterBefore

27. 導入成果-細部說明
27
相較於「為民服務」，較次要的快速及其他連結，簡化以顏色分類，統一版型以文字呈現。
快速連結
AfterBefore

28. 29
簡報結束