機關網站使用者介面(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. 導入目標與策略

8. 導入目標與策略
8
為提升南部科學園區現有網站的易用性與易讀性、便利性，讓使用者能夠更輕易操作網站或是
從該網站取得資訊，並保有剛改版之介面設計。依據南部科學園區現有網站進行UI/UX調整，
期望在修改的最小幅度內，以形象、功能兼具之網站為目標，保存既有形象；解決各目標族群
需求，並更進一步符合行動裝置的易用性。
• 提升南部科學園區網站之易用性、優使性。
• 使用者能夠更輕易了解南部科學園區或是取得資訊。
• 呈現具品牌渲染性與一致性的風格形象。
• 提升網站於行動裝置的易用性。
導入目標

9. 導入目標與策略
9
導入策略
• 首頁大圖改為輪播圖片，增加園區資
訊能見度
• 調整介面，以符合使用者操作經驗。
• 制定文字、圖像的視覺標準，統一風
格。
• 增加圖像或圖像化的應用：如 icon、
圖表、圖形等。
• 減少條列式的⽂字的使用。
• 整合重複功能，增加露出必要資訊或
功能。
• 根據不同目標對象，將功能區塊加以
分類配置。
UX UI

10. 導入手法

11. 導入手法
11

12. 導入手法
12
透過既有網站設計分析，將南科管理局形象設定為活潑、親民、科技感，設計調整著重於整體
版面風格的一致性，整理區分各主題區塊，使各主題區塊更加鮮明，並透過版面調整與造型、
色彩應用，加強操作介面之邏輯以強化各項大小功能的使用性。
一、延續既有設計風格
二、加強版面留白呼吸空間
三、形象Banner減少過多的造型裝飾版塊
四、民眾專區，突破格線框架增添趣味的版面設計
五、簡潔的南科資訊數據圖板
六、導入品牌意識
視覺風格導入目標

13. 導入手法
13
一、延續既有設計風格：
既有的網站設計風格清新亮麗且帶有科技感，符合南部科學園區之品牌意象，是表現很好的設
計，故此次改版建議將原有風格延續。
二、加強版面留白呼吸空間與大標題設計：
加大區塊與區塊之間的留白距離，以提升閱讀瀏覽舒適度與辨識度，利用大字級的標題呈現，
清楚切割文章與版面段落。
三、形象Banner減少過多的造型裝飾版塊：
標誌下方的裝飾性版塊，在部分較小的螢幕裝置呈現時，會遮蔽到於其位置下方的Banner，
進而影響Banner圖像的展示，產生Banner圖像破碎的感覺（如下圖），故建議將此區塊的裝
飾版塊移除，修改為較為單純的頁首設計（如下圖）。
視覺風格導入解析

14. 導入手法
14
四、民眾專區，突破格線框架增添趣味的版面設計：
近年國際網站設計趨勢，皆採取突破既有網頁隔線框架的破格設計，於南科網站的民眾區域採
取此設計以增添閱覽南科網站時的趣味性，真實環境圖吸引使用者的目光，更能讓使用者了解
南部科學園區的風情；搭上清楚的文字內容，在使用經驗上能更佳的提升閱覽經驗，並加深對
此網站的印象。
五、簡潔的南科資訊數據圖板：
採簡潔的圖塊與藍綠色的主色，作為數據圖板的視覺基礎，以延續主要風格的設計。此外區數
據內容的採集為網站中流量的排名前三的數據資料。
六、導入品牌意識：
網站經營需有清楚的品牌意識與形象營造之目標，網站若進入運營階段，能透過圖像與文字呈
現加深目標對象對於此網站的印象。建議可以增加更多園區風景景緻與街角美學，抑或是加入
人文氣息之圖像，感性與理性兼具，此外選擇圖片需以美感美學為重要的選圖指標，好看的照
片能渲染使用者更快速的進入網站所想傳達的情境，並能在使用者的腦海中留下良好的品牌印
象。
視覺風格導入解析

15. 導入手法
15
網站色彩可大幅度增強使用者對於
網站閱覽的印象，色彩意象更能詮
釋傳達品牌的精神與論點，建議延
續既有網站之主要配色，部分加重
使用比例於各式按鈕和具提示、強
調功能之項目。
原網站的主要配色為藍色(#2d83ec)
漸層至綠色(#03b178)。
色彩計畫

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

17. 導入手法
17
一. 加入icon標誌的輔助，將使說明的內容更為聚焦
為使網站整體具有親民的感受與統一的視覺，建議在圖形設計上加入適當的圓角造型應用。
並在具象的實境照片展示內容之餘，加入圖像化標誌輔助，使說明的內容更為聚焦，同時
提升網站的活潑與親和力。
圖形規範
搭配icon標誌呈現，使內容主題更為聚焦的說明

18. 導入手法
18
圖形規範
二. 適當的裝飾線條
在主題大標的前方加上裝飾線條能夠有效引導使用者的目光，產生提示的作用。

19. 導入手法
19
圖形規範
三. 統一按鈕造型、用色與配置邏輯
統一的設計風格有助於使用者對網站使用的認識，因此將查看更多的按鈕統一以圓角造型
和藍綠漸層配色，並配置於右方或右下方，同時調整與主要內容的間隔，能夠有效提升按
鈕的易讀性與易用性。

20. 導入成果

21. 導入成果
21
主選單
將主選單獨立，避免與logo、上方業務選單相互干擾。
輪播大圖
為自動輪播，提供更多的南科情境照片，以加強南科的整體形象。

22. 導入成果
22
訊息區塊
為避免搜尋區與消息區混淆，建議避免重疊的設計，以獨立該區塊；並加
強消息分類的標題與查看更多按鈕。
園區業務訊息
獨立業務相關訊息以滿足廠商瞭解園區之需求。

23. 導入成果
23
活動快訊
為求整體形象的明確，建議將廣告獨立區塊，避免與入口之輪播大圖整合
配置；同時與上方訊息區塊能有良好的搭配展示。廣告版面設計建議標題、
標語、圖像清楚區分，有助於網站整題感之營造，同時滿足閱讀的功能性。
民眾專區
為了提供一般民眾親民的服務感受，並且更加吸引使用者，建議以活潑、
更具設計感之手法調整版面設計。搭配情境照片，與icon輔助圖像使用。

24. 導入成果
24
數據圖表
在首頁上提供更多的數據圖表預覽有助於使用者操作瀏覽時對該區塊的理
解，並且統一主要藍綠色彩的應用，增加網站整體風格的一致性。
影音＆公共藝術
整合配置影音專區與公共藝術有助於宣揚南科整體之文化感受；並賦予清
晰易讀的標題與內容概覽，提升網站的易用性，和使用者對內容的認識。

25. 導入成果
25
相關連結
獨立相關連結區塊以增加連結可配置的數目，建議調整圖像，使瀏覽者能
清晰閱讀。

26. 導入成果-細部說明

27. 27
After
Before
將主選單獨立，避免與logo、上方業務選單相互干擾。
主選單
導入成果-細部說明

28. 導入成果-細部說明
28
After
為提升園區活動及資訊的曝光度，在此區改以輪播廣告的方式，固定時間切換展示廣告，或用
戶可以自行點選瀏覽下則廣告。
Before
輪播大圖

29. 導入成果-細部說明
29
為避免搜尋區與消息區混淆，建議避免重疊的設計，以獨立該區塊；並加強消息分類的標題與
查看更多按鈕。建議將即時性的訊息整合至分頁標籤選單，依照內容類別分類，提升使用的便
利性與網頁易用性。
AfterBefore
最新消息

30. 導入成果-細部說明
30
為了讓使用者在首頁可以更便利的獲取需要的資訊，並提升其使用性，故將其資訊從更多訊
息移至首頁，與消息資訊整合配置。
原無此功能
After
Before
資訊專區

31. 導入成果-細部說明
31
為求整體形象的明確，建議將廣告獨立區塊，避免與入口之輪播大圖整合配置；同時與上方
訊息區塊能有良好的搭配展示。廣告版面設計建議標題、標語、圖像清楚區分，有助於網站
整題感之營造，同時滿足閱讀的功能性。
原無此功能
After
Before
活動快訊

32. 導入成果-細部說明
32
欲讓園區附近居民或園區從業人員更能了解環境，將民眾想知道的資訊整併至民眾專區，增加
易用性。在首頁上提供更多的數據圖表預覽有助於使用者操作瀏覽時對該區塊的理解，並且統
一主要藍綠色彩的應用，增加網站整體風格的一致性。
AfterBefore
民眾專區

33. 導入成果-細部說明
33
為提升網站整體易讀性及易用性，將原此區塊的資訊分開配置，以減少資訊的混亂。在首頁上
提供更多的數據圖表預覽有助於使用者操作瀏覽時對該區塊的理解，並且統一主要藍綠色彩的
應用，增加網站整體風格的一致性。
AfterBefore
數據圖表

34. 導入成果-細部說明
34
數據圖表-風格參考
建議將最多人查詢項目，選擇
前三項予之視覺化，視覺化表
現可運用參考圖示中的圖資表
現形式。
參考來源：Envato Elements
https://elements.envato.com/

35. 導入成果-細部說明
35
整合配置影音專區與公共藝術有助於宣揚南科整體之文化感受；並賦予清晰易讀的標題與內容
概覽，提升網站的易用性，和使用者對內容的認識。
AfterBefore
影音與公共藝術

36. 導入成果-細部說明
36
獨立相關連結區塊以增加連結可配置的數目，建議調整圖像，使瀏覽者能清晰閱讀。
AfterBefore
相關連結

37. 38
簡報結束