名詞解釋

本章將針對本研究實作之「區域智慧資本治理創新系統（Regional Intellectual Capital and Governance Innovation System，RIC-GIS）」詳細介紹說明。首先探討 網站之架構與應用技術，以提高使用者經驗為設計理念，採用 Bootstrap、D3、

AngularJS 等目前大型網站廣泛應用的前端網頁技術，實現響應式網頁設計

（Responsive Web Design，RWD）與單一頁面應用（Single Page Application，SPA）。 本研究資料的來源包括縣市重要統計指標查詢系統、觀光局行政統計系統、文化

依據國際標準化組織 ISO 9241-210 規範，使用者經驗定義（User Experience，

UX）如下：「當使用者在接觸產品、系統、服務後，所產生的感知反應與回饋。

使用者經驗包含使用者的情緒、信念、偏好、認知、生理及心理反應、行為及成 就來源，其發生在產品系統服務使用的前期、中期以及後期。[23]」簡單來說，

UX 就是使用者使用一項產品時所產生的行為、情緒或是想法。「排除使用者的負 面經驗，創造使用者的愉悅經驗」，即是 UX 的最終目標。

AJAX 之父（Jesse James Garrett, 2000）[20]針對網站設計提出使用者經驗要 素模型，如圖 3.1，由下而上分別為策略層（Strategy），包含用戶需求與企業對網 站的期望目標；範圍層（Scope），包含功能規格與內容需求；結構層（Structure）

包含互動設計與資訊架構；框架層（Skeleton）包含資訊設計、介面設計與導航

‧ 國

立 政 治 大 學

‧

N a tio na

l C h engchi U ni ve rs it y

設計；以及表現層（Surface）視覺設計。

圖 3.1 Garrett（2000）使用者經驗要素模型[引用自[20]]

3.1.2 響應式網頁設計（RWD）

響應式網頁設計（RWD）概念於 2010 年為網頁設計師 Ethan Marcotte 所提 出的概念。早期的網頁設計預設對象大多以一般家用電腦或筆記型電腦的瀏覽者 為主，所以在製作網頁時會以此規格作為預設頁面的大小，然而隨著平板電腦及 智慧型手機的普及，傳統的網頁設計方式已無法滿足所有的網頁瀏覽裝置，使用 畫面較小的平板或智慧型手機來瀏覽傳統設計的網頁時，將會因為頁面寬度過寬 而導致瀏覽者在瀏覽頁面時的不便，因此為了滿足手機瀏覽者的需求，一般在進 行網站製作時通常會再另外製作「手機版」的網站，以滿足這些族群的需求，然 而手機版網站雖然可以解決大多數手機瀏覽網頁者的不便，但對於花錢進行網站 建置的企業來說，將額外增加一個網站建置的成本。為解決這樣的窘境，現在有 越來越多的企業選擇 RWD 的技術來製作網站。

RWD 設計網站使用 CSS3，以百分比的方式以及彈性的畫面設計，在不同解 析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，提供 最佳的視覺體驗，使網站可以針對不同設備（桌面電腦顯示器、平板電腦、智慧

‧ 國

立 政 治 大 學

‧

N a tio na

l C h engchi U ni ve rs it y

型手機與其他行動產品裝置等）不同尺寸螢幕瀏覽網頁時，網頁會對應不同的解 析度，而有不同的呈現方式，如圖 3.2，也就是說可以讓最重要的訊息在有限的 版面中清楚的呈現給用戶。

圖 3.2 跨平台網站版面配置之需求[引用自[2]]

3.1.3 單一頁面應用（SPA）

單一頁面應用（SPA）指一個網頁或網站從載入到關閉網頁的操作沒有任何 網頁重新載入，網頁前端透過 JavaScript 動態更換網頁上的內容，達到使用者不 需要換頁就可以瀏覽整個網站的網站架構。（Mesbah, 2007）[30]於 Delft University of Technology 的 Software Engineering Research Group 的技術報告裡指出，傳統的 網站設計為多頁模式（Multi-Page Model）存在網頁互動與回應性不佳的問題，

SPA 的設計模式就因而被提出。如圖 3.3 所示，SPA 設計框架，每次查詢只需傳 輸更新部分畫面的資料至伺服器端，所占資源較少，可以更快速的回應客戶端的 查詢需求，使用者經驗（UX）較好，經典的 SPA 網站如 Gmail、facebook。

‧ 國

立 政 治 大 學

‧

N a tio na

l C h engchi U ni ve rs it y

圖 3.3 傳統與 SPA 網頁週期差異圖[引用自[31]]