結合行動應用之自由行旅遊支援平台建置 - 政大學術集成

全文

(1)國立政治大學數位內容碩士學位學程 Master’s Program in Digital Content and Technologies National Chengchi University. 碩士論文 Master’s Thesis. 治政結合行動應用之自由行旅遊支援平台建置大立 ‧ 國. 學. The Development of a Travel Supported Platform with Mobile Application for Backpacking. ‧. n. er. io. sit. y. Nat. al. i n U. Ch. v. engchi 研究生：王子瑜. 指導教授：張寶芳博士蔡子傑博士. 中華民國一百零三年七月 July 2014.

(2) 摘要觀光旅遊是現今十分興盛的休閒活動，根據 2010 至 2012 年交通部觀光局統計資料顯示，國人國內旅遊以非旅行社承辦平均高達約 88%，因此如何有效規劃行程內容及安排各景點間的交通路線，就成為旅遊前的重要準備工作。. 檢視目前旅遊規劃的數位服務平台並無法真正解決旅遊需求。故本研究設計與建置一套旅遊支援平台，首先藉由訪談，了解使用者需求，歸納出平台設計重點，分析系統的使用流程，再設計功能模組化與操作介面，最後建置平台並進行. 政治大. 原型評估。本平台以雲端資料庫為基礎，無縫結合網站與行動應用兩端的資訊流。. 立. 使用者在行前利用網站規劃行程內容，完成後上傳至雲端資料庫，網站端內容會. ‧ 國. 學. 自動同步於行動應用端，並以適合行動應用的界面呈現。使用者之行程安排因此更便利與彈性，在行動中亦能利隨時以手機查看行程，並依當地情況修改行程、. ‧. 即時安排交通路徑，使得旅遊行程計畫可以依實際的變化機動調適。而更新後的. y. Nat. er. io. al. sit. 行程亦同步儲存於雲端。. v. n. 本研究未來方向可以往更多的服務串流發展，如景點的多媒體內容、社群結. Ch. engchi. i n U. 合、智慧邏輯排程或外部資訊連結等等。隨著未來資訊技術的提升，將為系統平台帶來更多可能性、讓整體服務擁有更佳的整合性，提供使用者更好的體驗。. 關鍵字：資訊服務設計、旅遊行程規劃平台、行動應用. ii.

(3) Abstract Nowadays, touring is a popular leisure activity. According to statistics from the Taiwan Tourism Bureau, people arranged their own domestic travels as high as 88%. Because backpacking can be economical and more flexible, many young people tend to travel by themselves. Therefore travel planning has become the most important preparation work. How to plan an effective schedule and how to arrange the routes between attractive points are the tasks that backpackers often need to face. However there are few information services for the needs currently. The thesis designed and implemented a travelling support platform. First, the research identified design key elements by interviewing users and analyzing travelling behaviors. Second, the research mapped the touring process into functional models. Finally, we built and tested the platform prototype. This platform is Cloud-based and seamlessly integrates both website and mobile application to achieve the information service. Users use the website to schedule their trips and upload the schedules to the cloud database. Then the user can access the same schedule made at website on the mobile APP synchronously. They can check their schedule while they are traveling on the mobile phones. In addition, they can edit the schedule and rearrange new traffic routes real-time to adjust to the local circumstances.. 立. 政治大. ‧. ‧ 國. 學. sit. y. Nat. The further developments of the platform will include more integrated services,. io. n. al. er. such as multimedia contents, social network, and intelligent logic scheduling. With the evolution of the technology in the future, the platform will provide better user experience.. Ch. engchi. i n U. v. Keyword: Information Service Design, Tour Planning Platform Design, Mobile Applications. iii.

(4) 誌謝數位內容學程結合傳播領域的感性與資訊領域的理性，在研究所兩年的時間，執行許多跨領域合作的專案，過程中學習到不少寶貴的經驗，同時也讓我完成兼具傳播與資訊面向的碩士論文。論文撰寫過程中，首先要感謝我的指導教授張寶芳老師與蔡子傑老師，兩位老師的細心帶領與耐心教導，給予我許多研究上的建議，讓我順利完成論文。再來也非常感謝陳甫彥老師百忙之中抽空擔任口試委員，提出論文修正的方向. 政治大研究所的同學們，有太多事情要謝謝你們每一位，每個在數位藝術中心與專案相立. 與意見，都讓我受益良多。除此之外，感謝一起為論文努力的好夥伴資雅，以及. ‧ 國. 學. 伴的日子都令我難以忘懷。. 最後感謝我的家人，這二十四年來對我的栽培與教養，在人生的不同階段都. ‧. 一直支持著我；還有謝謝一路陪伴著我的恩捷。僅以本文獻給關心我的每一個人，. n. al. er. io. sit. y. Nat. 由衷表達我的感激之情，謝謝。. Ch. engchi. i n U. v. 王子瑜. iv. 謹誌於. 國立政治大學. 數位內容碩士學位學程. 中華民國. 一○三年八月二十五日.

(5) 目錄摘要................................................................................................................................ii Abstract ........................................................................................................................ iii 誌謝............................................................................................................................... iv 目錄................................................................................................................................ v 圖目錄..........................................................................................................................vii 表目錄........................................................................................................................... ix 第一章緒論.................................................................................................................. 1. 政治大. 第一節研究背景與動機 ..................................................................................................... 1. 立. 第二節研究目的................................................................................................................. 3. ‧ 國. 學. 第三節論文架構................................................................................................................. 3. 第二章文獻探討.......................................................................................................... 6. ‧. 第一節文獻回顧................................................................................................................. 6. Nat. sit. y. 一、自助旅遊定義 .......................................................................................................... 7. n. al. er. io. 二、自助旅遊者資訊行為 .............................................................................................. 8. i n U. v. 三、自助旅遊與行動應用載具相關研究 ...................................................................... 9. Ch. engchi. 第二節相關旅遊規劃平台分析 ....................................................................................... 10 第三節自助旅遊規劃需求前置研究 ............................................................................... 17 一、問題訪談與瞭解需求 ............................................................................................ 17 二、訪談結果分析 ........................................................................................................ 18 第四節本章小結............................................................................................................... 20. 第三章系統設計........................................................................................................ 22 第一節服務流程設計 ....................................................................................................... 22 第二節功能模組設計 ....................................................................................................... 24 一、地圖功能模組 ........................................................................................................ 26. v.

(6) 二、行程表功能模組 .................................................................................................... 26 三、行動應用功能模組 ................................................................................................ 28 四、雲端資料庫整合模組 ............................................................................................ 29 第三節介面設計............................................................................................................... 30 一、網站端介面設計 .................................................................................................... 30 二、行動應用端介面設計 ............................................................................................ 32. 第四章系統建置........................................................................................................ 36 第一節系統技術架構 ....................................................................................................... 36 第二節系統資訊流 ........................................................................................................... 37. 政治大. 第三節系統資料庫 ........................................................................................................... 39. 立. 第四節系統實作............................................................................................................... 45. ‧ 國. 學. 一、網站端功能 ............................................................................................................ 45. ‧. 二、行動應用功能 ........................................................................................................ 49 第五節情境示範............................................................................................................... 55. y. Nat. io. sit. 第六節原型評估............................................................................................................... 56. n. al. er. 第五章結論與未來展望............................................................................................ 59. Ch. i n U. v. 第一節研究貢獻............................................................................................................... 59. engchi. 第二節限制....................................................................................................................... 60 第三節未來展望............................................................................................................... 61. 參考文獻...................................................................................................................... 62 附錄一：訪談者基本資料.......................................................................................... 65 附錄二：訪談重點詳細整理.................................................................................... 66. vi.

(7) 圖目錄圖 1-1............................................................................................................................. 5 圖 2-1........................................................................................................................... 10 圖 2-2........................................................................................................................... 11 圖 2-3........................................................................................................................... 12 圖 2-4........................................................................................................................... 14 圖 2-5........................................................................................................................... 15 圖 2-6........................................................................................................................... 18. 治政大 25 圖 3-2........................................................................................................................... 立圖 3-3........................................................................................................................... 26 圖 3-1........................................................................................................................... 23. ‧ 國. 學. 圖 3-4........................................................................................................................... 27 圖 3-5 ........................................................................................................................... 28. ‧. 圖 3-6........................................................................................................................... 28. sit. y. Nat. 圖 3-7........................................................................................................................... 29. io. er. 圖 3-8........................................................................................................................... 31 圖 3-9........................................................................................................................... 31. n. al. Ch. i n U. v. 圖 3-10......................................................................................................................... 32. engchi. 圖 3-11 ......................................................................................................................... 32 圖 3-12......................................................................................................................... 33 圖 3-13......................................................................................................................... 33 圖 3-14......................................................................................................................... 33 圖 3-15......................................................................................................................... 33 圖 3-16......................................................................................................................... 34 圖 3-17......................................................................................................................... 34 圖 3-18......................................................................................................................... 35 圖 3-19......................................................................................................................... 35 圖 3-20......................................................................................................................... 35. vii.

(8) 圖 3-21......................................................................................................................... 35 圖 4-1........................................................................................................................... 37 圖 4-2........................................................................................................................... 38 圖 4-3........................................................................................................................... 39 圖 4-4........................................................................................................................... 40 圖 4-5........................................................................................................................... 41 圖 4-6........................................................................................................................... 41 圖 4-7........................................................................................................................... 42 圖 4-8........................................................................................................................... 42 圖 4-9........................................................................................................................... 43. 政治大圖 4-11 ......................................................................................................................... 43 立圖 4-10......................................................................................................................... 43. 圖 4-12......................................................................................................................... 44. ‧ 國. 學. 圖 4-13......................................................................................................................... 44. ‧. 圖 4-14......................................................................................................................... 44 圖 4-15......................................................................................................................... 45. Nat. sit. y. 圖 4-16......................................................................................................................... 46. er. io. 圖 4-17......................................................................................................................... 47. al. 圖 4-18......................................................................................................................... 47. n. v i n Ch 圖 4-19......................................................................................................................... 48 engchi U 圖 4-20......................................................................................................................... 49 圖 4-21......................................................................................................................... 49 圖 4-22......................................................................................................................... 50 圖 4-23......................................................................................................................... 50 圖 4-24......................................................................................................................... 51 圖 4-25......................................................................................................................... 52 圖 4-26......................................................................................................................... 53 圖 4-27......................................................................................................................... 54 圖 4-28......................................................................................................................... 55 圖 4-29......................................................................................................................... 56 viii.

(9) 表目錄表 1-1............................................................................................................................. 2 表附錄一 .................................................................................................................... 65. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ix. i n U. v.

(10) 第一章緒論第一節研究背景與動機. 根據近年來交通部觀光局統計資料顯示（詳見表 1-1），國內旅遊以自助旅遊者占絕大多數，加上網路資訊傳播普及化，自助旅遊的門檻已降低許多。雖然自助旅遊自主性高，能自行控制預算、時間、行程內容，可以完全依照個人喜好與需求來規劃安排，但是規劃行程成為一件既重要又繁瑣的工作。有別於一般旅遊. 政治大. 者仰賴旅行社旅遊規劃，自助旅遊者規劃模式特徵為：旅行前大量蒐集資訊，並. 立. 自己查詢住宿、景點與交通，最後再依個人需求安排行程內容。隨著數位時代的. ‧ 國. 學. 來臨，自助旅遊者旅行前的安排需要一套更有效率、更具彈性的整合平台來規劃行程，搭配雲端服務與行動應服務，讓自助旅遊的規劃更具效率與便利。許多研. ‧. 究都是針對自助旅遊的推薦系統，但是對於自助旅遊者來說，即使有的推薦系統，. y. Nat. sit. 還是有相當多的自助旅遊者喜歡自己蒐集資訊，例如：閱讀旅遊書籍、瀏覽部落. n. al. er. io. 格文章、查詢論壇等等。因為這些內容都是具有故事性與經驗分享，對自助旅遊. i n U. v. 者在蒐集資訊的過程中，也同時是在閱讀別人的旅遊故事。. Ch. engchi. 1.

(11) 政治大. 表 1-1 交通部觀光局旅遊統計資料. 立. 近年來，行動應用大幅改變我們的生活方式，其中適地性服務（Location）. ‧ 國. 學. 是最常見的改變之一，利用智慧型手機的 GPS 或網路定位，即時導航與觀看地. ‧. 圖，此乃自助旅遊時在最實用的一項功能。. Nat. sit. y. 根據 12 位自助旅遊訪談者的經驗，雖然旅遊相關的 App 很多，但是對於訪. n. al. er. io. 談者而言真正實用的旅遊 App 卻不多。通常他們會先上網蒐集資訊，再加以篩. i n U. v. 選彙整，並利用 Word、Excel 編輯軟體來安排行程，若是旅行途中有空檔的時段，. Ch. engchi. 他們才會考慮下載 App 來即時查詢景點。由於利用手機 App 來規劃行程不是很方便，所以多數訪談者表示還是會選擇用電腦來查詢資料，而最後的輸出方式以紙本居多，或者利用手機拍照儲存隨身攜帶，並非仰賴行動應用裝置具有的功能。一般而言，數位行動載具比起紙本更方便、多功能之優勢，但是使用者卻選擇紙本輸出與拍照儲存居多，這顯示出目前使用者需求與數位資訊工具之間的落差。數位化工具雖然普及，但是根據訪談調查解果顯示，多數的訪談者認為目前數位化工具並不符合真正的需求，故本研究想深入探討自助旅遊者安排行程之需求與模式，設計實作出合乎使用者需求服務之數位平台。. 2.

(12) 第二節研究目的. 現今網路資訊傳播日益發達，旅遊平台的資訊越來越豐富，雖然目前旅遊相關的平台眾多，但是哪些才是自助旅遊者真正需要的設計？多數旅遊網站只提供制式化的資訊，無法符合自助旅遊者的需求。自助旅遊者除了蒐集資訊外，更著重於整體規劃。目前旅遊相關規劃平台，皆無法真正有效幫助自由行旅遊者規劃之需求。故本研究旨在設計並建置更實用的自由行旅行規劃支援平台，提供使用者更佳的使用體驗。. 政治大. 本研究欲透過使用者行為分析，藉由訪談整理出使用者旅遊前規劃模式，找. 立. 出真正的使用需求，再依此需求加以設計並建置。使用者出發前在網站端安排詳. ‧ 國. 學. 細行程內容，完成後上傳儲存至雲端資料庫，再利用智慧型手機下載至 App，將行程隨身帶著走。在旅行時可隨時查看行程內容，依照實際情況修改行程、自動. ‧. 安排交通路徑、將重要的備註記錄下來等。利用雲端資料庫同步網頁與行動應用. y. Nat. n. al. er. io. 規劃的效率，提供更具彈性與便利性的旅遊支援平台。. sit. 兩端資料，達到資訊與服務的整合，讓自由行旅遊者能利用此服務平台增加行前. Ch. engchi. i n U. v. 第三節論文架構. 首先確立研究動機與目的，針對本研究之動機與目的討論闡述，探討自助旅遊的行前規劃目前狀況，提出藉由網站平台整合至雲端服務、與行動載具同步，提升規劃行程的便利性與組織性。接著進行文獻探討與使用者行為分析，分成自助旅遊相關研究、旅遊規劃平台案例之分析、自助旅遊規劃需求前置研究三個部分。自助旅遊相關研究在探討自助旅遊者蒐集資訊、安排行程之行為相關文獻，歸納出自助旅遊者在安排行程時主要的需求與行為。旅遊規劃平台案例之分析為 3.

(13) 整理現有旅遊規劃平台案例，分析其優缺點是否真正符合使用者需求，彙整旅遊規劃平台特性，作為系統設計之參考基礎。自助旅遊規劃需求前置研究則是透過對於自助旅遊規劃者深度的訪談，瞭解使用者的需求，並整理出重點需求分析。. 完成前置研究分析後，開始進行系統設計與建置。系統設計主要分成使用流程設計、功能設計、介面設計三項。依照使用者需求來設計系統功能與服務，其中包含網站端、雲端資料庫、行動應用端的整體功能規劃。最後再進行使用介面設計。設計完成後再進行系統建構，本研究系統實作將利用 php、html5 與 JavaScript 撰寫網路平台端；行動應用端將以 xCode5.1.1 版 iOS 開發，兩者再搭. 政治大. 配 MySQL 資料庫雲端同步。系統原型開發完成後，將對使用者者進行實際測試，. 立. 評估系統整體的服務，再進行調整修正，將針對需要改進之問題進行調整與修正。. ‧ 國. 學. 最後提出研究之結論與後續研究發展建議（詳見圖 1-1）。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. 4. i n U. v.

(14) 研究動機與目的. 自助旅遊相關. 旅遊規劃平台案例. 自助旅遊規劃需求. 研究. 之分析. 前置研究. 立. 政治大系統設計. ‧ 國. 學 ‧. 系統建置. n. engchi. 結論與建議. 圖 1-1 論文架構圖. 5. er. io. Ch. sit. y. Nat. al. 原型評估. i n U. v. 調整修正.

(15) 第二章文獻探討本研究欲設計符合自助旅遊者的規劃服務平台，首先必須回顧自助旅遊者資訊行為蒐集論文，以及旅遊相關的數位行動應用載具使用研究。再來必須探討瞭解自助旅遊者的行程規劃行為，整理出使用需求。接著，蒐集並分析目前的自助旅遊規劃平台其優缺點，最後綜合分析自助旅遊者的行為模式與需求，以提供系統平台設計之依據。. 政治大. 立第一節文獻回顧. ‧ 國. 學. 本研究欲透過自助旅遊行前計畫之需求分析，設計並建置數位服務平台來幫. ‧. 助自助旅遊者規劃行程的工作，故本研究將文獻回顧分為以下三節進行探討：. y. Nat. n. al. er. io. sit. 〈一〉、自助旅遊定義：瞭解自助旅遊基本定義與其特性。. i n U. v. 〈二〉、自助旅遊者資訊行為：探討自助旅遊者在計畫旅遊時，會有那些資訊行. Ch. engchi. 為、以什麼方式蒐集資訊、從什麼管道查詢等相關行為研究。. 〈三〉、自助旅遊與行動應用載具相關研究：探討在過去研究之中，自助旅遊與行動應用服務是如何結合。. 6.

(16) 一、自助旅遊定義. 國內自助旅遊專家陳德立（1987）認為：「所謂自助旅遊就是從開始計畫行程到經歷整個旅行過程，一直到旅行結束，完全由自己設計、調配、掌握和實行，這就是自助旅遊最簡單的解釋」。而自助旅遊推廣者鄭有利（1990），則點出自助旅遊的特色有：. 1.. 不同於一般旅遊團旅行方式，參加者有足夠的時間與空間自己行動。. 2.. 旅遊內容自主性強，旅遊內容與行程由旅遊者自行主導。. 3.. 經費操控可達最高效益，旅遊者可以把錢花在自己最想花的地方。. 4.. 自助旅遊是計畫性的旅遊，從開始到旅程結束，都必須有計畫，但計畫需具. 立. ‧ 國. ‧ sit. y. Nat. al. er. 可依個人的喜好，衡量自己的時間與財力，再安排恰當行程的旅遊方式。故. io. 5.. 學. 有彈性。. 政治大. v. n. 自助旅遊的特點是：旅遊具有計畫性、行程安排具有彈性、內容具有自主性. Ch. engchi. i n U. 等，自助旅遊者需要在旅行前做好充足的規劃準備。. 7.

(17) 二、自助旅遊者資訊行為. 根據蘇慧捷對於自助旅遊者資訊行為探討旅遊網站內容之規劃（2002）指出，自助旅遊者的資訊行為可分成旅遊前的蒐集、旅遊中的依據、旅遊後的反思三個階段。其中自助旅遊者的旅遊前資訊行為主要為蒐集住宿、景點、交通等資訊，許多自助旅遊者會採用填空式安排。對於自助旅遊者而言，旅遊規劃重點在於交通與景點與行程順序來規劃。自助旅遊者在每階段都有不同的資訊需求與行為，旅行前著重於資訊蒐集與規劃；旅行中會隨時隨地仰賴資訊所提供的協助；旅行. 政治大集生活資訊的來源之一。蘇慧捷指出關於自助旅遊者的資訊蒐集行為有四項重點立後則可能由資訊接收者的角色變成為資訊的傳佈者，網際網路確已成為現代人收. 結論：. ‧ 國. 學. 1. 資訊對於自助旅遊者十分重要性。. ‧. 3. 旅遊網站是自助旅遊者重要資訊管道之一。. n. al. Ch. engchi. 4. 台灣旅遊網站之內容深廣度不足。. er. io. sit. y. Nat. 2. 自助旅遊者展現歷程的資訊行為。. i n U. v. 其中，由於本篇研究當時的網站資訊與現今情況不完全相同，故與現今網站之內容有相當大程度的改變。然而，針對自助旅遊者的資訊蒐集行為是依據使用者的心理與需求模式，所以使用者蒐集行為還是與現今情況仍然相符。自助旅遊者在規劃時會先大量從不同管道蒐集資訊，並不會依賴單一資料來源。再將蒐集後的資料彙整，依照景點、住宿與交通安排旅遊內容，在旅行中亦會隨時隨地將查詢的資料作為參考。而現今蒐集旅遊資料最主要的來源之一就是透過網際網路，諸如旅遊網站、論壇、部落格、官方網站等來源。. 8.

(18) 三、自助旅遊與行動應用載具相關研究. 廖正閔（2006）對於 3G 行動電話之即時旅遊資訊系統研究指出，使用者利用手機 3G 上網即時旅遊資訊查詢，研究結果發現行動應用介面採單一向度選單操作較能達到易用性，並且能夠減少使用者操作的記憶經驗時間。顯現使用者在行動應載具上偏向簡單易操作的介面設計，過度複雜的功能反而讓使用者難以學習使操作方法。廖正閔亦提出旅遊資訊以地圖選取方式可以增加旅客對旅遊地區的了解，增加使用趣味與地理知識之研究。顯示使用者在規劃旅遊行程時，會參. 政治大. 考地理位置，需要搭配地圖瀏覽查詢。. 立. 鄭仰廷（2011）在旅遊行程編輯系統之設計與實作研究指出，傳統紙本記錄. ‧ 國. 學. 旅遊行程資訊方式攜帶不易、容易遺忘與更新緩慢等不方便因素存在，行動應用載具能夠解決紙本問題的選擇。研究結果亦指出旅遊行程安排除了 Word 編輯軟. ‧. 體外，使用者可以在電腦使用結合 Google Maps 的編輯系統計畫，出遊時再使用. y. Nat. sit. 行動應用裝置來瀏覽，就不需要攜帶其他旅遊書籍或地圖。雖然此研究並未實作. n. al. er. io. 至行動應用軟體部分，但是其系統結合 Google Maps 讓旅遊規劃大幅提升效率。. i n U. v. 這顯示一個完整的旅遊規劃平台，是需要整合電腦網站平台端與行動應用端兩者. Ch. engchi. 之應用特性，讓整個系統平台服務串聯成一整套，才能讓旅遊規劃系統更完善。. 9.

(19) 第二節相關旅遊規劃平台分析. 案例一、Niceday. 圖 2-1 Niceday. 學. ‧ 國. 立. 政治大. ‧. Niceday（詳見圖 2-1）為一專門為國內旅遊規劃行程的網站，網站有豐富的. sit. y. Nat. 國內熱門景點簡介資訊。使用者可以將喜歡的景點加入最愛，最後安排行程時就. io. er. 會在地圖上出現所有使用者曾經加入最愛的景點。其概念類似快速打包行程，讓. al. 使用者可以快速的規劃內容，排行程的介面是採用以日為單位之清單與地圖搭配. n. v i n Ch 對照。另外，若是行程是開放分享，他人則可觀看使用者分享的行程內容，所以 engchi U. 使用者間能夠互相參考他人之經驗。最後行程安排好之後，輸出 PDF 電子檔案。. 優點：. . 豐富國內旅遊資訊。. . 不用一個一個景點輸入。. . 地圖有計算行程之間路程時數。. 10.

(20) . 具條列式清單與地圖同時顯示對照。. 缺點：. . 最後輸出為 PDF 檔案，若是更改景點，交通路線無法跟著改變。沒有與行動應用結合，最後輸出 PDF 檔案的結果與紙張差不多。. 案例二、Tripwon. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-2 Tripwon Tripwon（詳見圖 2-2）是一專門旅行規劃的網站，有一些主題規劃建議的行程。自行規劃旅遊行程則是全部都要手動輸入，無論是景點、交通、住宿與時間，輸入之後是以清單式顯示結果。Tripwon 有出 App 版本，但是資料完全沒有與網站版同步，也就是說網站與智慧型手機是分開的兩個平台。. 11.

(21) 優點：. . 具有標籤紀錄包含與人物、時間、地點。. . 有旅遊小提醒。. 缺點：. . 交通景點住宿每次新增，就要填一個表格很麻煩。. . 表格缺乏彈性，若要修改日期又要重新填寫。. . 有推出 App 提供行動應用服務，但資料與網站並未同步。. 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat. 案例三、Dorling Kindersley 旅遊電子書. Ch. engchi. i n U. v. 圖 2-3 Dorling Kindersley 旅遊電子書 12.

(22) Dorling Kindersley 旅遊電子書（詳見圖 2-3）以城市為單位的主題電子書，擁有世界知名旅遊勝地的詳細介紹，例如：西班牙的巴塞隆納、英國的倫敦、法國的巴黎等等。電子書的內容非常詳盡的介紹城市主要的旅遊景點，包含文化歷史內容、景點建築的 3D 剖面圖、景點模擬 3D 地圖等等，像是一本旅遊百科全書，內容非常詳細。其中，也有地圖路線規劃之功能，以及住宿與餐廳的簡介。. 優點：. . 以城市為單位，深入介紹知名景點。. . 政治大電子書的內容很豐富，包含各類 3D 圖示，讓使用者更加容易了解建築立. 體或是地區樣貌。. ‧. ‧ 國. 學. 缺點：. 電子書很專精於介紹特定景點，其他小景點就沒有被包含在其中。. . 雖然有地圖路線規劃，但是也僅止於電子書內含的景點，無法彈性新. sit. n. al. er. io. 增。. . y. Nat. . Ch. engchi. i n U. v. 比較像是一本很詳盡的導覽，而非一個具彈性安排行程的工具書. 13.

(23) 案例四、7-WATCH 行動旅遊家. 立. 政治大. ‧ 國. 學 ‧. 圖 2-4 7-WATCH 行動旅遊家. Nat. sit. y. 7-WATCH 行動旅遊家（詳見圖 2-4）為電子旅遊雜誌《7-WATCH》所推出，. n. al. er. io. 景點報導遍及全台灣。結合雜誌與簡單的書籤、路線規劃等功能。讓使用者可以. i n U. v. 一邊看雜誌內容，一邊安排行程內容。規劃行程的介面是條列式清單搭配地圖。. Ch. engchi. 優點：. . 電子雜誌結合行程規劃的功能，資料來源很豐富。. . 能一邊閱讀景點介紹之內容，一邊安排行程。. . 概念為結合旅遊電子雜誌與旅遊工具書。. 14.

(24) 缺點：. . 內容太豐富反而讓整體畫面很雜亂，無法條理清晰的找到資訊。. . 介面有點過度複雜，使得操作上不是很方便。. 案例五、旅遊趣. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-5 旅遊趣旅遊趣（詳見圖 2-5）為一 Apple Store 的付費旅遊行程規劃 App。沒有景點介紹的內容，全部景點需要手動輸入。提供分類行程、住宿、交通規劃的記錄，以及預算試算功能。. 15.

(25) 優點：. . 結合行動應用，不用帶著紙本。. 缺點：. . 所有景點需打字輸入很不方便，尤其是在智慧型手機打字實在是非常耗時。. . 沒有結合地圖路線規劃之功能. 立. 政治大. ‧ 國. 學. Niceday 的日程規劃方式很符合自助旅遊者慣用的模式，一邊搭配地圖查詢. ‧. 交通路線，一邊安排行程內容。然而，所有的景點一次顯示在地圖上顯得雜亂，. y. Nat. 最後的輸出為 PDF 檔案，其交通地圖只給一張縮圖根本無法使用，而且相關資. er. io. sit. 訊都無法直接使用行動載具直接點選連結到網頁查詢，實在很不方便。Tripwon 需要使用者詳細的填寫資料，每新增一個景點就填寫一次，也無法自動交通路線. al. n. v i n 規劃，使用起來過度繁瑣且沒有幫助到自助旅遊者需求的重點。Dorling Ch engchi U. Kindersley 旅遊電子書與 7-WATCH 行動旅遊家則是以旅遊電子書方式來顯現，. 雖然內容資訊相當詳細，但由於是在平板電腦操作，對使用者安排行程上相當不便。另外，旅遊趣 App 除了要手動輸入資料不方便之外，在智慧型手機上做編輯規劃，對使用者來說相當不方便。. 16.

(26) 第三節自助旅遊規劃需求前置研究. 本研究採文獻分析法與深度訪談法進行對於自助旅遊者之旅遊規劃行為蒐集分析。透過文獻分析法，初步探討自助旅遊的資訊蒐集行為、自助旅遊相關行動應用之背景後，再以深度訪談法來瞭解現今自助旅者行為與需求，分析後加以彙整，作為設計平台之依據。. 一、問題訪談與瞭解需求. 政治大. 本研究邀請到 12 位受訪者進行深度訪談（詳見附錄一），平均年齡為 24 歲，. 立. 其中多數為學生，亦有資訊業、國外度假打工等。受訪者共有女性 9 位，男性 3. ‧ 國. 學. 位；台灣人 11 位，大陸人 1 位；集體焦點訪談 6 位，個別訪談 6 位。訪談對象限制至少有 2 次以上自助旅遊經驗，訪談過程皆由研究者親自進行，部分訪談者. ‧. 因為地理因素採電話訪談。訪談進行期間自民國 102 年 5 月至民國 103 年 1 月，. al. er. io. sit. y. Nat. 共計 7 個月。. v. n. 欲瞭解自助旅遊者在旅行前規劃之行為模式，本研究訪談採取集體焦點訪談. Ch. engchi. i n U. 與個別深入訪談，透過訪談能夠更深入瞭解自助旅遊者規劃行程之需求。訪談討論過程中會適時彈性追加問題來引導訪談者描述其行為與需求，問題大綱如下：. 1. 基本背景介紹，安排自助旅遊的經驗與次數。 2. 在安排行程時，通常以什麼為優先順序來考量安排？ 3. 在安排行程時，蒐集資訊的來源？ 4. 簡述旅遊前規劃行程的過程與方式。 5. 關於旅遊相關的行動應用載句使用經驗簡述？ 6. 是否會於旅遊前下載好相關 App 來使用？ a.. 是，經驗如何？ 17.

(27) b.. 否，為何不會考慮於是先安排行程時使用？. 7. 若是將整個行程安排數位化，搭配網站平台，一邊查詢也資料一邊做整理，甚至最後可輸出在行動應用載具（手機、平板電腦等等…）隨身查看修改行程及查詢交通，覺得會滿足使用需求嗎？或是對於這類的數位產品有什麼其他的需求？. 二、訪談結果分析. 政治大. 根據訪談結果顯示自助旅遊者在規劃行程的過程中，主要的行為模式與需求可歸. 立. 納為五項重點，其中涵蓋使用者如何蒐集資料，編輯內容，安排交通等事前準備. 規劃內容以交通、景點、住宿三種來分類。. y. Nat. io. sit. 絕大多數訪談者都是以交通、景點、住宿三種分類來查詢資訊。通常會先依. er. 1.. ‧. ‧ 國. 學. 工作。結果分析重點如下：. 照地理位置來決定住宿後，再安排行程順序與交通方式（詳見圖 2-6）。多數. al. n. v i n 訪談者一開始會將景點以條列式清單紀錄，再考慮地理位置依序填入日期表 Ch engchi U 格。. 圖 2-6 旅遊行前規劃順序. 18.

(28) 2.. 資料來源並非仰賴單一管道。. 自助旅遊者在旅行前蒐集資料並非單一管道，非常多元，因為不同來源擁有不同特性，他們依照自己欲蒐集的資訊而選擇不同的來源。部落格、旅遊論壇、Ptt、詢問朋友蒐集素人的經驗分享；旅遊書籍、雜誌擁有豐富的詳細介紹；官方網站能夠確認景點基本資訊。. 3.. 景點以條列式與表格式來整理；交通以Google Map查詢；攜帶資料會選擇印出紙本或翻拍存在手機裡。. 政治大多數訪談者在旅遊前的規劃景點會以條列式與表格式來整理，交通會利用立. Google Map查詢，最後印出紙本或翻拍存在手機裡。訪談者表示紀錄方式通. ‧ 國. 學. 常會以Word、Excel來編輯，也有部分的訪談者會使用手寫紀錄，交通安排. ‧. 訪談者都是使用Google Map查詢詳細路線，最後再將彙整記錄列印出紙本以. y. Nat. 便旅遊攜帶。然而查詢交通時，紙本記錄只能大概確認位置，無法詳細導航. 要資訊翻拍存在手機裡面隨身攜帶。. n. al. 4.. Ch. engchi. er. io. sit. 路線。而且有部分訪談者表示若是紙本記錄遺失會感到很困擾，所以會將重. i n U. v. 行動應用載具主要是作為即時查詢的工具，而非編輯詳細行程內容。. 多數訪談者不會以行動應用載具作為旅遊規劃工具，也不會偏好單一旅遊 App，甚至不使用。反而在旅遊中比較常使用導航App。有部分訪談者認為目前的旅遊App畫面過度雜亂，或是功能複雜而導致不想使用；有部分訪談者覺得旅遊App資訊普遍不足，不像部落格、論壇資訊豐富，所以查資料還是會自己上查詢；也有訪談者覺得智慧型手機字太小、瀏覽網站不便查，所以只考慮用導航相關App；亦有部分的訪談者表示，會將許多資訊以拍照儲存於手機相簿內，隨身攜帶以供隨時觀看，避免紙本損毀與不見的缺點。. 19.

(29) 5.. 系統平台使用上的重點是不要太複雜，要簡單容易操作。. 訪談者對於旅遊規劃數位平台與行動應用結合有幾項期許：功能不要太複雜，要簡單容易操作、交通路線能夠自動規劃、智慧型手機能自動備份規劃內容、表格式的規劃。. 第四節本章小結. 政治大從第二節的旅遊規劃平台案例與自助旅遊者規劃需求前置研究，本研究發現立. 現今旅遊規劃平台之設計並未符合真正使用者需求。現今多數旅遊規劃平台分為. ‧ 國. 學. 兩類，網站平台與行動應用平台。網站平台優點是擁有豐富的內容與方便瀏覽編. ‧. 輯；行動應用平台則是攜帶方便與即時查詢的優勢。然而，現今旅遊規劃平台都. sit. y. Nat. 沒有整合兩者優勢。. n. al. er. io. Niceday、Tripwon 、Dorling Kindersley 是屬於網站平台，Dorling Kindersley. i n U. v. 多著重於旅遊資訊的豐富，規劃行程只是附加的功能，所以能讓自助旅遊者談性. Ch. engchi. 規劃範圍非常小；Niceday、Tripwon 雖然著重於規劃功能，但是使用上不夠簡潔，每次新增景點，就要很繁瑣的資訊非常麻煩。而且規劃行程的最後輸出無法彈性更改，跟使用者自己輸出紙本無太大差異。Tripwon 有推出 App 提供行動應用服務，但 App 端與網站只是兩種不同型態並無法同步規劃內容，然而使用者表示在 App 上排行程其實很不方便。7-WATCH、旅遊趣是行動應用平台，7-WATCH 就是一本旅遊電子雜誌，擁有豐富的旅遊資訊，然而在旅遊規劃的地圖非常雜亂，一次顯示過多的資訊在同一個地圖上，很容易找不到讓人找不到要找的資料。旅遊趣雖然有符合規劃行程的概念，但是行程內容都要智慧型手機上一一輸入，反而增加使用者的困擾。 20.

(30) 現有旅遊規劃平台都無法符合自助旅遊者真正的需求，從訪談可以得知使用者要的不是一個旅遊資訊平台，而是一個旅遊規劃平台。因為自助旅遊者不會仰賴單一旅遊資訊平台，而他們真正需要是一個旅遊規劃整合平台。訪談結果可以得出對於自助旅遊者而言，規劃行程的平台需要有幾項重要的特點：. 1.. 以日為單位的填空表，讓使用者自由的更動行程順序。. 2.. 可以記錄景點的重要資訊，而非詳細資訊。. 3.. 利用 Google Map 來查詢景點路線，交通路線能夠自動規劃. 4.. 不會想在行動應用裝置編輯規劃行程，但是會將重要資訊存於行動應用裝置. 立. 政治大. ‧ 國. 學. 備份，因為紙本紀錄容易遺失，而行動應用裝置方便攜帶又能即時查詢。. ‧. 5.. 介面與功能不要太複雜，要簡單容易操作，能夠記錄重點資訊。. y. Nat. er. io. sit. 一個好的數位產品除了利用技術來解決問題，更重要的是需要符合使用者的行為模式，方能真正的解決問題與提升服務體驗。故訪談結果之重點分析將做為. al. n. v i n 系統設計重要的依據，系統的設計過程必須將使用者真正的需求納為考量，以人 Ch engchi U 為出發點來運用科技解決問題需求。. 21.

(31) 第三章系統設計本研究系統設計將旅遊過程所需要的服務整合成一個串流，從自由行出發前利用網站安排行程開始，至旅行中搭配的行動應用服務。系統設計分為服務流程設計、功能模組設計與介面設計三個部分。先從服務流程分析使用者行為與操作步驟，瞭解使用者如何與系統互動。再規劃系統功能，將使用者需求模組化，最後是介面設計。. 第一節服務流程設計. 立. 政治大. 服務流程為服務人而設計，本研究將旅遊規劃平台視為一種提供給使用者的. ‧ 國. 學. 服務進行設計，並根據 Shostack（1984）提出服務藍圖的概念，探討使用者與系統互動的過程。服務藍圖是將服務過程以視覺化的圖型呈現，用服務結構來分層，. ‧. 並由互動線、可視線和內部互動線分隔開來，分為顧客行動、前場行動、後場行. y. Nat. sit. 動、支援行動四個部份。在服務藍圖中，互動線區隔了顧客與前場的行動，通過. n. al. er. io. 互動線的關係代表顧客與前場互動。可視線區隔顧客可視與不可視的部分；即看. i n U. v. 的到的前場行動，與看不到的後場部分。內部互動線的功能則是將後場行動和支. Ch. engchi. 援前場與後場的行動分隔開來（Kingman-Brundage, 1989）。. 本研究將服務藍圖簡化並修改，以表示使用者利用系統平台規劃行程的過程，保留了服務藍圖的互動線，並將可視線與內部互動線結合，最後分為三層：使用者行為、使用介面與內部系統。使用者與使用介面之間即為互動的關係，而使用介面與內部系統同時有使用者可視與不可視的差異，也有著內部互動的關係。使用者行為闡述了使用系統的過程；使用介面為系統前端，為系統與使用者互動的可視部分；內部系統為系統後端，處理內部的運算，並提供資料庫。透過服務設計，能將使用者需求更加系統化的組織。本系統平台服務藍圖（詳見圖 3-1），主. 22.

(32) 要的三個步驟如下：. 1.. 使用者從地圖上新增或選取景點，將景點加入行程表，亦可瀏覽景點資訊。. 2.. 將加入行程表內的景點彈性編輯順序，平台依照行程安排自動規劃交通路徑與預估時間。. 透過內部系統後端的雲端資料庫將網站平台端與行動應用端同步，讓使用者能在兩端皆可查詢或修改行程。. 立. 政治大. 學 ‧. ‧ 國 io. sit. y. Nat. n. al. er. 3.. Ch. engchi. i n U. 圖 3-1 系統服務流程. 23. v.

(33) 第二節功能模組設計. 根據既有之旅遊平台與使用者需求探討，透過訪談整理後，研究發現一套真正符合使用者需要的平台需要具備以下功能：. 1.. 地圖路線規劃之功能。訪談結果顯示自助旅遊者在安排行程時，交通因素是一個很重要的考量，所以景點之間的路線該如何安排，成為自助旅遊者行程順序的參考依據。目前訪談結果顯示 Google Maps 的自動路線規劃最具參考價值。. 2.. 政治大具有調整彈性之行程表。以日為單位的行程表能讓使用者一目了然，並且確立. ‧ 國. 學. 認每日行程的景點內容與順序，讓自助旅遊者更具彈性的調整行程。每項景點內容能讓使用者自由加入備註。. ‧. 規劃完成後的資料自動存於雲端資料庫，不但可以避免紙本損毀不見的問題，. y. Nat. 3.. n. al. er. io. sit. 甚至還能自動同步下載至行動應用裝置上，攜帶更便利。. 4.. i n U. v. 行動應用端最重要的功能是可以即時更改行程，並且自動規劃交通路線，而. Ch. engchi. 其他介面功能盡量精簡化，避免過度複雜降低使用者的使用意願，讓使用者能夠更直覺的操作。訪談結果顯示出許多使用者在事前規劃上，會利用行動應用載具進行備註記事、預先拍下旅行需要圖片之行為，故本平台設計亦將這兩項重點功能整合至行動應用服務。. 本研究結合以上功能之設計概念為：首先使用者利用網站平台端規劃行旅遊程內容，系統平台自動規劃交通路線與時間計算，再將行程內容儲存至雲端資料庫，最後將資料同步於行動應用載具（詳見圖 3-2）。並將主要功能分成四大模組，地圖功能模組、行程表功能模組、雲端資料庫整合模組、行動應用功能模組。其. 24.

(34) 中，由於地圖功能模組與行程表功能模組許多資訊功能是需要互相搭配考量，故兩者設計上在網站平台端時是同時呈現，以滿足使用者規劃時需要參考交通路線之需求。雲端資料庫整合與行動應用功能模組則為各自獨立功能模組。. 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat. n. a l 圖 3-2 模組設計概念圖 i v n Ch U engchi. 25.

(35) 一、地圖功能模組. 地圖主要功能為新增景點、瀏覽景點並顯示景點資訊、路線規劃，而這些功能都會利用 Google Maps API 來實踐，故交通路線將直接使用 Google Maps 所提供的規劃。（詳見圖 3-3）. 立. 政治大. ‧. ‧ 國. 學圖 3-3 地圖功能模組. n. er. io. sit. y. Nat. al. 二、行程表功能模組. Ch. engchi. i n U. v. 行程內容主要是從地圖上的景點加入至行程表內，也可隨時刪除、更改順序，更改景點順序後地圖模組會自動改變規劃路線，可讓使用者一邊考量交通路線一邊安排行程，讓整體規劃彈性提高。行程表亦有提供景點備註，讓使用者可自行加入旅遊資訊的筆記與備註。另外，行程表提供自動估算時間功能，若是修改景點停留時間或順序，行程表會自動跟著自動更改整體行程時間。（詳見圖 3-4）. 26.

(36) 政治大. 立圖 3-4 行程表功能模組. ‧. ‧ 國. 學. 地圖功能模組與行程表功能模組兩者於網站平台端時是同時呈現，地圖功能. y. Nat. io. sit. 模組中的景點即是新增至行程表功能模組之行程。而行程順序更改時，地圖功能. n. al. er. 模組的路線規劃亦會自動變更，兩模組間的資訊功能是互相傳遞。另外，在行程. Ch. i n U. v. 表功能模組內提供行程備註，此功能即是在景點資訊中讓使用者編輯，編輯後無. engchi. 論是在行程表或是地圖上的景點資訊皆會呈現。（詳見圖 3-5）. 27.

(37) 政治大. 圖 3-5 地圖功能模組與行程表功能模組關係圖. 立. ‧ 國. 學. 三、行動應用功能模組. ‧. 行動應用功能模組主要是將雲端資料同步，讓網路平台端的資料可以下載至. Nat. sit. y. 行動應用載具中。行動應用端亦提供更改行程順序後，交通路線就會自動規劃之. n. al. er. io. 功能，讓使用者即時更改行程亦能隨時掌握交通。在行動應用端另外將旅遊規劃. i n U. v. 的重點需求一併整合至行動應用服務，除了景點安排與交通規劃，亦整合備註記事與圖片存取（詳見圖 3-6）. Ch. engchi. 圖 3-6 行動應用功能模組. 28.

(38) 四、雲端資料庫整合模組. 雲端資料庫整合模組是將行程表資訊完整備份至雲端資料庫，再讓行動應用端皆可下載並同步，無論在網站平台端或行動應用端平台更改行程內容，系統都會自動同步至雲端資料庫（詳見圖 3-7）。. 立. 政治大. y. ‧. ‧ 國. 學. Nat. n. er. io. al. sit. 圖 3-7 雲端資料整合模組. Ch. engchi. 29. i n U. v.

(39) 第三節介面設計. 介面設計以服務流程來規劃畫面的呈現與佈局，為考量使用者需求與提升平台易用性，無論是網站端或是行動應用端，在實作前先繪製手稿原型確認介面呈現方式，經由使用介面流程設計後，確認細節並修正後才進行平台實作，故手稿原型與實際實作的介面呈現會有些許差異。. 一、網站端介面設計. 政治大. 網站端介面設計需將地圖與行程表兩者結合，讓使用者能更加有組織的規劃. 立. 行程內容，配合交通路線達到行程最佳化選擇。故介面設計上，網站端左半部區. ‧ 國. 學. 塊為地圖（詳見圖 3-9），右半部區塊為行程表內容。左半部區塊的 Google Maps 地圖主要是顯示行程交通路線，讓使用者可以隨時查詢景點間的交通路程；右半. ‧. 部區塊的行程表是景點規劃內容。右半部區塊上方是以日為單位顯示，點擊即可. y. Nat. sit. 進行當天行程安排，若要添加規劃天數，只需點擊最右方「+」圖示就能增加旅. n. al. er. io. 遊天數。右半部區塊分成景點列表與行程表，從景點列表拖曳景點加入行程表排. i n U. v. 序後，使用者可以直接在行程表內拖曳景點變換順序，平台會自動上傳存至雲端. Ch. engchi. 資料庫。當使用者在網路端的右半部行程表點擊景點時，左方的 Google Maps 會自動產生交通路線規劃，隨著景點順序改變跟著變換路線，以供使用者參考。此介面設計將地圖查詢與行程規劃功能整合在同一畫面中對照，讓使用者一目了然，更清楚掌握交通路線，且更具彈性的調整景點順序。. 30.

(40) 立. 政治大. 圖 3-8 網站端介面設計手稿原型. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. 圖 3-9 網站端實作介面. 31. v.

(41) 二、行動應用端介面設計. 行動應用介面依照功能分成主要四個頁籤：行程、備註、照片與設定，讓整體介面呈現簡單且明瞭。行程頁籤為 App 預設首頁，第一層顯示行程總天數（詳見圖 3-12），選擇哪一天後，進入第二層當天行程內容（詳見圖 3-13）。景點按照順序條列出，點選景點列右邊地標圖示後，會直接跳至 Google Maps 的 App，自動規劃兩景點間的交通路徑（詳見圖 3-16）。而點選景點列本身會連接至景點資訊網站（詳見圖 3-17）。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 圖 3-10 行程頁籤第一層手稿原型. i n U. v. 圖 3-11 行程頁籤第二層手稿原型. 32.

(42) 學. ‧ 國. 立. 政治大. 圖 3-13 行程頁籤第一層總天數. 圖 3-12 行程頁籤第二層行程內容. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. 圖 3-14 行程頁籤第三層 Google Maps 手稿原型. i n U. v. 圖 3-15 行程頁籤第三層景點資訊手稿原型. 33.

(43) 學. ‧ 國. 立. 政治大. 圖 3-17 行程頁籤第三層. 圖 3-16 行程頁籤第三層景點資訊. Google Maps. ‧ sit. y. Nat. n. al. er. io. 備註頁籤功能為讓使用者能記錄一些文字資訊，例如：電話號碼、預約代號. i n U. v. 等紀事（詳見圖 3-20）。圖片頁籤可從智慧型手機相片庫加入旅行中需要使用的. Ch. engchi. 圖片，例如：購物品項參考圖片、店家外觀照片等圖片資訊（詳見圖 3-21）。. 34.

(44) 政治圖 3-18 大圖片頁籤原形手稿. 圖 3-19 備註頁籤原形手稿. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 圖 3-21 備註頁籤. i n U. v. 圖 3-20 圖片頁籤. 35.

(45) 第四章系統建置在第三章完成系統設計後，經由原型修正，在第四章完成系統實際建置。系統建置分為系統技術架構、系統資訊流、系統實作與原型評估。系統技術架構說明系統的技術如何實施與組織；系統資訊流分析系統的內部資訊流程；系統實作顯示實作功能結果，分為網站端與行動應用端；原型評估除了在政治大學數位內容畢業展覽，讓參觀者操作之外，亦邀請先前訪談受訪者實際使用以獲得回饋。. 政治大. 立第一節系統技術架構. ‧ 國. 學. 系統主要分成三大部分（詳見圖 4-1）：. ‧. 網站端：網頁以 php、html5 與 JavaScript 撰寫。php 處理資料傳輸部份；. y. Nat. 1.. n. al. er. io. 是網頁介面整合。. sit. JavaScript 負責實現網頁功能，其中亦包含 Google Maps API 應用；html5 則. Ch. engchi. i n U. v. 2.. 雲端資料庫：資料庫是使用 MySQL。. 3.. 行動應用端：App 以 xCode5.1.1 版 iOS 系統開發。. 36.

(46) 立. 政治大圖 4-1 系統架構. Nat. sit. y. ‧. ‧ 國. 學第二節系統資訊流. io. er. 本研究之系統提供使用者規劃旅遊行程的功能，主要是以資訊輸入與輸出的. al. 方式，在此將探討系統之資訊流。首先為系統輸入之資訊，使用者透過使用介面. n. v i n Ch 搜尋與決定需要輸入的資訊；也就是利用地圖與行程表的部分，從地圖中選取或 engchi U 新增景點加入至行程表當中。接著在行程表當中，可以規劃景點順序、行程時間與添加備註。以上動作主要是規劃行程的內容，即為資訊輸入的部分。. 研究設計之系統流程以使用者為出發點，首先會與網站端互動，將景點資訊與順序輸入。有了輸入的資訊，系統即可做出資訊輸出的動作。一樣透過介面當中的地圖與行程表，將使用者所需的行程資訊輸出，包括每個行程景點之間的路徑規劃與交通時間。同時也計算出整體行程的預估時間，讓旅遊所需的資訊輸出整理給使用者。最後，上傳至雲端資料庫讓網路同步平台端與行動應用端，而且能夠即時修改並同步資料。網站端接收到資料會產生行程相關資訊，而後編 37.

(47) 譯再傳至雲端系統，最後再將景點排程輸出至行動應用端同步。而使用者無論是從網站端或行動應用端修改內容，另外一端即會透過雲端資料庫自動同步（詳見圖 4-2）。. 立. 政治大. ‧. ‧ 國. 學圖 4-2 系統資訊流分析. n. er. io. sit. y. Nat. al. Ch. i n U. v. 使用者藉由系統網站端選取或輸入景點以規劃旅遊行程，並且隨時可以修改；. engchi. 而系統將自動排程，做路線規劃且預估時間。這些資料都將上傳存至雲端資料庫，這些內容都會被下載至網站端與行動應用端同步；行動應用端即能利用手機隨時查看行程，也可以隨時修改行程（詳見圖 4-3）。. 38.

(48) 圖 4-3 系統流程圖. 學. ‧ 國. 立. 政治大. ‧ er. io. sit. y. Nat. 第三節系統資料庫. al. n. v i n C ，首先客戶端電腦僅負責輸入資料與輸出顯示，整體系統運行分為三個部份 hengchi U 並不負責主要資料運算與儲存。真正的資料運算是由雲端伺服器負責，包含計算交通路徑、資料庫連結、資料結構化等工作，最後伺服器會將資料存至雲端資料庫。如此一來，資料將結構化的存入雲端資料庫，讓網頁介面端與行動應用端兩者實現資料整合同步（詳見圖 4-4）。. 39.

(49) 雲端資料庫. 雲端. 立. 政伺服器治大. ‧ 國. 學. 客戶端. ‧. n. al. 圖 3-4 雲端資料架構. Ch. engchi. er. io. sit. y. Nat. 電腦. i n U. v. 資料庫之實體關係圖（Entity-relationship diagram, ERD）如圖所示（詳見圖 4-5）。基本的使用者資料表 User 有 ID、使用者名稱與密碼欄位，而系統提供之景點資料儲存於 Travel_list 之中，欄位包含了 ID、名稱、地址、類型與景點網址，以及一欄 user_id 辨別是否為使用者自定義之地點。行程表之資料儲存於 Schedule 資料表，有天數欄位，以及景點與使用者之 ID 與欄位與其他資料表連結。類型資料表 Type 則與 Travel_list 資料表連結，提供景點類型的資料。備註則由獨立的資料表 Note 處理，包含了 user_id、ID 與備註內容三個欄位。. 40.

(50) 立. 政治大. ‧ 國. 學 ‧. 圖 4-5 實體關係圖(Entity Relationship Diagram). sit. y. Nat. n. al. er. io. 針對資料庫與功能之間的運作分為寫入、查詢、刪除與更新四種方式，主要. i n U. v. 有八項功能與資料庫有關連（詳見圖 4-6），以下將解釋資料庫與各項功能之互動：. Ch. engchi. 圖 4-6 資料庫運作圖. 41.

(51) 1.. 加入景點至行程：使用者主要是從網站端將景點加入行程，加入完成後系統會即時更新行程表資料，並且將資料寫入資料庫當中（詳見圖 4-7）。. 圖 4-7. 2.. 政治大新增自訂地點：使用者可以於網站端新增自定義之地點，新增地點完成以後，立 ‧. ‧ 國. 學. 會自動更新景點列表之資料，並且寫入資料庫當中（詳見圖 4-8）。. n. er. io. sit. y. Nat. al. 3.. Ch. 圖 4-8. engchi. i n U. v. 刪除行程：無論是網站端與行動應用端使用者都可以從行程表當中移除行程，此時系統即時更新行程表之資料，並且將更新後資料存於資料庫（詳見圖 4-9）。. 42.

(52) 圖 4-9. 4.. 路徑規劃：使用者可以查詢行程表各景點之間的交通資訊，從資料庫讀取行程表資料之後，利用 Google Maps API 之功能進行路徑規畫。網站端與行動應用端使用的 Google Maps API 不相同，但是資料來源皆來自相同資料庫（詳見圖 4-10）。. 立. 政治大. ‧. ‧ 國. 學. 圖 4-10. sit. y. Nat. n. al. er. 查詢行程：當安排好行程之後，使用 App 可以查詢現有行程，此時會查詢. io. 5.. i n U. v. 資料庫中之資料，顯示於 App 之行程表當中（詳見圖 4-11）。. Ch. engchi. 圖 4-11. 43.

(53) 6.. 變更行程：使用者可以編輯行程表，變更行程順序，變更完成後會即時更新行程表資料，並且於資料庫更新資料（詳見圖 4-12）。. 圖 4-12. 立. 瀏覽景點資訊：對於行程表當中的每個景點，可以連結至景點介紹網站，此. 學. ‧ 國. 7.. 政治大. 時會查詢資料庫當中的網址資訊，並且移至該頁面（詳見圖 4-13）。. ‧. n. er. io. sit. y. Nat. al. 8.. Ch. 圖 4-13. engchi. i n U. v. 新增備註：App 提供備註功能，使用者可以新增備註，此時會更新備註資料，寫入資料庫當中儲存（詳見圖 4-14）。. 圖 4-14. 44.

(54) 第四節系統實作. 系統實作分為網站端與行動應用端功能兩部分。網站端功能為加入、刪除、新增自定義行程與自動規劃路線。行動應用端主要為查詢與變更行程、結合 Google Maps App 的自動交通規劃、景點資訊瀏覽。另外，行動應用端亦提供備註記事與圖片整合功能，讓自由行旅遊需求服務一併整合至行動應用端。. 一、網站端功能. 政治大. 網站實作行程表功能主要為加入、更動、刪除與新增自定義景點至行程表，並可. 立. 從行程表排序，直接查詢任兩景點間交通路徑，顯示於左方 Google Maps 地圖。. ‧ 國. 學. 加入行程：從景點列表拖曳景點至右方的行程表，加入景點。在行程表中可. ‧. 上下拖曳景點變換順序（詳見圖 4-15）。. io. sit. y. Nat. n. al. er. 1.. Ch. engchi. 圖 4-15 加入行程. 45. i n U. v.

(55) 2. 刪除行程：在安排行程的過程中，將欲刪除之景點從行程表中拖曳至下方灰色區塊即可移除（詳見圖 4-16）。. 立. er. io. sit. y. ‧. ‧ 國. 學圖 4-16 刪除行程. Nat. al. 新增自定義行程：點擊景點列表右方「＋」按鈕，即跳出新增景點視窗，輸. v i n Ch 入景點名稱與地址後完成新增。自定義景點將顯示於景點列表最上方，且為 engchi U n. 3.. 政治大. 特殊顏色，讓使用者更方便找尋（詳見圖 4-17、圖 4-18）。. 46.

(56) 立. 政治大. ‧. ‧ 國. 學. 圖 4-17 新增自定義行程. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. 圖 4-18 新增自定義行程. 47. v.

(57) 結合 Google Maps 自動路線規劃：將景點排序在右方行程表後，點擊任一景點後左方的 Google Maps 會自動顯示此景點與下一個行程的交通路線，隨著行程排序改變交通規劃亦會跟著變動（詳見圖 4-19）。. 立. 政治大. 學 ‧. ‧ 國. y. Nat. io. sit. 圖 4-19 結合 Google Maps 自動路線規劃. n. al. er. 4.. Ch. engchi. 48. i n U. v.

(58) 二、行動應用功能. 行動應用端主要為即時查詢與變更行程，變更後的行程內容會自動與網站端同步，並將行程自動連結 Google Maps App。行動應用端亦提供景點相關資訊瀏覽、備註記事、圖片整合與基本設定功能。. 查詢行程：在網站端安排的行程內容會自動同步至行動應用端，當使用者需要查詢時，只需打開 App 選擇欲瀏覽哪一天的行程（詳見圖 4-20），就能立即查詢當天行程內容（詳見圖 4-21）。. 立. 政治大. 學 ‧. ‧ 國 io. sit. y. Nat. n. al. er. 1.. Ch. engchi. 圖 4-20 選擇查詢哪天的行程. i n U. v. 圖 4-21 當天行程內容. 49.

(59) 變更行程：使用者能夠即時更改行程內容，更改行程順序（詳見圖 4-22）或是刪除行程（詳見圖 4-23），編輯完成後的行程會自動存至雲端資料庫，網站端亦會同步變更。. 立. 政治大. 學 ‧. ‧ 國 io. sit. y. Nat. n. al. er. 2.. 圖 4-22 變更行程. Ch. engchi. 50. i n U. v. 圖 4-23 刪除行程.

(60) 結合 Google Maps App 自動交通路線規劃：點擊景點右方的地標圖示後， App 會自動開啟 Google Maps App，並將景點地址一併傳送到 Google Maps App，自動出現查詢好的路線（詳見圖 4-24）。. 立. 政治大. 學 ‧. ‧ 國 io. sit. y. Nat. n. al. er. 3.. Ch. engchi. i n U. v. 圖 4-22 景點右方的地標圖示開啟 Google Maps App. 51.

(61) 景點相關資訊瀏覽：點擊景點會跳轉至景點資訊頁面，此頁面是直接連結至景點相關資訊或官方網站（詳見圖 4-25）。. 立. 政治大. 學 ‧. ‧ 國 io. sit. y. Nat. al. er. 4.. v. n. 圖 4-23 點擊景點跳轉至景點資訊頁面. Ch. engchi. 52. i n U.

(62) 備註記事：於備註頁籤新增記事內容，例如：飯店地址、電話等文字資訊，新增完成後會顯示於備註列表（詳見圖 4-26）。. 立. 政治大. 學 ‧. ‧ 國 io. sit. y. Nat. n. al. 圖 4-24 備註記事. Ch. engchi. 53. er. 5.. i n U. v.

(63) 圖片整合：於圖片頁籤點擊右上方新增圖示，選擇欲加入的圖片後，即加入至圖片頁籤（詳見圖 4-27）。. 立. 政治大. 學 ‧. ‧ 國 io. n. Ch. engchi. 54. sit. y. Nat. al. 圖 4-25 加入圖片. er. 6.. i n U. v.

(64) 7. 基本設定：提供 App 帳號管理、隱私設定等功能（詳見圖 4-28）。. 立. 政治大. ‧. ‧ 國. 學圖 4-26 設定頁面. n. engchi. er. io. Ch. sit. y. Nat. al. 第五節情境示範. i n U. v. 宏翔想趁連假前往台中三日旅遊，旅遊前利用 TravelPlan 平台開始規劃台中三日旅遊的行程內容。宏翔先在網站開始安排行程，一邊安排景點的同時，一邊考量交通路線，希望能選擇比較順路的路線節省交通時間。規劃完後，宏翔下載 TravelPlan 的 App，在網站規劃的行程內容自動同步至 App 裡，出發時完全不用攜帶任何筆記。宏翔將飯店電話號碼與友人拜託買的特產照片一併存在 TravelPlan 的 App 裡就出發前往台中了。宏翔到了台中後，沒想到突然下起午後雷陣雨，臨時決定將當天行程全部改到室內，於是他開始利用 TravelPlan 的 App 更改行程內容。輕鬆的更改完行程後，宏翔打開 TravelPlan 確認等一下要去的地點要怎麼前往，於是有著 TravelPlan 的幫助下宏翔愉悅的順利度過這三日旅遊。 55.

(65) 政治大. 圖 4-27 TravelPlan 網站規劃搭配 App. 立. ‧ 國. 學第六節原型評估. ‧. Nat. sit. y. 將系統原型完成，透過政大數位內容畢業展覽，獲得使用者許多回饋與建議，. n. al. er. io. 另外亦邀請到之前的訪談者做測試使用。實際操作者約十五位，平均年齡約為. i n U. v. 24 至 30 歲。請使用者操作前會先簡介 5 分鐘，說明設計概念與使用方式，再讓. Ch. engchi. 使用者自行實際操作。使用者在操作時，我們都會從旁協助，且適時提出問題與建議，使用者亦可隨時提問。. 使用者實際操作後，普遍認為將網站與行動應用服務整合很方便，簡潔的介面與功能增加易用性，所以操作上很容易。尤其是自動交通規劃路線，無須反覆輸入景點地址，就可以直接變換順序，特別受到使用者肯定其便利與彈性。使用者在操作後，提供許多修改建議與方向的回饋，我們將觀察結果與建議回饋彙整如下幾點：. 56.

(66) 1.. 景點排序與交通規劃組織化有效提升行程規劃的效率：使用者操作後認為將景點的交通安排更有效率的整合後，提高自由行的行程規劃便利性，並且減少許多反覆輸入查詢地圖的動作與時間，利用本研究建置之平台，使得行程規劃更有效率。. 2.. 網站與行動應用服務串流提升易用性與便利性：本研究建置之平台將網站端行程規劃的資料自動同步至行動應用端，減少數位載具轉換之間麻煩。使用者表示操作起來相當容易，不需要額外下載或備份資料，將整體規劃行程服務串流使得使用體驗更加流暢簡單。. 3.. 政治大支援彈性調整行程有效幫助即時性的規劃更動：本研究建置之平台提供使用立 ‧. 操作介面與功能簡潔提升使用意願：使用者認為本研究建置之平台支援重點. y. Nat. 4.. ‧ 國. 變異動。. 學. 者具彈性調整行程之功能，幫助使用者解決實際旅遊面臨突發性、即時性的. n. al. er. io. sit. 功能，且操作介面簡潔不複雜，大幅提升使用者的使用意願。. 5.. i n U. v. 建議加入時間規劃功能：使用者表示只需約略的時間預估，因為實際旅遊時. Ch. engchi. 的情況一定會有所出入，所以只需要大致的預估即可，並可察看總行程表內容。例如：劃分為早上、中午、晚上三個時段，使用者會自行依照大概的時間安排計畫內容，亦可查看總行程，每天的行程內容一目了然。另外，亦有使用者提出，利用行動應用的適地性服務，提供即時時間預估，例如：如果現在從這裡出發，到達下個景點的交通時間的功能。. 6.. 建議增加不同的地圖顯示方式：目前平台只有提供任兩景點間的交通路徑的地圖。使用者認為網站端可以增加全部景點地圖檢視方式，對於規劃行程時會更有幫助；行動應用端建議增加顯示附近景點總覽地圖，讓查詢更便利。. 57.

(67) 7.. 建議將平台結合社群與紀錄功能：由於本平台設計是將網站與行動應用兩端資料同步處理，所以許多使用者建議每次旅遊後能將行程存成個人紀錄，且能透過社群分享給朋友們這項紀錄的行程內容。如此可以將個人旅遊經驗分享給別人參考。. 原型整體評估使用者多認為此平台對於自由行有相當大的幫助，從行前規劃開始，至旅行中查詢路線都是實用的功能應用。使這者對於未來發展方向有許多建議，以及目前系統需要的修正方向給予許多回饋，成為之後改進的重點。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 58. i n U. v.

(68) 第五章結論與未來展望自由行旅遊隨著行動應用服務的發展，將會越來越輕鬆與普及，而與其相關數位內容服務的整合將成為重要的工作，使得服務串流更加完整。本研究透過自助旅遊者相關文獻探討、案例分析與深入訪談來了解使用者行為與需求，設計出符合使用者經驗之服務、功能與介面設計，以建置出原型系統並進行評估。本章針對評估結果提出結論與研究貢獻，再描述系統建置之限制，最後對於未來發展提出方向，給予自由行旅遊者有效的支援，並作為後續研究者與開發者參考。. 政治大. 立. ‧. ‧ 國. 學. 第一節研究貢獻. 現今旅遊規劃與行動應用相關的服務並無法滿足自由行旅遊者真正的需求，. sit. y. Nat. 由於未充足考量使用者行為經驗，所以產品對於使用者來說並不實用。本研究透. al. er. io. 過文獻探討、案例分析與深入訪談瞭解並分析使用者需求與使用者行為，瞭解自. v. n. 由行旅遊者行前規劃方式，最後分析結果彙整出符合自由行的行前規劃需求之設計重點，如下：. Ch. engchi. i n U. 1.. 提供行程表，可以自由安排行程與更動行程順序。. 2.. 可以記錄景點的重要資訊。. 3.. 提供地圖查詢景點路線，並自動規劃交通路線。. 4.. 重要資訊存於行動應用裝置備份，並簡化功能。. 5.. 介面與功能簡單直覺，操作簡易。 59.