賈斯云 Szu-Yun Chia
玄奘大學資訊傳播所研究生
Graduate Student, Graduate Studies of Information and Communication of Hsuan Chuang University
王美玉 Mei-Yu Wang
玄奘大學圖書資訊學系副教授兼系主任
Associate Professor, Chair of Department of Library and Information Science, Hsuan Chuang University
【摘要Abstract】
在傳統的圖書館導覽系統中，使用者只能夠單方面的聆聽解說人員或是導覽系統的解說，並 不能隨著自己的興趣進行導覽，較缺乏互動性。在資訊技術日新月異的今日，的確已有一些圖書 館導覽系統採用先進的技術，惟缺乏一主題性與一致性的導覽介面，在視覺藝術設計上也鮮少注 重。本研究綜合比較國內外圖書館的應用實例，嘗試以主題動畫切入、結合互動多媒體與視覺藝 術設計的導覽手法設計並建置一導覽系統。本系統現階段已經測試，已能達到基本的自動導覽需 求。囿於人力與資源之不足，本導覽系統尚有待改善之處，但期望可拋磚引玉，引領國內圖書館 在設計與建置導覽系統時，能將互動性、主題腳本設計與 3D 虛擬等等不同元素組合，以呈現更具 親和性與趣味性的導覽活動供讀者使用。
This paper investigates and illustrates the design and implementation of interactive multimedia to enhance Web-based library tour in a university context. It describes a research project that emulates a physical tour and renders it into an attention-getting virtual interactive tour for Hsuan Chuang University Library. The paper describes the technologies used to make the tour allowing navigating, viewing, reading, hearing and remote access. The discussion also includes an overview of the
系統之實作研究
Applying Interactive Multimedia in the Design of
University Library Tour System
strength and weakness of this library tour system.
【關鍵詞 Keyword】
圖書館虛擬導覽；視覺設計；互動多媒體；虛擬實境
Virtual Library Tour; Vision Design; Interactive Multimedia; Virtual Reality 壹、前言
在傳統的圖書館導覽系統中，使用 者只能夠單方面的聆聽解說人員或是導 覽系統的解說，並不能隨著自己的興趣 進行導覽，較缺乏互動性。在資訊技術 日新月異的今日，圖書館的網站可作為 導覽的工具（呂淑惠，2001；顏淑芬，
2000；邰婉真，2001），而且，的確已 有一些圖書館利用以網為基的導覽方 式，但是普遍缺乏一主題性與一致性的 導覽介面，在視覺藝術設計上更鮮少注 重。
因此，本研究主要目的在探知玄奘 大學圖書館館員對導覽系統的認知與實 際需求，繼而藉之運用合適的多媒體互 動設計技術，建置一具多元表現方式與 互動性的導覽系統。本研究之研究方法 包含國內外圖書館導覽設計方式分析以 及系統實作，進行步驟分述如下：
一、國內外圖書館導覽設計方式分析 並非每一所大學圖書館均提供有以 網為基的圖書館導覽設計，為此，本研 究針對國內與美國和英國大學之圖書館 導覽系統做初步的比較分析。
本研究針對國內大學以普查方式，
逐一瀏覽 156 所國內大學，其中有 15
所圖書館之導覽系統設計較佳，這 15 所大學之圖書館導覽系統皆有純文字與 圖片，而在 Flash 動畫項目裡，僅有 2 所有此功能，在功能性上有7 所大學介 紹是詳盡的，但在主題性的項目上，全 然沒有一所大學有此功能。英國的揀擇 標準是根據The Times Good University Guide 2007（註 1）前 100 名優秀大 學，逐一瀏覽，發現有 10 所英國大學 的圖書館虛擬導覽設計較佳且具代表 性；而美國大學是根據The Washington Monthly College Guide（註 2）中的前 30 名優秀大學，，逐一瀏覽，發現有 5 所的圖書館虛擬導覽設計較佳且具代表 性。綜合分析美國和英國這 15 所大學 之虛擬導覽，14 所大學有文字導覽，
13 所大學有文圖導覽，而在其他影 音、虛擬導覽、Flash 動畫、功能性上 較不如國內，在主題性上也無一所有此 性能。
如表1 所示，大部分圖書館導覽系 統僅運用文字與圖片（含平面圖），只 有少數圖書館以影音導覽或 Flash 動畫 方式做導覽，而且列於表1 的圖書館導 覽之內容呈現方式皆未採主題性的動畫 腳本。
表 1：國內外圖書館以網為基的導覽方式分析表
以網為基的導覽
多媒體呈現方式 內容呈
現方式 大學名稱及網址
純文字 圖片 影音導覽 虛擬式導覽 Flash
動畫
※功能性 主題腳本
國內大學 中正大學圖書館
http://www.lib.ccu.edu.tw/avnew/ ◎ ◎ ◎
中興大學圖書館
http://www.lib.nchu.edu.tw/ ◎ ◎
台北醫學大學圖書館
http://library.tmu.edu.tw/guide/service/94eduplan.htm ◎ ◎ ◎ 台北藝術大學
http://library.tnua.edu.tw/tnurlirbay010.htm ◎ ◎ ◎ 台灣大學圖書館
http://elearning.lib.ntu.edu.tw/guide/index.htm ◎ ◎ ◎ ◎ ◎ 交通大學浩然圖書館
http://www.lib.nctu.edu.tw/guide/guide.htm ◎ ◎ ◎ 成功大學圖書館
http://www.lib.ncku.edu.tw/guide/03.htm ◎ ◎ 高雄師範大學圖書館
http://140.127.53.12/lib/guide-c.htm ◎ ◎ 逢甲大學圖書館導覽
http://www.fcu.edu.tw/~library/mod_guide/page_04.htm ◎ ◎ ◎ 樹德科技大學圖書館
http://www.lib.stu.edu.tw/Floor/lib_floor.html ◎ ◎ 台中技術學院圖書館
http://web.ntit.edu.tw/~library20/library/guide.htm ◎ ◎ 勤益技術學院圖書館
http://140.128.95.7/~library/VR/CY_view_1024U.html ◎ ◎ 輔仁大學圖書館
http://www.lib.fju.edu.tw/edu/index.htm ◎ ◎ ◎
靜宜大學蓋夏圖書館
http://www.lib.pu.edu.tw/new/introduction/floor.html ◎ ◎ ◎ 東華大學圖書館
http://134.208.10.82/LibMap/ ◎
以網為基的導覽
多媒體呈現方式 內容呈
現方式 大學名稱及網址
純文字 圖片 影音導覽 虛擬式導覽 Flash
動畫
※功能性 主題腳本
國外大學
Brigham Young University
http://www.lib.byu.edu/instruction/vtour ◎ ◎ Boston University
http://www.bu.edu/library/tour/indes.html ◎ ◎ ◎ Penn State university
http://www.libraries.psu.edu/gateway/vtour/tourinst.htm ◎ ◎ University of California, San Diego
http://library.colostate-pueblo.edu/tour/index.asp ◎ ◎ University of Michigan
http://www.law.umich.edu/virtualtour/library/index.htm ◎ ◎ Syracuse University
http://library.syr.edu/instruction/tour/main ◎ ◎ ◎ Edinburgh University
http://www.lib.ed.ac.uk/sites/virtour.shtml ◎ ◎ Loughborough University
http://www.lboro.ac.uk/library/about/index.html ◎ ◎ London South Bank University
http://www.lisa.sbu.ac.uk/009_vtour/Start.html ◎ ◎ Southampton Solent University
http://www.solent.ac.uk/library/tour/credits.stm ◎ ◎ The Yale University
http://www.library.yale.edu/rsc/virtualtour ◎ ◎ University of Bath
http://www.bath.ac.uk/about/campustour/index.shtml ◎ University of Central England
http://library.uce.ac.uk/vtour.htm ◎ ◎ University of Leicester
http://www.le.ac.uk/li/v_tutorial/Clinical/floors.html ◎ ◎ University of Warwicky
http://www2.warwick.ac.uk/services/library/main/help/guidespublications/ ◎ ◎ University of Wisconsin
http://www.uwstout.edu/lib/tour/floor1.htm#Instlab ◎ ◎
※功能性是指該導覽系統對於圖書館之服務功能介紹詳盡。
二、系統實作
本互動多媒體設計主要開發是以 Flash 動態網頁以及 Web 3D 等技術為 虛擬實境模式之表現方式，成為玄奘大 學圖書館導覽的輔助教學系統，而本系 統的開發的流程主要分為以下三個階 段。
分析階段：
包括技術的摸索和蒐集國內外圖書館 利用教育相關文獻、系統以及玄奘大 學圖書館館員訪談結果。再根據以上 的需求分析，以設計出對玄奘大學讀
者有幫助的互動多媒體輔助教學系 統。
建置與設計階段：
對系統作初步的分析之後再開始系統 的設計和製作，此階段根據分析階段 結果開始規劃系統的展示方式和內 容。
測試階段：
系統完成後，將其上傳至玄奘大學圖 書館，進入實用階段。
研究流程與步驟如圖一所示。
圖一：研究流程與步驟
研究背景與動機
文獻探討
系統架構建立
視覺設計 動畫設計 程式設計
修改與最佳化
創作完成
研究發現
結論
源起與論文撰寫
系 統 建 置
結 論
2005.10月2005.12月－2006.9月2006.10月－11月
貳、實作導覽架構設計
一、架構設計
如表1 所示，國內外大學圖書館之 導覽系統未見有主題性導覽，本研究構 想設計一圖書館虛擬導覽員，其為一卡
通人物，將其命名為Book Monster，簡 稱 Mr. B，盼能在眾多大學圖書館導覽 系統裡，玄奘圖書館能以不同呈現方式 吸引使用者在瀏覽此套系統時，也興致 盎然的了解圖書館基本功能。
本系統之架構如下圖。
圖二：系統架構圖
導覽首頁：
進入導覽頁前，先有一段以 Flash 動 畫製作的 Mr.B 的誕生過程，以手繪 方式以及風趣表達方式來介紹 Mr.B 的誕生，接著就進入導覽選單。
關於我們：
此段構圖呈現主要是介紹玄奘大學圖 書館成立至今之概述，以及歷任館長 之簡介。
電子資源：
構想是以一大螢幕，利用選台器選擇 資料庫檢索、電子期刊檢索、玄奘大
學電子書閱讀、以及線上學習系統四 種玄奘大學電子資源的使用，以及介 紹玄奘大學各電子資源的館藏量等。
讀者可以透過連結使用電子資源，且 館員也可在導覽時，有一豐富畫面可 教導新生。
Web 3D 虛擬導覽：
含有虛擬影像、各樓層平面圖及說明 各樓層之館內資源簡介。這裡所製作 的動畫有別於其他選單，由於研究者 在樓層製作是基於平面但又屬於 3D 呈現，因此，主要先在 Autocad、
關於我們 電子資源 Web 3D 虛擬導覽 服務 聯絡方式
資料庫檢索 電子期刊檢索
線上學習系統 電子書
一樓3D 虛擬導覽 二樓3D 虛擬導覽
圖書館利用教育 E-learning
VOD Ee-campus 導覽首頁
3DsMax 等軟體先繪好平面及建置傢 俱，再以Flash 後製。
服務：
服務方面是以休閒方式表現構圖，主 要提供之服務是有圖書館利用指導之 申請、E-learning 的學習、玄奘大學 圖書館隨選視訊的觀賞以及玄奘大學 的 E-campus 服務等。以上是挑選玄 奘大學具有特性之服務做為連結。
聯絡方式：
提供館內聯絡方式，包括館長、各組 聯繫方式，以及開館時間等公告。
二、技術應用
為呈現上述架構與效果，本系統運 用 下 列 技 術 ：AutoCAD 2004 、 3ds MAX、Illustrate!、Macromedia Flash、
Dreamweaver。
圖三：平面建置圖
研究者利用 AutoCAD 2004，將設 計群組間的設計資料緊密結合，亦是將 玄奘大學圖書館一樓與二樓之平面先繪 出，柱子、外牆、及不同區塊之分類先 繪一平面，再將其存檔為.dwg 檔，以 利之後在3ds MAX8 裡製作。如圖三所 示。
3ds MAX 軟體在 3D 動畫、廣告、
遊戲、建築業中逐漸的被多數人所使 用，包含特效展現、環境效果展示、細 緻的建築紋理、人物塑造與貼圖……
等。且其在業界廣泛應用於室內設計、
建築設計、工業產品設計、教育輔助、
電腦遊戲及電影電視視訊等。
由於以上特性，研究者利用 3ds MAX 軟體繪出各樓層之各傢俱與建築 物等，如圖四所示：
圖四：3D 立體建築圖
現今網路上有許多 Flash 作品中帶 有表現 3D 效果的內容。這些 3D 效果 看起來確實比起一般 2D 作品更好，但 如真的用 Flash 編輯器製作確實不容 易 ， 因 此 Illustrate! 是 一 套 用 於 3ds MAX 的外掛彩現著色器，它可將 3D 場景彩現輸出成 2D，其最大特點就是 將 3D 物件輸出成向量圖格式文件。因 此檔案輸出後是.swf 檔，再將其匯入至 Flash 軟體製作。
圖五：Flash 製作圖
而 Flash 是專門用來設計網頁及多 媒體動畫的軟體，它可以為網頁加入專 業且漂亮的互動式按鈕及向量式的動畫 圖案特效，是目前製作網頁動畫最熱門 的軟體。FLASH 的動畫繪圖方式是採 向量方式處理，這樣圖案在網頁中放大
或縮小時，不會因此而失真，而且可依 顏色或區塊做部份的選擇來進行編輯。
考量以上特性，研究者以 Flash 做為主 要設計工具。如圖五所示。
Dreamweaver 是集網頁製作和管理 網站於一身的網頁編輯器，利用它可製 作出跨越平台和跨越瀏覽器限制的充滿 動感的網頁，可說是目前設計網頁最強 的工具軟體，其具有圖層和樣版功能，
都是非常重要有用的功能。
研究者利用其圖層及編碼功能匯合 所有網頁的共通性。尤其是利用圖層功 能結合圖書館虛擬環場影片的結合，以 及網頁完成後的整合。
三、系統實作結果
系統首頁：
本系統幾乎是以動態網頁完成，但礙 於其他使用者在瀏覽此套系統時，會 因螢幕解析度不同而動畫視窗移位，
因此，研究者首頁是以Dreamwever 靜 態首頁經由連結跳至動畫頁之全螢幕 呈現。如圖六所示：
圖六：系統首頁
動畫頁：
進入動畫頁之後，會以風趣素描筆觸 呈現 Book Monster 之誕生，希望藉 此動畫有別於其他圖書館之導覽系 統。以較多設計風格來呈現本導覽系 統。如圖七所示：
圖七：Book Monster 誕生
選單區：
在每一頁的選單，會有不同的動畫，
以增添活潑感。如圖八所示。
圖八：選單動畫
About us 區：
About us 區主要是介紹玄奘圖書館的 成立及歷屆館長簡介。如圖九所示
圖九：About us 展示
E-resources 區：
主要是介紹玄奘大學電子資料庫、電 子期刊、電子書之館藏量及使用，以 及線上學習系統之使用。如圖十所 示：
圖十：E-resources 展示
Floor plan 區：
以 Web3D 方式呈現樓平面，也就是 說將 3D 物件以 2D 方式呈現，而部 分導覽以影像式虛擬實境表現，亦即 360 度環場效果。而平面圖上之導覽 也有各區塊之說明，打破與其他圖書 館不同的製作方式。如圖十一、十二 所示：
圖十一：Floorplan 展示
圖十二：Floorplan 虛擬環場展示
Services 區：
此區主要挑選玄奘圖書館具代表性的 服 務 ： 圖 書 館 利 用 指 導 、E- learning、隨選視訊、E-campus 等做 基本服務之導覽。如圖十三所示：
圖十三：Services 展示
Contact 區：
提供聯絡方式，如有任何建議可提供 給館員，讓此系統之建置能更完備，
或者建議更多服務於此套系統之呈 現。如圖十四所示：
圖十四：Contact 展示
肆、問題與討論
在製作系統之前，研究者瀏覽國內 外數間大學圖書館導覽系統，有些運用 大量多媒體，有些卻僅有純文字介紹。
數十間大學圖書館導覽網站的製作卻沒 有一所有依主題性的構想出發（表 1）。因此，研究者試想以一數位導覽員 的方式呈現，而構圖上起初也是一困 境，須以有特色加上設計風格來表現，
在瀏覽各種設計書籍與網站後，最後有 綠色主題人物誕生。而在系統建置的整 體性；包括設計巧思、用色、動畫表現 等，也是需要經過一番琢磨與學習才有 此整體性的表現。此外，人物的命名也 經過一番思考，取名Book Monster，簡 稱Mr. B 給予讀者一親和力與易記性。
製作樓層導覽時，最初構想是以完 全 3D 貼圖彩現實景，但考慮為一人作 業，無法完成浩大工程。但仍想以 3D 方 式 表 現 ， 因 此 ， 研 究 者 採 用 了 Illustrate!外掛軟體，可以將 3D 物件以 向量方式表現及後製。解決此網頁製作 方式後，尚有 360 度環場之 Popup 程 式碼需處理，原因在於popup 一開始由 於 Actionscript 和 Html 間的程式碼溝 通，因為 flash 和 dreamweaver 的網路 安全保護機制，導致環場無法顯示。解 決方式是將新版 Flash 之 Actionscript 改為新版程式碼，使其與 Dreamweaver 的程式碼互相溝通。
伍、結論與建議
希望透過此互動多媒體設計導覽系 統，能讓使用者方便了解圖書館內部的 陳設狀態，也可以對不熟悉的環境而減 少尋找與諮詢的時間。另外，關於圖書 館學習方面的課程，也可以透過此互動 多媒體導覽設計，讓館員與讀者利用其 生動與豐富的內容來學習，把系統內的 相關內容當作教材，增強學習效果與提 升學習樂趣。
本互動多媒體導覽系統已經測試，
網址為＜http://210.60.55.235/mrb/index.
htm＞經測試後，也發現如下優缺點：
本系統優點表現結合了視覺設計以及互 動多媒體等技術，在內容方面也以動畫 之趣味性呈現一貫性的主題表現方式，
以此種方式可能可以提高讀者的瀏覽學 習效益。而缺點則是缺少影像聲音導 覽、詳細的電子資源導覽，環場導覽尚 未完備，也沒有台大虛擬圖書館導覽的 設計：在學習導覽後還有測驗。總之，
囿於人力與資源之不足，本導覽系統雖 欠完善，但期望可拋磚引玉，引領國內 圖書館在設計與建置導覽系統時，能將 互動性、主題腳本設計與 3D 虛擬等不 同元素組合，以呈現更具親和性與趣味 性的導覽活動供讀者使用。
附 註
註1 Times Online 提供了英國前 100 名 優秀學校排行，供大家參考。
<http://www.timesonline.co.uk/sectio n/0,,716,00.html>
註2 The Washington Monthly 提供了美 國前 30 名優秀學校排行，供大家 參考。
<http://www.washingtonmonthly.com/
features/2005/0509.collegeguide.html>
參考書目
中文書目
王泓斌，互動超媒體設計應用於虛擬資 訊空間之研究 （台南市：成功大 學 工 業 設 計 研 究 所 碩 士 論 文 ， 2000）。
呂淑惠，大專院校圖書館網站經營管理 之研究 （台北市：台灣大學圖書 資訊學研究所碩士論文，2001）。
李欣怡，大學圖書館網站無障礙網頁設 計之研究 （台中市：中興大學圖 書資訊學研究所碩士論文，2004）。
林靜莉，「以圖書館導覽系統之製作及 應用談圖書館利用教育的發展空 間」 中央圖書館館刊 7 卷 4 期
（2001），頁 4。
周保男、張基成，「線上影像式虛擬校 園導覽系統之設計與製作」 台灣 區網際網路研討會 編號 W104
（2001）。
顏淑芬，「美國密爾瓦基公共圖書館與 底特律公共圖書館網站內容介紹」
台北市立圖書館館訊 17 卷 3 期
（2000），頁 26。
郭 淑 慧 ，Web 3D 互動式網頁設計
（台北縣：博碩文化，2003）。
英文書目
Alistair D.N. Edwards & Simon Holland,
Multimedia Interface Design in Education (New York: Springer-
Verlag, 1994).Carol MacGillivray & Anthony Head, 3D
for the Web: Interactive 3D Animation Using 3Ds Max, Flash and Director (New York: Focal
Press, 2005).Illustrate! Product, (2000), Retrieved November 04, 2006, from <http://
www.davidgould.com/Illustrate/Illust rateForMax/Illustrate53.htm>
Patrick J. Lynch, Sarah Horton Site Design (2002), Web style Guide:
Basic Design Principle for Creating Web Sites, 2
nd ed. 2002 Retrieved October 01, 2006, from <http://www.webstyleguide.com/site/index.html>
Ray Kristof & Amy Satran, Interactivity by
design. (London: Pearson Education
1995).Times online, Top universities league table
2007 (2006), Retrieved November 03,
2006, from <http://www.timesonline.co.uk/section/0,,716,00.html>
The Washington Monthly, (2005) The
Washington Monthly College Guide
Retrieved October 03, 2006, from<http://www.washingtonmonthly.com/
features/2005/0509.collegeguide.html>
