擴增實境技術運用於數位互動廣告展示之探討與設計

全文

(1)國立臺灣師範大學設計研究所碩士論文. 擴增實境技術運用於數位互動廣告展示之探討與設計 The Study and Design of Augmented Reality technology used in the digital interactive advertising display. 研究生：蔡雅琦指導教授：鄧成連中華民國一百零一年七月.

(2) 摘要擴增實境技術應用在數位互動廣告互動，目前屬初期發展階段，本研究以質性研究法，由文獻研究確認擴增實境、互動廣告與互動設計的範圍、製作技術與設計方式，藉對國內互動情境空間、戶外互動廣告、互動藝術創作與互動展覽領域業界專家訪談研究，歸納出設計流程與注意事項，最後再以自我創作的方式進行研究驗證，並分析檢討創作結果。本創作之特點為使用 xBox Kinect 的擴增實境體感技術，發揮無標記擴增實境技術的優勢於廣告互動；創作過程中，藉互動腳本的文字描述及情境示意圖交叉對照，模擬參與者的使用情境及行為，統整出必要之互動流程及細部設計的項目和設計要點。本研究結論提出設計師應用擴增實境技術於廣告互動時應注意的要點如下： 1.設計師需了解擴增實境概念及技術，思考如何結合實景與虛擬環境的影像將技術優勢妥善運用在廣告創意和廣告表現中。 2.互動廣告的企劃製作宜以團隊方式進行，可發揮團隊各成員之專長。而設計師的工作則包含企劃、創意發想、互動規劃、圖像與動畫製作，並在製作過程有效地與工程師溝通內容，了解技術可達成的效果。 3.標記類型的選用，在進行擴增實境運用到互動廣告設計時，妥善選擇適合的方式，將與互動廣告所希望達成的效果有直接關係。 4.互動過程的紀錄，可以現場列印、網路下載、使用者自行拍照或錄影形式呈現，呈現的內容需能以再次傳播的方式，增加廣告效果。統整訪談分析之設計流程與實際創作之過程，提出互動設計程序如下： 1.依據廣告主題擬訂廣告策略，並善用擴增實境的特點於廣告創意。 2.繪製互動流程圖，以歸納適當的互動流程。 3.考量廣告策略與目標，決定如何在互動流程中加入策略所需的互動步驟。 4.統整互動流程，歸納細部設計所需的設計明細。 5.依據互動現場環境狀況及使用技術，選擇適合的設備和裝設位置。 6.反覆測試至系統與不同條件下之互動狀況與對應情境。 7.細部設計，包含互動內容、相關行銷物及環境。上述注意要點和設計流程，可供互動廣告設計師在設計時的初步參考資料。建議後續研究可加入國內外最新案例的研究，了解實際應用於互動廣告設計時的最新創意，再次驗證研究所得的結果。此外，互動廣告聲光效果刺激的重要性，及互動廣告的設計創意，需注意隨著不同參與者、時間、互動體驗的次數或參與者人數等因素，以發揮擴增實境應用於互動廣告的效益。. 關鍵字：數位互動廣告設計、擴增實境、互動廣告、互動設計.

(3) Abstract Augmented reality technology applications in the digital interactive advertising, is the early stages of development. This study, Augmented Reality via literature research, the scope of the interactive advertising and interactive design, production technology and design. By interviews with domestic interaction situation space, outdoor and interactive advertising, interactive art creation and interactive exhibition areas industry experts. The study concludes that the design process and precautions, and finally to self-creation study validation, analysis and review of the creative results. The present invention is characterized by augmented reality xBox the Kinect somatosensory technology in the advertising interactive; the creative process through interactive storyboard script text description and context schematic cross-control, simulation participantsthe use of situational and behavioral integration of the necessary interactive process and detail design projects and design features. The attention of the priority points and design processes are available for interactive advertising designer in the design of the preliminary reference. Recommended follow-up study can be added to the latest case studies to understand the practical application of the latest ideas in interactive advertising design, again to verify the results of the study. In addition, the interactive advertising shot in the importance of stimulating and interactive advertising design and creative, should pay attention to the factors with the different participants, time, interactive experience, number of times or the number of participants, in order to play augmented reality applied to interactive advertising benefits.. Keywords: digital interactive advertising design, augmented reality, interactive advertising, interactive design.

(4) 謝誌兩年的時光很快就過去了！感謝有各位老師、同學、家人、好友們的協助與鼓勵，讓我得以兼顧工作與學業。首先感謝我的論文指導教授鄧成連博士的細心教誨與專業態度，督促我在學術上的精益求精。謝謝梁桂嘉所長，給予我從事研究方向的指引。謝謝張柏舟教授，以創意的思維開啟了我的見識。謝謝周賢彬教授，讓我以新的方法與態度製作和面對動畫設計。謝謝伊彬教授，讓我得以學會以視覺心理學的角度剖析設計。謝謝莊修田教授，讓我從專題研究的方法瞭解執行設計專案的技巧。謝謝賴建都教授，讓我明白如何結合廣告行銷應用於設計。謝謝曹筱玥教授，引領我進入互動藝術設計、讓我對數位互動的領域認識更深。並謝謝曾經給予我指導的教授、老師們，因為您們分享了在專業領域的知識，豐富了我的視野。謝謝葉碧華助教，有您的協助，讓所有的事務能順利進行。此外，特別感謝官政能教授與梁桂嘉所長於口試時的審查與指導，對於內容細心修飾指正，使我的論文內容得以完整！回想起我和我可愛的同學們在臺師大設計研究所的日子，我們之間沒有競爭，而是互相的學習對象，我們彼此加油鼓勵，並且共同分享榮耀與喜悅。在這段求學的歲月裡，我們一起經歷了人生中很重要的階段，希望學業結束了，大家的關係永不結束。另外要謝謝我的家人，因為你們的支持、體諒和包容，讓我能有今天的成果，更要謝謝所有的親朋好友，因為你們的支持，讓我能堅持持續在設計界發揮微波效應！. 蔡雅琦謹誌 2012 年 7 月 9 日.

(5) 目錄中文摘要..................................................................................................................................i Abstract ....................................................................................................................................ii 謝誌 .........................................................................................................................................iii. 第壹章緒論 1 一、研究背景與動機 ...............................................................................................1 二、研究目的與目標 ...............................................................................................8 三、研究與創作目標 ...............................................................................................8 參考文獻 ....................................................................................................................9. 第貳章文獻探討 10 一、互動廣告 ..........................................................................................................10 （一）、互動廣告的類型與案例分析 .....................................................12 （二）、互動廣告的優勢 ...........................................................................15 （三）、廣告互動的溝通特徵 ..................................................................16 （四）、互動廣告的互動層次 ..................................................................17 二、互動設計 ..........................................................................................................19 （一）、互動設計的平台與互動藝術應用實例 ....................................20 （二）、互動設計的特徵 ...........................................................................24 （三）、互動設計的相關領域 ..................................................................25 （四）、互動設計的原則 ...........................................................................25 （五）、互動設計的一般步驟 ..................................................................25 （五）、互動設計的現況 ...........................................................................26 三、擴增實境 ..........................................................................................................28 （一）、擴增實境的應用 ...........................................................................29 （二）、擴增實境的技術 ...........................................................................37 （三）、傳統展示與虛擬互動展示設計之比對 ....................................42 總結 ...........................................................................................................................44 參考文獻 ..................................................................................................................45.

(6) 第三章研究方法與流程 51 一、研究方法 ..........................................................................................................51 二、研究流程 ..........................................................................................................53 （一）文獻探討 ..........................................................................................54 （二）深度訪談 ............................................................................................55 參考文獻 ..................................................................................................................57. 第肆章、訪談個案分析 58 一、個案甲分析與結果 .........................................................................................58 （一）個案背景 ............................................................................................58 （二）訪談整理與結果分析 ......................................................................59 （三）小結 ....................................................................................................61 二、個案乙分析與結果 .........................................................................................62 （一）個案背景 ............................................................................................62 （二）訪談整理與結果分析 ......................................................................62 （三）小結 ....................................................................................................65 三、個案丙分析與結果 .........................................................................................66 （一）個案背景 ............................................................................................66 （二）訪談整理與結果分析 ......................................................................66 （三）小結 ....................................................................................................68 四、個案丁分析與結果 .........................................................................................69 （一）個案背景 ............................................................................................69 （二）訪談整理與結果分析 ......................................................................69 （三）小結 ....................................................................................................71 五、個案戊分析與結果 .........................................................................................73 （一）個案背景 ............................................................................................73 （二）訪談整理與結果分析 ......................................................................73 （三）小結 ....................................................................................................75 六、綜合評析與結論 .............................................................................................76 （一）互動多媒體專案成功因素 ..............................................................78.

(7) （二）發想過程 ............................................................................................79 （三）設計流程與製作流程 ......................................................................79 （四）製作流程所遇到的困難 ..................................................................79 （五）技術上所遇到的困難 ......................................................................80. 第伍章、創作內容與分析 81 一、創作理念與設計流程 ...................................................................................81 二、廣告策略與內容 ............................................................................................82 三、廣告概念發展與互動內容規劃 ..................................................................83 （一）、廣告概念和草圖發展 ..................................................................83 （二）、互動腳本與互動介面組織 ..........................................................84 （三）、環境與裝置設備、製作素材規劃 .............................................88 四、細部設計與結果 .............................................................................................90 （一）、互動腳本與畫面設計 .................................................................90 （二）、互動印製宣傳卡設計 ..................................................................92 （三）、宣傳卡片、海報與立牌設計 .....................................................93 （四）、設計結果 .......................................................................................94. 第六章結論與建議. 99. 一、研究結論 ..........................................................................................................99 （一）、文獻結論 .......................................................................................99 （二）、訪談結論 .....................................................................................100 二、創作討論與結論 ...........................................................................................101 （一）、設計流程討論 .............................................................................101 （二）、創作流程討論 .............................................................................102 三、建議與後續研究 ...........................................................................................104 附錄一訪談大綱 ...................................................................................................106 附錄二個案訪談資料 ..........................................................................................107 附錄三訪談逐字稿 ..............................................................................................108.

(8) 圖目錄圖1-1：實驗式室外系統（引用自科學人雜誌，2002） ...................................1 圖1-2：膝關節的三維模型疊合在使用者看到的女人腿部畫面（引用自科學人雜誌，2002） ........................................................................................................2 圖1-3.1：擷取真實世界的畫面並轉換成視訊影像。圖1-3.2：電腦圖像與某個背景顏色相互抵消。圖1-3.3：液晶顯示器上最後出現的合併影像（引用自科學人雜誌，2002） .......................................................................................4 圖1-4：寶路(Pedigree)在澳洲推出的戶外廣告（引用自外星人看廣告， 2008） .........................................................................................................................5 圖1-5：Tissot 天梭錶網站擴增實境互動畫面（引用自Tissot AR 網站， 2011） .........................................................................................................................6 圖2-1：YKM提袋設計（引用自http://visualfunhouse.com/advertisements/20best-eye-catching-ads-of-2007.html） ......................................................................12 圖2-2：和協島數碼科技空中翻書、增強現實系統（引用自http://www.cisland.com/） .............................................................................................................12 圖2-3：Fanda飲料互動廣告（引用自http：//v.ku6.com/show/ jYuJggYttO8aII8r.html?loc=youce_tuijian） ...........................................................13 圖2-4：立頓茶飲料互動廣告（引用自http：//portal.adkungfu.com/award/4/ award-ruwei/detail-44.html） ...................................................................................13 圖2-5：2009第9屆新一代競賽得獎作品【數位媒體類】多媒體展示櫥窗（引用自http：//bravotaiwan.com.tw/ct.asp? xItem=182350&ctNode=1337&mp=1&lang=） ......................................................14 圖2-6：BlackBeetle（引用自http：//www.youtube.com/blackbeetle） ..............14 圖2-7：我們的私房公共藝術（引用自 http://www.publicart.tw/ ） ................21 圖2-8：德國數位藝術家伍特‧荷爾妮、馬緹亞斯‧安提芬爾在2010年發表的數位設計創作《夢‧水‧樂園》（引用自 http://www.digitalartfestival.tw/ daf11/index.html ） ...................................................................................................22 圖2-9：林經堯互動裝置作品軌跡（引用自 http://www.digitalartfestival.tw/ daf11/index.html ） ...................................................................................................23.

(9) 圖2-10：楊俊『革命』（引用自 http://www.digitalartfestival.tw/daf11/ index.html ） .............................................................................................................24 圖2-11：擴增實境示意圖（引用自http://www.augmented-reality.com/ technology.php） ......................................................................................................29 圖2-12：Zoe Kleinman 以 Acrossair's 擴增實境軟體結合手機攝影機的方式找尋倫敦最近的地鐵站資訊（引用自 http://news.bbc.co.uk/2/hi/8193951.stm） 30 圖2-13：醫療訓練用的擴增實境 .........................................................................31 （引用自 http://www.youtube.com/watch?v=Vycvec8Tl7I&feature=related） ....31 圖2-14：BMW頭戴式擴增實境修理汽車系統 ..................................................31 （引用自http://www.youtube.com/watch? v=P9KPJlA5yds&feature=player_embedded#!） ....................................................31 圖2-15：Best Augmented Reality （AR） mix 2011 ............................................32 （引用自http://www.youtube.com/watch?v=e_T1XRuPyBY&feature=related） 32 . 商品的擴增實境形式則讓消費者有立體體驗的感受，如以電腦攝影機掃描拿在手中製作好的圖形條碼，電腦螢幕中即可即時出現3維立體的汽車模型，隨著消費者手部的轉動作3維的角度觀看（圖2-16），還可互動選取螢幕上的色盤進行汽車不同顏色的即時預覽。 ..................................................32 圖2-16：Best Augmented Reality （AR） mix 2011 ............................................32 （引用自http://www.youtube.com/watch?v=e_T1XRuPyBY&feature=related） 32 . 互動遊戲電子書的形式，兒童可以藉由擴增實境的故事書進行互動的遊戲與學習，以筆記型電腦攝影機掃描拿在手中的故事書，電腦偵測到圖畫中的圖形條碼，螢幕中就即時出現與故事內容相關的立體畫面，兒童還可選取螢幕上的選項進行故事書的互動與遊戲。（圖2-17）。 ..........................32 圖2-17：互動遊戲電子書（引用自 http://www.youtube.com/watch? v=he5mZX1sRXk&feature=related） ......................................................................33 圖2-18：泰武國小古謠傳唱 .................................................................................34 （引用自AR擴增實境使用教學示範 http://www.youtube.com/watch? v=LNkjQtp_hx8） ....................................................................................................34 圖2-19：Best Augmented Reality （AR） mix 2011 ............................................34.

(10) （引用自：http://www.youtube.com/watch?v=e_T1XRuPyBY&feature=related） ...................................................................................................................................34 圖2-20：Best Augmented Reality （AR） mix 2011 （引用自http:// www.youtube.com/watch?v=e_T1XRuPyBY&feature=related） ...........................35 圖2-21：Best Augmented Reality （AR） mix 2011（引用自 http:// www.youtube.com/watch?v=e_T1XRuPyBY&feature=related） ...........................35 圖2-22 Eyepet 可使用玩家的手與寵物互動 .......................................................36 （引用自 http://www.eyepet.com/home.cfm?lang=en_US） ................................36 圖2-23 Augmented Reality Learning Media， The Earth's Structure Prototype ....36 （引用自 http://www.youtube.com/watch?v=1RuZY1NfJ3k&feature=related） .36 圖2-24 頭戴式視訊螢幕顯示方式（資料來源:Azuma，1997） ....................37 圖2-25 頭戴式光學投射顯示方式（資料來源:Azuma，1997） ....................38 圖 2-26 投射式隱形眼鏡示意圖（資料來源: Venkatraman，2009） ............38 圖 2-27 HTC EVO 3D 裸眼 3D 手機示意圖 ........................................................39 （引用自 http://www.htc.com/www/smartphones/htc-evo-3d/） ..........................39 另外透明面板的發明，韓國三星電子（Samsung Electronics）在「SID 2010」發表了透過螢幕可以看到後方真實世界的液晶面板（圖2-28）。展示中，三星電子在面板的後面放置了酒瓶、酒杯等透明度較高的物體，都可一覽無遺，表現出其面板透射率之高。而飛利浦公司也研發新的透明 OLED 面板技術。飛利浦公司表示，應用透明面板，未來行動裝置就可以不必再透過後方攝影機擷取現實世界的影像，使用者可直接透過面板看到後方真實世界，這提升了擴增實境的可視性範圍，並大大的減輕了行動裝置運算效能的負擔，應用上將更為靈活，使用者拿著透明面板便可以直接選擇現實世界中的物件進行擴增實境的互動。（圖2-29）為 Windows Phone 透明概念手機的應用情境。 ................................................................................39 圖2-28 Samsung at SID 2010示意圖（引用自 http://sammyhub.com/2010/05/25/ samsung-at-sid-2010/） ............................................................................................40 圖2-29 WINDOW Phone透明面板手機示意圖（引用自 http:// tw.myblog.yahoo.com/cafecat-maggie/article?mid=5279&prev=5305&next=5224） ...................................................................................................................................40.

(11) 圖 2-30 應用全像術的「液態空間」時裝秀（資料來源:張庭樵，2009） 41 . 圖 2-31 應用微投影技術的手機 ...........................................................................42 （引用自 http://www.youtube.com/watch? feature=player_embedded&v=lzsBwnv_dAg#!） ....................................................42 圖3-1 研究流程 ........................................................................................................54 圖4-1：龍巖生命主題館品牌空間 ......................................................................60 圖4-2 Johny Walker 夢。行者—「躍動夢想」互動廣告設計 .........................63 圖4-3 國立台灣博物館“劍舞楚天”越王勾踐劍暨楚國出土文物展 ..........67 圖4-4 台北當代藝術館—桂綸美小碎花不展 .....................................................70 圖4-5 7-11 OPEN小將戶外擴增實境互動秀 .......................................................74 圖5-1 規劃流程圖 ...................................................................................................81 圖5-2 “ 漂漂老師＂廣告不停輪播畫面 ............................................................83 圖5-3 民眾與“ 漂漂老師＂廣告互動時產生之畫面 .......................................83 圖5-4 互動腳本之角色設定 ..................................................................................84 圖5-5 互動腳本—經過螢幕前，參與者啓動互動畫面 ....................................84 圖5-6 互動腳本—互動過程 ..................................................................................85 圖5-7 互動腳本—互動過程 ..................................................................................85 圖5-8 互動腳本—兩人以上進入互動過程 .........................................................86 圖5-9 互動流程圖 ...................................................................................................86 圖5-10 互動腳本組織圖 .........................................................................................87 圖5-11 系統架構設計圖 .........................................................................................88 圖5-12 裝置配置圖 .................................................................................................89 圖5-13 “漂漂老師”品牌廣告30秒版本 ...........................................................90 圖5-14 台北、香港、澳門三種場景畫面 ...........................................................91 圖5-15 “漂漂老師” 內容介紹的資訊與參與者互動畫面 ............................91 圖5-16 “漂漂老師” 互動結果以程式進行與參與群眾拍照畫面 ...............91 圖5-17 “漂漂老師” 提示拍照畫面及合照卡片列印與下載說明畫面 .......92 圖5-18 “漂漂老師”互動結果列印宣傳卡版型 ..............................................92 圖5-19 “漂漂老師” 宣傳卡片 ...........................................................................93 圖5-20 “漂漂老師”海報與人型立牌 ...............................................................93.

(12) 圖5-20 “漂漂老師” 互動廣告現場展示效果 .................................................94 圖5-21 “漂漂老師” 參與者進入互動場域後的互動畫面 ............................95 圖5-22 介紹“漂漂老師” 說明內容畫面 .........................................................95 圖5-23 參與者離開“漂漂老師” 互動廣告之轉場畫面 ...............................96 圖5-24 兩人以上同時進入“漂漂老師” 互動廣告之展示畫面 ...................96 圖5-25 與“漂漂老師” 互動廣告進行合照畫面 ............................................97 圖5-26 參與者與“漂漂老師” 互動廣告之互動時之動作與表情 ..............97 圖5-27 參與者收集與“漂漂老師” 互動廣告之列印卡片 ...........................98.

(13) 表目錄表2-1：傳統展示與虛擬互動展示設計之比對（錄自：王鄭贛蓉，2011） 43 表3-1：個案基本資料 ............................................................................................55 表4-1 互動多媒體設專案的成功因素、發想過程、設計流程與製作流程、製作過程所遇到的困難與技術困難 ...................................................................76.

(14) 第壹章緒論一、研究背景與動機擴增實境（Augmented Reality，簡稱 AR），是一種即時計算攝影機影像的位置及角度，並加上相應圖像的技術。這種技術的目標是在螢幕上把虛擬世界套在現實世界並進行互動（維基百科，2011）。此技術以VR虛擬實境(Virtual Reality) 為出發的新互動技術。透過虛擬實境設備，我們可以將實際上並不存在現場的物件或景象，投影在指定的真實空間。操作者便可藉由AR擴增實境系統，進行資訊展示或取得（陳泰穎，2008）。AR研究人員製作原型系統的歷史已超過30年。 1960年代電腦繪圖先鋒蘇澤蘭（Ivan Sutherland）和他在哈佛大學與猶他大學的學生，早已開發出第一套系統。1970與80年代，美國空軍阿姆斯壯實驗室、航太總署艾密斯研究中心，以及北卡羅來納大學教堂山分校等機構也都有從事AR的研究。直到1990年代初，波音公司有科學家才創造了「擴增實境」這個名詞，近10 年來由於硬體成本下降，許多AR研究開始開花結果。從1998年起，科學家更是每年召開AR大會（費納，2002／吳鴻譯，2002 ）。. 圖1-1：實驗式室外系統（引用自科學人雜誌，2002）隨著電子技術運算能力的提升與硬體價格成本的降低，目前AR已應用在設備維修、醫療輔助、救援系統、軍事、導覽、遊戲等方面。在旅遊導覽方面，美 1.

(15) 國哥倫比亞大學的「電腦繪圖與使用者介面實驗室」製作了一套實驗式室外系統（圖1-1），用來協助觀光客遊覽大學校園。使用者背包上的筆記型電腦會輸出電腦影像，疊現在外型長得像墨鏡的光學式透視顯示器上，而頭頂上的GPS接收器則會隨時追蹤使用者的位置，隨時校正虛擬影像應呈現的位置與方向（費納， 2002／吳鴻譯，2002 ）。 AR應用在醫學領域方面，美國中佛羅里達大學的AR醫學應用系統，把膝關節的三維模型疊合在使用者看到的女人腿部畫面上，研究人員使用紅外線發光二極體來追蹤腿部的位置。女人彎曲膝部的時候，電腦就會繪出骨骼移動的方式（費納，2002／吳鴻譯，2002 ）。. 圖1-2：膝關節的三維模型疊合在使用者看到的女人腿部畫面（引用自科學人雜誌，2002）在 iPhone 手機以及 Google Android 手機上，目前也出現不少的擴增實境應用。例如：Panasonic在2010年發表的AR Greeting，使用者只要下載安裝，並把官網指定的AR Marker印出來置放在想要的地方，就會出現有趣的小東西（J Chiang，2010 ），像是小動物牛、長頸鹿、鯊魚、老虎從肚子中長出來的效果。台灣研勤科技旗下產品PAPAGO﹣衛星導航系統，也在2011年2月推出iPhone平台 M8.2更新的導航軟體，結合『擴增實境導航』功能，讓使用者利用iPhone鏡頭，取得前方街景，並結合運用衛星定位、影像辨識及PAPAGO圖資等，立刻提供駕駛即時語音導航及虛實整合導航訊息。讓使用者透過手機鏡頭觀看真實的世界，並利用GPS取得定位資訊，佐以PAPAGO圖資為基礎的導航程式引擎，規劃出最 2.

(16) 佳路徑，然後將它們重疊在手機螢幕上把虛擬世界套在現實世界進行導航（胡薏文，2011）。在娛樂方面，Quest Visual 開發兩年，在2010年12月發表的iPhone的「Word Lens」小程式，只要拿著iPhone對準現實生活的外國單字，程式就會開始進行自動比對，然後在外國單字的原處，取代成為翻譯過的單字，因此旅行者可以不用再仰賴翻譯軟體，直接用手機鏡頭對著想瞭解的外國文字或圖形，就可以快速瞭解當地風土民情！《Esquire Magazine》二月號封面女郎是性感女星Brooklyn Decker，為了讓大家盡量去買雜誌，《Esquire雜誌》製作一套AR軟體，使用者將這套AR軟體下載到手機之後，到700間全美國的Barnes & Noble書店的其中任何一家，對準書架，打開這個軟體，就會看到Brooklyn Decker女模，活生生的、熱情洋溢的、站在螢幕裡面。使用者還可以和朋友到鏡頭前面，站在Brooklyn Decker 的身旁拍一張照。另外「Gold Run」運用AR於廣告行銷活動提升，與Gold Run合作的廠商，Gold Run會將廠商加入它的「尋寶平台」。廠商可以指定使用者到已設立AR系統看板的定點，將圖片或物品對著看板的鏡頭，AR技術立刻秀出某個虛擬商品，使用者可以拿出手機拍照，或者原先程式設定為令使用者按下「收藏」的按鈕，再到下一個AR系統看板的地點，等到收藏幾個之後，就可以讓這個使用者得到某些贈品。（Mr. 6，2011）。這樣的行銷手法，與GPS之地點「checkin」拿到贈品的方式不一樣。所謂GPS check-in 是使用者拿著GPS手機導航的智慧型手機，在定點用簽到的方式作定位標記，再提供給系統資料以獲得贈品。「Gold Run」是結合AR擴增實境的系統看板及運用使用者好奇心，以收集到寶藏的成就感，讓行銷活動更有趣。擴增實境以顯示器和使用者的感官結合。當使用者的注意力在真實世界與電腦螢幕間來回切換時，此介面呈現資訊的特殊方式可令使用者花費的額外心力減到最少。讓使用者的真實世界與看到的螢幕中動畫虛擬畫面合而為一（費納， 2002／吳鴻譯，2002）。但擴增實境依然有著因配備而產生的以下缺點，AR的裝置分為兩大類：（1）光學式透視以及（2）視訊式透視（圖1-3.1，圖1-3.2，圖 1-3.3）。光學式：製造光學透視顯示器的一種簡單方法，就是利用分光鏡（beam splitter，一種半鍍銀的鏡子，既能反射光也能讓光穿透）。把分光鏡擺在使用者眼前的正確方位，就能使電腦顯示器的影像反射進入使用者的視線，又仍然能讓周遭環境的光線穿透進來。這類分光鏡也稱為「合併器」，如應用於戰鬥噴射機 3.

(17) 飛行員的抬頭顯示器（費納，2002／吳鴻譯，2002）。而視訊式透視顯示器使影像結合的其中一種方法，就是使合成的圖像與某個預留的背景相抵消，把攝影機傳來的像素一個接一個與合成圖像的對應像素進行比對。當來自電腦合成圖像的某個像素為背景顏色時，顯示器就出現攝影機影像的像素，反之則出現合成圖像的像素，此時圖像會遮住後面的真實物件（費納，2002／吳鴻譯，2002）。因此光學式透視顯示器系統的使用者，可以看見絕對清晰的全視域真實世界；但現有光學式透視系統中的覆蓋圖像仍然是透明的，不能完全遮住後面的實物，於是在某些背景之下，疊在上面的文字看起來會很吃力，而且這種三維圖像可能無法製造出足以亂真的幻覺。此外，使用者看實體物件時，眼睛視物件的距離而聚焦其上，但看虛擬物件時則完全聚焦在顯示器平面上。這就表示，原本打算讓某個虛擬物件與某個真實物件在同一個位置，這種投射方式也許就幾何學來說是正確的，但使用者可能無法同時聚焦在這兩個物件上（費納，2002／吳鴻譯， 2002）。而視訊式透視系統中，虛擬物件可以完全遮住實體物件，而且可以用各式各樣的繪圖效果來和實體物件結合。眼睛對虛擬和實體物件的聚焦方式也沒有差異，因為使用者觀看時，兩者在同一平面上。然而，現有視訊技術仍有其限制，它所呈現的真實世界的視覺品質還相當差，甚至會降到合成圖像的水準，只為了讓虛擬和實體的所有視覺焦點都在相同距離上。目前，攝影機和顯示器的品質仍然比不上人類的眼睛（費納，2002／吳鴻譯，2002 ）。. 圖1-3.1：擷取真實世界的畫面並轉換成視訊影像。圖1-3.2：電腦圖像與某個背景顏色相互抵消。圖1-3.3：液晶顯示器上最後出現的合併影像（引用自科學人雜誌，2002）. 4.

(18) 互動的概念是人去影響(操作)設備，設備因此產生一些回饋給人，達到溝通傳播的效果。可以應用在商業廣告，或者裝置藝術與表演。而運用的方式可以在實體(戶外、室內)或電腦螢幕上進行互動（joooooohs，2008）。寶路(Pedigree)在澳洲推出戶外廣告（圖1-4），廣告提供的可不止是觀賞的功能，它還可以讓觀者跟虛擬狗狗互動。寶路的廣告看板，具跟小狗互動的功能選項。觀者可以丟一顆玩具球或一根寶路假骨頭來訓練小狗，如果虛擬小狗餓了，觀者也可以選擇餵養它，然後看著螢幕中的狗狗吃東西的可愛模樣。除此之外，在與小狗互動之後，還可連結到puppy.com.au瀏覽使用者寵物訓練的資訊跟建議（Linchew，2008）。寶路的互動策略是建立不只讓觀者的印象深刻，還可以吸引其他路人注意的互動式廣告，並在看板中提供的所有都是寶路的商品，建立令人深刻的印象。. 圖1-4：寶路(Pedigree)在澳洲推出的戶外廣告（引用自外星人看廣告， 2008）廣告的形式，由最早的提供給觀眾觀賞、聆聽或接觸，到現在因科技的進步，已開始發展成結合觀眾的思考與互動的形式。隨著科技與硬體的進步，廣告 5.

(19) 除了讓人印象深刻之外，還可以結合擴增實境（ Augmented Reality，簡稱 AR )與互動的方式，達到差異化行銷與針對個人獨特的互動式體驗。以TISSOT天梭表結合擴增實境的互動式展示廣告為例，在英國倫敦街上，設置了名為“T-watch”的展示櫥窗，讓消費者在公共空間可以自由的在不碰觸到商品的情況下，依據自己的喜好，透過碰觸螢幕擁有試戴手錶的服務，如果使用者在螢幕上選擇的手錶型號具有高度或溫度測量、定位等附加功能，虛擬試戴時也會及時在螢幕上顯示出正確的資訊與格式。另使用者可透過網際網路下載程式安裝到電腦，配合web cam 即可以產生與上述相同的互動（圖1-5）。“T-watch”此廣告形式，有效的建立起品牌價值，客戶亦可另設計軟體，將使用者互動過的選項與資料進行分析，去瞭解目標觀眾的喜好。. 圖1-5：Tissot 天梭錶網站擴增實境互動畫面（引用自Tissot AR 網站，2011）. Adobe 在2011年一月公佈一份新的名為「Digital Ad Engagement: Perceived Interactivity As a Driver of Advertising Effectiveness」的調查報告，發現iPad等裝置上的數位雜誌廣告，遠比平面廣告更能讓讀者具有更多的互動與參與，並可激起更強烈的購買慾望。此報告由康乃狄克大學針對18歲到32歲的學生讀者所進行的一項調查，調查對象同時觀看紙本廣告以及iPad版雜誌廣告，並且由他們針對每則廣告進行評分，評分為1-9分之區間。結果顯示，iPad上的互動廣告比平面靜態廣告，更能引起讀者的購買意願。廣告主可以在iPad上藉由動態圖片、聲音、幻燈 6.

(20) 片以及動畫的呈現，使讀者更接近並鍾愛這個品牌，並留下更深的印象（Hsu， 2011）。美國廣告業鉅子威廉.伯恩巴克曾說“85％的廣告是沒人看的”，於此廣告的劣勢下，如何運用互動廣告與擴增實境的技術的優勢，結合良好的視覺形象，讓廣告在數位互動展示時提升觀眾的情境互動與感應互動，本研究期能為產業界與學界整理歸納出一套適切的數位互動廣告設計企劃流程架構，作為互動廣告研究與創作時的參考。. 7.

(21) 二、研究目的與目標目前台灣實際應用擴增實境的多媒體互動廣告櫥窗處剛萌芽階段，數位互動廣告設計者以擴增實境技術方式表現有待研究，而廣告主與廣告業者對擴增實境設計之數位互動廣告製作之成效尚無具體評估，本研究目的在針對擴增實境如何應用在數位互動，建立一套創意發想、企劃、視覺與互動介面設計的流程，提供廣告、擴增實境業界與廣告設計者利用擴增實境在設計應用方面的建議。. 三、研究與創作目標 1. 整理廣告、互動廣告、擴增實境實例與相關技術及應用層面等現況與知識 2. 歸納擴增實境應用於多媒體廣告互動之設計流程 3. 運用擴增實境進行數位互動之廣告設計創作. 8.

(22) 參考文獻 1.. 維基百科（無日期）。擴增實境。上網日期：2011年3月15日。網址：http:// zh.wikipedia.org/zh-tw/擴增實境. 2.. 陳泰穎（2008）。AR擴增實境展示應用。上網日期：2011年3月15日。網址：http://content.ndap.org.tw/index/?p=758. 3.. 費納（2002），／吳鴻譯（2002）。擴增實境︰虛擬與實境的無限延伸。上網日期：2011年3月15日。網址： http://sa.ylib.com/read/readshow.asp? FDocNo=67&CL=4. 4.. Chiang, J.（2010）。Panasonic 3D Viera AR：「我體內的怪物已經長這麼大了！」。上網日期：2011年3月15日。網址：http://chinese.engadget.com/ 2010/09/09/about-panasonic-3d-viera-ar/. 5.. 胡薏文（2011）。擴增實境（Augmented Reality）的３大新創意，竟讓它和平板電腦並列2011最夯趨勢！。上網日期：2011年3月15日。網址：http:// mr6.cc/?p=5644. 6.. 互動廣告領域：真實的人的互動。上網日期：2011年3月15日。網址：http:// blog.shanger.net/article.asp?id=402. 7.. Lin, Chew.（2008）。逛街逛累了嗎?來試試看互動小狗狗看板吧!。上網日期：2011年3月15日。網址：http://www.iloveclick.com.tw/2008/11/20/逛街逛累了嗎來試試看互動小狗狗看板吧/. 8.. Lin, Chew.（2010）。用你的手機相機跟著麥當勞一起玩互動。上網日期： 2011年3月15日。網址：http://www.iloveclick.com.tw/2010/05/15/用你的手機相機跟著麥當勞一起玩互動/#more-4303. 9.. Hsu, Chris.（2011）。數位互動廣告更能提高購買意願？。上網日期：2011 年3月15日。網址：http://mag.udn.com/mag/digital/storypage.jsp? f_MAIN_ID=322&f_SUB_ID=2920&f_ART_ID=298609. 9.

(23) 第貳章文獻探討文獻探討由互動廣告、互動設計與擴增實境三方向進行探討與整理。. 一、互動廣告「行銷要靠傳播協助，傳播的要角之一是廣告，廣告效果可以大得令人驚心，也可以小得令人傷心。」（黃文博，1998）。隨著時代變遷、多媒體技術發展，企業為突顯各自的品牌特色，為廣告帶來新的面貌。企業為讓消費者及使用者瞭解企業或產品的形象，運用廣告作為企業活動傳達的手段。目的除了刺激消費者的慾望外，更能以廣告的過程掌握消費者需求，並促進購買活動（巫淑玲， 2006）。廣告是行銷過程的一個環節，行銷是了解環境，廣告則是要了解人的需求。廣告注重塑造，讓消費者對產品產生認同，影響消費者的心理型態產生「品牌偏好」。行銷則涵蓋了廣告以及其他功能，包含了將商品從製造商推向消費者的整個過程（黃文博，2004）。根據廣告的體驗行銷理論：若消費者擁有對於體驗結果正向的態度，對商品則會有正向的忠誠度（王仁宏，2005；張鈺禾， 2006；陳蓉瑩，2004）。而在廣告的體驗類型中，情感體驗相較於思考體驗能帶來較好之品牌態度，消費者會因體驗所造成的品牌態度，對於購買意圖會產生正向的影響（潘韻如，2005）。同時消費者若在體驗構面中有相當程度之體驗，對於消費者在該品牌之態度構面上，呈現顯著的包含認知面與情感面之正向關係（江義平、李怡璇、江亦瑄，2008）。根據Smith及Swinyard（1983）的研究也發現，消費者若在購買產品或是服務之前，能夠擁有越多的體驗，則對商品就擁有越強烈的態度。因此企業主動提供消費者全面性的消費體驗，體驗的結果會是正面的，對於消費者品牌偏好與品牌忠誠度也能提升（岳彩文，2003）。以廣告中的電視廣告而言，電視廣告具聲、像、色，視、讀，兼具報紙（文字）、廣播（聲音）和電影（動態影像）的多樣視聽特色。電視廣告生動活潑的特點，是一種現代化也是引人注目的廣告形式（黃文博，2004）。而多媒體互動的互動廣告，則在電視廣告的特色以外，又加強了消費者正向體驗且客制化的體驗結果。. 10.

(24) 「互動廣告」，William等人（1992）定義互動廣告是廣告者與消費者之間的互動。Hoffman（1996）認為，在互動媒體下的行銷模式是雙向溝通的，包括機器互動以及人員互動。Steuer（1992）則定義使用者能夠在一個媒介環境中，即時地參與更改其形式與內容。Raman（1996）則引用Rice（1984）的『人機互動也是一種溝通』觀念，指出互動廣告除了人員互動之外，也要包括人與媒體之間的互動，（Hoffman， Donna. and Thomas. Novak，1996）稱為機械互動。透過機器互動，消費者能夠主動選擇廣告訊息，擁有控制訊息內容的權利；經由人員互動，消費者能夠和廣告主及其他消費者溝通。（莊雅茹，2011）。因此廣告在消費者選擇資訊時，提供彈性的選擇機會，並且回應消費者修改廣告內容的指令，便是互動的廣告（Raman，1996）。互動廣告所提供的互動，是指消費者可以直接操縱廣告內容，使廣告內容改變。例如在廣告內容上點選想看的內容。經由消費者點選之後，整個廣告內容就改變，依據點選的指令進行廣告內容的呈現（耿慶瑞、黃思明、洪順慶， 2001）。互動廣告突破了時間和空間的限制，應用先進的互動傳播技術，採用更加合理的互動傳播模式，無論在信息傳播的量與速度上，遠遠超過了傳統廣告。同時提升傳播廣告信息或消費者接收的便利性、低成本性和時效性。尤其互動廣告全新建構的傳播與接受雙方主體間關係，讓消費者發揮對於廣告的參與熱情，激發消費者主動創作廣告、傳播廣告的欲望。因此，也形成了互動廣告相對於傳統廣告的諸多優勢。（莫梅鋒，2008）由溝通方向，互動式廣告具有三個特點：1. 消費者參與：消費者以雙向性溝通機制的方式對機器進行操控，觸動廣告效果。2.客製化的表現：由雙向性溝通的方式，不同消費者控制的因子會因人而異，呈現客製化的結果。3.傳達的目的：互動性廣告的本質還是廣告，除吸引消費者目光外，重要的是能夠傳遞廣告訊息（Steuer，1992；Roman，1995）。. 11.

(25) （一）、互動廣告的類型與案例分析互動廣告以巧妙構思和與電腦高科技新技術的融合，獲得大於想像的展示效果，使廣告深入人心。現常見的互動廣告的類型可分為情景互動廣告和感應互動廣告：. 1. 情景互動廣告：是指需要廣告畫面外的物體來參與的廣告。例如：廣告中提袋的提繩，配合顧客提取與袋子上的圖片進行互動。（圖2-1）. 圖2-1：YKM提袋設計（引用自http://visualfunhouse.com/advertisements/20-best-eyecatching-ads-of-2007.html）. 2. 感應互動廣告：以電腦視覺、程式互動、虛擬實境、擴增實境等技術為基礎，使廣告內容能夠根據人體動作而產生相應變化。例如：和協島數位科技有限公司虛擬實境試驗室開發的“空中翻書”（圖2-2）、“ 增強現實系統”等系列產品，把單一的平面廣告改造成集趣味性和娛樂性互動多媒體廣告形式。（MBA智庫百科，2011）. 圖2-2：和協島數碼科技空中翻書、增強現實系統（引用自http://www.cisland.com/） 12.

(26) 根據以上兩種互動廣告類型，應用於商業有以下實例：著名飲料的商業互動廣告（圖2-3），版面色彩設計與所宣傳的商品相呼應，音樂設計也突出商品品牌的個性與現代感，讓消費者與商品的代言圖像作遊戲互動，加強消費者對商品的印象與產品品牌偏好。另一著名茶飲料的網站商業短期互動廣告（圖2-4），與傳播流行趨勢結合，讓消費者成為商品的代言人，利用互動方式將消費者頭像放入廣告影片中，可即時製作好消費者的代言廣告影片，以社群連結的方式，寄送給親友或分享在社群網站上，達到傳播的效益，提升商品與消費者之間的關係、品牌形象與廣告效果。. 圖2-3：Fanda飲料互動廣告（引用自http：//v.ku6.com/show/jYuJggYttO8aII8r.html? loc=youce_tuijian）. 圖2-4：立頓茶飲料互動廣告（引用自http：//portal.adkungfu.com/award/4/awardruwei/detail-44.html） 13.

(27) 國立雲林科技大學數位媒體設計系暨設計運算研究所在2009年第9屆新一代【數位媒體類】競賽得獎作品，透過新形態的多媒體展示櫥窗（圖2-5），使用者在觀看到櫥窗展示即可得到實質回饋，展示櫥窗除了廣告的效果之外，更重要的是個性化功能與跨品牌的試衣服務，觸發其購買動機。透過互動的方式使顧客成為廣告的主動查詢者，而非被動接收者，系統還可以將顧客選擇過的商品列印出清單，讓顧客消費時可一目了然，使廣告的針對性更強，效果更為顯著（王鄭贛蓉，2011）。. 圖2-5：2009第9屆新一代競賽得獎作品【數位媒體類】多媒體展示櫥窗（引用自 http：//bravotaiwan.com.tw/ct.asp?xItem=182350&ctNode=1337&mp=1&lang=） Volkswagen Beetle 汽車則以Youtube的形式，Black Beetle的主題，取車名與甲蟲之意，發展廣告創意。以甲蟲在叢林越野撕裂Youtube的震撼形式，表現車子優越性能，最後留下來的蜻蜓則會依據使用者滑鼠點擊的位置即時追蹤。（圖2-6）. 圖2-6：BlackBeetle（引用自http：//www.youtube.com/blackbeetle） 14.

(28) （二）、互動廣告的優勢根據莫梅鋒（2008）的整理，互動廣告具有以下六大優勢：. 1. 廣告表現更生動：廣告為引起消費者的注意力，加強其吸引力尤其重要。傳統廣告中，電視廣告比廣播廣告或平面廣告更具吸引力，在於它能同時為消費者提供聲、像、色，視、讀的刺激和享受。互動廣告結合互動功能，滿足了消費者的控制慾與提供了臨場感，比傳統電視廣告提供消費者更生動的視覺與聽覺刺激、更加生動、有趣。互動廣告的使用體驗，更能讓消費者記憶猶新。 . 2. 時效性更強、效率更高：互動廣告實現廣告主與消費者的即時溝通，在時效性上具傳統廣告無法比擬的競爭優勢。互動廣告藉助高效率的互動媒體，可即時實現與消費者的互動溝通，從而實現了更好的廣告傳播與反饋效率。 . 3. 無限制的接觸時間或空間：傳統廣告一般只有幾秒、幾十秒的播放時間，或者很小的空間來傳播信息，容易導致信息的單調、片面和殘缺不全。而互動廣告則為消費者提供更多的選擇，只要消費者願意，廣告就可以有無限的接觸時間或空間，大大提升消費者獲取商品更多角度、更完整的信息，延伸了廣告產生的時間效益，更有利於消費者做出合理的消費決策。 . 4. 信息內容與形式的個人化：傳統廣告一般是針對特定的消費族群而設計製作，因此內容與形式的大眾化趨勢明顯。但千篇一律的大眾化廣告呈現，容易使消費者感覺廣告與他本身無關，進而缺乏對廣告的注意與接受的興趣和動機。互動廣告通過互動媒體或內部程式可以精確地識別個別消費者的興趣，並設計有針對性的廣告內容與形式，精準地投向具興趣的目標消費者。 . 5. 精準地投放與效果測量：傳統廣告是以廣告媒體的受眾人口統計學特徵評估，進行媒體組合和投放，這種投放方式無法精準掌握受眾，且效果測量也通常是以間接的手段進行；互動廣告則可以經由設計直接根據目標消費者個體的特徵進行接觸點管理，還可以直接跟蹤消費者的反應，達到精準的測量廣告效果。 . 6. 將廣告效果直接轉化為銷售額：傳統廣告是以廣播電視或平面媒體單向對消費者進行傳播，若目標消費者對廣告商品產生興趣，或因時間或空間等因素的不方便，即使有購買意願但無法立即採取行動，隨著時間流逝，購買意願逐漸降 15.

(29) 低，逐漸失去促銷的機會。但通過互動媒體，互動廣告可以生動展現商品的性能，並配合互動購物平臺，當消費者的購買意願被刺激產生就可以立刻進行訂購，因而廣告效果直接轉化為銷售額的機率大大提升。. （三）、廣告互動的溝通特徵互動溝通需要閱聽人高度的涉入，因此一個人必須主動的選擇想要的資訊內容（Rogers， Everett M，1986），而且是小眾的、可藉由網路或其他科技方式鎖定閱聽人上網的資訊位址；而傳統線性溝通的特徵是大眾的、匿名性的（Rust與 Roland等人，1996）。 Anderson（1996）、HaandJames（1998）、Heeter（1986;1989）與Ku（1992）等文獻中，皆認為互動性是由多個互動構成，因此互動性具有多構面，但有互動並不一定具有互動性。根據耿慶瑞，黃思明，洪順慶（2002）的研究整理，互動性的衡量具四個構面：. 1. 衡量參與者平等的構面：參與互動的雙方地位平等程度，及連結不同資訊來源的程度。. 2. 衡量動態溝通過程的構面：當參與互動者發出一項訊息之後，另一方回饋的速度；在參與過程中能否隨時中斷溝通；及參與互動溝通的雙方感覺在交談的程度。. 3. 衡量訊息控制的構面：參與互動者可以主動選擇自己想要的訊息內容的程度；互動溝通針對個人需求回應之程度；及參與互動溝通的雙方是否針對對方的訊息做回答。. 4. 衡量達成相互了解目的的構面：參與互動者是否感覺他真正出現在現場的感覺，以及參與互動的雙方互相了解溝通內容的程度。 Rogers（1986）提出互動溝通與線性溝通差異有三點：. 1. 互動性（Interactivity）：新的溝通系統在進行互動溝通時，主要著重在增加系統的互動性，也就是使用者與媒介可以相互交談，相互產生回饋。 16.

(30) 2. 分眾化：新媒體透過互動溝通，使傳送資訊能力提高，資訊的數量激增並且內容趨於多元，可提供使用者多重選擇。因此使用者對於資訊選擇的權力增加，可以只針對自己想要的內容進行接收；傳統媒體透過線性溝通，觀眾只能對所提供內容照單全收。. 3. 非同步性：新媒體進行互動溝通，使用者可以超越時間的限制進行互動，即使使用者錯過某一段資訊傳送時間，還是可以獲得完整內容。新媒體一般具有較高的非同步性，舊媒體如電視、收音機則較低，並且必須仰賴其他媒體來達成非同步，如：錄音機、錄影機。但舊媒體中如書與報紙仍然具有非同步能力。. （四）、互動廣告的互動層次廣告目標如希望消費者看廣告的時間越久越好，行銷人員就要設計互動層次較高的廣告，使消費者願意投入較多的時間看廣告，或與廣告產生較深的互動，並可以建立品牌與產品知名度。另外如果廣告可以和銷售通路連結進行線上購買，將有機會讓消費者在產生購物慾望時即時完成交易（耿慶瑞、黃思明、洪順慶，2001）。耿慶瑞（1999）依據廣告個案為基礎，從互動溝通特性及互動性，將互動程度分成四個互動層次。以互動性高低為基礎作為層次劃分的準則，層次越高，代表互動性越高；並考慮從與廣告互動再擴展到人際之間互動的互動範圍，消費者所感受的差異以及消費者的投入程度。第一層為內容互動：提供廣告內容讓消費者直接操縱的選擇；第二層為連結與查詢互動：提供消費者資訊查詢及其他與廣告產品相關資訊的超連結。包括FAQ、搜尋功能、廣告產品等相關網站連結；第三層為社會互動：是指網路互動廣告提供社群之間具有社會情感的互動。這層的互動就像在實際社會一樣，有個人與個人、個人與群體、群體與群體的交際與互動；第四層之個人化的互動，由於需要溝通與相互了解，因此為最高層次的互動。主要以提供個人化、客製化、一對一的虛擬互動，使消費者感覺廣告主與他在進行一對一的互動（耿慶瑞、黃思明、洪順慶，2001）。廣告的目的則在於協助品牌與消費者建立關聯，進而激發消費動機（巫淑玲，2006）。高互動性的廣告為消費者所帶來的價值如下：. 17.

(31) 1. 增強學習作用：增加互動性對於學習有增強作用，亦即可以加速學習（Rafaeli， Sheizaf，1988）。以互動廣告而言，消費者與廣告互動（機械互動或人員互動）時，消費者會更容易瞭解產品，並且更容易記得購買它。. 2. 資訊即時化：在傳統廣告裡，要更改即時資訊幾乎是不太可能的，然而互動廣告透過網路或科技方式卻可以達到即時更改與傳送，因此消費者可以得到最新且即時的產品資訊。Raman（1996）。. 3. 與消費者更緊密的互動：. (1) 廣告主可以藉由設計進而追蹤消費者，增加滿意度：當消費者進入網站時，廣告主可知道消費者是如何進入的，並且也可以統計顧客看了哪些內容，停留多久。因此廣告主可以根據這些資料改進廣告內容，增加消費者的滿意度。. (2) 消費者有主控權：消費者可以自主的選擇看或不看廣告，也就是消費者是主動選擇暴露（desiredexposure）在互動廣告之前。（Raman， Niranjan V. ，1996）. (3) 與產品建立所有權關係：消費者對產品具歸屬感，例如顧客在線上訂購汽車或皮包時，可以直接在線上選擇的顏色或材質，由於消費者自己參與了產品設計，因此提高了對商品的認同感受。根據耿慶瑞等人（2001）的研究結果發現，互動層次越高，消費者願意投入廣告的時間會越久。因此想要以更新穎且有趣的方式吸引消費者目光的產品或廣告公司，皆可據此考慮以互動廣告的方式與現有廣告方式並行，來推銷其產品或服務，讓消費者有更高的目光注意率以及對商品更長的停留時間，並可改善過去以廣告單向傳遞訊息的情況，讓消費者感受更深的參與感與更高互動性。同時還可以藉由互動的設計，透過消費者的操作降低消費者因不適合或與預期不合而產生的風險（莊雅茹，2011）。. 18.

(32) 二、互動設計互動設計（Interaction Design，縮寫 IxD 或者 IaD）是定義與設計人工製成物品系統行為方式的設計領域。例如軟體、行動裝置、平板電腦、PDA、移動設備以及系統的組織結構。也有定義「互動設計」為「設計一套支援人們日常生活與工作的互動性產品」（陳建雄，2006）。互動設計師首先研究進行使用者以及潛在使用者，再設計互動的行為，並從有用性、可用性和情感因素（usefulness， usability and emotional）三方面來評估設計的效果（http://zh.wikipedia.org/wiki/互動設計，2011）。互動性（Interactivity）是指互動溝通的互動程度，也就是對互動溝通特性的衡量。互動性由多個互動構成，但是有互動卻不一定具有互動性。根據耿慶瑞（1990）的研究，將互動溝通特性分為十個構面：參與者公平程度、連結性、回饋快速、對話、控制過程、控制內容、個人化、回應能力、相互瞭解、社會臨場感。當科技變成了文化的一環，在互動上的設計便廣泛的影響著人們整體的生活模式。我們可以突破傳統的束縛與現代的結合，策劃拼貼和合成影像、以虛擬成像進行虛與實的互動，形成視覺和聽覺參與對話，使許多創意成為更具可塑性的構思與想法。數位科技的快速發展下，軟硬體和介面快速的不斷更新訊息，轉化了藝術與設計的本質，相關設計也因應衍生出結合許多跨領域的應用設計。另外，結合網路速度與連結的無遠弗屆、傳輸的使用性和便利性，使人們對於互動有更新的認知，群眾在與作品「互動」過程中，一方面掌握了對作品的主控權，並且因參與作品表現，拉進了兩者間的距離，設計者則讓「互動」成為焦點，進行傳遞藝術與設計理念的目標（王鄭贛蓉，2011）。高科技藝術，如：電腦藝術、雷射光藝術作品顯現出來的影像，並結合人類智慧和科技製作的大量新穎技巧，在美學領域中帶來明顯意義（何廣政，1994）。而「後現代藝術是一種融合聽覺、視覺、觸覺三種文化於一體的複合式文化多媒體藝術，具備了複合性與多元性，是當代藝術發展的一個新的趨勢方向。」（徐沛君，2007）。. 19.

(33) 新媒體與傳統媒材不同，係指利用一般稱為第四媒材的電腦、網路等，以電腦動畫、多媒體裝置、科技進行製作。新媒體藝術在形式上分為數位平面影像、錄像藝術、聲音藝術、網路藝術、互動式裝置、數位與表演等呈現，各有巧妙不同。當電腦科技與表演藝術等其它藝術方式相連結時，創意可以表現在表演者的舉手投足間，可以使舞台燈光、音樂音效更加鮮活。電腦藝術也可將實體虛擬為 2D 數位影像或 3D 成像（虛擬雕塑）與虛擬實境等作設計，以電腦軟體完成影像和虛擬佈景的世界。當觀賞者參與時附加互動模式，結合網路通訊連結和傳遞，在互動中加入資訊連結或諮詢或商業行為的存檔和統合，可大大超越傳統媒材的可能性（王鄭贛蓉，2011）。. （一）、互動設計的平台與互動藝術應用實例互動設計應用在平台的形式上，充分結合了展示科技的技術，目前平台的應用大多以電腦、平板電腦與智慧型手機三種為主。以電腦作為展示的互動設計可以運用較複雜的電腦，結合各種尺寸的投影螢幕或液晶螢幕呈現，缺點則是不可移動，僅能在固定的場地作展示。平板電腦因為結合螢幕與電腦在一體，提供了使用者可攜帶與操作方便的特性，使用者在與故事元件的互動過程中，因為可點選螢幕，而且螢幕的範圍較智慧型手機大，因此較不容易誤觸，因此豐富了設計腳本故事內容的視覺呈現，但大螢幕裝置卻有攜帶不便的缺點。智慧型手機的特色在於攜帶方便，可以單手掌握，並大量減輕使用者於互動過程中手部的負擔，但因為螢幕較小，在介面與互動畫面的設計上就會受到一定的限制，點選上也較為不易，所以在設計遊戲或手機導覽的過程中，必須盡量降低「互動操作方式」的比重，或設計以「故事體驗」與「影音效果」欣賞為主的互動內容，來避免過多或複雜的「互動」而干擾了流程的進行，並讓使用者更沉浸於我們所設計的情境之中。互動在與藝術結合的呈現中，往往可以較與商業的結合方式突破更多創意的限制，因此根據以上的平台類型，探討互動設計應用於藝術領域有以下實例。. 1. 黃心健之『我們的私房公共藝術』具有工科背景的數位科技藝術創作者黃心健，擅於結合了電腦技術，將腦海中的夢幻國境和異想世界呈現出來。在作品『我們的私房公共藝術』作品 20.

(34) （如圖2-7），利用新的網路與電腦技術，讓每個市民都有創作公共藝術的工具與機會，可以主動成為公共藝術的設計師。公共藝術的目的是在公共的場域，建構出『美』，讓來往的市民，在每日的接觸中，累積並轉換他們的氣質，進而讓城市的生活變得更美麗。創作者放大民眾參與計畫的比例，將公共藝術的概念延伸到作品中，讓公眾的事務，由群體一起互動，共同產生一個對於美麗的期望與願景。由於科技與網路的進步，創作者透過網路界面以藝術村的形式設計一個互動網站，民眾可以在網路上進駐藝術村並成立自己的工作室，創造出屬於自己的私房公共藝術。而創作的工具界面則由精心挑選的本土傑出創作者：藝術家、音樂家、建築師、詩人、導演、作家等等，透過訪談的方式，萃取出他們創作中的靈感來源，再轉換成電腦上的虛擬視覺積木，讓民眾可以直接利用，來構建自己的藝術創作，並可一邊瞭解這些創作者的創作源頭。網路的無遠弗屆，打破公共藝術在地域上的限制，當市民將創作出的藝術作品在網路上發佈，同時也會在捷運南港展覽館站的現場電視牆播放，讓每個人都可以創作藝術品，也讓全體民眾共同創造對於美之想像的表現方式，而來往的行人乘客，在看到自己喜歡的作品時，還可以在現場裝置上表達自己的喜悅之情，並可以即時回饋給創作者，達到多方互動與溝通的方式，打破創作者與欣賞者的藩籬。網站還定期策展發起展覽主題，讓民眾可以發揮對於同主題的不同想像，達到聯展的目的。以前，民眾只能從欣賞的角度，讓美滲透他們的生活，而在這件公共藝術作品之中，每個人都可以親身參與製作，去感受藝術創作的熱情與喜悅（http://www.publicart.tw/ ）。. 圖2-7：我們的私房公共藝術（引用自 http://www.publicart.tw/ ） 21.

(35) 2. 伍特‧荷爾妮、馬緹亞斯‧安提芬爾之《夢‧水‧樂園》德國數位藝術家伍特‧荷爾妮、馬緹亞斯‧安提芬爾在2010年發表的數位設計創作《夢‧水‧樂園》（如圖2-8），將核能產業的遺址，以「半衰期夢境」呈現。以夢、水、樂園的3D影像輸出，結合黑膠唱片、單頻道投影、塑膠玻璃盒、唱盤的方式，由兩個樹脂玻璃箱堆疊而成。象徵德國邁入核能時代至今，境內有兩地已經成為「技術可行幻想破滅」的同義詞：卡爾卡市（Kalkar）的快速增殖反應爐以及阿瑟二號核廢場（Asse II）。《夢‧水‧樂園》的作品上層放置一台七零年代設計前衛的唱片機，中間升起一座水晶高塔。塔體向下延伸，穿過唱片機進入下層玻璃箱，觀眾從作品外可以觀看到玻璃箱連著一個地下礦場的模型，並像雷達般不停轉動。而作品上方則以投影在後方螢幕上的方式播放影片。影片的第一部分：卡爾卡市的冷卻塔如今成了一座遊樂園。在第二部分中：鏡頭在塔內飛梭，沿著內牆上巨大的旋轉木馬抵達塔口，直入天際。當觀眾靠近作品時，作品的感應器會將訊號傳送至唱片機，驅動唱片機自動播放有如冷卻塔內的回音，又有如「夢的唱片」的音樂，觀眾也可以透過玻璃箱前垂掛的耳機聆聽聲音。這個夢境描述一個需要耗費大量的電力且狀似鳥的奇怪生物，能夠帶著整個住宅區飛起來，諷刺核能對於環境的影響。. （圖2-8：德國數位藝術家伍特‧荷爾妮、馬緹亞斯‧安提芬爾在2010年發表的數位設計創作《夢‧水‧樂園》（引用自 http://www.digitalartfestival.tw/daf11/ index.html ） 22.

(36) 3. 林經堯《軌跡》林經堯創作的軌跡（圖2-9）互動裝置作品，觀眾透過裝置錄製聲音後，即可在設計如同浩瀚宇宙的畫面作品中，留下特定的一個時間軌跡點，並可互動找出這個軌跡點，產生漸弱聲響的回音，象徵每個人都依照自己的軌跡生活，偶而與他人碰撞。而我們規律的行為模式構成了這個社會，就像行星構成宇宙。在作品中交會的事件撞擊會譜出動人的和諧樂音，是一種無機但卻隱含哲理的生命之歌。作者利用電腦圖學運算，讓參觀者可以透過簡單的界面來創造美麗絢爛的視覺畫面，而經過電腦模擬出的每一個圓形軌跡彼此碰撞，產生一種看似隨機卻又規律的循環音樂，配合視覺而創造一種數位卻有東方內涵的聲音視覺作品。. （圖2-9：林經堯互動裝置作品軌跡（引用自 http://www.digitalartfestival.tw/daf11/ index.html ）. 4. 楊俊之「來來去去的革命」楊俊由2005年作品「來來去去的革命」重新發展，在2011年的新製作『革命』（圖2-10）由三段動畫組成，分析革命的機制及過程。藝術家引用了歷史中不同革命的象徵場景作為畫面設計，如天安門隻身阻擋坦克車的抗議者、德拉克洛瓦（Eugene Delacroix）筆下的法國大革命「自由領導人民」畫作、以及蘇聯二月革命等。在展出現場，當觀眾走入這件裝置作品，觀眾的身影也被即 23.

(37) 時投射並合成在動畫中。觀眾在投影的牆面上看見自己成了革命群眾的一員，但無法真正的「參與」，不能和動畫中的人們一同去拉扯象徵霸權的雕像，卻會經歷不同的革命階段場景。在第一段動畫中，既存的威權（以雕像作為象徵）被群眾運動推翻，然後取而代之的是一個新的霸權。第二段動畫則是失敗的革命－投影畫面出現的是天安門廣場前被坦克車武力鎮壓的群眾。而第三段動畫，強人雕像成為城市行銷的地標，使革命脫離了原先的社會與歷史脈絡，成為觀光化、商品化的時尚消費品。作品脫離了互動科技追求當下滿足與遊戲性的慣性期待。以「革命」中的個體能夠選擇什麼位置？讓「無從互動」的制約作為一個弔詭的設局，使觀眾帶著不滿足與疑問重返現實和省思。. （圖2-10：楊俊『革命』（引用自 http://www.digitalartfestival.tw/daf11/index.html ）. （二）、互動設計的特徵媒體（Media）包含文字（Text）、圖像（Graph）、聲音（Audio）和影片（Video）。多媒體則是運用兩種以上的媒體作為結合產生的作品，互動設計與多媒體結合後，成為了一種獨立且形式上更豐富的創新形式。互動設計的特徵指的是基於特定平台之信息即時交流的技術與方式。互動的本質與類似遊戲，在遊戲中，遊戲具有某種特定的目的，使參與者或觀察者沈浸於非實踐興趣中的某種潛 24.

(38) 在性。無論是遊戲或是藝術，都不僅僅具有某種可直接看到的東西，同時也包含著我們所不能直接觀察的東西（李建盛，2004）。「互動」設計以遊戲的方式或在觀眾參與時，運用選擇性的互動科技，進而改變視覺形式的呈現。在「互動」中，觀眾可以有角色互換或是經歷的路徑、結局的不同外，也擴展了觀「看」遠、中、近景，特寫、平角、俯角、仰角，正面、側面、背面等視角的多元性，使觀眾在創作媒材的互動中次次呈現不同的面貌。互動設計結合的「視」、「聽」元素與我們所知的錄影、電視、電影的表現手法相同，但呈現的特點更是鮮明的。. （三）、互動設計的相關領域互動設計的相關設計領域包含了平面設計、產品設計、藝術設計、工業設計等。使用者界面是互動設計的結果的自然體現，但互動設計不等同使用者界面設計。互動設計的出發點在於研究人在和物的交流（dialog）、人的心理模式和行為模式。. （四）、互動設計的原則認知心理學為互動設計提供基礎的設計原則。這些原則包括心智模型（mental model），感知／現實映射原理（mapping），比喻（metaphor）以及可操作暗示（affordance）。這些原則大都在The Design of Everyday Things中被提及（http://zh.wikipedia.org/wiki/互動設計，2011）。. （五）、互動設計的一般步驟互動設計師都遵循類似的步驟進行設計，為特定的設計問題提供某個適合的解決方案。以下是互動設計步驟的七大要點：. 1. 使用者調查與研究：介入觀察、非介入觀察、採訪等調查研究之方式，互動設計師必須調查了解使用者及其相關使用的場景，從而對其有深刻的認識（主要包括使用者使用時的心理模式和行為模式），為後繼設計提供良好的基礎。. 25.

(39) 2. 概念設計：通過綜合考量使用者調查研究結果、技術可行性、以及商業機會，互動設計師依據設計的目標創建概念（目標可能是新的軟體、產品、服務或者系統）。過程可能包含腦力激盪、交談、細化概念模型等活動。. 3. 創建使用者模型：以設計方法中的情境故事法、要角法等方式，基於使用者調查研究得到的使用者行為模式，設計師創建故事場景、使用者故事或者腳本來描繪設計中產品將來可能的形態。設計師通常以設計使用者模型（persona）的方式來作為創建場景的基礎.. 4. 創建界面流程：互動設計師一般採用wireframe來描述設計對象的功能和行為。在wireframe中，利用分頁或者分格的方式，來描述系統的細節。界面流程圖主要用於描述系統的操作流程。. 5. 開發原型以及使用者測試：互動設計師通過原型設計來測試方案是否可行。原型大致可分三類：功能測試、感官測試以及實現測試原型，原型可以是實物的，也可以是電腦模擬的；可以是高度模擬的，也可以是大致相似的。這些原型用於測試使用者和設計系統交互的狀況。. 6. 實行：互動式設計師需要參與設計方案的實行，以確保方案實行是嚴格且忠於原來的設計；另外，也要準備進行必要的方案修改，以確保不傷害原有設計的完整概念。. 7. 系統測試：系統實現完畢的測試階段，可能通過使用者測試，發現設計的缺陷；設計師再根據需要對設計方案進行修改。（http://zh.wikipedia.org/wiki/互動設計，2011）. （五）、互動設計的現況互動設計在任何產品的設計和製作過程中都是不可以避免的。隨著產品和使用者體驗日趨複雜、功能增多，新的產品不斷湧現，給使用者造成的認知摩擦日益加劇的情況下，人們對互動設計的需求變得愈來愈顯性，因此觸發其愈發迫切在理論和實踐上作為單獨的設計學科。然而互動設計的研究者和實踐者來自不同領域，且此領域尚在創建階段，經歷與解決的問題不夠豐富，因此人們往往對某些問題尚未達成共識，甚至對類似和相同的問題也可能有不同的理解以及解決方 26.