機關網站使用者介面(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-圖像視覺設計混亂
首頁大圖數量過多，且視覺設計混亂，部分圖像
解析度不足，使網站資訊被視覺混淆以致忽略。
問題3-用詞語意不明確或過於專業
部分文字用詞較為專業，對一般民眾而言，較難
理解其中內涵與目標之關聯。

7. 網站分析
7
問題4-缺乏明確形象
網站視覺設計未納入品牌形象之概念，網站缺乏一致視覺感受。
網站問題分析

8. 導入目標與策略

9. 導入目標與策略
9
為提升高雄市稅捐稽徵處現有網站的易用性、便利性與易讀性，讓使用者能夠更直覺操作網站
或取得資訊，並呈現稅捐稽徵處專業卻親民之定位，呈現出內容清楚、操作便利的功能型網站
樣態。
• 提升高雄市稅捐稽徵處網站之易讀性、便利性。
• 讓使用者可直覺取得資訊、完成任務。
• 塑造具品牌渲染性與一致性的風格形象。
導入目標

10. 導入目標與策略
10
導入策略
• 改善使用者介面型態，以扁平化視覺
設計及資料區隔差異化為設計手法 (如
icon、文字連結、banner設計)，並增
加微互動設計。
• 調整區塊間距，增加功能性，並提升
區隔性，提高版面舒適度。
• 制定文字、圖像的視覺標準，塑造機
關形象。
• 增加圖像或圖像化的應用(如 icon、圖
表、圖形等)，減少條列式⽂字的使用。
• 簡化架構，整合重複功能，刪除非必
要資訊。
• 提升網站自身教學功能，提升非專業
人士對稅務的瞭解，進而提高網站易
用性。
• 減少輪播大圖的數量，增加宣導重點
的能見度，增設宣導專區放置長期宣
導項目。
• 增加網站頁面內容，讓使用者可以透
過網站初步找到相關資料，減少直接
跳轉 、 離開或使用搜尋引擎才找得到
資料的情況。
UX UI

11. 導入手法

12. 導入手法
12

13. 導入手法
13
高雄市稅捐稽徵處網站之使用者介面調整包含入口形象之設計、以城市風格插畫導入品牌形象、
曲線造型應用、以圖像優化溝通效率、導入、加大版面留白呼吸空間及導入品牌品牌識別色彩
及形象等六大目標為手段。
一、入口形象設計
二、城市風格插畫導入品牌形象
三、曲線造型應用
四、以圖像優化溝通效率
五、加大版面留白呼吸空間
六、導入品牌品牌識別色彩及形象
視覺風格導入目標

14. 導入手法
14
一、入口形象設計
以圓弧之造型框住Banner主要視覺作為入口意象之框架，鮮明的造型輪廓能加深使用者對於
網站的印象，增強網站的品牌力度。但Banner需要進行嚴謹的圖像規範。
二、城市風格插畫導入品牌形象
以乾淨、純粹、清新之城市風格的扁平插畫建構整個網頁之意像，提升使用者網站閱覽之親和
性。
三、曲線造型應用
呼應開源四方之意向，故以圓弧曲線造型作為此次網頁設計之風格基底，並套用至各元素之造
型。
視覺風格導入解析

15. 導入手法
15
四、以圖像優化溝通效率
清楚與簡潔的的圖像文字設計，運用Banner圖像、行銷廣告圖、Icon設計優化，以提升圖像
傳達資訊的效率。
五、加大版面留白呼吸空間
加大區塊與區塊之間的留白距離，以提升閱讀瀏覽舒適度與辨識度。
導入品牌識別色彩
六、導入品牌品牌識別色彩及形象
網站經營需有清楚的品牌意識與形象營造之目標，透過圖像與文字呈現加深目標對象對於網站
之印象，進而建立品牌信任度。為呼應稅捐稽徵處標誌之色系，品牌品牌識別色彩以帶有桃紅
偏藍色的亮紫色作為網頁色彩基底，以對比色綠色作為主要配色，兩色皆為中性色，互相搭配
勾勒出鮮明強烈有記憶點的品牌意象。
視覺風格導入解析

16. 導入手法
16
網站色彩可大幅度增強使用者對於網站閱覽的印象，色彩意象更能詮釋傳達品牌的精神與論
點。目前高雄市稅捐稽徵處網站色彩使用以淺藍色作為主色，白色作為基底，較難彰顯稅捐
稽徵處之品牌形象。故此次網頁用色建議從標誌出發，以標誌之紫色作為網站主要色彩基調，
並配合國際網頁用色趨勢，將暗紫色調整為彩度與明度較高的亮紫色。
整體網頁色彩調整方向如下：以無彩色-白作為整體的基底，搭配(10%-30%)的灰，與大面
積的主色-亮紫色(#6052c6)，輔以草綠色(#8ecd40)與其鄰近色黃色(#fcec72)作為畫面點綴；
⼜因目前使用的亮紫色、草綠色與黃色作配色，建議插畫與Banner各類圖像均可妥善運用此
色系之色彩，強化網頁視覺的整體意象。
色彩計畫

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

18. 導入手法
18
一. 建立品牌形象，採用銅錢開源四方的圓形曲線的造型
以象徵銅錢開源四方之意象的圓形遮罩，建立起稅捐稽徵處之入口品牌意象，營造稅捐稽徵
處之網站整體風格基礎。
圖形規範

19. 導入手法
19
圖形規範
二. 卡片與圖塊造型直角處適當的加入圓角－10px，使網站視覺的親合度提升。
三. Icon圖像設計須完整呈現項目標題，提升使用者辨識度。

20. 導入手法
20
圖形規範
四. 採用具城市風格的扁平化的插畫設計，形塑網站品牌形象。

21. 導入成果

22. 導入成果
22
主選單
版面的安排將標誌置左側，主選單列置右側。
側邊快速功能列
快速功能列收納於右側，包含社群FB、Line、影音服務youtube、線上服
務信箱與1999。

23. 導入成果
23
輪播大圖
以象徵銅錢開源四方意象之圓形遮罩，框出別具造型風格與高度辨識度的
輪播大圖區塊，搭配清楚鮮明的標語及對應內容的插畫，建立起稅捐稽徵
處之入口品牌意象。
「搜尋功能列」與「主要功能便捷按鈕」
將網站的功能中樞「搜尋」與「主要功能便捷按鈕」整合在一起，並置於
網站視覺中心的版面區塊，讓使用者可直覺操作。

24. 導入成果
24
稅務快訊
使用卡片式的設計，卡片式的設計型式適合收納多元且大量的資訊內容，
且能清楚的呈現資訊結構。

25. 導入成果
25
城市風格插圖
城市的欣欣向榮始自於便捷的稅務服務，因此使用城市風格的插畫，引導
出稅捐稽徵處之品牌形象，渲染出清新、便捷與新興的品牌氛圍。
宣傳專區
重要政策宣導，分為六項，採用icon＋文字並存之版形，並擴大版面，可
容納更全面之內容。

26. 導入成果-細部說明

27. 導入成果-細部說明
27
After
以象徵銅錢開源四方意象之圓形遮罩，框出別具造型風格與高度辨識度的輪播大圖區塊，搭配
清楚鮮明的標語及對應內容的插畫，建立起稅捐稽徵處之入口品牌意象。
Before
輪播大圖

28. 導入成果-細部說明
28
輪播大圖 -製圖規範
大標題74px，粗體
副標題64px，粗體
簡介內容36px
主要內容在310x370的範圍

29. 導入成果-細部說明
29
新增快速功能列，並收納於右側，包含社群FB、Line、影音服務youtube、線上服務信箱與
1999，讓使用者可快速取得資訊。
AfterBefore
快速功能列
原無此功能

30. 導入成果-細部說明
30
由於稅捐稽徵處的網站內容繁雜與專業，故將網站的功能中樞「搜尋」與「主要功能便捷按
鈕」整合在一起，並置於網站視覺中心的版面區塊，讓使用者可直覺操作。
功能便捷按鈕的設計以圖塊式的型態設計，使視覺表現更顯直覺與美觀。
After
Before
主功能區

31. 導入成果-細部說明
31
利用清楚易懂的圖示標誌輔助說明功能，讓使用者可以快速進入欲使
用的管道。高雄市稅捐稽徵處網站的圖示表現手法適合用稍微複雜的
圖像（如左），色彩上則可考慮更加統一調性的做法（如右）。
參考來源：
臺南市政府 https://www.tainan.gov.tw/
INTEX OSAKA https://www.intex-osaka.com/jp/

32. 導入成果-細部說明
32
稅務快訊的區域套用卡片型式的設計，此設計型式適合收納多元且大量的資訊內容，且能清楚
的呈現資訊結構，使用者能快速的掌握此區塊的脈絡，選擇需要的資訊內容，此外為簡化優化
版面空間，故將同是問答資訊屬性的「懶人包」與「問與答」收合於同一區塊。
AfterBefore
稅務快訊

33. 導入成果-細部說明
33
重要政策宣導，分為六項，採用icon＋文字並存之版形，並擴大版面，可容納更全面之內容。
AfterBefore
宣傳專區

34. 導入成果-細部說明
34
宣導專區的風格建議以卡片式圖文之手法，整合各項目，並調整項目間距，空
出留白，提升版面舒適性及易讀性。
參考來源：
AQUARING https://www.aquaring.co.jp/ja-JP/works/kagome_vegetips
宣傳專區 –設計參考

35. 導入成果-細部說明
35
以圖（icon插圖）搭配文字標語的形式呈現較完整的主題，強化使用者辨識度，並採用統一的
視覺風格，使圖像、色彩、線條、及內容保持一致性，並配合整體網站品牌視覺調性，添增網
站細膩度。
宣傳專區 –設計參考

36. 37
簡報結束