觀影沉浸體驗之互動系統開發與實驗 - 政大學術集成

全文

(1)國立政治大學數位內容碩士學位學程 Master’s Program in Digital Contents and Technologies National Chengchi University. 碩士論文 Master’s Thesis. 立. 政治大. ‧ 國. 學. 觀影沉浸體驗之互動系統開發與實驗. ‧. Development and Experiment of the Interactive System. n. al. er. io. sit. y. Nat. for Immersive Movie Watching Experience. Ch. engchi. i n U. 研究生：劉堯琪指導教授：李蔡彥陳儒修. 中華民國一百零三年十一月 November 2014. v.

(2) 觀影沉浸體驗之互動系統開發與實驗 Development and Experiment of the Interactive System for Immersive Movie Watching Experience. 研究生：劉堯琪. Student：Yao-Chi Liu. 指導教授：李蔡彥. Advisor：Tsai-Yen Li Ru-Shou Chen. 陳儒修. 國立政治大學. 學. ‧ 國. 立. 政治大. 數位內容碩士學位學程. Nat. sit. y. ‧. 碩士論文. er. io. A Thesis. n. a Submitted to Department of Digital Contents and v Technologies i l C n hChengchi National i U e n g c hUniversity. In Partial Fulfillment of the Requirements for the Degree of Master In Digital Contents and Technologies. 中華民國一百零三年十一月 November 2014.

(3) 摘要. 隨著數位資訊科技蓬勃發展，帶來許多閱聽的變革與創新。以電影來說，單一的視覺和聽覺效果已經無法滿足觀眾，觀看可能性也越趨多樣化，同時，在設備的進步下，選擇在家裡看電影的人也不在少數，換句話說，在家裡使用小螢幕看電影雖不至於完全取代電影院觀影，卻已逐漸成為電影觀眾的主流觀影方式。另外，媒體的創新和載具的多樣化早已顛覆大眾閱聽習慣，因此我們思考，電影本身是否能結合「互動」特質，使得在家觀影也能享有如電影院般的沉浸體驗。. 政治大本研究以每個家庭幾乎會有的配備—桌上型電腦加上小型視訊攝影機，利用立. ‧ 國. 學. 電腦視覺技術偵測觀者位置，觀者藉著身體的移動去控制影片觀看視角，並配合適切的敘事內容，誘發觀者想「看」的好奇心。我們希望讓影像的敘事性融合數. ‧. 位空間的瀏覽，更貼近於直覺的本能去決定故事的片段，使觀者全身感官沉浸於. sit. y. Nat. 敘事的世界，提升使用者對故事的認同。. n. al. er. io. 本系統招募十位使用者進行體驗，透過問卷、訪談和影像側錄以檢測研究目. i n U. v. 標的成效。實驗結果顯示大部分使用者皆認同此系統的設計，且認為是有趣的，. Ch. engchi. 有助益於進入沉浸狀態，但在許多細節上仍有改進的空間，我們相信本研究提供了數位互動敘事上一個新的方向，開啟導演與觀眾之間不同的對話方式。本文最後將建議與未來方向彙整做為後續研究參考。關鍵詞：電影空間、沉浸體驗、人機互動. i.

(4) Abstract. With the digital contents technology emerging, more and more innovations about reading and listening are happening. In the film, simple visual and auditory effects have not been able to satisfy the audience. Besides, people go to see a movie not only in the theater but also at home, so we start to thinking of whether the movie could incorporate interactivity such that watching movie at home could be the same as or even better than in theater.. 政治大. Computer with a webcam is the main equipment in our system. We use computer. 立. vision technology to detect the position of the viewer, and the viewer moves his body. ‧ 國. 學. to control the viewing angle of the video. We want to combine narrative and digital space to allow a viewer to determine the plot of the story in an intuitive way, such that. ‧. this interactive mode can enhance the viewer’s immersive experience and allow the. y. Nat. sit. viewer enjoying the story.. n. al. er. io. The system has been implemented, and we recruited ten users to participate in. i n U. v. the experiment. Through questionnaires, interviews, and recorded video analysis, we. Ch. engchi. get feedbacks which help us understand the advantages and disadvantages of our system. The results show that most users agreed with the design of this system and considered it interesting except for some implementation details. We believe that our study offers a new way for digital interactive narrative, which opens a different way of communication between director and audience. At the end, we propose some suggestions for future improvement.. Keyword：Movie Space, Immersive Experience, Human-computer Interaction. ii.

(5) 謝誌. 在政大三年多的研究日子裡，夾雜著許多不確定與迷惘，而這本論文的完成，我要特別感謝李蔡彥老師的指導，像明燈一般指引前進的方向，讓我明白研究的真理，以及陳儒修老師總能是在緊要關頭給我許多實務上的建議，還記得李老師他說「論文是小題大作，不要認為是無病呻吟。」仍言猶在耳；另外爸爸媽媽的擔心才是我最在意的，我總是想法太多卻還停滯在人生的道路上，謝謝你們的體諒與成全；也要感謝兩位校外口委王浩全老師與齊隆壬老師的不吝指教。感. 政治大. 覺一路上受到太多貴人的相助，點滴在心，回想當初能加入數位內容這個大家庭，. 立. 得到學程老師、同學、學長姐學弟妹們的照顧，當然不能忘了有趣的靜媚助教，. ‧ 國. 學. 我想未來有機會一定加倍奉還，尤其我們第三屆一起奮鬥的好感情絕對會讓我想念許久，那些為了專案無數個熬夜的日子，為了活動大合唱而組的 DCT 樂團，遠. ‧. 超過我自己想像的好多點子都在這裡冒了出來，獨一無二的。接著要感謝認識很. y. Nat. sit. 久的衝動旅遊兼拍片夥伴，雖然大家各自分飛但幸好我們都還記得要有一顆追夢. n. al. er. io. 的心；貼心的高中姊妹們最了解我的怪，總在我拒絕長大時拉我一把。畢業不是. i n U. v. 終點而是起點，在教發中心的創作和新生書院裡經歷的人與事都會是養分吧我想，. Ch. engchi. 於是又要繼續往前走了，回頭看在政大的一切，無法細數每個要感謝的人，前進畢業的路上有你們真好。最後要感謝 IMLab，是我在研究所期間另一個家，在課業上抑或是各種生活大小事多謝實驗室裡成員的陪伴與相助，不僅僅是知識成長了，心態上也隨著磨練變更堅強。在論文即將完成卻極度煎熬的最後那段時間我經常想到一句話「那些殺不死你的，必將使你更茁壯。」，它給了我一點力量，送給所有正在畢業道路上的朋友，共勉之。. 劉堯琪謹誌 iii.

(6) 目錄. 摘要................................................................................................................................. i Abstract .......................................................................................................................... ii 謝誌............................................................................................................................... iii 目錄............................................................................................................................... iv 表目錄.......................................................................................................................... vii 圖目錄......................................................................................................................... viii. 政治大. 第壹章緒論.................................................................................................................. 1. 立. 1.1 研究背景 ........................................................................................................ 1. ‧ 國. 學. 1.2 研究動機 ........................................................................................................ 2 1.2.1 閱聽方式的改變 ................................................................................. 2. ‧. 1.2.2 新的螢幕概念延伸新的數位空間 ..................................................... 4. y. Nat. sit. 1.3 研究目標 ........................................................................................................ 6. n. al. er. io. 1.4 設計流程 ........................................................................................................ 7. i n U. v. 第貳章文獻探討.......................................................................................................... 8. Ch. engchi. 2.1 沉浸體驗 ........................................................................................................ 8 2.1.1 沉浸的定義 ......................................................................................... 8 2.1.2 沉浸前置因素 ................................................................................... 10 2.2 銀幕空間 v.s 螢幕空間 .............................................................................. 13 2.2.1 電影空間 ........................................................................................... 14 2.2.2 銀幕到螢幕的比例轉換 ................................................................... 19 2.2.3 人的觀看行為 ................................................................................... 24 2.3 自然人機介面 .............................................................................................. 25 iv.

(7) 2.3.1 人機互動 ........................................................................................... 25 2.3.2 電腦視覺 ........................................................................................... 28 2.4 案例分析 ...................................................................................................... 30 第參章系統設計實做................................................................................................ 36 3.1 設計理念與形式 .......................................................................................... 36 3.1.1 設計理念 ........................................................................................... 36 3.1.2 互動方式 ........................................................................................... 37 3.2 系統實做 ...................................................................................................... 40 3.2.1 硬體裝置 ........................................................................................... 40. 政治大 3.2.2 軟體開發 ........................................................................................... 41 立. 3.3 影片製作 ...................................................................................................... 43. ‧ 國. 學. 3.3.1 影片腳本 ........................................................................................... 43. ‧. 3.3.2 影片企劃 ........................................................................................... 47. y. Nat. 第肆章實驗設計與結果............................................................................................ 50. io. sit. 4.1 實驗目標 ...................................................................................................... 50. er. 4.2 實驗設計 ...................................................................................................... 50. al. n. v i n 4.2.1 實驗對象 ........................................................................................... 50 Ch engchi U 4.2.2 實驗程序 ........................................................................................... 53 4.2.3 問卷設計 ........................................................................................... 54. 4.3 實驗結果分析 .............................................................................................. 56 4.3.1 內容設計分析 ................................................................................... 57 4.3.2 沉浸體驗分析 ................................................................................... 61 第伍章結論................................................................................................................ 69 5.1 研究結論 ...................................................................................................... 69 5.2 未來研究與建議 .......................................................................................... 73 v.

(8) 參考文獻...................................................................................................................... 75 附錄一《窺 Peeper》文字劇本 .............................................................................. 78 附錄二實驗流程說明................................................................................................ 83 附錄三實驗問卷........................................................................................................ 84. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. vi. i n U. v.

(9) 表目錄. 表一：畫外空間是畫內空間的自然延伸................................................ 16 表二：畫外空間是畫內空間的想像空間................................................ 17 表三：畫外空間會對畫內空間進行破壞................................................ 18 表四：在電影院和在家看電影的比較.................................................... 24 表五：案例參考一.................................................................................... 31 表六：案例參考二.................................................................................... 32. 政治大. 表七：案例參考三.................................................................................... 33. 立. 表八：案例參考四.................................................................................... 34. ‧ 國. 學. 表九：劇本大綱........................................................................................ 44 表十：場次分鏡表.................................................................................... 45. ‧. 表十一：工作人員.................................................................................... 48. y. Nat. sit. 表十二：器材清單.................................................................................... 48. n. al. er. io. 表十一：使用者資料................................................................................ 51. i n U. v. 表十二：問卷題目.................................................................................... 54. Ch. engchi. 表十七：沉浸體驗量表「進入沉浸的前置因素－互動性」分析........ 61 表十八：沉浸體驗量表「進入沉浸的前置因素－遠距臨場感」分析 65 表十九：沉浸體驗量表「沉浸狀態下的特性」分析............................ 66. vii.

(10) 圖目錄. 圖一：互動電影《Last Call》現場觀眾與影像通話畫面 ........................ 3 圖二：「會動的清明上河圖」2010 年於上海世界博覽會中國館展出 .. 4 圖三：設計流程.......................................................................................... 7 圖四：1.33：1 畫面比例 ......................................................................... 20 圖五：2.35：1 畫面比例 ......................................................................... 20 圖六：《銀翼殺手》電影原版畫面.......................................................... 21. 政治大. 圖七：《銀翼殺手》Pan & Scan 16：9 電視畫面.................................... 21. 立. 圖八：《銀翼殺手》Pan & Scan 4：3 電視畫面...................................... 21. ‧ 國. 學. 圖九：《心靈捕手》.................................................................................. 22 圖十：《都是愛情惹的禍》...................................................................... 22. ‧. 圖十一：採用 Letterbox 方式的 16：9 電視版畫面 .............................. 22. y. Nat. sit. 圖十二：動畫電影《蟲蟲危機》原版.................................................... 23. n. al. er. io. 圖十三：動畫電影《蟲蟲危機》4：3 電視版....................................... 23. i n U. v. 圖十四：人類的視線範圍........................................................................ 25. Ch. engchi. 圖十五：電腦操作介面演化過程............................................................ 26 圖十六：人本互動模式(取自 Jeng, 2002) ............................................... 28 圖十七：隨著觀看的角度不同，影片會隨之調整至對應的視野........ 38 圖十八：技術加上內容提升沉浸體驗.................................................... 39 圖十九：利用前置的小型攝影機捕捉人臉位置示意圖........................ 40 圖二十：內容會因使用者的動作而改變不同視角與片段.................... 40 圖二十一：系統流程圖............................................................................ 42 圖二十二：系統畫面................................................................................ 42 viii.

(11) 圖二十三：劇情線圖示............................................................................ 43 圖二十四：單眼相機................................................................................ 47 圖二十五：魚眼鏡頭................................................................................ 47 圖二十六：穩定器.................................................................................... 47 圖二十七：魚眼鏡頭拍攝畫面................................................................ 47 圖二十八：導向性實驗室模擬居家情境的空間設計............................ 52 圖二十九：三面單面鏡環繞的副控室，協助研究觀察........................ 52 圖三十：實驗施測側錄畫面.................................................................... 52 圖三十一：實驗流程圖............................................................................ 54. 政治大圖三十一：場景 S8、S10、 S16、 S18 影片畫面 ................................ 57 立圖三十二：場景 S11、S21 影片畫面 ...................................................... 58. ‧ 國. 學. 圖三十三：場景 S9、S20 影片畫面 ........................................................ 59. ‧. 圖三十四：場景 S13 影片畫面 ................................................................ 60. n. er. io. sit. y. Nat. al. Ch. engchi. ix. i n U. v.

(12) 第壹章緒論. 1.1 研究背景. 在人類歷史中，「說故事」一直都是分享知識、智慧以及價值觀的方式，而「故事」本身也一直以不同的形式呈現，從原本營火邊的喃喃細語搬到電影銀幕，尤其在今日數位環境的蓬勃發展下，手機、電腦螢幕和各種行動載具也成為閱聽的重要媒介之一。技術的進步不僅僅代表更多的設備與更多的內容，更是一個讓「說. 治政故事」跳脫以往的框架，進入我們生活的契機。大立 ‧ 國. 學. 以電影來說，隨著時代演進，單一的視覺和聽覺效果已經無法滿足觀眾，觀看可能性也越趨多樣化。例如 IMAX 銀幕比常規電影來的更大且略有弧度，能讓. ‧. 觀眾更近距離地觀看影像，電影院的黑暗環境促使觀眾全權專注在銀幕上，感覺. sit. y. Nat. 就像是被包覆在整個電影空間裡。除了銀幕不斷放大外，最新的技術 4DX 更是挑. n. al. er. io. 戰感官極限，3D 視覺效果加上座椅震動搖晃，甚至是香氣、水霧與閃光聲效和. i n U. v. 風效，讓看電影不再只是看電影，更是徹底融入電影。科技進步使得這些娛樂媒. Ch. engchi. 體不斷極致化我們的五感經驗，而這些經驗也隨著發展不斷地被確認。另一方面，網路頻寬增加，完整線上電影資料庫的建立，使得選擇在家裡看電影的人也不在少數。一般電影院觀影常受到時間、地理位置、門票價格等因素限制，大部分的觀眾往往只選擇一部熱門院線片進行觀影，鮮少有人選擇在電影院內連續欣賞多部電影。反觀許多網路電影的價格低廉甚至免費，各種內容應有盡有，更重要的是擺脫了上映檔期的束縛，選擇在一個休息日內在家觀看多部電影已成為大部分上班族的習慣。正是基於以上這些差異，讓網路影片獲得了崛起的良機。有研究顯示，較常 1.

(13) 透過網路觀影的人數幾乎是較常到電影院觀影者的十倍，也就是說，線上觀影雖不至於完全取代電影院觀影，卻已逐漸成為電影觀眾的主流觀影方式 (蕭伊雯, 2006)。同時，由於設備的進步和觀影方式逐漸多元化，在家看電影也朝著極致的觀看體驗前進，不論是加大螢幕或是環繞聲道，重現如同電影院般的沉浸體驗是未來一大方向。此外，科技的創新也讓互動這個元素介入閱聽的範疇，改變大眾以往單向式閱聽的習慣，給予觀者更深入的想像空間。. 1.2 研究動機. 1.2.1 閱聽方式的改變. 立. 政治大. ‧ 國. 學. 當今的數位環境讓「閱聽」行為不再受到以往的侷限，許多連結與傳播的方式，. ‧. 充分展現了科技中某些特質，尤其觀賞者的意義與定位開始受到關注，對於主體. sit. y. Nat. 性的探討改變了角色的界定與行為模式，作者權的轉移讓以往被動的觀賞者成為. io. n. al. er. 主動的參與者，作品意義的主體性逐漸轉移至觀賞者的參與經驗當中。. i n U. v. 「互動性」在其中扮演著關鍵性的角色，Stephen Wilson 指出：「互動，代表. Ch. engchi. 著控制者、瀏覽介面與觀眾之間，彼此有能力去產生作用，影響事件產生的過程與修改其當下發生的狀態。」 (陳永賢, 2005)。同時「互動性」也可以呼應後現代主義中去中心化、多元的觀點，意指過去作者單向式的給予觀者內容的創作方式已經被改變，作者在作品設計上只是提供平台或互動機制，目的是讓觀者帶著其主觀意識詮釋藝術作品，而不單只是探討作品的來由或解釋創作者的想法，突顯互動當中專屬於個人的獨特體驗。而用互動的概念與媒介來詮釋作品，原先作者釋放的訊息因為觀賞者的介入，情境或故事的寓意也就更加深刻。從作者本身透過作品延伸至觀眾，讓「作者」、「作品」、「觀者」三者間環環相扣。 2.

(14) 但從另一個方面來探討，雖然科技進步使得媒體產生越來越多樣的閱聽方式，但卻鮮少探討人與機器之間，透過怎樣的內容，或是何種互動形式可以滿足觀者對觀賞作品之「沉浸」(Immersive)的期待。即便科技可以持續帶給我們感官上的刺激，但最重要的是觀者應該忽略現實世界與虛擬世界這層隔閡，去相信作品當下所創造出的情境。即便現在有各種新形式按鍵、搖桿或感應裝置的生產研發，然而主宰操控者心靈的，並非裝置本身，而是觀者置身參與互動過程中的「程度」。舉例來說，在德國專播動作懸疑片的電視頻道《第 13 街》，辦了一個活動《Last Call》，在各個電影院播放短片，片中主角會即時跟現場觀眾以手機互動，. 政治大. 由他們來決定這部影片如何進行。劇中女主角被壞人追殺，她會撥手機給其中一. 立. 位參加活動的觀眾，由觀眾指示她該如何逃脫，任何一個指令都會影響結局。最. ‧ 國. 學. 後，片中的壞人甚至揀起電話跟觀眾說，「我已經有你的號碼了，下一個就是你。」宛若親身參與的場景，驚嚇程度深植人心。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖一：互動電影《Last Call》現場觀眾與影像通話畫面. Andy Polaine 曾說：「當受角色劇情吸引，我們將擱置對它的懷疑並進入故事，良好的互動結構能使我們超越介面投入故事當中。」 (蕭雨青、嚴貞, 2005) 而回到電影身上，電影銀幕本身也是一個巨大的介面，將虛擬空間的影像和真實空間的觀眾串接起來，若是跳脫了電影院這個黑暗空間，影像本身是否能夠持續吸引 3.

(15) 觀眾的目光？如果把影像主動權交還給觀眾，能否改變以往看電影單純坐在椅子上被動接受訊息的狀態，使得觀眾對於影像認知的可能性增加呢？. 好比被喻為上海世博會中國館鎮館之寶的「會動的清明上河圖」，以北宋畫家張擇端所繪製清明上河圖為藍本，利用電腦科技增加內容的細膩度和可看度，並將作品的框架無限放大，鼓勵觀眾主動地去探索畫面中的樂趣，重現古物的中心價值。. 立. 政治大. ‧. ‧ 國. 學 sit. y. Nat. er. io. 圖二：「會動的清明上河圖」2010 年於上海世界博覽會中國館展出. al. n. v i n Ch 許多藝術、設計與電玩遊戲都試圖要打破真實與虛擬這條界線，所以不斷探 engchi U 索各種可能。因此我們思考，在數位環境和互動發展的基底之上，電影本身是否能結合「互動」這項元素，使得在家看電影也能享有如電影院般的「沉浸體驗」，為在家欣賞電影這件事注入更多可能性以及新的契機。. 1.2.2 新的螢幕概念延伸新的數位空間從電影院的發軔開始，到電視、電腦螢幕，再到流行的手機、PDA、掌上型電玩、 iPad 等等新科技，螢幕的概念不斷變化，在「電腦螢幕的考古學」一文中，Manovich 4.

(16) 認為傳統的電腦螢幕被「動態螢幕」所取代，多重的、相對化的影像隨著時間而逐步變化(Manovich, 1995)。 Persson 比較了古典好萊塢敘事電影的空間陳列與數位新媒體空間導覽性質的差異，最根本的差別在於電影空間不像電腦數位空間一般具有互動性；電影空間的陳列在於幫助敘事的連接、情緒的張力處理，對於電影作者而言重要的是如何在正確的位置、精準的時機，完成一個線性的敘事線以表達出一個故事，觀眾對於故事的理解是電影視覺技巧的主要目的，剪接或各種技巧的功能都在於避免觀眾的注意力被抽離。電影剪接將一個大空間做空間分割，將一個場(Scene) 分. 政治大. 成一個一個鏡頭(Shot)，再將之組合起來，讓觀者在認知中拼湊組合一個大空間. 立. 的存在性與連續性；在大空間之內，單一鏡頭以外的稱為畫外空間(Off-screen. ‧ 國. 學. space)，畫外空間被鏡頭暫時摒除，但是在導演的選擇下，畫外空間隨時可為前一個鏡頭進行補足、說明，以進行連戲。Persson 說明了利用古典敘事電影常用. ‧. 的視覺連戲、主觀鏡頭、建立鏡頭等空間技巧，做為觀者進入電影故事世界的導. Nat. er. io. sit. y. 航 (Persson, 1998)。. 相對地，數位空間對觀者的導航來自於超連結，若說古典敘事電影暫時被單. al. n. v i n Ch 一鏡頭摒除在外的空間稱為畫外空間，Persson 認為數位空間如網路首頁、電玩 engchi U 介面上的選單、按鈕之下的隱藏資訊、連結頁是不是也可以被稱作數位空間電腦銀幕的「畫外空間」？而上面的圖像選單，則是數位畫外空間的指引、參考，以及導航資訊；超連結是不是如同敘事電影的剪接，導引出各式各樣存在畫外空間裡的圖像、資訊與物件？敘事電影利用畫外空間所製造出來的情緒效果，能不能與數位空間產生結合？敘事電影利用畫外空間提供情節的延續與起伏，數位空間的畫外空間則利用新媒體的特質隱藏許多資訊，而數位空間的瀏覽功能若能加入敘事的起伏，則可能產生更有故事性的動態螢幕空間 (Persson, 1998)。. 5.

(17) 如前述，Persson 認為在於電影與數位空間最基本的差異在於互動性，而螢幕也因而從一個投射展示的場域，轉型成一個互動發生的介面。基於這樣的動機，我們希望可以突破對於以往對影片的想像，讓觀者能透過直覺式的互動機制觀賞影片，掌握完整的影片訊息，並且主動追求逼真的臨場經驗，存在於影片中的互動機制才能為觀眾帶來更深層的觀影意義，帶來了更多觀影的可能性。. 1.3 研究目標. 政治大提出了未來 4I 的敘事框架，4I 分別代表了沉浸 (Immersion) 、互動 (Interactivity) 、立美國網路創新服務國際研究顧問公司 Latitude 分析下個世代對於說故事的想像，. ‧ 國. 學. 整合 (Integration) 與影響 (Impact) ，這四個要素不僅是代表觀眾更深入故事的渴望，同時也代表著故事將跳脫介面的束縛，融入我們實際的生活中。我們期待. ‧. 利用電影空間塑造情節起伏的效果，讓影像的敘事性融合數位空間的瀏覽，產生. io. n. al. er. 覽樂趣，期許觀者能在其互動過程中感受作品的精神。. sit. y. Nat. 敘事的美感，增加觀者的情感投射，以及結合數位空間與互動系統創造出新的瀏. 因此，本研究的主要目標包括 :. Ch. engchi. i n U. v. (一) 實做一個良好的互動結構與場景來提供一個能讓參與者進入沉浸體驗的敘事框架； (二) 電腦視覺技術用於互動上的新嘗試，是否可以增加觀者的沉浸感，提升使用者對影像的認同； (三) 探討螢幕與空間這兩者在數位媒介中可以如何發揮，搭配何種類型敘事最為適切。. 6.

(18) 1.4 設計流程. 設計流程主要分為三大部分，第一部分是收集支持此研究的文獻，以及初步的系統架構規劃。第二部分進行系統程式實作和網站介面設計，以及一段時間是留給影片拍攝和後製過程。待網站完成上線後，將會招募使用者進行第三部分的使用者測試和使用者訪談，將回饋結果做分析、反思並整理成最後的論文總結和未來的研究與建議。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 圖三：設計流程 7. i n U. v.

(19) 第貳章文獻探討. 本論文由於從電影本身出發，透過探討沉浸體驗而涵蓋到人機互動技術，深具跨領域特質，因此本章主要分為四節，試著討論彼此的關聯和互助的可能。第一節內容主要探討何謂沉浸體驗，收集相關領域學者對於「沉浸」的解釋，以及如何進入「沉浸」的狀態。第二節我們嘗試拉入電影空間討論的範疇，辨別大銀幕、小螢幕和人的觀看之間的異同，期許能有系統地架構出立基在影像上的互動空間。第三節介紹人機介面的發展，以及如何從一開始的使用者介面轉變成當今所重視. 政治大. 的自然人機介面，並從相關技術中選用電腦視覺作為此系統的核心技術。第四節. 立. 透過分析相關的作品案例，找出共同特徵與要素作為本研究的參考。. ‧ 國. 學 ‧. 2.1 沉浸體驗. y. Nat. sit. 2.1.1 沉浸的定義. n. al. er. io. Csikszentmihalyi 是最早提出沉浸理論的人，他認為人們在進行活動時，感到特別. Ch. i n U. v. 專注，甚至完全融入活動情境中，並且過濾掉所有不相干的知覺，即為進入沉浸. engchi. 狀態 (Csikszentmihalyi, 1975)。後續的學者進一步將沉浸解釋為「個體專心一致的從事該活動，並享受活動所帶來的樂趣。」在沉浸狀態中，人的心理處於一種愉悅、享受的情境中，造成人們沉迷於該活動，這也就是人們為何願意再繼續從事某活動的原因。沉浸是一種暫時且主觀的經驗或狀態，隨著個人的經歷而有所不同， Csikszentmihalyi (1990)提出個體感受到沉浸經驗時，通常會感知到的八種特徵：. 8.

(20) (一) 清晰的目標和回饋 (Clear Goals & Feedback) 在個人的沉浸經驗中，對於活動目標有強烈想要完成的感知，並且十分清楚後續要完成的動作。因為有清晰的目標，所以能主導個人在投入活動的沉浸經驗中，得到明確回饋的評估。在過程中得到了回饋，才誘使個人一步步的沉浸在活動中。 (二) 面對挑戰性的適度技巧 (Challenge-Skills Balance) 當有了清晰的目標並擁有了足夠的技巧時，個人與目標之間在心中會形成挑戰的意義。個人行動與活動的本身，一來一往間的互動使個人進入沉浸狀態。 (三) 操控的感覺 (Sense of Control). 政治大在沉浸的經驗之中，並非個人主動的想要去控制活動，而是自然地對從事的立. (四) 行動與意識結合 (Action-Awareness Merging). 學. ‧ 國. 活動有一種掌控在手的感覺。. ‧. 當個人投入活動時，因為行動與意識的協調忽略了自我的存在，從知覺到活. y. Nat. 動是自動自發完成的，深入而不費力的投入其中，所以能將生活中的疑慮排. (五) 全神貫注 (Concentration on Task at Hand). al. er. io. sit. 除在活動之外。. n. v i n 當個人進入沉浸經驗之中，所有的精神能量與注意力，都被引導在意識與活 Ch engchi U 動之間的互動範圍，不會讓意識分心於不相關的訊息上。. (六) 自覺的喪失 (Loss of Self-Consciousness) 在沉浸中，欲獲得最佳表現或結果時，會不斷的改善技巧去迎接挑戰，並沒有機會可以隨時反省到自我的意識。當個人與環境達到合為一體的感覺時，會造成一種暫時性的忘我狀態。 (七) 時間感的改變 (Transformation of Time) 一種時間感的扭曲。當沉浸發生時，心裡上的時間感覺與物理時間兩者之間會產生扭曲感，失去對應或判斷。時間有時會感覺縮短，有時則會延伸。 9.

(21) (八) 具有目的之經驗 (Autotelic Experience) 指以沉浸經驗本身為目地的一種特質。個人最初即使從事該活動還有其他目地，但後來感覺到活動的本身就構成一種滿足的酬賞了。. 諸多學者指出沉浸經驗適合用於研究電腦中的中介環境 (CME，ComputerMediated Environment)，因此常被運用於人機互動、網路方面的相關研究。Trevino 和 Webster 延續 Csikszentmihalyi 的概念，以沉浸理論探討人類與數位資訊系統間的互動，提出在沉浸狀態下的四種特性： (Trevino & Webster, 1992). (一) 可控制認知 (Control). 立. 政治大. 在人機互動過程中需有控制感，使用者除了控制自己之外，同時也希望控制. ‧ 國. 學. 與機器間的互動。. ‧. (二) 注意力集中 (Attention Focus). io. (三) 好奇心 (Curiosity). er. 知覺過濾掉，就好像進入一種被催眠狀態。. sit. y. Nat. 在人機互動過程中，使用者將注意力集中於有限的範圍中，不自覺把無關的. al. n. v i n 讓使用者在沉浸狀態中引發好奇心，是沉浸狀態中不可或缺的因素。 Ch engchi U. (四) 樂趣 (Intrinsic Interest). 人們會因為增加本身的愉悅和樂趣，而涉入活動情境中。. 2.1.2 沉浸前置因素 Hoffman 與 Novak 認為，在電腦環境中使用操作，沉浸即為最佳體驗的過程，而互動性(Interactivity)和遠距臨場感(Telepresence)是進入沉浸的前置因素，這兩項皆有助於增加使用者沉浸體驗的程度(Hoffman & Novak, 1996)。 10.

(22) (一) 互動性對數位內容來說，互動性是目前有別於其他傳統媒體的最大特點，帶來了其他媒體所沒有或不擅長表現的競爭優勢。Crawford 認為「互動是一個介於兩個或更多推動者(Agent)的循環過程。在這個過程中，這些推動者彼此輪番的聆聽(Listen)、思考(Think)與述說(Speak)。」(Crawford, 2005)；Dieter Daniels 認為在今日有關互動的討論中，一類是討論人和機器溝通的科技可行性，另一類則是關於藉著媒體建立的人與人關係的社會意識形態 (Daniels, 2000)。. 政治大不斷激盪，產生於個體與電腦的中介環境之中，「沉浸」即在互動的體驗下出立 Trevino、Webster 和 Ryan 三位學者指出，互動在遊戲和探索的過程中會. ‧ 國. 學. 現 (Webster, Trevino, & Ryan, 1993)。Johnson 與 Wiles 在遊戲介面設計對使用者影響有著深度的剖析，認為玩家在互動過程中會因為充實的操控感而產生. ‧. 正向的情感體驗，使玩家集中其注意力並過濾掉無關的感覺，即進入忘我的. y. Nat. 境界 (Johnson & Wiles, 2003)。Witmer 和 Singer 表示若使用者能在互動過程. n. al. er. io. Singer, 1998)。. sit. 中以自然地、直覺地方式進行互動，會更加的沉浸在此環境中 (Witmer &. Ch. engchi. i n U. v. 另一方面，從互動的意義來探討，在與作品互動的過程當中，觀賞者從「被動」的觀看角色轉換成「主動」的參與者，Dieter Daniels 將此型態的觀賞者定義為「典範觀者」(Exemplary Viewer)，意指參與者在接觸作品的過程中不只是觀賞者的角色，而是成為了體現作品的表演者 (Daniels, 2000)。這樣的概念可以回朔到後現代主義主張去中心化、多元，以及「作者以死」的觀點，表示過去傳統作者單方向的給予觀者內容方式已經被改變，作者在作品設計上提供互動機制，目的是讓觀者帶著其主觀意識詮釋作品，而不只是探討作品的來由或是解釋作者的想法，讓觀者能在觀賞過程中藉著自 11.

(23) 我的參與，產生更多的價值。王俊傑的研究中也指出，人類生活在科技的驅使下，數位媒材的豐富性配合互動機制的設計，打破以往「作者」、「作品」與「觀者」間的對話關係 (王俊傑, 2004)。當作者願意將作品的主體性交還給觀者時，可以將觀者的思想和裝置進行連結，達到作品的完整性。 (二) 遠距臨場感遠距臨場感一詞由 Marvin Minsky 在 1980 年提出，指的是遠距控制的操作系統。後來一些研究電視傳播通訊等領域之學者，以遠距臨場的概念來說. 政治大. 明經由媒介所引發的知覺，使人們感覺身處於媒介裡的空間而非實質的環境之中。. 立. ‧ 國. 學. 在 1966 年 Gibson 從生態學觀點說明人類知覺外在環境的機制運作，根據他的定義，存在感並非指我們所身處的週遭實體環境，而是我們的心智對. ‧. 於環境的知覺所構成的概念，不論是自主或非自主的心智歷程所產生的知覺。. sit. y. Nat. io. er. 因此，「存在感」和「遠距臨場感」一詞皆可被認為是感覺身處某個環境、場所、空間的意識，而這個環境、場所、空間等不必然是我們當下實際. al. n. v i n Ch 所在的地點。就好比當人在看書或是看電影時，若已能認同書中或電影中的 engchi U 角色時，個人便會傾向將自身放置在角色所處的地方，在此場景中經歷角色所經歷到的。以虛擬環境為例，在虛擬環境中我們大部分的資訊是來自於典型的視覺方式，視覺的資訊會增加存在感，因此，在環境中若傳遞了較大程度的感知資訊給使用者，包含大量的資訊來模擬場景與或是多形式的呈現，均會產生較大的存在感經驗。例如在虛擬環境中使用者能感受到自身的移動，或是能經由改變其視角來改變他所看到的，便會增加存在感，能控制的行為越多，則存在感越大 (Witmer & Singer, 12.

(24) 1998)。若使用者能在虛擬環境中感受到存在感，便能讓使用者與真實世界分離，引出使用者真實的情感 (Regenbrecht & Schubert, 1997)。. 2.2 銀幕空間 v.s 螢幕空間. 電影作為藝術再造空間的視覺性，使其與其他空間藝術具有相通性；而電影空間構成的機器參與性質，又使電影空間有別於一般藝術空間而擁有獨特的空間表現力 (李顯杰, 1999)。. 政治大. 由此可知，一部好的敘事作品，若有好的介面呈現，以及適當的空間環境加. 立. 持，展現的會是加乘的魅力。這也是為何大部分的人選擇進入電影院觀賞電影，. ‧ 國. 學. 而不僅僅只是待在電視機前。因為黑暗的庇護，我們特別容易將視線焦點放在大銀幕上。看電影的人，平常不敢大笑的，放肆大笑了；平常不敢落淚的，放肆大. ‧. 哭了；在人生裡假裝矜持的、假裝有品味的、假裝勇敢的，都在兩小時的黑暗裡，. er. io. sit. y. Nat. 得到了假釋。. al. 但同樣的內容移植到了電腦螢幕前，好像就少了些什麼，當我們不再被大銀. n. v i n Ch 幕包裹起來，沉浸的效果是不是就不再存在？當框架的邊界無法超越我們的視野， engchi U 那框架是否就成為了一種讓觀者進入沉浸狀態的阻礙？而在目前從電腦銀幕轉. 換到電腦螢幕的過程中，除了框架大小的改變之外，長久以來在比例的轉換上也產生了不少問題尚待解決。如何突破螢幕框架對於影像本身的限制，讓使用者彷彿能置身於作品中，增加使用者的「沉浸程度」，是這篇論文想要探討的議題，因此這節我們試著從「空間」切入，從電影中找出他們如何架構敘事中的空間，這些空間又為何引人入勝？而這些特質會是我們想要保留，移植到新的數位螢幕環境的關鍵。 13.

(25) 2.2.1 電影空間電影是以銀幕上的畫面和音響為媒介，在運動的時間和空間裡創造形象的一門藝術。觀賞一部影片的過程，如同感受真實的生活一樣，始終是在時間和空間兩個維度上同時進行的。和戲劇相比，電影的時間和空間和同為綜合藝術的戲劇的時間和空間有明顯的不同。在戲劇中，舞台上每一幕、每一場，空間環境的相對凝滯和觀眾所受到的固定觀賞方位的制約，使時空的綜合往往表現為固定空間和流動時間單一層次. 政治大. 的結合。就全場演出而言，由於演出方式的局限，時間的流動又呈間斷性和跳躍. 立. 性，在自由度上受很大的束縛。電影中的時間和空間具有一刻不停的雙向流動的. ‧ 國. 學. 性質，時空綜合又可以通過各種藝術手段呈現單層、複合、多重等多種形態，從而完整地再現客觀世界的本來面目，不僅最大限度地還原了人們通過視覺和聽覺. ‧. 對於物質世界的感知，還可以表現時間和空間在人的不同心理狀態上的變幻。. sit. y. Nat. io. er. 從物質形態上說，電影空間同樣是一種假定的空間形式。電影並非以真人實物呈現於觀眾，而是一種投射在銀幕上的影像。現實中三度空間的立體世界，在. al. n. v i n Ch 銀幕上只是兩度空間的平面投影，只是靠著影像的逼真和聲音的配合才使觀眾感 engchi U. 到錯覺的真實。同時，電影通過各種藝術和技術手段，既可以對現實的物理空間作各種變形和取捨，又可以在各空間之間自如地轉換或套疊，以至創造出生活中不存在的想像或幻覺的空間。在主流電影中，影片的敘事必定會聚焦在出現於電影畫面中的事件。然而，銀幕外的空間，也就是未被攝影機鏡頭拍攝到的範圍，對於故事的鋪陳同樣重要，它不僅可引導觀眾注意重要的細節，還能營造氛圍或懸疑性。電影空間在空間的劃分上，可以分為畫內空間(On-screen Space)與畫外空間 14.

(26) (Off-screen Space)兩種。畫內空間可以簡單地定義為銀幕上所有眼睛可以看的到的東西，畫外空間卻複雜多了，電影理論大師 Burch 認為畫外還存在六個空間區域，包括景框四邊之外各有一區，背景後面一區，以及攝影機後面一區 (Burch, 1980)。很少有電影觀眾真的清楚，自己花費多少時間去思考銀幕之外看不見的部分。不過某些影評認為，電影劇情的真相其實存在於畫外空間。導演構思影像的編排時，必須同時考量到允許新的角色進入攝影畫面的空間，. 政治大外空間。在《火車進站》中，盧米埃讓人物從攝影機後方出現，便是運用畫外空立. 因此畫外空間的存在顯得非常重要，更有許多導演為了戲劇化效果，開始運用畫. 間的概念。日後的導演開始體認到，讓角色與畫外空間的人物、場景互動，或是. ‧ 國. 學. 讓物體突然進入畫面中，具有某種意義與價值。例如追逐片高度倚賴畫內空間與. ‧. 畫外空間的交互運用，後來畫外空間也成了驚悚片和恐怖片的主要元素，主角冒. y. sit. io. n. al. er. 2012)。. Nat. 險走出畫面外，並因此陷入險境。更或者是主角直接對著攝影機說話 (Parkinson,. i n U. v. 在一定條件下，畫外空間會吸引觀眾更多的注意力，其從屬地位也會發生轉. Ch. engchi. 化。在此鏡頭內的畫內空間，在其他鏡頭裡就有可能作為畫外空間呈現，而鏡頭空間、剪接空間和聲音空間皆可以幫助觀眾建構銀幕外的空間範圍 (戴若葳, 2013)。. 15.

(27) (一) 畫外空間是畫內空間的自然延伸。畫內空間是畫外空間的內涵、畫外空間是畫內空間的自然延伸。在物理空間上是自然的連接，在心理上畫外是畫內的自然完型補充。. 表一：畫外空間是畫內空間的自然延伸. 運動鏡頭：在攝影機的運動過程中，原先的畫框無. 時空是相互聯繫。. 學. ‧ 國. 立. 治政形中消失，引起畫面造型結構的變化，但大主觀鏡頭：. 主觀鏡頭的運用，暗示畫外空間的存在，. ‧. 即攝影機後的空間有人物存在。渲染人. y. Nat. n. al. Ch. er. io. 與人物情境。. sit. 物情緒，揭示人物心理活動，誘導觀眾參. i n U. 畫面中的視線：. v. e n畫內人物注目畫外，目光延伸空間；或者 gchi 將主要演員和戲劇衝突調度到畫外，使觀眾對於畫外的主意力多於畫內。畫外音：畫外音創造畫外空間，畫外音作為畫內空間的補充，將畫外空間牽引進來，更加豐富地展示統一的環境。. 16.

(28) (二) 畫外空間是畫內空間的想像空間。一般情況下，畫外空間是畫內空間的輔助。當畫內空間成為了畫外空間的輔助時，沒有被展示的省略的部分就是觀眾的想像空間，在敘事上產生懸念。. 表二：畫外空間是畫內空間的想像空間. 特殊構圖：一般構圖是選擇恰當的景別和角度更好的. 是不表現應該表現的，給人懸念和遐想。. 學. ‧ 國. 立. 治政表現人物的動作和場面，但特殊構圖恰恰大遮擋效果：. 將畫內的空間遮擋起來，形成縱深上的畫. ‧. 外空間，達到缺省、委婉的美學效果。. n. al. er. io. sit. y. Nat. 場面調度與空鏡頭：. Ch. i n U. v. 人物不僅在畫內可以進行調度，在畫外也. e n同樣可以調度，將人物調度至畫外，或調 gchi 度到有遮擋物的地方，留下空畫面，側面的進行敘事，形成省略的效果，也能產生暗示與想像，引人回味。. 17.

(29) (三) 畫外空間會對畫內空間進行破壞。觀眾在不知情的情況下，完整的畫內空間突然被畫外空間干預、甚至破壞，原本畫面的封閉性被打開，在敘事上往往有新的推動，給人以驚奇的效果。. 表三：畫外空間會對畫內空間進行破壞. 場面調度：人物從畫外突然被調度到畫內，破壞了. 立. 治政原本鏡頭空間的封閉性，創造出了畫外大空間。若畫外空間對畫內空間進行干預，. ‧ 國. 學. 除了在敘事上有所推進，往往是為了產生一種間離效果。. ‧. 光的變化：. y. Nat. 性。利用光拓展空間，渲染環境氣氛。. n. al. er. io. sit. 利用光線的變化打破鏡頭畫面的封閉. Ch. e n畫外音： gchi. i n U. v. 畫外音有時會破壞畫內空間的真實性，產生出間離效果。. 18.

(30) 由上述整理可知，攝影機通常代表著敘事者的觀點，而鏡頭就是傳達情緒的方式。一部電影的拍攝手法以及攝影機運動，乃至於每個分鏡的構圖，都會影響我們對敘事世界中空間意義的認知，以及我們對於劇中人物和事件的態度。. 2.2.2 銀幕到螢幕的比例轉換電影不只是在電影院播放，隨著科技進步，DVD、藍光的出現，電視、電腦螢幕和各式各樣的行動載具皆成為電影呈現的介面，但相對的，電影本身具備的特質在介面轉換過程中被削弱，構圖美學的破壞，導致作者賦予其上的意義消失。. 政治大在電影剛剛出現的年代，所有電影的畫面大小形狀都是差不多的。我們一般立. ‧ 國. 學. 把畫面寬度和高度的比例稱為長寬比(Aspect Ratio)。從 19 世紀末期一直到 20 世紀 50 年代，幾乎所有電影的畫面比例都是標準的 1.33：1(準確地說是 1.37：1，. ‧. 但作為標準來說統稱為 1.33：1)，也就是說，電影畫面的寬度是高度的 1.33 倍，. y. Nat. 這種比例有時也表達為 4:3，就是說寬度為 4 個單位，高度為 3 個單位。這種畫. n. al. er. io. Standard)。. sit. 面比例後來被美國電影藝術和科學學院所接受，稱為學院標準 (Academy. Ch. engchi. i n U. v. 20 世紀 50 年代，剛剛誕生的電視行業面臨著採用何種屏幕比例作為電視標準的問題。為了方便把電影搬上電視螢幕，美國國家電視標準委員會(NTSC)最後決定採用學院標準作為電視的標準比例，這也就是 4:3 電視畫面比例的由來。這個比例一直到今天仍是電視的主導標準。隨著電影通過電視螢幕迅速進入家庭，好萊塢發現電影院裡的觀眾開始大量流失。為了讓觀眾重新回到電影院，他們想出了新主意：立體電影和寬銀幕電影。這兩種電影的試驗實際上從 20 年代就開始了，但直到 50 年代才受到真正的重視。當然立體電影並未真正的成為大眾消費的主流，寬銀幕卻一直傳承下來。 19.

(31) 變形寬銀幕電影是指用變形球面鏡頭拍攝，把圖像在水平方向擠壓，使得畫面能適合於 1.37：1 的膠片，如果對著光源直接看電影膠片的話，圓體看起來就會像又瘦又長的橢圓型。當播放影片時，就用帶有變形鏡頭的電影播放設備，利用光學原理重新把圖像拉寬放映，使圖像回到原來的縱橫比。. 政治大. 學. ‧ 國. 立圖四：1.33：1 畫面比例. 圖五：2.35：1 畫面比例. ‧. y. Nat. 目前來說採用 4：3 銀幕比例的電影已經基本退出歷史舞台，現在主流的電. n. al. er. io (一) PAN & SCAN. sit. 影以 2.35：1 居多。為了將電影畫面擺進電視裡，基本上來說有三種方法：. Ch. engchi. i n U. v. Pan & Scan 是安排一個 4：3 或 16：9 的窗體隨著寬銀幕電影每一幀來回移動從而捕捉畫面的主要部分，這樣產生了許多問題，除了隨意改變了導演的拍攝意念和美學，更糟糕的是忽略掉了許多重要的畫面訊息，幾乎有 43%的畫面是在 Pan & Scan 的取景框外。對於那些喜歡原汁原味電影畫面的人來說並不喜歡這種方式，特別是 4：3 畫面被切割掉太多。. 20.

(32) 圖六：《銀翼殺手》電影原版畫面. 立. 政治大. ‧ 國. 學 ‧. 圖七：《銀翼殺手》Pan & Scan 16：9 電視畫面. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖八：《銀翼殺手》Pan & Scan 4：3 電視畫面. 在《銀翼殺手》的電影場景中，Harrison Ford 正在和 Sean Young 說話。原版背景中導演刻意營造的畫面，在 4：3 電視版中完全喪失了意境，而且兩個角色也只剩了一個。而在大多以 16：9 和 4：3 比例占大宗市場的電腦螢幕上，同樣的問題也存在著。 21.

(33) (二) LETTERBOX 在 Letterbox 方式下，電影的全部原始畫面都被保留了，電視螢幕上下的未使用部分則用黑邊來填充，這樣來構成一個 4：3 或 16：9 的畫面。. 政治大圖九：《心靈捕手》圖十：《都是愛情惹的禍》立. ‧ 國. 學. 如果是 1.85：1 的影片採用 Letterbox 在 4：3 畫面中尚可接受，如果是 2.35：. ‧. 1 則畫面則黑邊過寬有些壓抑。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖十一：採用 Letterbox 方式的 16：9 電視版畫面. 但隨著目前寬螢幕的逐漸普及，在 16：9 顯示產品的支持下，Letterbox 逐漸被大多數人所鍾愛成為目前最為主流的電影轉換電視畫面方法。在電腦螢幕上，多數的影音播放器也是採取此方法。 22.

(34) (三) 重新構圖對於一些電腦製作的電影，為了避免畫面關鍵細節的缺失採用了重新構圖的方式來轉換電影畫面。當然這種重新構圖的成本是非常高的，少有電影廠商會這樣做。. 圖十二：動畫電影《蟲蟲危機》原版. 學 ‧. ‧ 國. 立. 政治大. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖十三：動畫電影《蟲蟲危機》4：3 電視版. 由以上資料得知電影轉化為電視畫面的幾種方法，即便 Letterbox 成為最為大眾接受的方式，但在想要保留電影原汁原味的前提下仍有落差。在介面多樣化的今日，各種大小的載具應運而生，不論是電影轉電視畫面，或是電影轉電腦螢幕，比例不同的問題一直都存在著。(《16：9 不正宗？電影畫面比例是怎樣轉化的》, 2009). 23.

(35) 2.2.3 人的觀看行為在觀看電影的過程中，觀眾以「去身體化」的方式，在敘事世界與銀幕兩端實體世界的交接處，接受訊息並同時進行訊息的解讀。在電影院這個特定的環境下，黑暗將觀眾包圍，大銀幕和環繞音響的渲染，使觀眾全心全意灌注在銀幕上，尤其 IMAX 的巨大銀幕上下左右皆超過人的視角所及，彷彿我們就身處在情節當下，這些硬體規格跟環境都是一般人家中遠遠比不上的，這也是為何在家看電影往往沒那麼深刻，也容易被打斷的原因。. 治政大表四：在電影院和在家看電影的比較立. 在電影院看電影. 在家看電影. ‧ 國. 學. 環境昏暗，視線集中. 光線普通. 電影銀幕大，有被包覆感. 電腦螢幕小，易被框外的事物干擾. 音響聲音大且立體. 使用耳機或小喇叭聽音質差. n. al. er. io. sit. y. ‧. 可以隨意按暫停做自己的事. Nat. 專心坐著不動. Ch. engchi. i n U. v. 因此本研究不在於加強設備的強度，而是期許能利用「互動」的機制造成「沉浸」於場景的感受重現。我們面對週遭空間與環境時，大部分都是經由視覺形式來捕獲空間中的訊息，透過空間中的物件之間的彼此相互關係來產生空間知覺。為了擷取空間知覺，大量的知覺線索必須被人們所使用，而任何空間之中的大小、深度、或距離都可以被視為空間中能夠被感知的線索 (Gibson, 1966)。在自然的景觀中，人類的視線範圍傾向以搜尋的方視觀看，而視角是指視線固定時，眼睛所看到的映像範圍。根據 Gibson 所提出的論點，人類的視角所涵蓋的範圍，水平約為 120 度，垂直為 150 度 (Gibson, 1966)。觀看方式分為凝視、 24.

(36) 覽視和泛視，凝視是人們體察畫面細節的視覺方式，視角約為 1.5 度；覽視為觀察整體最主要的方式，視角約為垂直 60 度，水平 100 度的範圍；泛視有如廣角鏡頭，例如行走馬路時注意來往的車輛，視角約為 130 度 (莊輝煌, 1981)。. 學. ‧ 國. 立. 政治大. 圖十四：人類的視線範圍. ‧. 上述研究可說明人的眼睛其實就像電影畫面，有著類似遠景、中景、近景、. sit. y. Nat. 特寫等等的差別，只不過電影是靠導演的分鏡與剪接，一步步引領著觀眾的好奇. n. al. er. io. 心進入。當電影不在電影院裡播放，我們不用被關在黑暗的空間，不必制約於同. v. 一平面同一角度時，接收影像的方式也相對自由。本研究嘗試打造一個互動螢幕. Ch. engchi. i n U. 系統，相似於人類在現實世界中所觀察空間的方式去欣賞電影，使觀者不必被大場景包圍仍有沉浸於其中的錯覺，回歸敘事自由觀看的本質。. 2.3 自然人機介面. 2.3.1 人機互動早期的電腦操作中，使用者要透過執行列輸入指令，但這樣的方式需要學會程式語言，對一般使用者困難度較高。後來開始有人將作業系統視窗化，並將應用程 25.

(37) 式圖像化，使用者只要點選即可使用，透過圖像式的聯想，讓電腦使用的門檻降低很多。但圖像化介面的操作，仍要鍵盤滑鼠輔助，對於許多使用者來說仍是一大挑戰。當 5 歲到 95 歲的人都想學習電腦，設計人員跟程式設計師企圖將電腦使用者介面變成很容易學習的，甚至不需要學習即可使用。在自然介面(NUI； Nature User Interface)的概念中，使用 Natural 這個形容詞，目的就在於一般的使用者介面都需要經過學習，而 NUI 是靠著使用者相關的自然動作去判別指令，泛指不使用滑鼠跟鍵盤，也不用透過圖像化的介面，即可跟內容進行互動。 (Peggy, 2010)。. 立. 政治大. Nat. sit. y. ‧. ‧ 國. 學圖十五：電腦操作介面演化過程. io. er. 事實上，在圖形使用者介面與自然使用者介面之間仍有一類較為特殊的類型，稱作可觸式使用者介面 (TUI； Tangible User Interface) 。其特性是介面應針對不. al. n. v i n Ch 同的互動內容而有對應的直覺操作方式。可觸式使用者介面通常被設計成日常生 engchi U 活實體的造型或功能性的人機介面，透過使用者對其實體的自然使用習慣讓玩家能快速學會使用該介面與數位內容互動 (Edge，2008) 。較廣為人知的例子是 Wii Remote 體感控制器，由於 Wii Remote 包含了許多種類的物理感應器，玩家可以. 甩動搖桿進行揮拍、甩竿等動作，或者利用內置的水平儀進行平衡調整等豐富的互動方式。其他類似光線槍、遊戲用方向盤、飛行模擬搖桿等特殊裝置，也都算是可觸式使用者介面的範疇。. 在較為普遍的認知裡，自然使用者介面很容易與可觸式使用者介面混為一談， 26.

(38) 區分這兩者之間的差異，在於使用者在熟悉使用方式之後，並不需要察覺到自然使用者介面的裝置，換言之，在某種程度上而言該介面對於使用者而言是隱形的。優良的介面無痕跡的穿梭於實體和虛擬空間之中，能夠消弭這兩者間的差異，使人感受不到科技的存在。較早期的例子如使用攝影機擷取畫面，對於使用者影像進行分析的視訊互動介面，使用者在熟悉操作的方式之後經常會忽略攝影機的存在而專注於畫面上的表現，這點對於使用者在虛擬環境中，增加臨場感和沉浸度上有很大的幫助。因此在近代的人機互動研究中，大多是探討第三階段的自然介面部分，而本. 政治大. 研究更是著重在後半段的自然使用者介面上。Laurel 在人機互動的研究範疇中，. 立. 提出人機互動是一種享受與體驗的設計，所有介面應該盡量接近人性、自然與直. ‧ 國. 學. 覺的體驗。以「自然」、「即時」的互動特質來考量設計，最自然的互動方式應該以直接操作與直接介入的形式來進行。Laurel 提出的人機互動設計原則如下：. ‧ sit. y. Nat. (一) 直覺的操作(Direct Manipulation). n. al. er. io. 「直覺的操作」一詞是由 Ben Shneiderman 所創，當時他列出三個關鍵. i n U. v. 的準則，一是人對視覺導向的物件引發的興趣；二是實際的行為控制優於複. Ch. engchi. 雜的語法控制，例如滑鼠點擊的操作優於鍵入指令的控制方式；三是快速的回饋與可重複性的操作，讓使用者保有興趣持續探索。 (二) 直覺的介入(Direct Engagement) 「直覺的介入」的概念源自於人機互動中「經驗的設計」理念，不過卻將焦點自操作物件的呈現轉移開來，以達到讓使用者直覺地參與互動的理想。這樣的理念重新定義了互動應用的主體與互動介面的關係，人機互動本身的設計與互動介面的設計在此便被整合至同一個設計程序中。 (蘇志昇, 2011) 27.

(39) 而對於互動的介面模式，Jeng 提出人本互動模式(Human-Centered Interaction Model)來加以檢視，以認知空間、實質空間、虛擬空間來區分互動事件發生的狀態。1. 在認知空間中，使用者接受感知之後，發生動作；2. 在實體空間中，人透過操控介面進行互動，觸發事件；3. 在虛擬空間中，藉由互動來觸發虛擬化互動模式的進行，進而透過數位化介面回饋給使用者 (Jeng, 2002)。. 政治大. 立. ‧. ‧ 國. 學. io. sit. y. Nat. n. al. er. 圖十六：人本互動模式(取自 Jeng, 2002). Ch. engchi. i n U. v. 使用者從認知空間經由實體空間最後進入虛擬空間，最後回饋至人本，如此不斷循環，而當雙方認知被辨識，反射動作的發生，即形成完整的互動意涵。. 2.3.2 電腦視覺電腦視覺(Computer Vision)是透過電腦系統模擬人類的視覺，利用攝影機模擬人的眼睛，並且連接電腦，將擷取到的畫面資訊交由電腦系統運算處理，以能夠感知目前所屬的三維空間的狀態。電腦視覺流程可分為「影像擷取」、「影像數位化」和「影像處理」等步驟： 28.

(40) 「影像擷取」是透過類似人眼中視網膜成像原理，以感光元件擷取所需要的影像資料；「影像數位化」是將影像擷取階段所需的資料轉換成電腦可讀取、編輯的資料型態；「影像處理」是其中最核心的關鍵技術，採用各種演算法修改數位影像。例如放大、增減光、去除雜訊、修改顏色、影像分割、特徵擷取等，主要用途是強化影像中資訊，使影像易於應用。而如今電腦視覺的研究日益成熟，已經發展出許多不同的技術，運用在各個領域中。例如在醫學上可配合電腦斷層掃瞄重構出人體橫截面組織影像，使醫護人員可以以非侵入方式，透視人體各器官的型態變化；地質探測利用衛星拍攝地. 政治大. 表影像，再進行光譜處理分析，來辨別地表上的物種類及變化；機器人可以透過. 立. 影像處理擁有像人類一樣的視覺，閃避路徑上的障礙物，對看到的環境做出判斷；. ‧ 國. 學. 或是收集大量的人臉圖像，由統計測量方法取得由臉部得到之特徵向量集合，藉以辨識畫面中臉部的位置，甚至是五官和表情，可應用於門禁管理或犯罪偵查。. ‧. sit. y. Nat. 一但電腦學會如何自己「看」，便能帶給互動方式更多的彈性，像是語音、. io. er. 書寫、手勢、眼球轉動、頭部與肢體動作移動等訊號辨識，經過系統運算處理，利用多媒體介面將結果輸出。這類系統代表了電腦運算與人高度互動的新趨勢，. al. n. v i n Ch 逐漸改變人使用電腦的方式，提供了人與機器之間一種良好的溝通模式。若是應 engchi U 用於作品上，電腦視覺有某種「強迫」觀者參與的特性，只要進入攝影機的範圍內，觀者就與作品產生連結，對於參與感營造上是一大利器。. 29.

(41) 2.4案例分析. 在這一節將列出與本作品概念或形式類似的案例，共通點是運用影片達到說故事的任務。不論是虛擬動畫或是實景拍攝，除了打破螢幕框架的限制，生動的互動方式是他們共同的特色。良好的互動與內容能讓觀賞者更主動地參與其中去探索，而探索的過程將使得故事的內涵更深植人心。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 30. i n U. v.

(42) 表五：案例參考一. 名稱. Movi Kanti Revo. 背景. 2012 年 9 月 19 日～今日. 出處. http://www.movikantirevo.com https://www.youtube.com/watch?v=tT99J65Y37s. 截圖. 立. ‧ 國. 學. 「在一個充滿愛、疑惑、希望與夢想的感性世界旅行」。. ‧. 內容. 政治大. 整個線上秀的開始是一個女孩用一種臆造的語言邀請你進入她的世界，. y. Nat. io. sit. 共分成五個章節。太陽馬戲團打造了豪華的聲光效果去塑造他的奇幻形. n. al. er. 象，只是這次不在舞台，而是在每個人都擁有的電腦上。並不需要用鼠. Ch. i n U. v. 標點擊地點，只需要在攝像頭前面挪動身體或揮揮手，就能跟隨表演者. engchi. 們的腳步，去探索一個個神秘、未知的空間。技術. 利用 HTML5 和 Chrome Experiments 的 WebGL 技術，透過架設在電腦螢. 分析. 幕前的 Webcam 擷取影像，及時分析動作，就能讓每個使用者在自家電腦前，透過手勢進行操控。影像呈現方式則是利用 2D 真實影像在 3D 空間裡做疊合，在特定視角下有相當擬真的效果。. 優點. 以第一人稱的視角，每一幕相當具有主題性，以物體或人物引領視線往前進，取鏡方式獨到且多變，且以 2D 影像做疊合的方式有特殊的美感。. 缺點. 單有華麗的場景，缺乏連續的故事性，而在感應方面靈敏度偏低。 31.

(43) 表六：案例參考二. 名稱. Find Your Way to OZ. (尋找奧茲之旅). 背景. 2013 年 2 月 5 日～今日. 出處. http://www.findyourwaytooz.com/ https://www.youtube.com/watch?v=nxMlI4z-Khc. 截圖. 政治大. 立. ‧ 國. 學. 以童話故事「綠野仙蹤」為靈感，迪士尼推出魔幻電影奧茲大帝，並與與. ‧. 內容. Google Chrome 團隊一同打造的宣傳互動網站，邀請大家一起來場尋找奧. y. Nat. io. sit. 茲之旅。在網站中，有三個場景轉換，透過視訊攝影機、遊戲的互動方. n. al. er. 式，來引導使用者進入虛擬世界，尤其第三幕捲入暴風圈的臨場感，應. Ch. 該是整體網站的重點。. engchi. i n U. v. 技術. 用 HTML5 和 Chrome Experiments 的 WebGL 技術，在 CSS3 的特性下，客. 分析. 製化 3D 元素，連聲音也是打造成 3D 音效，並使用 Webcam 拍攝影像讓使用者製作自己的逐格影片。. 優點. 完全 3D 場景打造，畫面精緻，色調與音樂搭配得宜，適當的互動可讓觀者再一次會來辦訪此網站的意願上升。. 缺點. 使用滑鼠和鍵盤，非直覺性操控，臨場感略為降低。互動方面雖然有趣，但有點太過淪於遊戲化，似乎打斷敘事的進行。. 32.

(44) 表七：案例參考三. 名稱. AXE DRY | HOT ANGLE. 背景. 2012 年 8 月～今日. 出處. http://www.axeeffect.jp/dry/index.html. 截圖. 政治大. 立. ‧ 國. 學. 內容. 男性清爽體香劑品牌有別於 Old Spice 的 Man Power，清涼的辣妹拿著 AXE. ‧. 總給人「噴了就能吸引異性」的美好遐想。為了讓男性流汗，廣告團隊在網路上建立了此網站。透過幾近偷窺的曖昧角度，多位穿著清涼正妹笑. y. Nat. io. sit. 臉招呼、戲弄挑逗，由 Webcam 即時捕捉使用者頭轉動的方向操控視野，. n. al. er. 如此誘人的畫面讓人臉紅心跳又不時要回頭看看有沒有人在身旁，最後. Ch. i n U. v. 還會跑出消耗統計數據，讓使用者體驗後得到回饋，增添趣味性！. engchi. 技術. 以 Flash 撰寫加上人臉識別，透過電腦螢幕前的 Webcam 擷取影像，即時. 分析. 分析人臉的位置，與所觀看的角度相呼應，可移動上下左右四個方位。. 優點. 特殊視角跟題材撩撥使用者好奇心，與其所要宣達的產品環環相扣。 Webcam 加上人臉辨識，效果靈敏度佳，且因為是實景拍攝的關係，更有身處於當下的臨場感。. 缺點. 只有一個場景的視角轉換略顯單調，除了視覺上跟心理上的刺激外，缺少敘事結構，很難使人持續去使用，但就廣告來說的確是有達到讓人會心一笑的效果。 33.

(45) 表八：案例參考四. 名稱. Chaos to Perfection. 背景. 2012 年 8 月～今日. 出處. http://www.chaostoperfection.com/. 截圖. 立. ‧ 國. 學. 內容. 政治大. Google 製作了一個使用 WebGL 的 3D 凡爾賽宮互動導覽，這導覽帶領使. ‧. 用者們參觀這個法國皇宮中許多的著名地點。這項 Chrome 的實驗名為”. Nat. sit. y. Chaos to Perfection”，它將歷史帶進了數位的時代，提供使用者與其互. n. al. er. io. 動的機會且具有教學的意義。你可以一次觀賞完整的導覽，或者你能把. i n U. v. 它分成幾個使用 Google3D 模型的重要地點來參觀。你能夠探索大運河，. Ch. engchi. 鏡廳，橘園，柱廊，以及其他地方。技術. 用 HTML5 和 Chrome Experiments 的 WebGL 技術，讓網頁也能流暢地即. 分析. 時跑出全 3D 場景，使用者可悠遊於其中，輔以滑鼠操控畫面視角。. 優點. WebGL 的技術可讓手持裝置流暢的撥放網頁上的影片，全 3D 場景的打造加上畫面的設計，即使不做任何操控，光視覺就可滿足使用者對凡爾賽宮綺麗的幻想。. 缺點. 以功能面來說，使用者與網頁的互動方式，對於使用者本身沒有太大的意義，網頁設計本身還是以瀏覽地圖為主要目的。 34.

(46) 根據以上的案例分析，HTML5 搭配 WebGL 幾乎可以概括大部分的影音功能，也不需要像 Flash 需要加裝外掛，以每個使用者在家中使用方便為前提下，是現階段較為適合的網頁技術。而從內容層面得到的啟發，認為影像是一門用「看」的藝術，過多跟觀看沒必要的動作，像是滑鼠點擊，畫面提示等等，容易打斷敘事的進行。另一方面，雖然動畫可以比擬真實的場景，但仍不如真實拍攝的影片，較容易增加觀者的情感投射。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 35. i n U. v.

(47) 第參章系統設計實做. 本章節分為三大部分，第一節為設計理念與形式，闡述創作的想法及由來，以及如何建立具有沉浸體驗的互動模式；第二節為系統實作，分別說明硬體和軟體這兩塊所需要用到的設備和技術；第三節為影片製作，從文字腳本到分鏡，組織故事的發展，另外也展示拍攝的企畫書以及拍攝當天的情形。. 3.1 設計理念與形式. 立. 政治大. ‧ 國. 學. 3.1.1 設計理念. ‧. 在家裡用螢幕看電影跟在電影院最大的差別在於環境以及設備，電影院的氛圍可讓觀眾更容易將專注力投注在銀幕上，而家中的電腦螢幕過小，使得我們視線容. y. Nat. io. sit. 易被螢幕框架外的空間干擾是其缺點，但從另一個角度看，電腦本身以及內建在. n. al. er. 電腦螢幕上的小型視訊攝影機，幾乎每個家庭都存在的設備，或許能提供某種互動的可能性。. Ch. engchi. i n U. v. 大部分的影片互動方式選擇將重點放在「產生敘事的數位方法」上，像是滑鼠點選抑或是語音文字輸入，但過多的思考行為將會降低使用者沉浸於故事中的程度，也破壞了觀影的流暢度。回歸電影本身是一門用「看」的藝術，我們希望讓影像的敘事性融合數位空間的瀏覽，打造一個觀影樂趣取決於影片的呈現上的系統。我們保存影片本身的敘事脈絡，而數位工具在於打破一般人對畫面的想像，在影片本身的特性上加以深化。本系統希望透過使用者和螢幕互動，以及影片本 36.

(48) 身的視覺符碼，建構出介於螢幕和虛擬實境之間，一個具有吸引力的空間。讓使用者能透過自然的身體移動，換句話說，更貼近於直覺的本能去決定故事的片段，試著讓全身感官沉浸於敘事的世界，把部分影像主控權由導演交還給觀眾，提升使用者對故事的認同。重要的是，「沉浸體驗」即在數位媒材與互動機制下的相互激盪下產生。. 3.1.2 互動方式當一個陰影從首頁的右邊進入，會不會讓使用者在進行到下一頁的連結時產生好. 政治大. 奇；當電腦螢幕的下方泛起一陣白煙，是不是可以讓使用者產生「是誰在畫外空. 立. 間抽煙？這個人有什麼話要說嗎？」的疑問；如果畫面上出現一個生物看著左邊. ‧ 國. 學. 或右邊的畫外空間，對於使用者的瀏覽行為是不是可以有更多的樂趣？. ‧. 傳統的方式，是透過攝影機運動加上剪接，配合媒體呈現的方式，構築了觀. sit. y. Nat. 者對電影空間的想像。以往螢幕大小限制了影片的長寬，四個邊框侷限了影片的. io. er. 視野，現在我們打算試著把螢幕當作一扇窗，影片內容則是窗外的世界，隨著觀看角度的不同，我們所看到的窗外世界也會隨著我們的位置而有不同的變化。畫. al. n. v i n Ch 內空間以及畫外空間的界線，會因為此設計不再有明顯區別，以往分鏡構圖所要 engchi U 傳達的意義，也能藉著此互動有更多探索空間。. 其實傳統電影敘事本身就具備某種主觀意識，例如大部分的好萊塢電影會先用長鏡頭拍攝主角整體，當主角將手伸入口袋中，鏡頭接著便會特寫口袋。電影的剪接適時的提醒我們應該注意哪個畫面，當然這也順著觀眾的好奇心脈絡前行，只是大部分的觀眾在當下不太會去察覺罷了。而本系統則全然將這個選擇權交還給觀眾本身，隨著觀看的角度不同，觀眾視野跟著改變，電影所跳接的片段也有所差異，觀眾是以一種自由、非線性的型態遊走於電影中。 37.

(49) 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖十七：隨著觀看的角度不同，影片會隨之調整至對應的視野 38.

(50) 根據第二章文獻探討，使用者能使用自然直覺的方式來進行互動行為與控制，直接與虛擬環境互動的結果，能得到較大沉浸感，要是控制或互動行為是以身體或是身體的一部分來與之互動時，則會得到較大的存在感，能控制的行為越多，存在感越大。因此我們在劇情上發揮巧思，實作分鏡腳本，使得使用者的選擇是出於一種好奇心或是偷窺慾，進而去挪動自己的身體去探知窗後的世界。就某些角度來說，電影是種觀眾滿足偷窺慾的方式，因為我們可以從第三人的角度去觀看整個電影當中架構的故事以及世界，每一個劇情的轉折、角色的對話，對於觀眾來說都是. 政治大. 一個「觀看」的行為，而這個系統的機制是將這個過程更加誘發出來，因此，不. 立. 須脫離日常經驗，對使用者來說仍是種直覺的互動方式。. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖十八：技術加上內容提升沉浸體驗. 39.