師大巷弄散步道:城市數位互動導覽創作研究

全文

(1)國立臺灣師範大學設計學系設計創作在職專班碩士論文. 師大巷弄散步道：城市數位互動導覽創作研究 ShiDa walking place : The research and creation of city digital interactive tour guide.. 指導教授：廖偉民研究生：王智立. 中華民國 107 年 8 月.

(2) 摘要隨著經濟蓬勃發展，交通便利發達，從過去旅行團趕行程的旅遊型態，到現在漫步悠閒的樂活（LOHAS，Lifestyles of Health and Sustainability）旅行，旅遊資訊遂成為旅途中不可或缺元素。傳統旅遊資訊以紙本為主，現今旅遊書籍銷量銳減，數位科技興起，智慧型手機和平板電腦發展迅速，行動裝置普及，為使旅人便利取得旅遊資訊，即以數位導覽進行創作研究。本研究數位導覽採「EPUB 互動式電子書（固定版面）」格式，多元化版型，跨平台且相容性高，支援多媒體影音和互動效果。文獻探討方面，針對介面設計（User Interface）、內容質性（Content）和使用者經驗（User Experience），以及數位導覽案例分析，歸納出數位導覽要件。研究方法即依此要件，選擇以「青田街」設計一小區域數位導覽測試範例，透過「放聲思考法（Think Aloud protocol）」讓受測者於使用當下直覺說出感想，並以視覺設計、介面操作、導覽內容和整體感受為主軸進行評估；結果顯示，數位導覽非常適合用於城市街區旅行，符合使用者需求。設計創作方面，整合數位導覽要件、導覽測試結果，以及師大街區拍攝訪談紀錄，區分為探訪歷史、沉澱心靈、低語休憩和藝文饗宴等四大類共計 34 個地點，作為數位導覽創作內容；接著經由視覺設計和色彩配置，呈現「師大巷弄散步道」之 EPUB 數位導覽。當旅人未抵達目的地之前，可藉由數位導覽了解每一景點之歷史背景、店家資訊和消費內容；若於當下使用，亦可藉由數位導覽之地圖導航和景點圖片，與現場對照尋找。城市數位互動導覽具即時便利性，操作簡易直覺，不僅能增添旅遊樂趣，還可凸顯當地文化特色，帶領旅人融合環境氛圍，帶動當地旅遊人潮和商機。. 關鍵字：城市觀光、數位導覽、行動裝置、EPUB 電子書. i.

(3) Abstract With growing economic wealth and more convenient transportation access, from joining a time-pressed guided tours to pursuing a LOHAS (Lifestyles of Health and Sustainability) traveling concept, travel information is an indispensable element of a pleasant journey. Traditional travel information is mainly paper-based; however, with declining sale of guidebooks, rising adoption of digital technology, and rapid growth of smart phones and tablets, nowadays the main source of travel information has changed greatly. The purpose of this study focuses on the research and creation of a digital tour guide for travelers to conveniently and spontaneously obtain travel information. The digital tour guide of this study adopts the “EPUB interactive ebooks format ‘fixed layout’ ”, which has diversification layout, is highly compatible across platforms, and supports multimedia audio, video, and interactive effects. Through literature review, the key criteria of a digital tour guide are summarized by analyzing User Interface, Content, User Experience, and Digital Tour Guide Case Study. Based on these criteria, the. research method was selected to design a small-area digital guide demonstration at “Qingtian Street” in Taipei City and to implement the “Think Aloud protocol” to allow participants to express their feelings intuitively. The evaluation was based on four elements: visual design, operation interface, content, and overall feelings. The results showed that digital tour guide meets travelers needs and is very suitable for city travel and urban neighborhoods. From the design and creation aspect, the collection of digital guide criteria, demonstration feedback, and street interviews was the creative content of the digital tour guide. These contents were classified into four categories – Exploration of history, Meditation of mind, Quiet and leisure, and Arts and feasts – for a total of 34 locations; through applying visual design and color configuration to present the “EPUB digital tour guide of ShiDa Walking Place .” Before travelers arrive at the destination, they can use the digital tour guide to learn about the historical background, nearby store information, and shopping suggestions of each attraction; when operating the digital tour guide on site, travelers can use the navigation map and real photos on display to help them find the attraction location. The digital interactive city guide offers an instant convenience and intuitive operation. It not only adds more fun to the tour, but also brings to light the local cultural features, leads travelers to immerse in the environment and atmosphere, and creates a pleasant travel experience that ultimately drive the local tourism and business opportunities. Keywords: city sightseeing, digital tour guide, mobile devices, EPUB ebooks.. ii.

(4) 謝誌回想未入學前，曾經多次駕車行經師大校門，心生羨慕覺得師大莘莘學子格外幸福。日治時期的古蹟建築環境，兼具復古與現代藝術氛圍的文創校園，比鄰師大夜市熱鬧商圈，地理位置交通便利。因非本科系出身，而工作領域和興趣皆與設計相關，非常嚮往研讀設計科系，如今目標達成。感謝「指導教授-廖偉民老師」不辭辛勞細心指導，使我在學術研究領域上茁壯成長，順利完成碩士論文。感謝「梵影媒體-蔡雅琦（漂漂老師）」引薦入學，並在學業期間給予很多寶貴意見。感謝同組同學陳淑敏和葉佳汶的相互交流砥礪，彼此激勵如期完成。感謝本班同學「艾德廣告創意總監-張晉嘉」指教，給予我許多專業攝影建議和實務觀念，以及設計熱忱和工作態度，實為獲益良多。感謝我的家人，讓我無後顧之憂順利完成碩士學程。感謝業界好友洪振華和賴建升，順利完成數位導覽原型測試。最後感謝創作之數位導覽中，所有店家和景點相關單位之協助拍攝訪談。研讀碩士期間，學位固然為最終目標，而過程甚為重要；每一階段皆需脈絡清楚分明，發現問題並解決問題，使我從中得到不少豐碩收穫。. iii.

(5) 目錄摘要 ................................................................................................................................... I ABSTRACT ..................................................................................................................... II 謝誌 ................................................................................................................................ III 目錄 ................................................................................................................................ IV 表目錄 ............................................................................................................................ VI 圖目錄 ..........................................................................................................................VIII 第一章、緒論 .................................................................................................................. 1 1.1 研究背景動機 ................................................................................................................................... 2 1.2 研究目的 ........................................................................................................................................... 3 1.3 研究範圍限制 ................................................................................................................................... 3 1.4 研究流程架構 ................................................................................................................................... 5 1.5 名詞釋義 ........................................................................................................................................... 6. 第二章、文獻探討 .......................................................................................................... 7 2.1 導覽概論介紹 ................................................................................................................................... 7 2.1.1 導覽定義與功能........................................................................................................................ 7 2.1.2 導覽目的與形式...................................................................................................................... 10 2.1.3 小結 ......................................................................................................................................... 17 2.2 行動裝置介面 ................................................................................................................................. 18 2.2.1 使用者介面設計...................................................................................................................... 19 2.2.2 共通性介面設計...................................................................................................................... 23 2.2.3 小結 ......................................................................................................................................... 25 2.3 數位導覽分析 ................................................................................................................................. 26 2.3.1 導覽案例分析 ......................................................................................................................... 26 2.3.2 數位導覽要件 ......................................................................................................................... 47 2.3.3 小結 ......................................................................................................................................... 48. 第三章、研究方法 ........................................................................................................ 49 3.1 數位導覽原型設計 ......................................................................................................................... 49 3.2 數位導覽原型測試 ......................................................................................................................... 56 3.3 測試資料分析 ................................................................................................................................. 57 3.3.1 視覺設計 ................................................................................................................................. 57 3.3.2 介面操作 ................................................................................................................................. 58. iv.

(6) 3.3.3 導覽內容 ................................................................................................................................. 60 3.3.4 整體感受 ................................................................................................................................. 62 3.4 小結 ................................................................................................................................................. 63. 第四章、設計創作 ........................................................................................................ 65 4.1 創作理念 ......................................................................................................................................... 65 4.2 創作流程 ......................................................................................................................................... 66 4.3 創作主題 ......................................................................................................................................... 68 4.3.1 歷史沿革 ................................................................................................................................. 68 4.3.2 街區探訪 ................................................................................................................................. 69 4.4 創作說明 ....................................................................................................................................... 105 4.5 設計作品 ....................................................................................................................................... 110 4.6 創作評估分析 ............................................................................................................................... 118 4.7 創作展出 ....................................................................................................................................... 121. 第五章、結論與建議 .................................................................................................. 123 5.1 研究結論 ....................................................................................................................................... 123 5.2 未來建議 ....................................................................................................................................... 124. 參考文獻 ...................................................................................................................... 125. v.

(7) 表目錄表 1.1 近年出版業銷售額(億元)統計 ........................................................................................................ 1 表 1.2 WEB、APP、EPUB 之差異性 ......................................................................................................... 4 表 2.1 導覽形式之特點與適用範圍 ......................................................................................................... 17 表 2.2 陽明山國家公園行動導覽系統 APP ............................................................................................. 27 表 2.3 湯戀礁溪 APP ................................................................................................................................. 28 表 2.4 雪霸愛旅遊 APP ............................................................................................................................. 29 表 2.5 漫遊尖石部落 APP ......................................................................................................................... 30 表 2.6 日月潭大玩家 APP ......................................................................................................................... 31 表 2.7 阿里山賞櫻趣 APP ......................................................................................................................... 32 表 2.8 I 憩頭 APP ....................................................................................................................................... 33 表 2.9 行動東海岸 APP ............................................................................................................................. 34 表 2.10 瘋趣台灣-墾丁好行 APP .............................................................................................................. 35 表 2.11 愛上小琉球 APP ........................................................................................................................... 36 表 2.12 桃園好客 APP ............................................................................................................................... 37 表 2.13 新竹自由行旅遊 APP ................................................................................................................... 38 表 2.14 苗栗自由行旅遊 APP ................................................................................................................... 39 表 2.15 大玩臺中 APP ............................................................................................................................... 40 表 2.16 熊尬意行嘉義 APP ....................................................................................................................... 41 表 2.17 臺南古蹟導覽 APP ....................................................................................................................... 42 表 2.18 旅行台南 LITE APP ....................................................................................................................... 43 表 2.19 樂活高雄自由行 APP ................................................................................................................... 44 表 2.20 宜蘭勁趣味 APP ........................................................................................................................... 45 表 2.21 旅行台東 APP ............................................................................................................................... 46 表 2.22 數位導覽要件 .............................................................................................................................. 47 表 3.1 受測者基本資料 ............................................................................................................................ 56 表 4.1「青田七六」參訪拍攝資料彙整 .................................................................................................. 71 表 4.2「總督府山林課宿舍群」參訪拍攝資料彙整 .............................................................................. 72 表 4.3「青田茶館」、「敦煌畫廊」參訪拍攝資料彙整 .......................................................................... 73 表 4.4「和合青田」參訪拍攝資料彙整 .................................................................................................. 74 表 4.5「《書畫光年》于右任紀念館暨青田書院」參訪拍攝資料彙整 ................................................. 75 表 4.6「師大禮堂」參訪拍攝資料彙整 .................................................................................................. 76 表 4.7「師大文薈廳」參訪拍攝資料彙整 .............................................................................................. 77 表 4.8「師大行政大樓」參訪拍攝資料彙整 .......................................................................................... 78 表 4.9「梁實秋故居」參訪拍攝資料彙整 .............................................................................................. 79 表 4.10「殷海光故居」參訪拍攝資料彙整 ............................................................................................ 80 表 4.11「『臺灣台北聖殿』耶穌基督後期聖徒教會」參訪拍攝資料彙整 ........................................... 81 vi.

(8) 表 4.12「天主教聖家堂」參訪拍攝資料彙整 ........................................................................................ 82 表 4.13「台北清真寺」參訪拍攝資料彙整 ............................................................................................ 83 表 4.14「蒙藏文化中心」參訪拍攝資料彙整 ........................................................................................ 84 表 4.15「設計師咖啡館」參訪拍攝資料彙整 ........................................................................................ 85 表 4.16「鴉埠咖啡」參訪拍攝資料彙整 ................................................................................................ 86 表 4.17「咖啡小自由」參訪拍攝資料彙整 ............................................................................................ 87 表 4.18「月半咖啡」參訪拍攝資料彙整 ................................................................................................ 88 表 4.19「WHO’S CAFÉ 誰的書房」參訪拍攝資料彙整 ........................................................................... 89 表 4.20「515 CAFÉ & BOOKS」參訪拍攝資料彙整 .................................................................................. 90 表 4.21「學校咖啡」參訪拍攝資料彙整 ................................................................................................ 91 表 4.22「貳月咖啡」參訪拍攝資料彙整 ................................................................................................ 92 表 4.23「伊聖詩私房書櫃」參訪拍攝資料彙整 .................................................................................... 93 表 4.24「欒樹下」參訪拍攝資料彙整 .................................................................................................... 94 表 4.25「金曲光年」參訪拍攝資料彙整 ................................................................................................ 95 表 4.26「彰藝坊」參訪拍攝資料彙整 .................................................................................................... 96 表 4.27「品墨良行」參訪拍攝資料彙整 ................................................................................................ 97 表 4.28「青田藝集」參訪拍攝資料彙整 ................................................................................................ 98 表 4.29「師大美術館」參訪拍攝資料彙整 ............................................................................................ 99 表 4.30「郭木生文教基金會美術中心」參訪拍攝資料彙整............................................................... 100 表 4.31「旅人書房」參訪拍攝資料彙整 .............................................................................................. 101 表 4.32「青田十六」參訪拍攝資料彙整 .............................................................................................. 102 表 4.33「聲音光年」參訪拍攝資料彙整 .............................................................................................. 103 表 4.34「德群畫廊」參訪拍攝資料彙整 .............................................................................................. 104 表 4.35 色彩配置 .................................................................................................................................... 110. vii.

(9) 圖目錄圖 1.1 研究流程架構圖 .............................................................................................................................. 5 圖 2.1 導覽解說三要素 .............................................................................................................................. 9 圖 2.2 逢甲吃貨地圖 ................................................................................................................................ 11 圖 2.3 據點服務之人員導覽..................................................................................................................... 13 圖 2.4 巧克力共和國園區導覽圖............................................................................................................. 14 圖 2.5 台北捷運畫面 ................................................................................................................................ 23 圖 2.6 電子商務亞馬遜畫面..................................................................................................................... 23 圖 2.7 美國迪士尼畫面 ............................................................................................................................ 24 圖 2.8 PINTEREST 畫面 .............................................................................................................................. 24 圖 2.9 日本環球影城畫面......................................................................................................................... 24 圖 2.10 LINE 畫面 .................................................................................................................................... 24 圖 3.1 數位導覽原型設計_封面............................................................................................................... 50 圖 3.2 數位導覽原型設計_目錄............................................................................................................... 50 圖 3.3 數位導覽原型設計_青田七六 01 .................................................................................................. 50 圖 3.4 數位導覽原型設計_青田七六 02 .................................................................................................. 50 圖 3.5 數位導覽原型設計_青田七六 03 .................................................................................................. 51 圖 3.6 數位導覽原型設計_青田十六 01 .................................................................................................. 51 圖 3.7 數位導覽原型設計_青田十六 02 .................................................................................................. 51 圖 3.8 數位導覽原型設計_青田十六 03 .................................................................................................. 51 圖 3.9 數位導覽原型設計_青田藝集 01 .................................................................................................. 52 圖 3.10 數位導覽原型設計_青田藝集 02 ................................................................................................ 52 圖 3.11 數位導覽原型設計_青田藝集 03 ................................................................................................ 52 圖 3.12 數位導覽原型設計_旅人書房 01 ................................................................................................ 52 圖 3.13 數位導覽原型設計_旅人書房 02 ................................................................................................ 53 圖 3.14 數位導覽原型設計_旅人書房 03 ................................................................................................ 53 圖 3.15 數位導覽原型設計_貳月咖啡 01 ................................................................................................ 53 圖 3.16 數位導覽原型設計_貳月咖啡 02 ................................................................................................ 53 圖 3.17 數位導覽原型設計_貳月咖啡 03 ................................................................................................ 54 圖 3.18 數位導覽原型設計_鄰居咖啡 01 ................................................................................................ 54 圖 3.19 數位導覽原型設計_鄰居咖啡 02 ................................................................................................ 54 圖 3.20 數位導覽原型設計_鄰居咖啡 03 ................................................................................................ 54 圖 3.21 數位導覽原型設計_學校咖啡 01 ................................................................................................ 55 圖 3.22 數位導覽原型設計_學校咖啡 02 ................................................................................................ 55 圖 3.23 數位導覽原型設計_學校咖啡 03 ................................................................................................ 55 圖 3.24 現場測試畫面_A.......................................................................................................................... 56 圖 3.25 現場測試畫面_B .......................................................................................................................... 56 viii.

(10) 圖 3.26 現場測試畫面_C .......................................................................................................................... 56 圖 3.27 現場測試畫面_D .......................................................................................................................... 56 圖 4.1 設計創作流程圖 ............................................................................................................................ 67 圖 4.2 師大巷弄散步道區域圖................................................................................................................. 68 圖 4.3「青田七六」外觀 .......................................................................................................................... 71 圖 4.4「總督府山林課宿舍群」外觀 ...................................................................................................... 72 圖 4.5「青田茶館」、「敦煌畫廊」外觀 .................................................................................................. 73 圖 4.6「和合青田」外觀 .......................................................................................................................... 74 圖 4.7「《書畫光年》于右任紀念館暨青田書院」外觀 ........................................................................ 75 圖 4.8「師大禮堂」外觀 .......................................................................................................................... 76 圖 4.9「師大文薈廳」外觀 ...................................................................................................................... 77 圖 4.10「師大行政大樓」外觀 ................................................................................................................ 78 圖 4.11「梁實秋故居」外觀 .................................................................................................................... 79 圖 4.12「殷海光故居」外觀 .................................................................................................................... 80 圖 4.13「『臺灣台北聖殿』耶穌基督後期聖徒教會」外觀................................................................... 81 圖 4.14「天主教聖家堂」外觀 ................................................................................................................ 82 圖 4.15「台北清真寺」外觀 .................................................................................................................... 83 圖 4.16「蒙藏文化中心」外觀 ................................................................................................................ 84 圖 4.17「設計師咖啡館」外觀 ................................................................................................................ 85 圖 4.18「鴉埠咖啡」外觀 ........................................................................................................................ 86 圖 4.19「咖啡小自由」外觀 .................................................................................................................... 87 圖 4.20「月半咖啡」外觀 ........................................................................................................................ 88 圖 4.21「WHO’S CAFÉ 誰的書房」外觀 .................................................................................................. 89 圖 4.22「515 CAFÉ & BOOKS」外觀 .......................................................................................................... 90 圖 4.23「學校咖啡」外觀 ........................................................................................................................ 91 圖 4.24「貳月咖啡」外觀 ........................................................................................................................ 92 圖 4.25「伊聖詩私房書櫃」外觀 ............................................................................................................ 93 圖 4.26「欒樹下」外觀 ............................................................................................................................ 94 圖 4.27「金曲光年」外觀 ........................................................................................................................ 95 圖 4.28「彰藝坊」外觀 ............................................................................................................................ 96 圖 4.29「品墨良行」外觀 ........................................................................................................................ 97 圖 4.30「青田藝集」外觀 ........................................................................................................................ 98 圖 4.31「師大美術館」外觀 .................................................................................................................... 99 圖 4.32「郭木生文教基金會美術中心」外觀 ...................................................................................... 100 圖 4.33「旅人書房」外觀 ...................................................................................................................... 101 圖 4.34「青田十六」外觀 ...................................................................................................................... 102 圖 4.35「聲音光年」外觀 ...................................................................................................................... 103 圖 4.36「德群畫廊」外觀 ...................................................................................................................... 104 圖 4.37「師大巷弄散步道」主視覺手繪稿 .......................................................................................... 105 ix.

(11) 圖 4.38 數位互動導覽首頁頁圖示 ......................................................................................................... 105 圖 4.39 數位互動導覽目錄頁圖示 ......................................................................................................... 106 圖 4.40 數位互動導覽分類頁圖示_探訪歷史 ....................................................................................... 107 圖 4.41 數位互動導覽分類頁圖示_沈澱心靈 ....................................................................................... 107 圖 4.42 數位互動導覽分類頁圖示_低語休憩 ....................................................................................... 108 圖 4.43 數位互動導覽分類頁圖示_藝文饗宴 ....................................................................................... 108 圖 4.44 數位互動導覽內容頁圖示_主頁 ............................................................................................... 109 圖 4.45 數位互動導覽內容頁圖示_資訊 ............................................................................................... 109 圖 4.46 數位互動導覽內容頁圖示_外部連結 ....................................................................................... 109 圖 4.47 數位互動導覽內容頁圖示_圖片 ............................................................................................... 109 圖 4.48「師大巷弄散步道：城市數位互動導覽」層級架構............................................................... 111 圖 4.49「師大巷弄散步道：城市數位互動導覽」首頁 ...................................................................... 112 圖 4.50「師大巷弄散步道：城市數位互動導覽」目錄頁................................................................... 112 圖 4.51「師大巷弄散步道：城市數位互動導覽」分類頁_探訪歷史 ................................................. 113 圖 4.52「師大巷弄散步道：城市數位互動導覽」分類頁_沈澱心靈 ................................................. 114 圖 4.53「師大巷弄散步道：城市數位互動導覽」分類頁_低語休憩 ................................................. 115 圖 4.54「師大巷弄散步道：城市數位互動導覽」分類頁_探訪歷史 ................................................. 116 圖 4.55「師大巷弄散步道：城市數位互動導覽」內容頁_功能指向 ................................................. 117 圖 4.56「測試版」和「創作版」視覺設計之比較 .............................................................................. 118 圖 4.57 創作版「回上頁」功能畫面 ..................................................................................................... 119 圖 4.58 畢業創作展覽-「師大巷弄散步道」城市數位互動導覽 ........................................................ 121 圖 4.59 畢業創作展覽-展場照片花絮 ................................................................................................... 122. x.

(12) 第一章、緒論資訊爆炸時代，行動裝置迅速發展，數位內容普及，互動多媒體已為閱讀中不可或缺素材。現行城市導覽資訊多以紙本印刷、網頁和 App 呈現。紙本取得不易，無法達到便利服務和環保概念。網頁和 App 雖可即時更新下載，但系統需長期維護運作，租賃主機伺服器和派遣人員管理，耗費成本且增加業者負擔。隨著紙本書籍雜誌銷量降低，如「表 1.1」所示，出版業銷售額逐年遞減，直接影響旅遊相關書籍雜誌的經濟收益和發行量。本研究進行期間，以吃喝玩樂旅遊為主的「愛玩客」雜誌，於 2017 年 8 月宣布停刊，轉型發展網路數位媒體；由此可知，旅遊資訊必需具備即時更新、數位網路、互動多媒體等條件，這是紙本無法達成的技術。本研究遂以 EPUB 互動電子書方式提供旅遊導覽資訊，整合紙本數位多媒體化，即時更新滿足使用者需求。. 表 1.1 近年出版業銷售額(億元)統計出版業. 2016. 2015. 2014. 2013. 雜誌/期刊出版. 164.07. 164.20. 167.37. 172.16. 數位雜誌/期刊出版. 1.63. 5.86. -. -. 書籍出版. 185.61. 190.48. 226.92. 269.95. 數位書籍出版. 3.23. 2.02. 1.40. 1.05. 資料來源：財政部統計資料庫. 1.

(13) 1.1 研究背景動機旅遊資訊多以親友介紹、官方網站、社群、部落格、宣傳品和書籍為主要來源；內容則以商業觀光景點和著名古蹟為主，少有小區域型態旅遊介紹。師大商圈具有獨特文化，且本研究所處之校園即在於此，因此以「師大巷弄散步道」為研究背景。導覽即是旅遊簡介，以使用者角度，快速幫助旅行者了解在地文化。從陌生環境到熟悉，詳實記載各個角落歷史足跡，店家發展起源，文化遺產和建築遺址。師大校區鄰近巷弄擁有大片日式建築，環境清幽，眾多名人皆曾定居於此，因此非常適合發展以探索城市角落行程推廣。Castells（1993）提過在全球化發展中很多國家意識到，將在地特色和文創結合進行地域性加值，不僅具重要性，而且能夠呈現文化創意內涵，這將帶來潛在經濟效益，成為未來發展新契機。置身於師大街區即可深刻感知到人文藝術氛圍，每個巷弄一隅，無一處不具文藝氣息。借此師大街區為旅行題材，予以匯入數位互動導覽進行規劃設計。體會當地意象文化，探索懷舊復古風格街貌；旅行不再只是吃喝玩樂、走馬看花，與在地文化深層互動，讓旅人按圖索驥體會不一樣的城市數位導覽。藉由版面創意設計，融入多媒體影音互動效果，豐富呈現數位導覽內容；除增加實用性和可看性之外，更影響大眾能對導覽產生不一樣的感受。「數位互動導覽」為 EPUB 格式電子書，html 架構壓縮檔，相容性高，可應用於網站、App、網路書城和行動裝置平台。現行閱讀器（reader）和瀏覽器（browser）技術相當成熟，足以支援 EPUB 格式，具互動效果，可嵌入多媒體影音、超連結、 QR code 等技術，多元內容的數位互動導覽，定可增加旅遊樂趣。. 2.

(14) 1.2 研究目的為拓展數位閱讀普及性，傳統導覽轉型數位導覽，行動裝置即時下載取得，無需耗費額外維運成本。分析探討其他導覽形式及使用者經驗，改善以往導覽模式，利用行動數位形式使導覽更貼近感官知覺。以適切內容引導使用者體會在地文化特色，對旅遊區域主動產生興趣，促進小區域型旅遊發展。Heinich, R., Molenda, M. & Russell, J. D.（1995）合著書中曾提及，互動的目的，在於吸引使用者的注意力，並且能夠增加使用者的學習效果。為數位導覽增添使用意願和樂趣，因此本研究以 EPUB 格式為基礎進行創作研究，亦可作為日後相關導覽設計依據。本研究目的彙整如下： 1.透過文獻蒐集和導覽案例分析，歸納整合數位導覽要件。 2.了解使用者經驗需求，創作多元適地性之數位互動導覽。 3.以本創作研究之數位導覽流程模式，推廣各地觀光發展。. 1.3 研究範圍限制現行已有網站（Web）和行動應用程式（App）兩種模式之數位導覽，此兩者與 EPUB 數位導覽之差異性如下，如「表 1.2」所示： 1.無網路環境下，Web 和 App 功能即失效；EPUB 可先下載儲存於行動裝置，之後可於無網路情況下瀏覽，不受限網路環境。 2.Web 和 App 版面皆以功能性為導向，介面設計和瀏覽路徑較為制式，對於旅遊當地之特色文化，無法適切呈現；EPUB 可作適地性客製化設計。 3.Web 和 App 需耗費人力設備和管理維護成本；EPUB 可利用各平台或雲端空間上架，使用者僅需經由平台或連結載點下載即可進行瀏覽。. 3.

(15) 表 1.2 Web、App、EPUB 之差異性項目. Web. App. EPUB. 網路. 無網路即失效. 無網路即失效. 可先下載，於無網路環境瀏覽. 版型. 版型制式固定. 版型制式固定. 版型多元化. 人力成本. 需人力管理維護. 需人力管理維護. 僅需設計完成上架平台即可. 設備成本. 耗費設備成本. 耗費設備成本. 無. 資料來源：本研究彙整. 經由上述論點，本研究即以 EPUB 互動電子書形式呈現，於智慧型手機和平板等行動裝置操作使用。iOS 系統以「ibook」App 支援開啟，Android 系統以「樂天 Kobo」App 支援開啟。EPUB 具「可重排版面(reflow layout)」和「固定版面(fixed layout)」兩種格式，固定版面具多元化設計，支援多媒體影音和互動效果，故本研究以「固定版面(fixed layout)」進行設計創作。其中影片因屬單一創作作品，礙於時間因素，故未納入創作中。創作主題為「師大巷弄散步道」，於信義路二段、新生南路二段、辛亥路一段、羅斯福路三段和杭州南路二段等五條道路之路段所環繞範圍，並以範圍內永康街、麗水街、青田街、溫州街一帶之景點和店家為主，彙整歸類師大街區之古蹟建築、宗教信仰、特色店家和人文藝術作為創作媒材。. 4.

(16) 1.4 研究流程架構本研究從探討使用者經驗進行創作研究，以多媒體內容和極簡介面設計提升使用者對「城市數位互動導覽」使用意願。研究流程架構如「圖 1.1」所示。. 圖 1.1 研究流程架構圖（資料來源：本研究繪製）. 5.

(17) 1.5 名詞釋義 1.EPUB EPUB(Electronic Publication)為數位出版的電子書格式，由國際數位出版論壇 (International Digital Publishing Forum，IDPF)開發提出，並於 2007 年宣佈 EPUB 為電子書標準格式。2011 年初公佈 3.0 版本。2017 年 2 月 1 日，W3C 宣布與 IDPF 正式合併，共創發展出版領域技術。 EPUB 為目前多數平台共通的主流電子書格式，相容性高，具目錄、書籤、標註和調整字型屬性功能，支援智慧型手機、平板、電腦等跨平台裝置。 2.可重排版面可重排版面（reflow layout），亦稱流動式版面。隨著電腦或行動裝置螢幕尺寸大小不同，圖文可自動重新排列，呈現適當圖文版面。常用於純文字書和小說，以及僅有圖片和文字內容之書籍。 3.固定版面固定版面（fixed layout），即是可將圖像和文字排版於版面中絕對位置，並可加入互動元素。版型設計多元，亦可稱為 PDF 進階版，支援互動多媒體設計效果。常用於特殊圖文編排設計書籍，多媒體互動式電子書，電子雜誌，插畫和兒童繪本等有聲書籍。 4.圖示符號圖示符號（icon），具有指向功能的圖案，常用於電腦和行動裝置等使用者介面，功能為介面按鈕觸發動作或啟動程式之用，如系統軟體程式和 App。好的 icon 設計，能讓使用者直覺了解其指示作用，早期 icon 設計講求逼真立體效果，現行 icon 設計注重簡單明瞭，運用色塊表現之扁平化設計。. 6.

(18) 第二章、文獻探討自 iPhone 及 iPad 問世後，行動裝置和數位互動之發展日趨盛行，城市觀光亦因數位網路資訊發展，讓旅遊資訊源更加迅速便利。本章節將探討過去和現今導覽之發展，依據使用者經驗相關資訊分析，歸納數位導覽要件和優缺點，以及符合使用者操作介面直覺性思考邏輯和設計。大數據技術應用相輔相成，創造出無限商機，為數位時代史上大躍進。所以本章節即對過往之導覽發展概況，進行探討了解，何謂導覽？導覽定義與形式為何？. 2.1 導覽概論介紹導覽使用範圍廣泛，常見於主題展覽和景點旅遊。在欲進入一個未知環境或地區旅行，可先行閱讀相關導覽說明，作一初步認識了解。此外，亦可置身其中感受意境，配合導覽使用，自行掌握行走路線和景點順序進行旅遊活動。導覽形式眾多且內容本質尤為重要，適當的導覽內容能於短時間內讓旅行者快速了解該地域文化特色。. 2.1.1 導覽定義與功能導覽可謂為經營管理，服務旅行者，藉由人員及各種媒介傳達解說，啟發旅行者對於在地生態環境與文化資產之認識了解。吳麗玲（2000）定義導覽有三：1.導覽是一種溝通過程；2.導覽是服務觀眾的方式；3.導覽具有教育性。導覽具備服務特性，服務引導人們了解環境文化；亦可說導覽具教育性，讓民眾正確且深刻地認識環境，啟發民眾對環境產生新見解和認知。 1.導覽定義導覽即是將旅遊區域之自然人文環境特性，透過各種媒介或其他方式傳達給旅行者。多數認為導覽即是圖文呈現或人員講述，讓民眾了解其知識文化，並提供所需訊息。茂林國家風景區解說志工阮欣儀（2006）在一次演講中提及，導覽解說 7.

(19) 是一種行為語言的表達，是一種行銷，也是一種生活藝術，它結合知識、教育、歷史、地理、人文等等，還要加上一些民情、風俗（在地故事）來刺激，以提昇遊客的興趣與擴展知識領域。重點呈現一未知地域資訊，縮短使用者對其主觀意識和認知落差，作為旅行者與該地域傳遞知識之橋樑媒介。Mahaffey（1970）認為導覽解說是一個人與環境之間溝通的活動過程，使人們了解環境知識，以及個人與環境之互動。導覽其實就是一種可提供旅遊資訊，現場在地路線引導，教導人文科學和古蹟文化，推廣遊憩娛樂發展，甚至身心靈洗滌和觀念啟發。兼具說明和教育性，不僅是單純傳達旅遊資訊而已。. 「美國環境解說之父」Tilden (1977)定義了導覽解說六大原則： (1)任何的導覽解說接應該依據遊客個性和經驗來描述。 (2)資訊不是導覽解說，導覽解說基於資訊而生成，兩者截然不同，所有導覽解說應包含資訊。 (3)導覽解說是一門綜合藝術，無論講述內容是科學、歷史或建築，其具教育性。 (4)導覽解說主要目的不是教學指導，而是啟發。 (5)導覽解說必須以整體敘述，強調整體性，不是破碎片段介紹。 (6)導覽解說對象為 12 歲以下兒童時，不應簡化內容，需變換合適內容全盤介紹。. 實際上導覽僅是扮演中間溝通角色，重點在於引導旅行者體驗氛圍，非單純介紹資訊，否則容易讓人感覺枯燥刻板；需將導覽活化分享經驗，不可像填壓式教學般灌輸教育，如此易造成聆聽者反感。導覽範圍涵蓋甚廣，建築古蹟、在地生態環境、歷史沿革等，導覽要帶領旅人享受過程，手到眼到腳到，親身體驗觀看和感受學習。. 8.

(20) 2.導覽功能導覽功能即是提供旅行者加值服務，並與旅行者產生互動；亦可稱其為運用媒介的一種教育性活動。可學習新知，且具備資訊、導引、教育和啟發等服務性質，並可作為建立旅遊當地文化的形象方式，以及推廣保存文化遺產和留存歷史遺跡意識。導覽主要功能是作為旅行者與觀光地點之連結，使用者藉由導覽取得資訊，而導覽資訊必須清楚明瞭，才能發揮導覽最佳功能。陳偉隆、龍玉雲（2011）歸納出一個導覽解說需具備有解說媒體、解說對象和解說環境等三要素，以進行導覽解說，如「圖 2.1」所示。. 圖 2.1 導覽解說三要素（資料來源：陳偉隆，2011）. 本研究依據此三要素項目，針對導覽功能對其影響說明如下： (1)解說媒體解說媒體泛指導覽人員、出版物、解說牌、行動導覽等；導覽功能對於「解說媒體」之影響為，促使導覽媒介多元呈現，促成增加遊憩導覽設備，間接提高服務品質和旅行者滿意度。. 9.

(21) (2)解說對象「解說對象」泛指旅行者、參觀者等；導覽功能對於「解說對象」之影響為，輔助旅行者了解各種文化知識和各項資源，享受高品質休閒遊憩體驗，啟發認知和激發創意思考。 (3)解說環境「解說環境」泛指旅遊當地、參觀展覽地點等；導覽功能對於「解說環境」之影響為，預防環境遭到損壞，加強文化環境之保育保存觀念，提升觀光地之民眾旅遊意願和經濟效益。. 2.1.2 導覽目的與形式導覽目的為推廣自然文化環境，經由不同媒介，加強我們對歷史古蹟和自然景觀印象。導覽對旅人來說非常重要，無論旅遊前後或當下使用，認識旅遊地點具有相當助益。不僅充實旅行者遊憩體驗，使旅行者增廣見聞，對當地文化有著深入了解，更可促進地區觀光，提升知名度，增加經濟收益。 1.導覽目的導覽目的即是增添旅遊樂趣，提升旅遊體驗，對過往迄今之文化、景觀及歷史予以說明。促使旅行者對在地環境的興趣與瞭解，經由深度觀察方式，休閒遊憩和體驗氛圍，讓更多人們認識旅行當地生態，共同維護人文事蹟和資產。藉由導覽協助旅行者認識環境，提供相關資訊，掌握旅行者情緒和情境，並與其作有效之溝通，傳遞正確專業知識內容。導覽就是要帶給民眾新觀感，引發民眾對於旅遊當地關注興趣，適切的運用各種導覽媒介可提升旅遊品質和滿意度，喚醒大眾對歷史遺跡和自然環境的保護。導覽目的對於旅行者而言，可脫離城市喧囂與快速步調的緊張感，放鬆心情和愉悅休憩體驗。對於環境資源而言，尤其是該地區為國家環境保護區或市定古蹟，需將民眾導向正確觀念，保存資源文化。對當地居民而言，除增加經濟收益外，更. 10.

(22) 可深入認識周遭環境，居民彼此團結一心，共同維護自身環境。綜合上述，重點彙整導覽目的如下： (1)快速了解旅遊當地文化特色。 (2)提升旅遊樂趣和遊憩體驗。 (3)培育歷史遺跡和環境維護觀念。 2.導覽形式從以往印刷文本，直到網站和 App 形式，資訊數位化取代了過去，提供即時最新內容。導覽形式指的就是導覽與旅行者間之溝通媒介，主要功能為將訊息迅速正確地傳達給旅行者。導覽形式可以是一種方法，也可以是一個設備或工具。本研究期間發現大多數以人員和非人員加以分類，而現今導覽形式種類繁多，重新整合歸納之後，彙整出符合現今數位時代之新分類。 (1)出版品導覽一般傳統導覽皆以各紙張種類印刷為主，於現場或其他發送地點供民眾索取。解說出版品是可提供遊客購買或攜帶回家的，它不像解說牌、解說員、解說展示等，只能親臨現場才能得到的解說服務（張明洵、林玥秀，2015）。常見出版品導覽如旅遊書籍、旅遊手冊、地圖和宣傳單等，將當地旅遊訊息，設計排版印製在紙張文本，以圖文、表格、插畫等方式呈現，如「圖 2.2」所示。. 圖 2.2 逢甲吃貨地圖 (資料來源：本研究拍攝). 11.

(23) 很多旅行者偏好於旅遊結束後，能夠索取一些紙張出版品作紀念，亦可提供親朋好友分享介紹。因其製作費用成本較低，便於旅行者攜帶和翻閱內容，很多旅遊區域目前仍有提供此項服務；唯獨不易保存，容易破損而隨手丟棄，難以達到環保概念。出版物導覽並不一定局限於宣傳單或旅遊手冊等印製物，亦有很多設計印製成精美手冊、卡片等印刷品，作為旅遊衍生商品進行販售。印刷品導覽常見於名勝古蹟、遊樂園、旅遊服務中心、展覽館之地點，只要是觀光勝地之處皆可見其蹤影，內容主要傳達旅遊區域之地理位置、交通資訊、環境設施位置、費用價格、連絡電話等資訊，圖文配置、排版配色和導引順序皆須清楚明瞭，才不致誤導使用者。 (2)人員導覽現場導覽人員引導說明，依據民眾當下反應，適度調整導覽內容，融入自身經驗觀點，善用語氣起承轉合與民眾互動，使導覽更加豐富且生動多元。現場導覽人員因與人面對面接觸，隨時與人互動雙向溝通，使旅行者感受較具親和力。現場導覽人員大致可分為據點服務和隨行導遊兩種。據點服務之導覽員通常會駐點於特定地，像是室內空間場所之演講解說，也可能是遊客服務中心、售票處或特約店家，常設置於人潮集中或地區重要地標顯眼之處，以便提供旅人取得旅遊資訊。據點服務內容除基本導覽資訊提供和解說之外，常設有醫療人員和設備，用以應變緊急事故。隨行導遊則是沿著預定之路線，帶領旅行者邊走邊聽之方式進行參觀走訪，途中依據眼前所見之不同人事物，進行導覽解說，有時也會依據現場狀況之發生，改變解說順序和內容。無論據點服務還是隨行導遊，人員導覽通常會公開公告特定之時間與地點實施，有的甚至是針對團體而設置的服務。本研究期間即參加「青田七六」古蹟導覽服務，親身體驗人員導覽解說，如「圖 2.3」所示。置身青田街巷弄中的「青田七六」為洋和混合式建築，台北市定三級古蹟，一個充滿故事的老房子，極具歷史意義。導覽人員為「水瓶子」老師，現為「青田七六」文化長；導覽過程中，除兼具. 12.

(24) 豐富的導覽內容和專業知識外，亦表現出導覽熱忱和文藝氣息，慢條斯理循序漸進式的引導解說，著實讓人深刻感受現場氛圍，彷彿置身於當時的時空背景一般。. 圖 2.3 據點服務之人員導覽 (資料來源：本研究拍攝). 人員導覽通常為最直接、最具互動、最為生動，但人事成本也最高之導覽形式。每位導覽人員皆有個人特色，所營造表現出的解說氛圍因人而異。人員導覽優勢是可提供旅行者感受自然且生動的導覽方式，即時問答的言語互動，可感染到導覽員的感性親和力，激發旅行者主動瞭解和產生興趣。所以作為一個好的導覽員，須具備專業知識、互動熱忱、親和力三項特質以達到導覽解說目的。 (3)固定式裝置導覽利用各式裝置器材直接呈現導覽訊息，簡單明瞭，室內戶外皆可設置。常見之固定式裝置導覽，像是標誌看板、螢幕或喇叭之視聽器材等固定裝置，可因不同地點設置適當說明內容。固定式裝置導覽可節省人力成本，無限時服務，適合作為現場導覽人員之輔助說明；亦可設置多國語言文字，提供外國旅行者之導覽服務。標誌看板施工容易，易於維護，可 24 小時服務設置，內容包括圖片、圖形標示和文字敘述說明，可讓民眾停下腳步閱讀文字，若字數太多，則易導致民眾無耐 13.

(25) 心看完，所以資訊圖表設計很適合用於製作標誌看板內容。標誌看板依據環境不同，選用不同材質設置，通常戶外多選用木板或其他耐久耐髒之材質，不需經常維護，可長期使用，如「圖 2.3」所示。. 圖 2.4 巧克力共和國園區導覽圖 (資料來源：本研究拍攝). 固定視聽裝置則是透過音效和影像來傳遞訊息，像是幻燈片、電視、喇叭音響或多媒體放映設備等，以預先設計之影音聲光效果，於視聽器材裝置上呈現，可現場搭配音樂和特效，有些亦具互動性動態功能，圖文並茂增添導覽多元趣味性，提供旅行者旅遊訊息；此導覽方式多設置於劇場、播映教室、遊客中心等室內空間居多，可一次服務多數旅客。 (4)移動式語音導覽移動式語音導覽介於固定式裝置導覽與行動導覽之間，採預約或現場租賃語音器材，預先錄製說明語音，供民眾手持播放裝置或佩戴耳機進行聆聽，常見於各展覽館或美術館，例如：故宮博物院、臺北市立美術館、國家人權博物館等。此種形式導覽早期以語音答錄機和無線導覽手機為主，須按照導覽預定路線行走依序參觀，並依照現場搭配語音進行聆聽解說。之後亦發展成行走至特定地點， 14.

(26) 語音裝置即會感測到現場發送器，主動進行相關主題導覽解說。以耳機裝置接收之移動式語音導覽，缺點是互動性不足，但其優點是不受他人影響，可依照個人喜好進度，重複聆聽重複導覽。 (5)行動導覽行動導覽即是利用智慧型手機或平板等行動裝置，瀏覽網頁、App 或電子書等方式，取得旅遊資訊。近年數位行動化趨勢，各種行動裝置驟然而生，人手一支智慧型手機，大眾無法擺脫使用行動裝置之生活習慣，已為食衣住行育樂各方面必需品，由此可見導覽形式亦將漸行改變。另外，虛擬實境和擴增實境的快速發展，將虛擬世界和真實世界結合在一起時，整個行動導覽之應用層面範疇會更加廣泛，特別是當前最熱門的應用程式（App）和擴增實境（AR）等技術。 a.應用程式應用程式（Application，App）種類繁多，製作行動導覽 App 者比比皆是，使用一次性的導覽更是不在話下。除非設計之行動導覽 App 符合市場機制需求，但機率低，難易度高，可謂難上加難。絕大部分之使用者習慣，皆是下載瀏覽完即刪除，等同間接否決了行動導覽 App 之設計開發者，耗費許多開發設計、伺服器後台、App 維護等成本費用和研發時間。李尚罄、蔡仁卓（2015）研究指出，因為近年旅行團減少，轉為自由行背包客導向；對於觀光資訊取得有限，利用地理資訊系統（Geographical Information System, GIS）進行資料收集匯入 SuperSurv 軟體程式，建置而成之行動導覽 App。提供民眾使用除可作 GPS 定位、旅遊路線軌跡參考、旅遊景點導引等功用，此系統搭配雲端資料庫連結，作為觀光景點行動導覽，且期許能發展多國語言，更可提供不同語系國內外旅客使用。行動導覽 App 服務近年開發頻繁，台灣的國家公園中很多有提供此服務，最早由墾丁國家公園開發的「智慧行動墾丁」App，以及雪霸國家公園的「雪霸愛旅遊」App 和「雪霸登山 AR」App，之後陸續還有陽明山國家公園的「陽明山國家. 15.

(27) 公園行動導覽系統」App。於 2013 年內政部營建署甚至直接開發「愛上國家公園」 App，此行動導覽囊括了全台灣的國家公園，將旅遊資訊綜合建置其中；提供即時性的旅遊資訊和導覽相關服務，由此可知政府正極力於數位導覽資訊化轉型，不僅便民也節省許多人力和物力成本。 b.擴增實境擴增實境（Augmented Reality，AR），介於虛擬和真實之間，是虛擬物件與真實世界的結合，以真實世界疊加虛擬資訊之結合方式，與使用者之間產生互動和視覺效果。擴增實境導覽需具空間概念，將現實與虛擬物件結合，能有效拉近使用者與現場環境間之距離。科技媒材進步，加上多元互動模式，賦予導覽新生命，讓使用者以直覺方式獲取旅遊區域資訊，透過多項感官記憶體驗數位導覽。而實地走訪為旅行者最好的觀察方式，搭配擴增實境導覽確實可增添民眾樂趣；唯有介面操作方面，一般人對於擴增實境介面較為陌生，需另作操作教學輔助。擴增實境確實為數位導覽帶來新氣象發展，但其介面和功能尚不足以直覺式操作，而且製作費時費工，若為導覽廣泛使用有待商榷。 Boyer（1996）曾經說過在地文化特色街區的意象、記憶和想像，藉由數位化虛擬環境結合，對於民眾了解該街區之歷史文化和背景是有幫助的。行動科技發展提升，擴增實境用途日趨增長，所以將擴增實境技術應用於行動導覽，亦可為一種旅遊資訊傳遞方式，唯獨開發費時、費力、費成本，須定期維護運作，較不符合經濟效益。而技術層面方面，行動裝置效能需求較高，低階手機較無法支援擴增實境呈現，雖然現今行動裝置效能提高許多，但顧及不到少眾需求。. 不同的導覽形式具有各自特色，適用對象和範圍也因時間地點差異而有所不同，並不一定符合因應潮流的數位導覽就是最好，於適當時機使用適切之導覽形式才是經濟實惠之選擇，本研究彙整導覽形式之特點和適用範圍如「表 2.1」所示。. 16.

(28) 表 2.1 導覽形式之特點與適用範圍導覽形式. 出版品導覽. 人員導覽. 固定式裝置導覽. 移動式語音導覽. 應用程式行動導覽. (App). 特點. 適用範圍. 1.具紀念意義價值. 1.遊樂園區. 2.印製成本較低. 2.特殊活動，如元宵節、花火節. 3.可作文創多元設計. 3.展覽館，如故宮、美術館. 1.具備人與人互動之親和力. 1.名勝古蹟. 2.可視情況調整導覽內容. 2.文物、書畫等需導覽說明之展覽. 1.易於維護. 1.遊樂園區. 2.節省人力成本. 2.國家公園、森林遊樂區等戶外場地. 3.可置入多元多媒體內容. 3.旅遊地之視聽室或特定空間. 1.不受導覽路線影響. 1.展覽館，如故宮、美術館. 2.依據個人喜好隨時使用. 2.文物、書畫等需導覽說明之展覽. 1.依據個人習慣隨載隨用. 1.遊樂園區. 2.具多媒體影音效果. 2.特殊活動，如元宵節、花火節. 3.多元化互動. 3.展覽館，如故宮、美術館. 4.耗費開發設計成本. 4.國家公園、名勝古蹟等旅遊區域. 1.依據個人習慣隨載隨用擴增實境 (AR). 2.具擴增實境 3D 效果. 1.學校校園. 3.多元化互動. 2.特色文化街區. 4.耗費開發設計成本資料來源：本研究彙整. 2.1.3 小結旅遊可讓人遠離都市的擁擠煩躁，紓發心情和增廣見聞，搭配導覽從旁輔助引導，可幫助旅程縮短覓尋摸索時間，還可加深旅遊記憶。使用導覽引領旅行者學習體驗在地文化，了解人文風俗民情，不僅增添旅遊樂趣風采，還可促進地方觀光發展。倘若旅遊地點為名勝古蹟或文化遺址，導覽亦具有教育啟發特性，敘述歷史沿革和地方發展過程，深入了解地區之史蹟文化意義和生態環境資源，達到保育保存觀念重要性。. 17.

(29) 導覽與旅行者之間是相輔相成、教學相長，導覽幫助旅行者理解體會、吸收新知，旅行者主動學習和興趣的日益增長，兩者彼此互惠且互相回饋，導覽價值即會逐漸增加，進而達成良性循環。早期的行動電話，個人數位助理 PDA，直至現今智慧型手機和平板，結合網際網路和雲端服務，已達資訊多元化發展。上述五種導覽形式，未來必定趨於行動導覽為導向，現今生活充斥著數位資訊內容，大眾已離不開隨身攜帶行動裝置的生活型態。Klopfer、Squire、Jenkins（2002）彙整出行動裝置的五項特性：可攜性（Portability）、社交互動（Social interactivity）、環境感受（Context sensitivity）、連接性（Connectivity）、個人性（Individuality）。以上特性充分解釋了人類新型態行動裝置使用狀況，作為未來發展行動科技和新興模式之基礎。不同導覽形式具有不同特性，各有優缺限制，既要快速製作產出，又要方便管理維護，沒有任何一種導覽媒介可全然滿足旅行者需求。各地方機關單位，確實可從眾多導覽形式中評估最適合者使用，但現今正值數位時代，行動裝置不離身，數位導覽確實較符合時代潮流，選擇適當的導覽，即是導覽服務成功之開始。近年數位化發展和大數據資料串聯，以及行動裝置便利性和即時性等優點，導覽形式應趨於全球國際資訊化，以直覺淺顯和互動樂趣方式呈現於大眾。不再是早期以印刷品、標誌看板和專人解說的被動式導覽，應導向半主動式數位導覽，使大眾於任何時間地點皆可取得旅遊資訊，獨立自主的使用數位導覽遊憩。. 2.2 行動裝置介面行動裝置介面為使用者與行動裝置間之訊息傳達媒介，目的為正確有效地傳達資訊，讓使用者直覺送出需求與接收訊息。不同介面傳達不同訊息，介面設計不良易造成使用者操作負擔和使用意願，甚至對行動裝置產品產生負面效果和情緒。數位互動導覽即是利用智慧型手機或平板等行動裝置，經由網路傳遞資訊內容至行動裝置中，讓使用者瀏覽內容和認識當地文化。余少卿、梁朝雲、莊育振（2003）研究發現，訊息來源與傳遞模式因為科技不斷的進步而改變，人類的感官 18.

(30) 與訊息之間的互動也有所不同。數位互動導覽介面不只是著重於介面視覺，必須考慮使用者習慣和行為思考模式；其涵蓋人與裝置間之所有互動連結關係，希望使用者以自然本能與裝置互相溝通，必須自然動作和直覺思考進行規劃設計。. 2.2.1 使用者介面設計介面設計著重迅速有效性，傳達正確訊息互動回應使用者，操作流暢不良之介面設計易使人困惑，甚至影響繼續操作意願。Shneiderma（1988）在其所著作之「Designing the User Interface」一書中提出了使用者介面設計八大黃金規則：標準一致性、功能性捷徑、介面適當反應、操作執行狀態、預防錯誤、回復功能、使用者操控自由、減少使用者記憶負荷。以下為八大規則觀點敘述說明。 1.標準一致性於介面設計中，只要屬類似的功能或操作，須盡量以相同的圖形符號和文字名稱進行設計。例如各單元介面版型或功能性圖示符號，點擊後顯示同性質內容之介面皆須考慮其一致性。介面設計若無一致性準則進行規劃，不僅造成使用者容易誤解，每次使用時須不斷的揣測和學習新的使用邏輯。 2.功能性捷徑設置適當快捷介面捷徑，減少過多層級架構，降低使用性阻礙和屏障。亦即當使用者熟悉介面環境後，操作邏輯和指向內容熟能生巧，或是遇到數位行動網路重度使用者，原本即對各平台載具介面之環境操作非常熟稔，如有設置功能性捷徑，即可提高使用者之使用意願。 3.介面適當反應於介面操作時，適時地以介面反饋方式回應使用者。例如點擊該圖示符號時會有變色、放大或跳動反應，但過多設計此等反應會造成視覺繁雜困擾，故於介面設計時，須慎重考慮介面反應模式或反饋方式。此等使用者介面的回饋反應，現今 UI 設計師已鮮少如此設計，主因是易導致使用者反感。. 19.

(31) 4.操作執行狀態使用者實施操作時，介面需反應告知使用者當前執行狀態，例如「執行中（Loading…）」或「完成（Completed）」等介面訊息。常發生用於送出填寫表單、上傳下載檔案資料和導入其它畫面等情況，否則將導致使用者無意義等待，或是觀其無反應，不斷點擊介面欲執行其功能。適時出現執行進度或其他相關導引措施，可讓使用者掌握當前執行狀況，不致胡亂猜測或強硬操作，嚴重時易導致使用意願及困擾。 5.預防錯誤介面操作所遇錯誤情況不一，有時是系統不穩定導致；常見狀況為輸入密碼或基本資料等繁雜設定，但也可能為系統運作遲滯（Lag）導致。若遇狀況為前者， UI 設計師於介面設計時應化繁為簡，重點提醒即可；若為後者，則須與程式設計人員商榷和偵錯，減少錯誤之事發生。 6.回復功能此介面功能狀況常發生於填寫資料錯誤或反悔執行動作，使用者欲返回上一頁或上一動作。故於介面設計時，最好須設置回復功能介面，若無設計此功能供使用者修改，易導致許多無法挽回之情事發生。亦有人設計多一層彈跳式警示視窗，供使用者緩衝緩頰時間。 7.使用者操控自由通常使用者多有控制慾望，希望使用者介面操作能即時快速反應。於介面設計時須多以使用者角度思考，讓其感受操作控制主導權；介面操作和執行狀態之即時回應，最能讓使用者感受掌控快感。 8.減少使用者記憶負荷介面簡化，避免多餘視覺導引，直覺式介面和易辨識之圖示符號（icon），操作即時性反應，指向內容正確，讓使用者一目了然，提升介面設計價值及使用意願。. 20.

(32) 除 Shneiderma 曾經所提出之八大黃金規則外，使用者介面尚包含很多方向可進行探討，例如內容豐富性和互動性等。就圖示符號來說，簡單元素和扁平化設計能提高使用者記憶，過度擬真裝飾會造成視覺壓力。可將功能型按鈕介面用顏色或其他效果凸顯。Horton（1994）認為電腦介面的符號、選單和視窗插圖皆可稱為圖示，而其本身不具任何意義，但是經由人類的記憶與聯想，集結組合成為被大眾所認同之意義，亦即約定成俗變成能夠記憶之符號。圖示符號通常不是獨立個體，是一套設計風格一致性的標誌，好的圖示符號賦予使用者感受到專業質感設計形象。圖示是用來傳播的視覺化符號，幫助人們理解文字以外的資訊，使這些資訊被準確識別和交流，且能夠在短時間內被使用者理解（周陟，2012）。. 操作路徑應善於利用幾何元素，不可截斷視覺動線。內容規劃可適當排列物件間距，不致擁擠雜亂，文字不可冗長，減少漸層和陰影使用，以達畫面簡潔成效。圖文配置以留白或簡易幾何色塊作為襯底輔助使用，若使用之背景為複雜影像圖片，可採模糊效果搭配簡約符號，凸顯畫面保持內容呈現。字體方面採用較適合螢幕之無襯線字體（Sans-serif）為恰當，可搭配特殊字體、加大字級或加粗字體以凸顯標題，而字體種類不宜使用多種，2~3 種即為適當。. 使用者與介面之互動性甚為重要，所謂的「互動」（interaction）是指目標物對使用者的行為（action）有所回應（reaction）的成對連鎖反應；而目標物對使用者的回應又稱為「回饋」（feedback）（原田秀司，2014）。Tidwell（2012）提及好的介面設計透過與使用者之間良好的互動，更能讓使用者獲得所需的回饋。適當的動畫和互動效果可吸引使用者聚焦目光，亦可利用閃爍效果提示使用者。Kristof & Satran (1995)即指出互動是以使用者為主，其控制了層級脈絡和順序步驟，使用者可決定瀏覽或略過。友善介面設計可讓使用者經驗更加完善，感受良好操作體驗，掌握直覺性和效率性，甚至是操作當下心情的逾悅性。數位導覽可利用多媒體影音和互動性操作效果吸引使用者，藉由視覺效果吸引目光和引導瀏覽動線。 21.

(33) 關於使用者介面設計之色彩配置，滿版或大面積色塊以低彩度配色為佳，色相簡化並減少複雜色彩。低彩度背景搭配圖片和陰影，可凸顯影像真實感和光線感。色彩表現為一種物理現象，包含色相、明度、彩度三種屬性；人類之所以能夠看到物體色彩，是經由光線照射物體後，將物體色彩反射投影於眼睛視網膜產生。環境中充滿各式色彩，以色相環來說，紅、橙、黃為「溫暖色系」，帶有熱情、積極、憤怒之意；藍綠、藍、藍紫為「寒冷色系」，帶有清幽、深遠、消極之意；綠、紫為「中性色系」，帶有低調、沈靜、溫和之意。色彩是視覺的第一語言，具有巨大的影響力，能夠喚起人們感情的作用，控制我們的情感和行動（歐秀明，1999）。色彩為視覺的表現語言，表達了任何形體物件所傳達之第一視覺印象，不僅影響使用者感知強度，亦會間接影響心理層面。本創作研究屬適地性數位導覽設計，在地環境氛圍與數位導覽之介面視覺息息相關。我們的生活環境是充滿色彩的，色彩意象、色彩聯想、色彩嗜好，是我們生活每天接觸的，這些經驗是色彩在各種複雜的因素下造成（林書堯，1989）。在使用者介面設計之色彩配置中，視覺感知甚為重要，在地環境表現之色彩，其與使用者和介面設計三者之間是彼此產生關聯性的，無論是當地建築還是自然氛圍，皆需互相呼應相符，方能呈現使用者介面之適切視覺色彩。. 22.

(34) 2.2.2 共通性介面設計基於現今行動裝置的普及，多數使用者操作介面，早已將既有操作習慣，融入設計以趨於自然化，故於規劃使用者介面時，可利用既有操作模式和經驗法則參酌進行。原田秀司（2014）提及「現行標準（de facto standard）」一詞，即實質標準的意思，並非官方公布的標準，卻是公眾的習慣或市場慣例，簡單說就是一種約定成俗的標準。多數認為介面設計即是要讓使用者「直覺式」操作，方能稱之為好的介面設計；與其說「直覺式」操作，更可將其認知為「習慣式」操作。設計者假若欲創造新型態的介面設計，必須要有把握讓使用者第一次操作新介面即可順手，但此想法可是稍有難度；除了要額外製作說明新版介面操作模式，且尚需時間讓使用者進行初次體驗操作予以驗證新介面。以下為列舉三種共通性介面設計之圖示符號範例說明：. 1.列表選單台北捷運以. 為「列表選單」，如「圖 2.1」所示；電子商務亞馬遜亦以. 表示，如「圖 2.2」所示。由此可證，使用者已習慣認定「三條橫線」為列表選單。. 圖 2.5 台北捷運畫面. 圖 2.6 電子商務亞馬遜畫面. （資料來源：台北捷運 Go App）. （資料來源：amazon App）. 23.