從網頁設計的角度來規劃，Newman 與 Landay 於西元 2000 年整理出網頁設 計中所指稱頁面空間上不同的特定術語：資訊設計（information design）、導覽設 計（navigation design）及視覺設計（visual design），其中導覽設計與資訊設計會 是資訊架構（Information architecture）在規劃時會考慮到的兩個面向，而進行使 用者介面設計（user interface design）時會兼顧到三者（如圖 5 所示）。參考相關 構面進行設計者於設計網頁時的規劃參考，表 7 整理有關各術語之構面意義，
大致說明各構面的規劃概況，於資訊設計構面上以居住環境品質為資訊視覺化
（圖層與一般資訊）的主要核心；在導覽設計構面上，規劃導航列集中頁面操作 與導覽功能；而視覺設計上則分為版面設計架構與色彩圖形設計，詳細的建置架 構在第四章有較為清楚的流程說明。
圖 5 網頁介面設計構面關係（Newman & Landay, 2000），本研究改繪。
視覺設計
資訊設計 導覽設計
使用者介面設計
資訊架構
23
資料來源：（Newman & Landay, 2000），本研究整理。
視覺設計（visual design）
1.頁面框架
網頁頁面主要由 HTML 標籤與 CSS 構成靜態頁面，透過 CSS 能夠改變 HTML 標籤與元素的樣式，當版面使用到的 HTML 元素越多時，CSS 就可能越 複雜。藉由CSS Framework，開發者在開發上能更容易的使用 CSS 樣式設定，有 的CSS Framework 也能協助排版、響應式網頁設計（Responsive web design，簡 寫為 RWD）等，使開發者更容易維護使用者介面。較為有名的如 google 的 Angular.js、Facebook 的 React.js、backbone.js、vue.js、bootstrap.js 等。
2.版面設計
24
圖 6 版面設計版型規劃，本研究繪製。
圖 7 版面設計分層設計示意圖，本研究繪製。
25
為區隔不同資訊的容器獨立操作，網頁於結構上分為三層立體架構，如圖 7 所示意，分為：資訊控制層、底圖層與主題圖層，每層的規劃如下。
1. 資訊控制層：採用單頁面上下捲軸式設計，利用捲軸延伸的概念，資訊有更 多空間進行展示，並在此層實踐與使用者互動之介面設計，避免佔據頁面，
因此將功能集中在導航列（navigation bar），以使地圖介面比例得到保障。
2. 主題圖層：主要接收上層使用者介面指令來達到切換圖層，與轉換圖層參數 呈現的規劃。
3. 底圖層：背景底圖的放置層，與主題圖層不同在於主題圖層更替、改變頻率 較高，底圖通常擔任輔助的腳色，考量到後續程式架構規劃，將其分割出來。
導覽設計（navigation design）
導覽功能以業界常用的導覽列（navigation bar）作為設計主軸。其優點在於 增加訪問時間與減少跳出機率、明確的操作方向、點對點的直接連結與整體設計 感等諸多優點，本研究建置之網頁預計將利用導航列之空間特性，將系統全數功 能連結建置規劃於上方，並利用 affix 設定導航列置頂於版面頂端，達到操作的 簡便性以及給予頁面更多呈現比例。
圖 8 示意導航列的規劃架構，連結上以頁面切換作為主要連結標籤，放置 於導航列左側區域。功能性開關標籤（如輔助功能、圖面控制功能、底圖切換功 能）放置於右側，中間留白區域以區隔左右側差異。為避免同質性功能佔用空間，
細部操作連結與功能以下拉式選單（drop-down）與側欄伸縮（sidebar toggle）為 設計，節省版面使用比例，以增加頁面資訊呈現之空間。
圖 8 導航列之空間規劃示意
26
資訊設計（information design）
以版面結構上的三層：資訊控制層、底圖層與主題圖層，為資訊呈現之規劃：
1. 資訊控制層：將與居住環境品質相關之資訊（非空間資訊）作為主要呈現平 台，對於相關圖層之詮釋資料進行說明。
2. 主題圖層：主要利用資料之空間資訊，將資訊利用地圖圖台進行地理視覺化，
並結合頁面之居住環境品質構面呈現。
3. 底圖層：底圖層放置不同樣式之WMS 服務以及輔助資訊圖資，也藉由地圖 圖台作呈現，使使用者能搭配居住環境因子相關圖層使用。
配合導覽列之功能設計，相關資訊按類別結構與模組化，建立簡易之資訊架 構安排，階層式採取不宜多階的規劃，使用者能藉由導覽設計快速連結至相應資 訊瀏覽。
27
頁面規劃相關函式庫
JavaScript（簡稱 JS）在 1990 年代時期被發明，跟著網際網路技術的發展持 續至今日，有著許多特點，諸如跨平台、動態化、用戶端執行和能操縱DOM 等，
在 W3C 推廣 HTML5 標準時，一些特色也都需要 JavaScript 才有可能達成，也 因此很多網頁前端相關的套件開發，目前仍以JavaScript 為大宗，從 GitHub.com 熱門使用語言排行中持續第一，見得JS 的使用廣泛。
在電子地圖函式庫的選擇上，考量本研究網頁以前端 HTML 為主，選擇大 小較為輕巧的Leaflet.js 作為實作函式庫。比起 OpenLayer 的完整性，Leaflet.js 的 輕巧能降低前端網頁載入時間，透過網絡社群的討論，能解決原本函式庫功能較 少的缺陷。另外，Leaflet.js 提供如拖曳縮放等操作功能、比例尺圖例等地圖要素，
在實作電子地圖時，能達到如Google Map 相似的地圖使用體驗。最後 Leaflet.js 支援HTML5 的輸出功能，而在裝置上也支援響應式網頁設計，在網頁整體上能 達到良好的系統支援。
配合Leaflet.js 相關的函式庫套件，以及 Bootstrap.js 等頁面框架函式庫搭配，
進行系統功能開發與實作。透過JavaScript 的撰寫，達成系統運作與地圖應用程 式介面的結合。本研究網頁建置將以HTML5 的部分標籤（nav、section、header 等）特色，結合JS 與 CSS 的使用產生簡易互動性，搭配合適的頁面規劃，將視 覺化結合空間的要素，規劃與建立有以下特點的主題地圖網頁：
1. 建立成本較低廉（無伺服器架構網頁）
2. 應用開放資料且傳播速度快速（開放資料&無伺服器架構網頁）
3. 具有互動性（JS 函式庫&HTML5）
4. 地圖視覺化與介面視覺化（JS 函式庫&CSS）
5. 使用者體驗導向設計（JS 函式庫&CSS）
28