機關網站使用者介面(UI)與體驗(UX)案例分析_國防部

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

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

3. 網站分析

4. 網站分析
4
國防部網站的主要目的，定位為國軍形象入口網
站，主要提內容包含國防部介紹、國防消息、重
要政策等，而網站功能主要為「為民服務」。
網站現況

5. 網站分析
5
1.陳情人員
爭取權益、相關補助、退休金。
2.記者
爭議訊息、最新消息、即時新聞、人員異動、演
習動態。
3.工程廠商
採購消息、工程資料(規格等)。
4.待業人員
募兵消息、工作職缺、軍中規定、軍中環境、負
責業務、單位組織架構。
5.軍眷
查詢福利、相關法規資料。
網站目標使用者分析

6. 網站分析
6
問題1-網站結構與使用者需求不符
國防部網站主要服務對象為陳情人員、記者、工
程廠商、待業人員、軍眷，故主要功能設定為
「為民服務」，目前網站的為民服務內容版塊卻
至於網站的中後段，使得使用者難以被觸及。
網站問題分析
問題2-「為⺠服務」呈現方式不夠明確
為民服務位置與呈現方式不夠明確，使用者不容
易找到需要的內容與資訊的相對位置。
問題3-跳轉率過高
僅提供聯絡窗口資訊，浪費了網站可解決瀏覽者
問題的便利性，以致使用者者瀏覽過一次就不會
再瀏覽。

7. 網站分析
7
問題4- 使用者介面過度使用Icon表現形式
在為民服務、重要政策、軍事出版品、相關連結等區塊，使用相同圓形的表現形式，容易
使使用者混淆不易於理解。
網站問題分析

8. 導入目標與策略

9. 導入目標與策略
9
為提升國防部現有網站的易用性與易讀性、便利性，讓使用者能夠更輕易操作網站或是從該網
站取得資訊。依據國防部現有網站進行使用者介面調整，以國防部品牌形象之強化與增加國軍
人文面上之塑造為主要目標。
• 提升國防部網站之易用性、優使性
• 使用者能夠更輕易了解國防部或是取得資訊
• 呈現國防部之愛國忠貞、堅毅國防之定位
• 呈現具品牌渲染性與一致性的風格形象
• 提升網站於行動裝置的易用性
導入目標

10. 導入目標與策略
10
導入策略
• 以扁平化及不同資料呈現的方式設計
(如icon、文字連結、banner設計)，
增加微互動設計。
• 版面設計風格打破原先線條明顯的框
架設計，底圖使用國軍形象等小元素。
• 制定文字、圖像的視覺標準，統一風
格。
• 增加圖像或圖像化的應用。
• 減少條列式的⽂字的使用。
• 版面內容區塊順序調整，進入網站以
最新公告、新聞稿、服務專區等區塊
為主要內容。
• 改善活動照片剪影，重新規劃為較小
篇幅，與原先的Facebook粉絲頁做結
合，以資料圖表的方式替代冗長的文
字 。
• 增加網站頁面內容，讓使用者可以透
過網站初步找尋到相關資料，減少直
接跳轉 、 離開或僅使用google搜尋
才找得到資料的情況。
UX UI

11. 導入手法

12. 導入手法
12

13. 導入手法
13
國防部網站需擔任起國軍在網路上的品牌形象之重責大任，故打造國軍品牌形象為此次網站使
用者改善建議之主要目標之一。
一、硬性與軟性的圖像內容平衡
二、開放式通透的模組設計
三、導入品牌識別色彩
四、斜線的風格版面設計
五、加大版面留白呼吸空間
六、導入品牌意識
視覺風格導入目標

14. 導入手法
14
一、硬性與軟性的圖像內容平衡
圖像使用的內容上以台灣軍旅堅毅精神為主要切入點，首頁大圖採用三軍執行任務之形象照，
搭配宣揚國軍精神標語，取代鋼鐵戰機冰冷之意向更能動之以情。
二、開放式通透的模組設計
採用開放式通透的模組設計，減少框線在視覺上的干擾。
三、導入品牌識別色彩
結合呼應陸海空三軍國軍意象，以綠藍色灰色調為網頁色彩基底，導入品牌識別色彩之概念，
增強網站閱覽的視覺印象與包覆性。
視覺風格導入解析

15. 導入手法
15
四、斜線的風格版面設計
呼應國軍意象，斜線造型之風格基底象徵迅捷、勇猛、力量。
五、加大版面留白呼吸空間
加大區塊與區塊之間的留白距離，提升閱讀瀏覽舒適度與辨識度。
六、導入品牌意識
網站經營需有清楚的品牌意識與形象營造目標，透過圖像與文字呈現以加深目標對象對於此網
站之印象。
視覺風格導入解析

16. 導入手法
16
網站色彩可大幅度增強使用者對於網站閱覽
的印象，色彩意象更能詮釋傳達品牌的精神
與論點，目前國防部網站色彩使用以深藍色
作為主色，白色與淺藍色為基底，較難彰顯
國軍三軍精神，為了更完整呈現國防部三軍
品牌意象(國防部意象關鍵字:鋼鐵剛毅(灰)、
陸海空三軍(藍、白、綠)。
建議色彩調整色調、使用比例，以無彩色-
白，作為整體的基底，搭配灰(10%-30%)，
與大面積的深藍色(#153162)主色及草綠色
(#9ac838)，包覆整體印象。在⽂字部分亦
跟使用相同色彩，強化網站風格意象。
色彩計畫

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

18. 導入手法
18
一. 斜線的風格版面設計
為使網站整體俐索、簡明、與增強國軍堅毅之風格，故以斜切色塊切分功能區域，營造國防
網站整體風格基礎。
圖形規範

19. 導入手法
19
圖形規範
二. 適度的圓角設計，增加國軍人文柔和之親⺠度
卡片與圖塊造型直角處適當的加入圓角－10px，使之更佳親和。

20. 導入手法
20
圖形規範
三. 強化Icon圖像國軍關聯性設計
增強網站的完整性。

21. 導入成果

22. 導入成果
22
主選單
單獨的區塊，避免與大圖相互干擾，固定於上方
輪播大圖
為增強國防部整體形象渲染，故設計以文字搭配大面積斜切色塊，營造剛
毅與強勁之風格，圖像選擇以近景抑或是局部照，與彰顯國軍英勇之語彙
勾勒整個網站。

23. 導入成果
23
國防消息
「軍事新聞」與「公告專區」此區塊設計，採用簡潔清楚的模組區塊，在
資訊順序重新安排過後，為了讓首頁呈現的資訊更加簡明，將兩者整併收
合在一起。
為⺠服務
為了提升瀏覽之便利性與擴增icon數量，將為民服務區塊放大獨立出來，
清楚適當Icon尺寸大小，也更適合在響應式網頁裡呈現。

24. 導入成果
24
重要政策＆國防新鮮事
重要政策從原有Icon表現形式，轉換成逐條文字型態清楚成列，以提升閱
讀與辨識度。而國防新鮮事採用原有網頁的呈現型態。
國軍輯影
此區塊以圖像搭配標題文字為主呈現，延續原有設計並優化，大面積的圖
像與圖塊更增添國軍形象風采。

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

26. 導入成果-細部說明

27. 導入成果-細部說明
27
After
為提升國軍整體形象，建議規範輪播圖像之內容與版面區塊，加入「人」國軍勇敢精實之元素，
以提升國民軍人的忠誠愛國形象，輪播部分可以加入動態特效，增強入口意象趣味與豐富度。
Before
輪播大圖

28. 導入成果-細部說明
28
輪播大圖 –製圖原則
大標題45px，粗體
簡介內容20px 主要內容在740x610的範圍

29. 導入成果-細部說明
29
「軍事新聞」與「公告專區」，為國防部網站，次要重要的服務內容，故版面位置維持目前網
站現況，呈現形式改成收合欄目以增加篇幅可擺放空間，便於使用者瀏覽。
AfterBefore
國防消息

30. 30
After
Before
為民服務為國防部網站主要功能，故將此區塊整合至主要屏幕區域，以提升觸及率，清楚適
當Icon尺寸大小，也適合在響應式網頁裡呈現。並建議為為民服務製作子頁，將服務內容展
開。
為⺠服務專區
導入成果-細部說明

31. 31
將為民服務之內容，具體的用圖像icon表現，除讓使用者理解內容，
且可增加畫面豐富與細膩度，並延伸品牌形象視覺感受。
參考來源：台南市政府 https://www.tainan.gov.tw/
為⺠服務專區 –設計參考
導入成果-細部說明

32. 導入成果-細部說明
32
重要政策宣導，分為六項，採用icon＋文字之版面形，並將版面擴大，可同時容納全部內容，
以取代現有版型。
AfterBefore
重要政策

33. 導入成果-細部說明
33
延續原有設計並優化，大面積的圖像與圖塊更增添國軍形象風采。國軍輯影搭配以圖文的方式
做搭配，並採取一大兩小的方式，維持此區塊的內容豐富度，此外，建議可以將這一區塊，做
一獨立子頁面。
AfterBefore
國軍輯影

34. 導入成果-細部說明
34
國軍輯影 –設計參考
國軍輯影區域
以圖像內容整合文字之
方式，清楚詮釋國軍輯
影之內容，並傳達國軍
英勇堅毅之精神。
參考來源：appier www.appier.com/en/index.html

35. 導入成果-細部說明
35
原影音快遞之區塊的實質內容為社群資訊連結，故將影音快遞獨立區版面區塊出來。
使用者瀏覽大部分國防部網站的內容後，再讓使用者接觸影片，可以延長使用者停留於該網站
的時間。影片作為推廣至一般民眾的工具，而將其版面尺寸增加，也更加引人注目。
AfterBefore
影音快遞

36. 導入成果-細部說明
36
打破原有的框架設計，使畫面更加簡潔。
AfterBefore
國防新鮮事

37. 導入成果-細部說明
37
改變軍事刊物的表現形態為條列式，增加資訊乘載量，以及訊息的清晰度。
AfterBefore
軍事刊物

38. 導入成果-細部說明
38
此區延續網站主要風格，並加入國軍品牌形象之情境。
AfterBefore
相關連結

39. 40
簡報結束