地理視覺化技術應用於展示臺北市居住環境品質資料之研究

全文

(1)國立臺灣師範大學地理學系第四十六屆碩士論文. 指導教授：陳哲銘研究生：劉柏含. 中華民國一百零六年七月.

(2) 摘要網路資訊進步的幅度相當快速，隨著政府開放資料逐漸釋出與開放，越來越多的網頁應用出現。近年來國內對於居住品質的關心也跟著房市有所起伏，像是土壤液化區域的公告與近年管線埋設區域等議題。本研究試圖將居住環境相關的品質指標納入考量，整理出相關之政府開放資料，回顧視覺化相關文獻，利用地理視覺化的概念將其製作為相關圖層，並透過 HTML5 等相關規範建立前端視覺化網站，使使用者能了解不同居住環境品質的構面與因子，也能透過網頁功能使用自己關注的因子圖層，滿足自身對於居住環境品質之需求。研究於網頁原型建置後進行專家及一般使用者之使用性評估，了解網頁視覺設計與地理視覺成果之成效，作為後續研究及系統開發之建議。關鍵字：地理視覺化、HTML5、開放資料、居住環境品質. Abstract The progress of online information is very fast, with the government open information gradually released and open, more and more web applications appear. In recent years, the domestic concern for the quality of living also followed the housing market ups and downs, such as soil liquefaction area of the announcement and the pipeline area in recent years and other issues. This study attempts to integrate the quality indicators related to the living environment, organize relevant government open materials, review the relevant literature of visualization, make use of the concept of geography visualization as the relevant layer, and establish the front-end visualization through HTML5 and other relevant norms Website, so that users can understand the different living environment quality of the facets and factors, but also through the web function to use their own attention to the factor layer, to meet their own living environment for the quality of the demand. Research on the usability evaluation of experts and general users after the prototype construction of the webpage, and understand the effectiveness of web visual design and geovisualization as a follow-up study and system development proposal. Keywords: geovisualization, HTML5, Open Data, Living Environment Quality I.

(3) 目錄摘要........................................................................................................................ I Abstract .................................................................................................................. I 目錄....................................................................................................................... II 圖目錄..................................................................................................................IV 表目錄..................................................................................................................VI 緒論.......................................................................................................... 1 第一節研究動機.......................................................................................... 1 第二節研究目的.......................................................................................... 3 文獻回顧.................................................................................................. 4 第一節資料視覺化...................................................................................... 4 第二節居住環境品質.................................................................................. 7 第三節國內外各不動產網站概況.............................................................. 8 第四節國內開放資料回顧........................................................................ 11 第五節地理視覺化網站開發技術............................................................ 15 研究設計................................................................................................ 19 第一節研究架構........................................................................................ 19 第二節網頁規劃........................................................................................ 22 第三節圖層與視覺化的設計.................................................................... 28 第四節使用性評估.................................................................................... 35 居住環境品質地圖網站建置................................................................ 38 第一節網站建置流程................................................................................ 38 第二節資料處理與管理設計.................................................................... 40 第三節圖層資料控制設計........................................................................ 43 第四節使用者介面規劃設計.................................................................... 51 第五節控制功能設計................................................................................ 55 第六節頁面動作規劃................................................................................ 59 第七節居住環境品質視覺化成果............................................................ 70 II.

(4) 使用性評估............................................................................................ 77 第一節使用性評估流程............................................................................ 77 第二節第一次測試－專家導向................................................................ 79 第三節第二次測試－使用者導向............................................................ 87 結論與建議............................................................................................ 93 第一節結論................................................................................................ 93 第二節研究限制........................................................................................ 95 第三節後續建議........................................................................................ 95 參考文獻.............................................................................................................. 97 附錄一. 使用性測試問卷－專家導向............................................................ 101. 附錄二. 使用性測試問卷－使用者導向........................................................ 105. 附錄三. 網頁 HTML 程式碼 .......................................................................... 109. 附錄四. 資料管理程式碼................................................................................ 121. 附錄五. 圖層資料控制程式碼........................................................................ 131. 附錄六. 控制功能程式碼................................................................................ 140. 附錄七. 頁面動作程式碼................................................................................ 143. III.

(5) 圖目錄圖 1 視覺化要素與視覺化關係圖.............................................................................. 5 圖 2 視覺化要素與其視覺化類型.............................................................................. 5 圖 3 網頁規劃與視覺化要素對應圖........................................................................ 20 圖 4 研究架構圖........................................................................................................ 21 圖 5 網頁介面設計構面關係.................................................................................... 22 圖 6 版面設計版型規劃............................................................................................ 24 圖 7 版面設計分層設計示意圖................................................................................ 24 圖 8 導航列之空間規劃示意.................................................................................... 25 圖 9 網頁建置架構圖................................................................................................ 39 圖 10 資料處理與管理流程圖.................................................................................. 40 圖 11 資料管理物件變數示意 .................................................................................. 42 圖 12 圖層處理流程圖.............................................................................................. 43 圖 13 圖層函式架構圖.............................................................................................. 43 圖 14 initialize 函式示意............................................................................................ 47 圖 15 add layer 函式示意 ........................................................................................... 47 圖 16 destroy 函式示意 .............................................................................................. 50 圖 17 remove data 函式示意 ...................................................................................... 50 圖 18 remove layer 函式示意..................................................................................... 51 圖 19 資訊控制層各區域示意.................................................................................. 53 圖 20 Leaflet UML 類別圖 ........................................................................................ 55 圖 21 頁面動作規劃.................................................................................................. 59 圖 22 scrollspy 與 affix 程式碼示意.......................................................................... 63 圖 23 圖變形與轉場實作測試.................................................................................. 68 圖 24 安全性圖層的成果.......................................................................................... 72 圖 25 健康性圖層的成果.......................................................................................... 73 圖 26 寧適性圖層的成果.......................................................................................... 74 圖 27 便利性圖層的成果.......................................................................................... 75 IV.

(6) 圖 28 全部圖層的成果.............................................................................................. 76 圖 29 SUS 分數於不同量尺之比較對照圖 .............................................................. 84 圖 30 使用者測試-系統使用性量表（SUS）總分長條圖 ...................................... 89. V.

(7) 表目錄表 1 國內外各不動產網站比較.................................................................................. 9 表 2 開放資料等級.................................................................................................... 13 表 3 臺北市開放資料與居住環境品質面向整理.................................................... 14 表 4 HTML5 中 Canvas 與 SVG 比較 ................................................................... 16 表 6 各網路地圖圖台 API 比較表 ........................................................................... 17 表 7 各資料之功能方法整理.................................................................................... 18 表 8 網頁介面設計構面與本研究規劃架構整理.................................................... 23 表 9 資料處理方式與檔案格式規劃........................................................................ 29 表 10 資料視覺化功能規劃...................................................................................... 32 表 11 視覺化功能 JavaScript 套件整理 ................................................................... 34 表 12 使用性評估方法.............................................................................................. 35 表 13 專家評量與使用性測試比較.......................................................................... 36 表 14 網頁設計構面與本研究規劃之網站建置架構.............................................. 38 表 15 圖層產生函式整理.......................................................................................... 45 表 16 圖層更新函式整理.......................................................................................... 48 表 17 介面色彩規範.................................................................................................. 51 表 18 原型與版面設計版型規劃對照...................................................................... 52 表 19 導航列功能整理.............................................................................................. 56 表 20 圖層控制欄功能整理...................................................................................... 58 表 21 mousewheel 函式程式碼與功能整理.............................................................. 60 表 22 swipe 函式程式碼與功能整理 ........................................................................ 62 表 23 display 與 visibility 實作整理 .......................................................................... 64 表 24 導航列右側功能動作實作整理...................................................................... 65 表 25 圖層控制欄功能動作實作整理....................................................................... 68 表 26 底圖與輔助圖層功能動作實作整理.............................................................. 69 表 27 本研究 Canvas 與 SVG 輸出比較 .................................................................. 71 表 28 專家測試者背景與經驗.................................................................................. 80 VI.

(8) 表 29 有效性任務內容.............................................................................................. 81 表 30 有效性任務完成時間...................................................................................... 81 表 31 介面資料評估內容與平均.............................................................................. 83 表 32 介面資料評估個別受試者結果...................................................................... 83 表 33 本研究系統使用性量表.................................................................................. 84 表 34 使用者回饋整理.............................................................................................. 85 表 35 使用者工作領域與就讀科系統計表.............................................................. 88 表 36 使用者能力與參與測試原因統計表.............................................................. 88 表 37 使用者再訪動機整理...................................................................................... 90 表 38 使用者網頁系統特色整理.............................................................................. 91 表 39 動機回饋整理.................................................................................................. 91 表 40 使用者回饋整理.............................................................................................. 92. VII.

(9) 緒論第一節. 研究動機. 從 21 世紀初開始，電腦與網路普及，在資訊量增加的這個時代，全球資料與資訊大量累積，資訊的使用以及取得問題也逐漸浮現而出。近年來配合資訊社會與民眾需求，各國政府逐漸開放手中的資料，以供社會上有更多的應用與研究。我國在 2011 年左右逐漸釋出政府資料成為公開資料。行政院於 2012 年 11 月 8 日的 3322 次會議第二項決議：「政府開放資料（Open Data）可增進政府施政透明度、提升民眾生活品質，滿足產業界需求，對於各級政府間或各部會間之決策品質均有助益，可見其重要性，請研考會積極規劃，落實推動。」，並在 2013 年 2 月 23 日公布「行政院及所屬各級機關政府資料開放作業原則」，各縣市政府開始建立開放資料平台，整合各主管部門資訊，且部分資料轉換格式為輕量型的文字交換格式（如 JSON、XML 等），方便使用者直接存取利用，資料的流動性與即時性大幅的提升。在傳統不動產交易中，資訊很容易被賣方或者仲介掌握，消費者容易處於資訊不對等的狀態。但在近年來，房仲業者會利用網頁提供資訊，而第三方的網站也會對於不動產的資訊做整理。台灣房仲業者多半會擁有自己的網站（例如：信義、永慶、住商、二十一世紀等），多數網站上的資訊仍以房屋個別資訊作為查詢標的。而在嵌有地圖視覺化的網頁，以信義房屋、永慶房屋等為例，呈現的方式都以實價登錄資訊輔以自家資料庫資訊方式展現在地圖上。非業者之中，一些視覺化網站嘗試做出與其他圖資疊合的方式（像是 foundi.info 、 price.housefun.com.tw），進一步呈現空間資訊與房地產交易資訊的關係，與房仲業者的差異在於會引入非房價資訊的圖層，呈現不同圖層與房價的關係。但不論是官方還是民間的不動產網站，因使用者多以價格為做為優先考量，大多都仍以地價資料鑲嵌於電子地圖上呈現。近年如零時政府、Taiwan hackathon 及 foundi 等組織與網站開始視覺化網路資料。然而，近年來關於土地居住正義、都更議題，甚至 2015 年高雄管線氣爆，近至今年年初維冠大樓倒塌引起的土讓液化爭議，民間要求公布管線與液化潛勢相關圖資，引起房仲業者擔心房價受到資訊影響。 1.

(10) 在 2011 年 12 月 13 日，立法院針對不動產經紀業管理條例、地政士法，以及平均地權條例三讀通過之修正條文中，對不動產交易雙方要求實價申報登錄，而此三種條例合稱「實價登錄地政三法」。而後，2012 年 8 月 1 日，國內實價登錄制度正式實施。在當年 10 月中公開實價登錄資料查詢，其目的在於減少以往房市交易中存在的「資訊不對等」現象。藉由更多開放的地理圖資，能夠呈現更多的地理視覺化，在 web2.0 的時代下，資訊的互動除了使用者面向的自主性外，如何結合較具議題性的呈現方法，適時地將專業資訊整理而視覺化，也成為網頁設計者在資訊規劃上的可能性。國內不動產相關網站主要多為呈現交易價格等交易物件的屬性資料，較為缺乏對於居住環境品質相關圖層的議題呈現；政府機關網頁對於實價登錄的開放資料則缺乏地理視覺化的介面呈現。不動產是食衣住行的需求之一，使用者在關注居住時也容易關注附近的環境品質狀況，本研究嘗試設計一個地理視覺化平台，除了利用實價登錄資訊作為房價參考基準，另從居住環境相關資料出發，審視政府開放資料之狀況，結合政府開放資料，提供使用者能依據自行的需求，關心地區的居住環境條件，作為未來尋找住所，或者從事相關交易群眾之參考。. 2.

(11) 第二節. 研究目的. 現今資訊傳遞多與網路息息相關，前端網頁技術也日新月異，在全球資訊網協會（World Wide Web Consortium，簡稱 W3C）與網頁超文字應用技術工作小組（Web Hypertext Application Technology Working Group，簡稱 WHATWG）制定與規範 HTML5 之標準，與 CSS3 逐漸支援各大瀏覽器，前端資訊呈現更加多元。配合開放源碼促進會（Open Source Initiative, OSI）的理念價值，使自己的程式碼透過網路自由流通，讓程式可以被全世界的程式設計師檢視、修正及改進。開放資料具有公開與加速資訊流通知目的，結合開源程式碼建置網頁，使資訊視覺傳達技術可以快速交流與傳遞。透過網路媒體的資訊傳播，食衣住行等生活資訊皆可快速獲得，以居住而言，國內房地產相關網站仍多以交易資訊作為主軸，雖然有不少網站有輔助的主題圖層，但鮮少有主題式與構面式的圖層呈現，使使用者在使用圖資時較無法理解背後的圖層價值。而於購屋時，不同的居住環境品質狀況也會影響決策，因此本研究將以對於住所周邊環境關心者為對象，以前端網頁技術結合政府開放資料，試圖建立居住環境品質相關之主題圖層，而有以下之目的： 1.. 利用 HTML5 與 CSS3 等前端相關技術建立一個基於房價的地理視覺化網站。. 2.. 利用 OPEN DATA 與開源函式套件，嘗試從居住品質相關構面設計圖層資料。. 3.. 評估該網頁系統之使用性、有效性與視覺化等構面成效。. 3.

(12) 文獻回顧本研究預計建立一個與居住環境品質相關的地理視覺化網站平台，透過回顧視覺化相關概念以及地理視覺化相關功能，以供後續功能相關函式之設計。在資料來源部分，從前人對於居住環境品質各構面之研究進行整理，進一步回顧現今台灣政府開放資料狀況，選擇合宜之資料作為圖層資訊來源。最後參考相關技術以建立與居住環境品質構面相關的地理視覺化網站系統。. 第一節. 資料視覺化. 視覺化（visualization）這個詞出現於 1952 年芝加哥大學地理學家 Allen K. Philbrick 的文章中。指的是人類腦中對於特定人事物所展生的影像，是一種心理過程，能幫助對事物的認識，以及建立相關概念（MacEachern and Kraak, 1997）。而在電腦科學的發展下，視覺化的概念重新定義與電腦圖學、影像處理、電腦視覺、使用者介面等結合。至今，與視覺化相關的研究與分支相當多樣，有著許多不同的方法與觀點，有從資料面作為依據，也有從視覺畫面向作為考量，但最終目的都是將資訊處理後呈現給讀者。由於科技進步幅度大與資料累積速度快，演算方法與資料量分別影響產出的品質，快速自動化的視覺化作品可能不一定貼近人們的需求。 Noah 與 Julie（2011）提到視覺化中，可以分成探索（Exploration）跟解釋（Explanation）兩種。探索類型的視覺化，主要在於快速呈現資料，在視覺化的結果上可能還尚未去蕪存菁，但能大致上掌握資訊的趨勢。相較於探索類型的視覺化，在文中提出 The Designer-Reader-Data Trinity 來解釋視覺化的類型（如圖 1），用視覺化的對象來分類上可以分成資料（Data）、讀者（Reader）與設計者（Designer）。在這三者彼此之間可能交互影響構成三種關係，進而產生不同類型的視覺化型態：資訊型（Informative）、說服型（Persuasive）及視覺藝術型（Visual Art）。資訊型的視覺化較偏重於設計者與讀者間的影響關係，設計者考量讀者的類型，進而決定資訊的呈現形式。在說服型的視覺化型態中，讀者與資料的關聯性較明顯的被強調，而視覺藝術型的視覺化則是設計者對於資料的詮釋方法與視覺化技術。在資料視覺化的部落格網站中（資料視覺化，2015），將視覺化的要素三個面向做了進一步的解釋，相較於 Noah 與 Julie 提及的概念中，資料視覺化 4.

(13) 部落格網站解釋了彼此的關係的重要性與難度，良好的視覺化作品須權衡彼此間的關係，太過於偏重一方易造成不同面向的視覺化關係。其提供的概念本研究整理如圖 2 所呈現。. 圖 1 視覺化要素與視覺化關係圖（Noah & Julie, 2011），本研究改繪. 圖 2 視覺化要素與其視覺化類型（http://blog.infographics.tw，2015），本研究改繪地理視覺化（geovisualization）是資料視覺化的一部份，依照國際製圖學會（International Cartographic Association，簡稱 ICA）對於地理視覺化（2007）的定義，地理視覺化與資料視覺化不同的地方在於資料上帶有空間參數，而在視覺 5.

(14) 化這些資料時常需要兩個維度以上來表示其空間的呈現。利用新的軟體及設備，多維度的視覺化能夠用許多不同的方式來呈現，與資料視覺化最大的不同在於：「地理視覺化專注於探索與地理現象有關的時間或是空間資料」（ Card, Mackinlay & Shneidman, 1999）。然而，即便找到時空關聯性，也存在著一些值得去解決的問題，像是考慮視覺化工具的使用性(usability)與擴展性（scalability）。對於地理學者而言，視覺化的基礎是地圖學、統計科學與資訊科學的結合，地理視覺化的過程除了資料視覺化的要點之外，強調在知識的建構上，加上媒合空間要素傳達概念，也成為地理視覺化的課題之一。良好的視覺化需要兼顧資料與其脈絡性，並讓資料與設計工具能產出合適的詮釋。利用資料中的空間特性，產生地理視覺化的成果，兼顧資料在視覺化中所扮演的角色，從地圖設計的方向出發，考量視覺化成果與讀者的互動，也成為接下來要回顧不同網站的初步依據。地圖的常見分類方式像功能、比例尺大小，或者符號的呈現方式做區分。功能取向的分類大致上可以分成主題地圖與普通地圖，其中主題地圖為了表達其主題，通常會簡括其他的地圖要素（Slocum, T. A., & Slocum, T. A., 2009）。符號的呈現方式又可以再細分呈定性與定量，定性資料能表達空間性質的資訊，如交通節點、路網、地質、土壤等。定量資料則用來描述數值上的資訊變化，像是等高線、核密度圖、點子圖等。主題圖的分類也關係到動態視覺化功能設計的規劃，不同的功能牽涉到不同主題圖資展現的方法。現階段多數網頁視覺化仍以描述定性資訊的功能與呈現為主，以各房地產相關網站來看，雖在實價登錄與交易量呈現有定量的面量呈現功能，但節點資訊與路網資訊多以點線面方式作套疊（永慶房屋、台灣 21 世紀等）。現在越來越多資訊圖像的呈現方式是單一元素便能乘載複數的意義（王怡人， 2014）。因此，將資料結合視覺化元素與自身的量化資訊，使用的功能也不相同，像是房地的實驗室網站利用核密度渲染的方式製作出全台市場的分布密度呈現，以及本身實價登錄地圖以叢集的方式呈現不同街廓的登錄資訊。所以在規劃圖層的相關功能時，要配合呈現的要素，以及資訊的限制（如地址資料只到街廓），將豐富的故事性，以視覺化直觀的功能將空間資訊，將數值、屬性資料以二維或三維的形式具體呈現（王怡人，2014）。 6.

(15) 當資訊設計與資訊圖像被大量使用時，地理視覺化與圖面設計成為了焦點，過度強調設計與視覺元素的運用，反而落入了不夠科學性與不夠尊重資料本身的批評（王怡人，2014）。因此，在視覺化的功能中，資料的脈絡性質與其特性也需要被討論，在居住環境議題上，單從新聞時事進行資訊的快速呈現，除了偏向探索類型的視覺化，也缺乏對於整體構面的了解，因此在下一節中，將回顧有關居住環境品質之相關評估因子，作為視覺化背後的科學與脈絡規劃，結合網站開發技術，讓資料的地理視覺化效果最大化。. 第二節. 居住環境品質. 經濟合作發展組織（Organisation for Economic Co-operation and Development，以下簡稱 OECD）於 2011 年提出「美好生活指數」（Your Better Life Index，以下簡稱 BLI）來評估個人福祉。我國政府根據 OECD 所公布的衡量指標制定國民幸福指數相關評估標準。我國國民幸福指數包含國際 OECD 之 24 項指標及在地指標，於 2013 年首次公布相關統計分析結果，供各界參考。國民幸福指數指標中，除了考慮房屋本身的屬性價值（平均每人居住坪數、房價所得比、房租所得比、居住房屋滿意度），也納入對於周圍環境的評估（住宅週邊環境滿意度），住宅政策已由早期「住者有其屋」進階至「住者適其屋」的目標。然而，僅是滿足基本的居住需求已不敷民眾的購屋需求，透過提供良好的公共設施及環境品質，有助於提昇房屋本身的價值（李春長等，2012）。聯合國世界衛生組織（World Health Organization，簡稱 WHO）於 1961 提出對於居住環境品質所設定之指標構面，分別為安全性、健康性、便利性及寧適性，國內有關居住品質的研究，除了依性質來分類，如自然、經濟、社會環境、公共設施等，也有參考 WHO 的四大指標構面進行分類（吳翊安，2014）。 WHO 四大指標構面在安全性方面，意義為以人類的生命、財產與活動為主體，確保日常與災害時居民的安全感，國內學者多以治安（賴春綢，1990；薛惠珍，1989；黃明智，1994；王怡雯，2006；余國禎，2002）、交通安全（黃明智， 1994；余國禎，2002）與災害發生特性（余國禎，2002）作為評估指標。健康性面向則以環境衛生（賴春綢，1990；薛惠珍，1989；黃明智，1994；王怡雯，2006；余國禎，2002）、垃圾（賴春綢，1990；黃明智，1994；余國禎， 2002）、醫療設施（薛惠珍，1989；黃明智，1994；王怡雯，2006；余國禎，2002） 7.

(16) 與公害類別（黃明智，1994；王怡雯，2006；余國禎，2002）為主要指標。而在便利性構面上，主要以交通上的便利性（賴春綢，1990；薛惠珍，1989；黃明智，1994；王怡雯，2006；余國禎，2002）以及日常場所之易達性（賴春綢， 1990；薛惠珍，1989；黃明智，1994；王怡雯，2006；余國禎，2002）作為評估便利性依據。寧適性指能使生理與心理上產生滿足與舒適的環境條件，像是公園綠地開放空間（薛惠珍，1989；黃明智，1994；余國禎，2002）、教育文化設施（薛惠珍， 1989；王怡雯，2006；余國禎，2002）與休閒娛樂場所（黃明智，1994；王怡雯， 2006）等因子，以及鄰里間的社經狀態（余國禎，2002），由於涉及到心理層面的影響，常客觀與物理層面的指標會被歸類在其他購面，如鄰避設施本身可能為健康性的影響指標，但由於會造成居民不舒適的觀感，也從而影響舒適度，因此在不同構面間，指標細項常受研究面向不同而有所變動。綜觀國內居住環境品質相關研究，從四個構面出發，在安全性指標的使用上，多考慮治安、災害等因素。於健康性則注重在環境衛生、醫療設施分布以及鄰避設施之探討。而便利性則關注交通上的便利與節點的易達特性，加上寧適性所探討較廣的影響，如鄰避設施（心理上的厭惡程度）與休閒空間，以及人群間的社經條件等影響因子。除了這四個構面之外，也有不同學者根據不同的狀況，對於居住環境評估指標不同的考量也有所增減。在後續章節中，根據 WHO 對於居住環境品質四大面向之意義，以及前人所使用之指標細項，本研究將從大多數構面與指標皆有採計之項目作為資料篩選基礎。. 第三節. 國內外各不動產網站概況. 現行與不動產相關之網頁視覺化平台，大致可以分為三種服務提供者：政府單位、房地產仲介業者及網頁視覺化團隊所製作的視覺呈現。對於這些網站的回顧及特色整理成表 1，以便比較其差異，以下為比較之五個因素整理。 1.. 底圖呈現－是否地圖底圖部份的使用。. 2.. 實價登錄－是否有使用實價登錄資訊。. 3.. 主題圖資－是否有在底圖以外，增加結合其他圖資。. 4.. 故事脈絡－是否有提供脈絡的呈現，亦或是有解讀分析等資訊。. 5.. 交易查詢－是否提供房屋交易資訊。 8.

(17) 表 1 國內外各不動產網站比較名稱. 底圖. 實價. 主題. 故事. 交易. 服務. 呈現. 登錄. 圖資. 解讀. 查詢. 提供者. 連結. 信義房屋. Ｏ. Ｏ. Ｘ. Ｘ. Ｏ. 房仲（台） http://buy.sinyi.com.tw/map/. 永慶房屋. Ｏ. Ｏ. Ｘ. Ｘ. Ｏ. 房仲（台） https://buy.yungching.com.tw/map/. 住商不動產. Ｏ. Ｏ. Ｘ. Ｘ. Ｏ. 房仲（台） http://www.hbhousing.com.tw/mapsearch/. 21 世紀. Ｏ. Ｏ. Ｏ. Ｘ. Ｏ. 房仲（台） http://www.century21.com.tw/index/House/Buy Map. NAVER 부동산. Ｏ. ？. Ｏ. Ｘ. Ｏ. 房仲（韓） http://land.naver.com/. Home4U. Ｘ. ？. Ｘ. Ｘ. Ｏ. 房仲（日） http://www.home4u.jp. 大京不動產. Ｏ. ？. Ｘ. Ｘ. Ｏ. 房仲（日） http://www.daikyo-anabuki.co.jp/buy/mansion/. 三井不動產. Ｏ. ？. Ｏ. Ｘ. Ｏ. 房仲（日） http://www.rehouse.co.jp/. 21 世紀. Ｏ. Ｏ. Ｘ. Ｘ. Ｏ. 房仲（美） http://www.century21.com/realestate/kentucky/LSKY/. Zillow. Ｏ. Ｏ. Ｏ. Ｘ. Ｏ. 房仲（美） http://www.zillow.com/. Trulia. Ｏ. Ｏ. Ｏ. Ｘ. Ｏ. 房仲（美） http://www.trulia.com. 9.

(18) 名稱. 底圖. 實價. 主題. 故事. 交易. 服務. 呈現. 登錄. 圖資. 解讀. 查詢. 提供者. 連結. 百姓網. Ｘ. Ｘ. Ｘ. Ｘ. Ｏ. 房仲（中） http://china.baixing.com/fang/?afo=dqN. 中原地產. Ｏ. ？. Ｏ. Ｘ. Ｏ. 房仲（香） http://hk.centamap.com/gc/home.aspx. 地產中國網. Ｘ. Ｘ. Ｘ. Ｘ. Ｏ. 房仲（中） http://house.china.com.cn/. 內政部不動產交易實價查詢Ｏ. Ｏ. Ｘ. Ｘ. Ｏ. 政府（台） http://lvr.land.moi.gov.tw. 服務網好宅網. Ｏ. Ｏ. Ｏ. Ｘ. Ｏ. 網頁團隊. http://w3.home7-11.com.tw/index/MapDef.aspx. 好房網. Ｏ. Ｏ. Ｏ. Ｘ. Ｏ. 網頁團隊. http://price.housefun.com.tw/. Foundi 房地. Ｏ. Ｏ. Ｏ. Ｏ. Ｏ. 網頁團隊. http://www.foundi.info/. 註：2016 年 3 月回顧相關網頁，O 代表該網頁有該項要素；X 代表該網頁無該項要素；？代表無法確認。資料來源：各不動產相關網站，本研究整理. 10.

(19) 於 2016 年 3 月回顧三種服務提供者的網站，除了房仲業者相關網站回顧國外網站，其他類型以國內為主。多數網站都以呈現房價分布與買賣交易查詢為網站資訊呈現架構。政府提供的查詢系統僅提供實價登錄資訊的查詢，輔以不同底圖作為呈現方式。房仲業者所提供的資訊除了上述交易資訊外，部分業者會結合交通節點、設施店家點位等資訊輔助民眾察看。視覺化網頁團隊的網頁呈現較多元，主題圖層地提供也較為多樣。其中較為特別的是台灣 foundi 房地網站，除了引用實價登錄資訊，也有提供各種主題圖層，但其主題圖層、實價登錄與議題呈現上，圖層呈現較為單一，較無綜合性的比較與整合。在眾多的網站視覺化作品中，仍是以房價交易為主軸，如有實價登錄資訊會輔以參照。在地圖上，通常做法為引入 WMS 圖層，套疊交易地點資訊，其他主題圖層為輔，例如商店資訊與交通資訊，而在居住環境品質的呈現上，部分網站（如 foundi、好房網等）會提供單一的主題圖層（如鄰避設施、商店資訊等），但大多數仍缺乏議題脈絡呈現的視覺化。. 第四節. 國內開放資料回顧. 實價登錄資訊中華民國不動產估價技術規則中，估價人員從事估價須從房地供需、環境變遷、人口、居民習性、公共與公用設施、交通運輸、所得水準、產業結構、金融市場、不動產經營利潤、土地規劃、管制與使用現況、災變、未來發展趨勢及其他必要資料，作為掌握不動產價格水準之基礎。（法條引用，第三條）其中，第三至六章中有條列出不同因素的估價條件，內容規範不動產估價人員估價的細節。根據中華民國內政部之平均地權條例、地政士法與不動產經紀業管理條例三條合稱地政三法，在 2011 年 12 月 13 日立法院三讀通過之修正條文中，平均地權條例第四十七條、地政士法第二十六條之一與不動產經紀業管理條例第二十四條之一，都有要求需要實價申報登錄，隔年 8 月 1 日正式實施，至此不動產交易資訊在內政部地政司有申報資料存查。同年 10 月公開實價登錄資料查詢，研究單位與一般大眾皆可以上網取得資訊。然而初期公布資料格式，交易總價、交易單價與建物區段門牌資料為圖檔，不利於第三方使用者撈取。現行資料依不動產成交案件實際資訊申報登錄及查詢收費辦法第十五、十六條，可供大眾查詢使用。 11.

(20) 政府開放資料開放資料（Open Data）是近幾年中備受討論的議題。一開始從網路社群發起，由民間雨後春筍般的研究分析，逐漸影響到政府單位。2009 美國率先建立 data.gov 的網站平台，提供美國政府機關的開放資料，以及 2010 英國政府的 data.gov.uk，在這之後有更多的國家政府建立開放資料的平台與機制，強調透過此類網站提供資料給公眾下載運用，並積極地鼓勵企業、公民團體與個人，對取得開放資料做創新加值運用（蕭景燈，2012）。近年來，台灣政府資料提供由方便行政作業轉變為滿足人民資訊需求為主（宋餘俠、李國田，2012；陳雪華、邱子恆，2005）。行政院於 2012 年 11 月 8 日的 3322 次會議中決議，並在 2013 年 2 月 23 日公布「行政院及所屬各級機關政府資料開放作業原則」。國內於 2017 年 5 月底前，根據國家發展委員會政府資料開放平台的統計，中央機關各部會的資料集多達快兩萬筆，而各縣市政府所公布之開放資料介面也已有 13 個平台提供不同資料集供使用，總資料集數達到一萬兩千多筆，顯示政府資料近年來持續的開放，其中以臺北市、新北市與臺東市政府開放資料集數高居前三位。在已有開放資料平台之政府網站中，又以臺北市開放資料較為齊全，相對於其他縣市，其政府機關資訊化程度是很大的優勢（邱羿儂，2012），自從 2011 年 9 月後臺北市政府資料開放整合平台上線，在 2017 年 5 月前已達到 2194 筆資料集，以及提供達 3 千萬次的資料服務，平台中整合臺北市各局處室等協作機關已對外開放資料，民眾可以直接從平台取得開放資料，無須到各局網站另行查找。北市政府資訊處統合政府各處資料於統一伺服器，藉由臺北市政府開放資料 API，能從該平台介接資訊。在資料格式上，臺北市政府資料回傳資料格式為 JSON，如有需要也可以 xml 與 csv 的格式回傳。在 Tim Berners-Lee（2009）對於開放性資料的分級中，分為五個級別如表 2 開放資料等級所示。臺北市開放資料多屬於 2 星至 3 星級的水準，相較於其他縣市開放資料，等級較高意味著使用者在使用資料上，應用相對方便與簡潔。. 12.

(21) 表 2 開放資料等級等級. 意義與內涵. ★. 採用開放授權，使資料（任何資料格式）可以在網路上取得。. ★★. 資料能以結構化的方式取得（例如用 Excel 取代掃描的表格）。. ★★★ ★★★★. ★★★★★. 使用開放格式取代專屬格式（例如用 CSV 取代 Excel）。使用固定網址來表示資料，使其它人可以連結到資料在資料網絡中的位置。鏈結你的資料到其它資料，以提供資料之間的脈絡關係，例如兩份資料間的相等關係。. 資料來源：（Tim Berners-Lee，2009），本研究改製。在近幾年中，資料開放速度及更新頻率加快，要整合與應用資料不如以往繁瑣，各縣市政府，中央各行政機關也有自行架設相關開放資料平台（如文化資料開放服務網、行政院環境保護署環境資源資料開放平台）。然而不同政府機關的開放幅度與更新速度不一，因此在套疊與分析資料時須注意不同機關更新資料之時間，應用上也須考慮行政單位（如：縣市鄉鎮鄰里）大小，以符合研究區域之視覺化的合宜性。配合臺北市與其他中央主管機關之公開資料，列出與居住環境品質相關構面的資料整理，結果如表 3 所示，分類構面採用世界衛生組織對居住環境品質的四大構面，細部分類則使用國內研究中多採用的指標項目。資料來源主要來自於臺北市政府開放資料平台，格式以 CSV 為主，部分資料由於臺北市政府開放資料平台無資料或無空間屬性，而採用其他政府開放平台之來源。空間單元以鄰里為最小單位，以配合實價登錄資訊之呈現；時間上則以 2016 為基準，若無更新資料以最新更新資料為替代。. 13.

(22) 表 3 臺北市開放資料與居住環境品質面向整理使用. 細部. 分類. 分類. 時間. 資料格式. 來源平台. 臺北市住宅竊盜點位資訊. 10511 csv. data.taipei. 臺北市汽車竊盜點位資訊. 10511 csv. data.taipei. 臺北市事故點位座標. 10212 csv. data.taipei. 臺北市歷年積水紀錄圖. 10508 kml. data.taipei. 臺北市土壤液化潛勢圖. 10503 geoJSON. 中央地質調查所. 環境. 公害陳情案件分佈位置圖. 10412 shp. opendata.epa.gov.tw. 衛生. 公害陳情警示區域範圍圖. 10412 shp. opendata.epa.gov.tw. 醫療. 醫院基本資料. 10508 csv. 衛福部&data.taipei. 服務. 診所基本資料. 10508 csv. 衛福部&data.taipei. 鄰避. 臺北市加油站及加氣站分布圖. 10112 JSON. data.taipei. 治安安全性災害. 健康性. 更新. 資料名稱. 設施開放空間寧適性. 居住. 臺北市各級學校分布圖(含國小.國中.高 10501 csv. data.taipei. 中職.特教學校.市立大專院校) 臺北市公園. 10501 JSON. data.taipei&OSM. 村里戶數、單一年齡人口. 10511 JSON. data.moi.gov.tw. 所得. 10208 csv. DATA.GOV.TW. 臺北市公車站牌位置圖. 10512 shp. data.taipei. 臺北都會區大眾捷運系統車站點位圖. 10509 shp. data.taipei. 臺北都會區大眾捷運系統路網圖. 10509 shp. data.taipei. Youbike 臺北市公共自行車即時資訊. 即時. 密度所得. 便利性. 交通設施. JSON. data.taipei& ptx.transportdata.tw. 其他. 其他. 10512 csv. 內政部實價登錄資訊. 資料來源：本研究整理。. 14. 內政部實價登錄.

(23) 第五節. 地理視覺化網站開發技術. 網站頁面通常由超文件標示語言（HyperText Markup Language，簡稱 HTML）結合腳本語言與階層式樣式表（Cascading Style Sheets，簡稱 CSS）來表現，透過 CSS 屬性的調整能夠實現簡單的頁面互動。在 HTML5 與 CSS3 的支援，網頁的媒體與互動性更不同於以往靜態 HTML 標籤網頁，使得即便在 Web2.0 的環境之下，互有優缺點的靜態網頁與動態網頁仍都有開發者使用，取決於系統的功能與頁面的呈現方式。 HTML5 是由 HTML4.0 的版本發展而來，在其發展過程中歷經許多波折，最終在 2004 年 WHATWG 開始了 HTML5 的規劃工作，並在 2006 年與與全球資訊網協會（World Wide Web Consortium，W3C）共同推動 HTML 的演進。HTML5 是建立在以往 HTML 相關規範之上（相容性），並新增許多功能的支援，例如製圖（canvas）、影音（video）、地理定位（geolocation）等功能。在 2010 年 Steve Jobs 拒絕 Flash 登上蘋果設備後，Flash 的開發商也在 2011 年宣布停止 Flash Player 在行動裝置的發展，因此網頁應用程式使用 HTML5 的格式與開發越來越多，最近於 2014 年 10 月，由全球資訊網協會公布 HTML5 最新修訂的版本，確立了 HTML5 規範要素以因應越來越多的網頁程式應用。 HTML5 支援處理多媒體與圖片的語法，減少對於外掛程式的需求，提升網頁效益，因此在開發網頁前端時，使用 HTML5 標籤處理圖片與串流機會相當多。表 4 為 HTML5 中對於繪圖所提供的技術規範比較，可縮放向量圖形（Scalable Vector Graphics，簡稱 SVG）適合用於細緻度要求較高但數量較少，並較適合靜態顯示。Canvas 是新定義的功能，為「提供一個依照解析度改變的點陣圖作畫區域，可用於表現繪圖、遊戲圖形、藝術或是其他視覺化影像的呈現。」（WHATWG），對於大量的目標可藉由程式碼與瀏覽器繪圖而成單一物件，相對於 SVG 可以顯示較多數量。但由於輸出格式為網格，當頁面放大時，若無重繪亦會有失真的問題產生。地圖容器（map container）有別於一般網頁的靜態頁面，圖層的位移與放大，都會牽引文件物件模型（Document Object Model，簡稱 DOM）的移動或重繪，也因此相對於無更新的頁面，網頁地圖經過重繪較不會失真，在現在地圖資訊豐富的網路上，Canvas 技術提供前端匯出圖層的一種可能與選擇性。 15.

(24) 表 4 HTML5 中 Canvas 與 SVG 比較 Canvas. SVG. 以像素為主. 以形狀為主. 單一 HTML 元素. 多重圖形元素. 只能透過程式碼重繪. 可以利用程式碼與 CSS 樣式表修改. 使用者互動很精確（x,y）. 使用者互動抽象化（Rect、Path）. 表面較小和/或物件較多 (>10k) 時的物件較少 (<10k) 和/或表面較大時的效能較佳. 效能較佳. 資料來源：https://msdn.microsoft.com/zh-tw/library/gg193983(v=vs.85).aspx CSS 是由 W3C 規範與維護的，在網頁的作用主要提供排版字型、色彩等樣式選擇，其中 CSS3 是仍在發展中的標準，目前支援大部分的瀏覽器，提供各種動態樣式，包含動畫、變形與位移等新的樣式規範，在網頁視覺化中扮演相當重要的角色，透過 CSS 設定，可以節省許多 JavaScript 操作的成本。隨著網際網路的發展，相關的程式語言的使用也越來越廣泛。透過程式語言的使用，網頁設計者可調整頁面之結構以及互動操作的功能，而 JavaScript 被大量使用在前端網頁，搭配不同框架與套件，結合 HTML 與 CSS 實作出不同的網頁頁面。在資料視覺化的部分，除了應用 HTML 的標籤外，利用 JavaScript 等 script language 能夠有更多彈性。為了減少開發時程，除了自行開發外，通常會使用已發布的開放原始碼函式庫，或者應用程式開發介面。例如 D3.js 便是其中一例，是款相當有名的視覺化 js 函式庫，使用相當多的 HTML5、CSS3 元素來達到視覺化的效果，如同其他發展中的函式庫，包括 D3.js、Labella.js、TIMESHEET.js、PIXI.js 等可以使用，這些函式庫的目的主要是利用 JavaScript 撰寫的功能將資料於頁面上視覺化。電子地圖也多應用 javascrip 實踐網頁中的地圖容器，以存放不同圖層，如表 5 整理了與 JavaScript 有關的網路地圖圖台。Leaflet 與 OpenLayers、Google Map API 等函式庫是當前許多開發者所使用的函式庫之一。Google Map API 為 2005 年公開之 API，結合 Google 相關服務以及時間，使其使用用戶相當多。至今仍有相當多的地圖服務使用 Google Map API，作為電子地圖的乘載媒介。缺點上，由於其程式碼未公開，使得開發前端地圖功能會受其 API 限制。OpenLayers 也 16.

(25) 是發展相當久的函式庫，從 2006 年至今已到 4.2 版，相較於 Google 未公開程式碼，OpenLayers 為開源函式庫，開發者能自行擴充功能與進行分析，但缺點是其函式庫包含太多功能，導致其函式庫體積龐大。為了改善 OpenLayers 函式庫體積龐大的問題，Vladimir Agafonkin 於 2011 年釋出了 Leaflet.js，提供開源的 JavaScript 函式庫給開發者，其支援運行 HTML5 與 CSS3 的各式行動與桌面平台，缺點在於其函式庫功能較 OpenLayers 少，需自行開發與擴充。不過 Leaflet 支援相當多的資料格式，包括 GeoJSON 的資料格式。網頁及程式開發者可以藉由使用此函式庫來介接圖資及其他地圖服務，目前相當多的網頁地圖底圖使用 OSM 與 Google 所提供的圖資，開發者可應用 Leaflet 內建的方法協同運用展示資料，實現各種地理視覺化成果。表 5 各網路地圖圖台 API 比較表 Google map 最初發行年開放狀態語言 GitHub 專案. 2005. Leaflet.js 2011. 封閉源碼，API 使用，自由開源（BSD）. OpenLayers 2006 自由開源（BSD）. 部分服務要收費 JavaScript. JavaScript. JavaScript. 無資料. 3120 件. 1270 件. 多. 少，仰賴社群. 多. 使用狀況分析功能. 優點. 1.由 google 開發及維 1.函式庫輕巧快速. 1.功能相當齊全. 護. 2.跨平台支援良好. 2.支援格式廣泛. 2.大量的用戶. 3.mapbox 部分功能是 3.內建編輯地圖功能. 3.豐富的 API. 從 Leaflet 延伸與擴張 4. 支援 HTML5 與 CSS3 等規範，且支援 canvas 輸出. 缺點. 1.缺乏第三方套件. 1.缺乏較進階的功能. 1.語法較複雜. 2.限制較多. 2.不支援 WFS. 2.函式庫較為龐大. 資料來源：網路資料整理。 17.

(26) 除了頁面技術的回顧外，頁面資訊的配置也需要考量，網站資訊架構規劃的重要性在於，其一是將網站內容進行結構化的安排，再者提高網頁瀏覽的效率，最後明確的定義功能出來（Peter M. & Louis R.，2002）。良好的資訊架構會從三個方面去著手，分別為情境、內容以及用戶（Peter M. & Louis R.，2002）。將網頁結構化後，可以利用元素間的鏈結來定義超連結或者其他頁面動作與功能，也利於程式模組化。因此，在組織前端頁面元素時，常使用前端框架來輔助，使開發者更容易維護使用者介面設計。較為有名的如 google 的 Angular.js、Facebook 的 React.js、backbone.js、vue.js 與 bootstrap.js 等。而在地圖功能的開發上，基於距離上的因素及地價分布上空間相依影響（鄭文馨，2007），在功能上的的開發呈現以能反映空間影響為考量，除了一般網站用到的點線面呈現，常用的空間方法會因為資料型態而有所不同（K. T. Chang, 2008），表 6 整理簡易的空間分析方法，透過地圖相關 API 或函式庫（如 google map API、Leaflet 或 OpenLayers 等）實作相關空間分析方法，並將其視覺化呈現。表 6 各資料之功能方法整理資料型態. 功能方法. 點資料. 近鄰分析、K-Fuction、空間自相關、Buffering、Kernal Density 等。. 線資料網格資料. 路網分析、距離統計、Buffering 面資料：空間相鄰性、空間自相關、疊圖分析、Buffering。疊圖分析、Allocation、Buffering 等。. 資料來源：（K. T. Chang, 2008），本研究整理。在回顧 CSS AWARD 等網站之設計作品中，可以發現在前端技術的進步下，將網站作為載體能呈現更多的視覺化內容，即便是靜態頁面也能透過 HTML、 CSS 與 JavaScript，實現更多視覺化的可能性。現行國內不動產相關網站仍以呈現交易物件價格為主，即便有使用到不同主題圖層，圖層較為零散，也缺乏脈絡性的視覺化呈現。良好的視覺化應兼顧不同面向作為設計的考量，本研究後續章節將利用 HTML 等前端相關技術進行前端靜態網站設計，使用前端頁面框架（如 bootstrap、Angular.js、React.js 等），根據資料與功能進行資訊架構之規劃，透過居住環境品質面向的資料蒐集與脈絡的整理，配合地理視覺化的相關功能回顧，建立與居住環境品質相關的視覺化網站架構原型。 18.

(27) 研究設計從第二章回顧網頁建置過程所需的技術，與居住環境品質相關資料及其來源，以及地理視覺化與資料視覺化的相關概念，本章節開始進入系統與研究整體設計規劃的階段。透過第二章回顧之資訊，第一節討論整體架構與相對應的實作規劃，於二三節詳細的設計網站版面與資料圖層視覺化，並在第四節討論後續系統測試與檢核的使用性評估方法。. 第一節. 研究架構. 視覺化的要素包含讀者、資料與設計者，規劃的架構雖由設計者規劃決定，但考量讀者與資料的面向，本節以下分為三個部分作為規劃參考： 1.. 讀者本研究將讀者（使用者）預定位為對於居住環境有興趣，並可能有不動產交. 易需求的潛在人群，透過本研究預計建立之視覺化平台，瞭解除了建物本身屬性之外之外在居住環境品質影響因子。在網頁系統原型完成後，實施使用性評估，分為系統完成時的專家導向測試，驗證系統元素的有效性以及系統本身的使用性，並藉由訪談專家達到系統修正的目的。最後進行一般使用者的使用性評估，除了驗證使用者使用動機，也了解對於使用者的使用性與系統滿意度，供後續原型開發之參考。 2.. 資料臺北市開放資料平台雖非最多資料集之縣市開放資料平台，但發展時間最長，. 資料維護與內容較為齊全，規格也大多達到三星級別，因此本研究將採用臺北市開放資料作為實作資料。因臺北市資料於不同單位釋出之資訊，資料格式有所差異，以及部分資料中央主管機關提供較為詳盡，這部分會於後續章節討論處理相關細節。另從房地產價格作為考量，引入內政部實價登錄之資訊作為主要圖層資料之一。 3.. 設計者使用相關回顧的技術與方法，將網頁規劃分為幾個部分進行探討。主要處理. 頁面版型與後續支援函式庫的規劃架構，並考量資料與讀者的特性進行頁面操作規劃。 19.

(28) 不同部分對映於不同的視覺化關係，並且在不同部分的偏重上，Noah 與 Julie （2011）指出不同視覺化關係的類型有說服型（Persuasive）、資訊型（Informative）與視覺藝術型（Visual Art），本研究在規劃時也須考慮對象間彼此的關係，並以平衡各要素的關係作為視覺化的成果設計，達到兼顧說服型、資訊型與視覺藝術型的視覺化成果，因此在對照讀者、資料與設計者的要素，作為網站系統的整體規劃。在讀者與資料上，使用與讀者居住環境品質相關的資料，並以讀者容易了解的視覺設計作為視覺化的方向；於資料與設計者的關聯上，參考相關的地理視覺化函式庫，對資料施以合宜的技術與方法；而讀者與設計者的關係，以對於居住環境有興趣為出發點，設計資訊呈現的編排與脈絡，最後藉由回饋的方式，進一步了解使用者的需求，傳遞合宜的視覺化設計。並於視覺化的過程，加入資料的空間特性，達到地理視覺化的呈現。圖 3 整理研究中網頁規劃與視覺化要素的參照示意：. 圖 3 網頁規劃與視覺化要素對應圖圖 4 之研究架構圖主要在表示視覺化網站系統的建置過程，透過第二章所回顧的各種資料以及技術，將在本章後續小節說明後續架構之規劃，從網頁規劃的角度說明頁面的架構安排，以及元素的設計概念，安排圖層與後續功能的實作規劃，並於第四章呈現系統建置時資料處理步驟、視覺化函式的建置設計，以及關於頁面動作實作的詳細內容。最後於網站系統完成後，透過使用性評估之方法來檢驗系統之使用性與使用者之回饋，於第五章進行整理並陳述使用性測試結果。. 20.

(29) 圖 4 研究架構圖，本研究繪製。. 21.

(30) 第二節. 網頁規劃. 從網頁設計的角度來規劃，Newman 與 Landay 於西元 2000 年整理出網頁設計中所指稱頁面空間上不同的特定術語：資訊設計（information design）、導覽設計（navigation design）及視覺設計（visual design），其中導覽設計與資訊設計會是資訊架構（Information architecture）在規劃時會考慮到的兩個面向，而進行使用者介面設計（user interface design）時會兼顧到三者（如圖 5 所示）。參考相關構面進行設計者於設計網頁時的規劃參考，表 7 整理有關各術語之構面意義，大致說明各構面的規劃概況，於資訊設計構面上以居住環境品質為資訊視覺化（圖層與一般資訊）的主要核心；在導覽設計構面上，規劃導航列集中頁面操作與導覽功能；而視覺設計上則分為版面設計架構與色彩圖形設計，詳細的建置架構在第四章有較為清楚的流程說明。. 使用者介面設計. 資訊架構資訊設計. 導覽設計. 視覺設計圖 5 網頁介面設計構面關係（Newman & Landay, 2000），本研究改繪。. 22.

(31) 表 7 網頁介面設計構面與本研究規劃架構整理網頁設計構面資訊設計（information design）. 導覽設計（navigation design）. 視覺設計（visual design）. 構面意義. 網頁建置架構說明. 將相關內容組合，並將資以居住環境品質作為所訊結構化成一個整體的有資訊共同之主題。問題。對於資訊整體架構提供設計導航列，規劃將所一種尋找方法的設計。. 有功能與資訊連結集中。. 指使用色彩、圖像、排版頁面管理框架選擇與版與版面設計等視覺傳播面架構設計，以及資訊方法來傳遞資訊。. 的視覺呈現。. 資料來源：（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.版面設計網路地圖的整體資訊量過多為現有網路地圖最大的問題（蔡仁詩，2011），因此如何將資訊量分配至適當的版面作呈現，也成為地圖介面規劃之課題。配合網頁架構與議題資訊呈現，考量到地圖仍為主要資訊載體，本研究將版面設計如圖 6 所示意，除了需要呈現大量非空間資訊，頁面上都有留白設計（給予地圖呈現空間），並利用 CSS 效果，使地圖資訊即便在圖 6A、B 中也能成為背景的一部份。為了達成多層次資訊的呈現，網站結構設計為立體架構（如圖 7 所呈現），搭配卷軸推動的方式替換資訊頁面。. 23.

(32) 圖 6 版面設計版型規劃，本研究繪製。. 圖 7 版面設計分層設計示意圖，本研究繪製。. 24.

(33) 為區隔不同資訊的容器獨立操作，網頁於結構上分為三層立體架構，如圖 7 所示意，分為：資訊控制層、底圖層與主題圖層，每層的規劃如下。 1.. 資訊控制層：採用單頁面上下捲軸式設計，利用捲軸延伸的概念，資訊有更多空間進行展示，並在此層實踐與使用者互動之介面設計，避免佔據頁面，因此將功能集中在導航列（navigation bar），以使地圖介面比例得到保障。. 2.. 主題圖層：主要接收上層使用者介面指令來達到切換圖層，與轉換圖層參數呈現的規劃。. 3.. 底圖層：背景底圖的放置層，與主題圖層不同在於主題圖層更替、改變頻率較高，底圖通常擔任輔助的腳色，考量到後續程式架構規劃，將其分割出來。. 導覽設計（navigation design）導覽功能以業界常用的導覽列（navigation bar）作為設計主軸。其優點在於增加訪問時間與減少跳出機率、明確的操作方向、點對點的直接連結與整體設計感等諸多優點，本研究建置之網頁預計將利用導航列之空間特性，將系統全數功能連結建置規劃於上方，並利用 affix 設定導航列置頂於版面頂端，達到操作的簡便性以及給予頁面更多呈現比例。圖 8 示意導航列的規劃架構，連結上以頁面切換作為主要連結標籤，放置於導航列左側區域。功能性開關標籤（如輔助功能、圖面控制功能、底圖切換功能）放置於右側，中間留白區域以區隔左右側差異。為避免同質性功能佔用空間，細部操作連結與功能以下拉式選單（drop-down）與側欄伸縮（sidebar toggle）為設計，節省版面使用比例，以增加頁面資訊呈現之空間。. 圖 8 導航列之空間規劃示意. 25.

(34) 資訊設計（information design）以版面結構上的三層：資訊控制層、底圖層與主題圖層，為資訊呈現之規劃： 1.. 資訊控制層：將與居住環境品質相關之資訊（非空間資訊）作為主要呈現平台，對於相關圖層之詮釋資料進行說明。. 2.. 主題圖層：主要利用資料之空間資訊，將資訊利用地圖圖台進行地理視覺化，並結合頁面之居住環境品質構面呈現。. 3.. 底圖層：底圖層放置不同樣式之 WMS 服務以及輔助資訊圖資，也藉由地圖圖台作呈現，使使用者能搭配居住環境因子相關圖層使用。配合導覽列之功能設計，相關資訊按類別結構與模組化，建立簡易之資訊架. 構安排，階層式採取不宜多階的規劃，使用者能藉由導覽設計快速連結至相應資訊瀏覽。. 26.

(35) 頁面規劃相關函式庫 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）. 27.

(36) 第三節. 圖層與視覺化的設計. 回顧整理之政府開放資料，進行資料之處理與規劃，就資料內容先進行判讀與簡易分類，以利後續視覺化功能的設計。視覺化功能依照資料的類型與限制，選擇較為適合的視覺化方法，與可能實作之 JavaScript 函式進行處理規劃。. 資料圖層多數研究顯示，居住環境評估指標因評估對象不同而有差異，但在構面上可以歸納出依循世界衛生組織對於居住環境品質的四大面向，從不同面向之評估因子資訊進行整理，於臺北市政府開放資料平台進行合適之資料篩選。臺北市開放資料下載格式多為 CSV，透過 API 介接的資料可選擇 XML、 JSON 與 CSV 格式，惟不支援跨域資料傳輸（特定資料才可藉由跨來源資源共享的方式傳輸），因此前端頁面若需使用資料，需要下載後再行運用或是利用其他跨域方法獲取。資料獲取方法也須考量到資料本身的大小、性質，如藉由跨域方式獲取的資料，就不宜過大或太複雜，避免降低網頁載入及處理的速度；即時性的資料更新，諸如交通流量監測、空氣盒子、微笑單車各站使用狀況等資料，較無大量資訊，就較適合跨域使用。而如各地車禍之詳細分類資訊，資料筆數超過萬筆，並且欄位眾多，就適合先處理過後再行使用。資料上為臺北市政府各單位提供之表單資料，更新時間依照不同單位有所不同，因此在規劃資料圖層時，需評估資料的適用特性。由於資料集格式與更新時間差異，本研究將時間以 2016 一年作為取樣基準，區間於 2015 至 2016 更新之資料為主。主要以呈現長時間的平均狀態的資料為主要採集標的，以符合居住的環境呈現。表 8 列舉第二章所回顧之臺北市政府開放資料與其處理方式。首先，判斷資料對於系統上是否容易直接介接，或是必須先行處理過後再匯入系統。判斷標準依照其資料來源是否支援跨域呼叫以及資料內容作為基準，資料介接透過 JavaScript 處理後匯入，須處理的資料則依照檔案格式進行分類。在統一轉成 GeoJSON 格式前，依據內容的缺漏進行進一步的處理，缺乏空間資訊資料須做地理編碼（geocoding）的動作，從地址資訊得知其座標資訊。已有空間資訊之資料需檢查其座標系統是否符合，最後整理資料處理結束後所輸出之檔案名稱，便於程式後續辨識之用途。 28.

(37) 表 8 資料處理方式與檔案格式規劃使用分類. 安全性. 健康性. 資料名稱. 是否網址介接. 替代資料格式. 臺北市住宅竊盜點位資訊. X. csv. 需做 geocoding. Taipei_homeBurglary.JSON. 臺北市汽車竊盜點位資訊. X. csv. 需做 geocoding. Taipei_carBurglary.JSON. 臺北市事故點位座標. X. csv. 若需事故類別需 join. Taipei_accident.JSON. 臺北市歷年積水紀錄圖. X. kml. 確認座標系統. Taipei_flooded.JSON. 臺北市土壤液化潛勢圖. O. GeoJSON. 公害陳情案件分佈位置圖. X. shp. 確認座標系統. Taipei_pollution.JSON. 公害陳情警示區域範圍圖. X. shp. 確認座標系統. Taipei_pollution_region.JSON. 醫院基本資料. X. csv. 需做 geocoding，與診所合併. 同下. 診所基本資料. X. csv. 需做 geocoding. Taipei_hospital.JSON. X. JSON. 確認座標系統. Taipei_oil.JSON. X. csv. 確認座標系統. Taipei_school.JSON. O(X. JSON. 臺北市加油站及加氣站分布圖. 後續處理方式. 處理完檔案名稱. 直接介接. 臺北市各級學校分布圖(含寧適性. 國小.國中.高中職.特教學校.市立大專院校) 臺北市公園. 點資料，改用 WMS 29.

(38) X. JSON. 所得. X. csv. 需 join 至 polygon. Taipei_salary.JSON. 臺北市公車站牌位置圖. X. shp. 確認座標系統. Taipei_busstop.JSON. X. shp. 確認座標系統. Taipei_MRTstation.JSON. X. shp. 確認座標系統. Taipei_MRTroute.JSON. O. JSON. 改用 PTX 資料. X. csv. 需做 geocoding. 臺北都會區大眾捷運系統車站點位圖便利性. 臺北都會區大眾捷運系統路網圖 Youbike 臺北市公共自行車即時資訊. 其他. 量龐大，分層為 0~14，15~64，65up，Total Taipei_age.JSON. 村里戶數、單一年齡人口. 內政部實價登錄資訊資料來源：本研究整理. 30. Taipei_estate_Atype_lite.JSON.

(39) 視覺化功能圖徵資訊的視覺化要考慮到資料本身以及要傳遞給讀者的資訊，從資料層面出發，空間資料基本的型態可分為點、線、面；從傳遞資訊角度思考，空間是否會相互影響、邊界影響問題等；從程式設計考量，是否有合適的函式庫，或是能否實作出來。本研究採用 Leaflet.js 作為地圖呈現之平台，Leaflet.js 有著輕量且支援 HTML5 的優點，其圖層繪製方式也支援 canvas 繪製技術。大部分傳統電子地圖仍以 SVG 作為向量圖層的輸出方式，但本研究考量資料圖層於疊加時可能超過數千筆圖徵，若以 SVG 作為輸出，易因物件數量龐大造成延遲現象。canvas 輸出為程式碼繪製完成後，再輸出至 canvas 物件中，其生成於頁面之物件數量少於使用 SVG 輸出方式，利用 canvas 輸出方式可以減少資料量過大的處理問題，因此，本研究將利用 Leaflet 中 canvas 輸出之設定（預設為 false），進行地圖圖面的輸出。在地理視覺化的函式庫選擇上，基於配合 Leaflet.js 圖台，以 Leaflet 相關討論社群與開源程式碼平台 Github 作為支援來源，選擇合適的開源函式庫進行資料視覺化操作。表 9 整理從研究所使用的開放資料，整理其資料形態，並可能的視覺化功能。除了配合居住環境品質構面因子與指標，根據開放資料所公布之資料屬性欄位，進行主要呈現欄位的篩選，結合欄位設計對應之視覺化功能，像是熱區圖（heatmap）、面量圖（choropleth map）、點子圖（dot map）等。表 10 則列舉呈現方法，與其實踐相關功能所對應之套件來源，從 Github 中 Leaflet 相關開發專案與開源分享資源回顧中，找出與研究相關之套件，以實踐不同視覺化的功能。. 31.

(40) 表 9 資料視覺化功能規劃使用分類. 安全性. 資料名稱. 使用圖層(簡化). 資料型態. 臺北市住宅竊盜點位資訊. 住宅竊盜點位. point. Heatmap. 發生時段. 臺北市汽車竊盜點位資訊. 汽車竊盜點位. point. Heatmap. 發生時段. 臺北市事故點位座標. 交通事故點位. point. Heatmap. 發生時段. 臺北市歷年積水紀錄圖. 歷年積水紀錄. polygon. choropleth+timeline 淹水深淺. 臺北市土壤液化潛勢圖. 土壤液化潛勢. polygon. choropleth. 公害案件分佈. point. 公害陳情案件分佈位置圖. 公害陳情警示區域範圍圖健康性. 醫院基本資料. 診所基本資料. 臺北市加油站及加氣站分布圖寧適性. polygon. 臺北市各級學校分布圖(含國小.. point. 醫療院所位置. point. 加油加氣點位. point. 各級學校點位. point. 32. 呈現方法. Category+dot （symbol） choropleth Category+dot （symbol） Category+dot （symbol） Icon+buffer Category+dot （symbol）. 資訊欄位. 潛勢高低汙染細項（未使用）（未使用）. 機構名稱所在地址學校名稱.

(41) 國中.高中職.特教學校.市立大專院校) 公園綠地範圍. 村里戶數、單一年齡人口. 村里人口總數. polygon. choropleth. 人口數量. 所得. 村里平均薪資. polygon. choropleth. 薪資所得. point. heatmap. 站牌名稱. 台北捷運站點. point. Icon+buffer. 站體名稱. 台北捷運路線. line. Category. 路線名稱. 微笑單車站點. point. Icon. 站點名稱. 實價登錄坪價. point. cluster. 每坪單價. 臺北市公車站牌位置圖臺北都會區大眾捷運系統車站點位圖便利性. 臺北都會區大眾捷運系統路網圖 Youbike 臺北市公共自行車即時資訊. 其他. WMS. 臺北市公園. 內政部實價登錄資訊. 資料來源：本研究整理. 33.

(42) 表 10 視覺化功能 JavaScript 套件整理呈現方法 heatmap. 套件名稱 Leaflet.heat. 來源 Github. 授權 BSD. 2-clause. "Simplified" License choropleth. Leaflet-choropleth. Github. MIT-LICENSE. timeline. jQuery UI. jQuery+自行開發. MIT-LICENSE. category. Leaflet.js. Leaflet.js+自行開發. BSD. 2-clause. "Simplified" License dot（symbol）. Leaflet.js. Leaflet.js+自行開發. BSD. 2-clause. "Simplified" License icon. Leaflet.js. Leaflet.js+自行開發. BSD. 2-clause. "Simplified" License buffer. turf.js. Github. MIT-LICENSE. cluster. Leaflet.markercluster Github. MIT-LICENSE. 資料來源：本研究整理. 34.

(43) 第四節. 使用性評估. 為了評估未來網站上線後可能的使用狀況，與上線前的系統修改，本研究須測試網頁其使用性（usability，又翻譯為優使性、易用度、易用性、好用性、可用性等）。評估網站使用性的方法可以分成專家導向與使用者導向（Genuis，2004）。正式使用性測試由受試者使用網站或原型系統中完成給定任務或設定好的目標，於測試過程中觀察（劉至逢，2009）。其中彙整前人研究有關使用性評估方法的表格如表 11 所示。表 11 使用性評估方法類別. 方法需求分析、啟發式評估、認知演練、. 專家導向／分析型／檢核法. 網站 log 分析. 調查法使用者導向／實證型. 使用性測試、問卷、放聲思考、使用者訪談、使用者觀察、卡片分類、焦. 正式使用性測試. 點團體. 資料來源：劉至逢（2009），本研究改製常用的研究方式有專家評量（Heuristic/Expert Review）、使用性測試（Informal Usability Testing）和訪談（User Interview）（魏澤群，2007）。，在 Usability Professionals’ Association （UPA，後成為 User Experience Professionals Association） 2007 與 2009 對於該協會中從業人員的調查中（Heuristic or Expert Review）、使用性測試（Informal Usability Testing）和使用者研究（Interview & Survey）方法，都有 70%左右的使用率。表 12 比較較常使用的前兩種方法，其中各有其有缺點，在使用上也因產品特性與使用者群體關係而會有所考量，甚至資源允許下，可以同時使用。. 35.