互動式圖文閱讀系統

亞東技術學院教師產學研究計畫成果報告

互動式圖文閱讀系統

計畫編號：98-5-07-108

執行期限：98 年 09 月 01 日至 99 年 07 月 31 日

主持人：林大偉 單位名稱：工商業設計系

參與學生：劉書豪、徐平

合作廠商：世享國際企業有限公司

摘要

漫畫是用線條、圖面、文字所集合繪製，運用分鏡手法來表達一個完整故事的連續 圖畫作品。本計畫從設計的角度切入，融合電影手法和多媒體的互動概念，嘗試以一種 全新的非線性閱讀方式，讓原本僅僅呈現於紙本的漫畫形式，在不抹滅原有的特殊閱讀 樂趣的原則之下，在數位媒體上找到一塊可行的展示舞台。據此，多重敘事結構的概念 被運用在劇情的開發上，本計畫希望藉此觀察閱讀者在價值觀與選擇之間是否具有絕對 性。 然而，由於人力、時間和資源方面的限制，本計畫僅能在預定期間內將作品完成， 卻未能針對閱讀者在多重敘事結構中所展現的選擇和價值觀予以深究，實在可惜。此 外，本研究的另外一項貢獻是，嘗試著在設計中期引進分鏡腳本的概念，讓沒有漫畫經 驗的繪製者在人物設定階段之前，先以印象速寫形式初探文字劇情視覺化，再逐漸描繪 主要人物之性格，而不同於常規的循序漸進。所得結果，能讓從未參與過漫畫製作的設 計系學生，在有限時間內，完成高達 50 頁之漫畫創作。 關鍵詞：非線性閱讀、多重敘事結構、圖像表達

一、 創作理念

數位顯示技術發達，許多原本採用紙本或實體印刷的閱讀形式，逐漸流向數位閱讀 平台，例如：電子書。基本的出發點，來自於期待「數位化」與「環保」所帶來的「美 麗新世界」。然而，當許多傳統媒體內容數位化之後，將浮現二個使用介面上的問題。 第一個問題是，原來的媒體形式是否依然存在？在這種「數位化」的趨勢下，影音 媒體的移轉過程屬於和平且成功的，因為除了把類比訊號轉換成數位訊號之外，觀眾的 閱讀習慣是沒有太大改變的，依然是透過螢幕和喇叭來欣賞，屬於一種被動的閱讀形 態。然而，當原本以紙本作為載具的平面媒體，在轉換過程中，也許就為觀眾帶來不少 的衝擊。常見的轉換形式有二種，第一種形式是直接掃描，無論文字或圖表，都以圖素 （pixel）訊號呈現，藉此保留平面媒體的類比形式；另一種形式是徹底地數位化，文字

的部份轉換成電腦可以理解的數位訊號，重新編排或組織之後，以嶄新的數位媒體形式 呈現，好處是媒體內容可以再編輯。 第二個問題是，原來的閱讀形式是否被保存？無論平面媒體在「數位化」之後的形 式究竟屬於類比訊號或數位訊號，似乎都忽略了一個基礎問題：「媒體載具改變的同時， 意味著閱讀介面也跟著改變，使用者的閱讀習慣也必須改變」。於是，當廠商以生產者 的角度自居時，那麼「數位化」的結果就是「使用者必須學習」，換句話說，當原本熟 悉的平面媒體，如報紙、雜誌、漫畫、小說變成電子書時，人們必須學會如何新的閱讀 介面，即使這些新介面是簡單的Word或Adobe Reader，以人機介面的角度來看，就是 「人們必須被動地適應機器」。相反地，當廠商以行銷者的角度自居時，那麼「使用者 習慣應該被尊重」，換句話說，即使經由「數位化」之後的媒體形式，應該盡其所能地 保留該媒體的原有閱讀形式，例如：翻閱。 因此，當科技越來越進步的同時，理想的未來不應該是讓人們越來越憂愁，因為人 們必須學習更多的新操作技能。本著「科技不僅始於人性，更要尊重人性」的目標來看， 在互動設計領域的現有理論與技術基礎之下，本計畫期望，藉由產學合作案的討論，企 圖發現互動閱讀領域中些許仍有改善空間的議題，並且同時將互動閱讀所延伸的「選擇」 概念，延伸至創作內容的架構與鋪陳，企圖發現一種嶄新的「互動閱讀形式」。

二、 學理基礎

2-1. 非線性閱讀 SWITCH，有開關、轉換、電閘等意思；在以「敘事」為基礎的各式創作中，除了 有著轉換、選擇等延伸的意義之外，同時也意味著一種跳躍式閱讀形式，這是長期以「線 性閱讀」為基礎的紙本機制難以突破的硬體形式。實際上，包括電影在內，以編劇的手 法來突破「線性閱讀」的形式屢見不鮮，例如：倒敘法。然而，這些非以硬體形式為主 的「非線性閱讀」必須強烈地仰賴閱讀者的記憶力，時間自然成為一項不可抗拒的變數。 換句話說，敘事者必須在記憶有效的期限內，改變敘事順序並且企圖在閱讀者的記憶中 重新組合，企圖藉此延展敘事強度。因此，當閱讀者的記憶容量難以負荷，或邏輯模糊， 此種「非線性閱讀」形式，往往弄巧成拙。 利用「倒敘」來顛覆線性結構，並非豐富敘事強度的唯一手法。嚴格來說，即使順 序重組，閱讀行為仍然停留在「線性閱讀」，這往往是硬體形式的宿命。以電影來說， 除非將電影螢幕搬回家庭劇院或電腦平台，缺乏了「互動機制」，即便有著聰穎的編劇 貢獻了卓越劇情，對於閱讀者而言，仍舊是一種「線性閱讀」。如同 1999 年出品的《蘿 拉快跑（Run, Lola, Run）》（Tykwer，1999），導演嘗試著以多重敘事結構來突破傳統， 其後現代的表現手法雖然成為德國影史上最重要的前衛作品之一，仍舊無法逃脫「線性 閱讀」的硬體形式。因此，若未能細心品嚐導演之用心，重複三次個劇情，可能讓閱讀 者感到枯燥乏味。本計畫認為，若要確切實現「多重敘事結構」，閱讀媒體形式必須是 涵蓋「互動機制」的硬體形式。

2-2. 主流分界之下的價值觀 有趣的是，當導演Tykwer以多重敘事結構來詮釋《蘿拉快跑》時，即使不允許閱讀 者進行互動，仍嘗試著將「選擇」的觀念融入劇情，如同遊戲可以重來的概念。於是， 藉由電影開場的一句重要旁白：「遊戲的結束即是遊戲的開始」，Tykwer嘗試著探討， 後現代社會的人們，在這種週而復始的迂迴思考模式之下，將如何看待自己的生活，這 將是一種嶄新的價值觀（陳韻琳，2010）。 實際上，所謂的價值觀也是一種處理事情、判斷對錯、選擇取捨的標準。然而，選 擇本身並未反映對錯，僅僅顯示價值觀的差異。舉例來說：近年來某些基金會或團體刻 意將「吸菸者」塑造成壞的形象，並將「在吸菸者面前表現出厭惡的神情」判定為好的 行為的價值觀，藉此可以用群眾壓力來減少吸菸人數。這或許是一個有效的方法，然而， 有效的方法未必是建立在正確的價值標準之上。但是，跟著這個潮流走的人們可能就被 這個隱藏的價值觀所左右而生活受到影響。不吸菸者可能很無禮地用鄙視的神情看待吸 煙者而自以為是（冀劍制，2006）。就以上的例子而言，呈現了二種選擇：吸菸與不吸 菸、不吸菸者的態度，二者之間雖然有關連，卻不見得存在著絕對關係，其關鍵在於主 流和非主流。當「吸菸」成為主流時，不吸菸者的空間權益往往被忽視；而當「不吸菸」 成為主流時，吸菸者的社會空間則逐漸被弱化。 儘管生活在同一個空間，對於某些議題的看法不同，當這些看法反映在累計數量 時，許多類似的價值觀容易被歸於某種群組，也逐漸地形成所謂的主流和非主流，兩者 之間的位置也會不斷地變化。然而，流行文化是恆變的，並且有特定的時間和地點。一 些被主流社會忽略的事物，當受到小部分人的強烈關注後，有可能漸漸形成流行文化（高 宣揚，2002）。有趣的是，價值觀原本不見得清晰明確的人們，也許是為了尋求主流社 會的認同，選擇往往也會趨於主流。可見，選擇在大部分情況下所反映的不見得是個人 價值觀，而是社會價值觀。於是，本研究所關心的的是，當敘事內容牽涉一項社會議題 時，並且在閱讀過程中提供「可以選擇劇情發展」的互動機制，人們的選擇是否相似於 社會價值觀，或者忠於個人價值觀，抑或是純粹地隨機選擇？同時， 當劇情可以選擇， 所引發的一個有趣議題是，創作者所主導的訊息傳達結構是否依然完整？訊息是否容易 被誤解？訊息的傳遞是否因為閱讀者的不完整揭露而顯得以偏概全？這些都是本計畫 在後續創作過程中，必須反覆去咀嚼的問題。 2-3. 環保議題之中的麥高芬 「麥高芬（MacGuffin）」是一個電影用語，源自於法國導演楚浮（François Truffaut） 對電影大師希區考克（Alfred Hitchcock） 的經典訪談，後來被引用成在電影中可以推 展劇情的物件、人物、或目標，例如一個眾角色爭奪的東西，而關於這個物件、人物、 或目標的詳細說明不一定重要，有些作品會有交代，有些作品則不會，只要是對電影中 眾角色很重要，可以讓劇情發展即可算是麥高芬（維基百科，2009）。如同《臥虎藏龍》 中的青冥劍，或是《不可能任務3》中的兔腳，它到底是什麼東西，其實電影裡並沒有 清楚去解釋，但就算觀眾不知道也無損整個主角追趕跑跳的故事進展，因為「麥高芬」 就是個驅動整個劇情的裝置，一個讓主角上山下海的動機。「麥高芬」是觀眾的背後世

界，因此它無法「是」什麼，如果觀眾知道那是什麼，它將屬於觀眾的面前世界。但「麥 高芬」卻也並非「什麼也不是」，如此觀眾根本不會意識到它，也不會害怕。但「麥高 芬」卻是緊緊貼靠著、包圍著觀眾的身體、生活、親愛的人…，它沒有形體，沒有名字， 卻確實在那裡（黃以曦，2008）。 近年來，隨著環保意識抬頭，科學家的數據研究、天災的經歷、電視的報導、電影 的宣傳等，環保意識是一個逐漸從非主流轉變成為主流的炙熱議題。自從1972年《聯合 國人類環境會議宣言》宣告人類與環境的觀念連結、達成「我們只有一個地球」、「人 類與環境是不可分割的共同體」的共識後，環境保護議題正式被世人所關心（數位時代， 2008）。於是，當環保議題成為本計畫創作的主要時空背景，採取多重敘事結構的劇情， 可能因為閱讀者之意識或無意識選擇之後顯得雜亂無章，因此需要一項適當的「麥高芬」 作為串起全部劇情結構的媒介。換句話說，如果將可以自由選擇的片段劇情視為布片， 那麼「麥高芬」就是串連這些布料成為衣裳的針線。環保議題之中的「麥高芬」，往往 來自於一個簡單易懂的「符號（Symbol）」，也許是一縷葉片、一顆種子或一滴水，企 圖詮釋這個抽象且浩大的概念。諸如前述，「麥高芬」的概念可以是新奇詭怪，但必須 是輕易地被理解。

三、 主題內容

3-1. 設計理念 綜合上述文獻，本計畫創作小組以環保議題為主軸，並且承接「種子」概念而形成 「麥高芬」，將時代背景設定於一個「植物即將滅絕」的惡劣環境。面對如此議題，人 們究竟為了何種價值觀而企圖延續植物的存活？或是採取放任態度而任其自生自滅？ 據此，本計畫將展開一連串的劇情。 3-2. 設計規範 根據本計畫初衷，最終創作物必須滿足「互動閱讀」、「多重敘事結構」和「麥高 芬」等必要條件，轉化成具體形式之後的設計規範，如下所示： a. 以「靜態漫畫」形式作為主要敘事之手法。 b. 至少 3 條敘事分枝，每條分枝至少 2 個分歧點。 c. 以 42 吋螢幕呈現視覺，並以嶄新形式進行直覺式「翻頁」行為。 3-3. 設計流程 由於本計畫小組成員，均未正式經歷過以視覺作為主要敘事手法的相關設計工作。 本計畫有必要在計畫正式進行之前，釐訂明確的製作流程，如圖 1 所示。其中，「發散 設計」至「故事確定」的發展重點在於故事與敘事手法，而「風格設定」至「編排完稿」 的發展重點在於視覺設計。

修正 主題確定 設計規範 發散設計 收斂設計 故事確定 風格設定 分鏡腳本 人物設定 修正 編排完稿 完成 圖 1、本計畫所採取之設計流程 3-4. 發散設計 計畫初期，由於參與成員在過去均未有敘事經驗，在尋找故事靈感之際，成員被要 求從自己生活周遭去發現問題。一位成員從自己的電腦繪圖作品中找到可能性：「鐵絲 女巫」和「最後一棵樹的願望」，如圖 2 所示。其中，「鐵絲女巫」敘說一位被詛咒的 女孩，因全身佈滿鐵絲而遭眾人排擠，最終因犧牲奉獻而獲得眾人接納；而「最後一棵 樹的願望」則描述著環境嚴重污染的未來，經歷戰火摧殘之後碩果僅存的樹，即將面臨 人類的不同抉擇而有著不同命運。雖然二者均有著豐富發展性，但後者因為更能直接切 入環保議題而被保留繼續發展。 圖 2、發散設計：「鐵絲女巫」和「最後一棵樹的願望」 然而，幾經討論，若將敘事主軸放在樹木本身，那麼劇情發展難以脫離傳統的環保 議題。因此，小組成員決定加入不同以往的價值觀，企圖使閱讀者以未曾經歷過的角度 進行「抉擇」。以圖 2 的「最後一棵樹的願望」為例，便是嘗試著以植物的主觀角度， 讓人們重新省思自己的行為，無論是粗暴或友善。其原意描述著，一棵原本即將枯死的 大樹，由於人類的不捨（或是為了面目全非的環境而贖罪），企圖採用各種最先進的科 學救活它，導致大樹處於一種滿目瘡痍而奄奄一息的窘境，然而一旁拿著火焰噴射器的 科學人員，也許聽到大樹的哀號（或也許自己看不下去），因此想要結束這場鬧劇。於 是，根據「最後一棵樹的願望」的原創，小組成員嘗試著繪製各式植樹及各種樣貌，並 嘗試加上可能背景，如圖 3 所示，並企圖從其中發現多重劇情的發展可能性。

圖 3、樹的發散草圖 3-5. 收斂設計 收斂設計的目的，在於確定故事主軸。此一階段的過程是，小組成員所採取的創意 發想方式屬於「圖像激盪法」，經由不斷地交互討論與發展，嘗試著以任何方式將言談 或腦中所形成的「關鍵影像」記錄下來，整理之後繪製在單獨的紙張，逐漸形成一張張 的關鍵情節，以類似「拼圖」一般的重組和排列方式，進行故事架構的形成與修飾。此 時，若遇到許多情節無法順利接上，其中的斷層則成為一個新的討論重點，逐漸添加細 節畫面加以銜接。然而，在故事主軸的發想過程中，並不如前一階段的「發散設計」一 般地完全天馬行空，即便劇情可以極端地荒謬不合理，而故事本身則必須時時檢驗劇情 被閱讀時的邏輯，因此才能引人入勝。以下，便是初擬之後以文字和影像所呈現的故事 大綱： 一棵僅存的樹的衰變，終於引起人們的關注，為了救活它，人們無所不用 其極，不論是否能完全修復，對人們來說，樹的存活意義比起樹的健康來的更 重要：「拜科技所賜人們再次證明了自己的能耐」。不到幾天，原本快枯死的 樹，很快就恢復了生機，並結出了豐美的果實，大家便將果實摘下分給眾人， 讓彼此分享這個勝利的滋味，而後吃下果實的人們便在當晚睡夢中死去，身體 則被許多藤蔓與花朵纏繞著。樹木為了生存而做了改變，人們也為了生存而改 變環境。 然而，上述文字所敘述的劇情僅僅是其中的一個分枝。如同故事原創想要帶給人們 思考的價值觀是：「拯救瀕臨滅絕的植樹，究竟是一種贖罪？還是一種人定勝天的自我 滿足？」。如同《蘿拉快跑》的三段劇情一般，當分枝劇情形成的同時，導演的企圖也 相應而出，劇情的排列結構，更是顯示出導演的期望。然而，在本計畫所呈現的多重劇 情中，這個價值觀卻希望由閱讀者來完成。因此，以圖 4 的結構來說，共有 2 個分歧點、 3 個劇情分枝。第一個分歧點，將讓閱讀者決定「是否拯救瀕死的樹？」，選擇「不拯

救」進行 B 段劇情；選擇「拯救」進行 A 段劇情。而當被救活的大樹產出豐盛的果實 之後，第二個分歧點呈現，閱讀者將再次抉擇「如何處置這些果實？」，選擇「吃掉果 實」進行 A1 劇情；選擇「種植果實」則進行 A2 劇情。 B A A2 A1 圖 4、故事發展過程所記錄的關鍵影像及其敘事結構

四、 方法與技巧

4-1. 視覺風格設定 即便在「收斂設計」階段以「圖像敘事」的方式確定了故事主軸，由於屬於一種印 象記錄形態的速寫形式，發展階段所衍生的「關鍵影像」在視覺風格方面，一直處於混 亂不一致的情況。因此，在正式開始繪製之前，視覺風格必須被確定，並且定義出幾個 重要場景或人物的視覺設定，甚至將要使用的工具和繪製技巧，都必須被明確定義。因 此，在繪製初期，Joachim（2010）的繪畫風格被視為重要的觀摩對象，其線條俐落直 率的風格，和豐富色彩堆疊而成的空氣感，都是被嘗試的視覺效果。如圖 5 所示，小組 成員曾經嘗試過的二種視覺風格。最後，由於所需篇幅龐大，在製作時間考量下，

圖 5、二種不同的視覺風格：強烈的黑白線稿、多層次的彩色質感 4-2. 分鏡腳本粗繪 本計畫採取「靜態漫畫」形式進行敘事，對於漫畫形式尚且陌生的小組成員而言， 必須同時兼顧情節發展以及視覺美感之編排，魚與熊掌難以兼得。數次討論之後，嘗試 借用電影或動畫常用的分鏡腳本，企圖以故事敘述為主，嘗試著先將故事的畫面細節粗 略繪製，經由反覆推敲與討論之後決定每一個分鏡畫面應有的編排位置，再由小組成員 決定是否重新繪製該分鏡。如圖 6 所示，則是 A2 路線的分鏡腳本。 圖 6、文字劇情先以分鏡腳本形式粗略繪製 4-3. 人物設定 由於本計畫參與成員，除了主持人之外，均未參與過相關設計活動。因此，許多劇 中角色，在故事發展初期，並不具備清晰印象，甚至未曾被深入討論。然而，當故事逐 漸被發展成文字形式，並且被繪製成分鏡腳本的同時，小組成員逐漸地能夠定義出相關 角色的具體形象，甚至個性、人格。因此，在正式進入漫畫繪製之前，劇中的主要角色， 均被要求進行人物設定，目的在於繪製者可以不斷反覆確認人物角色的視覺，以期獲得 一致的視覺風格。以下，便是四個主要角色的性格描述。其視覺設定，則如圖 6 所示。

主角：在核戰之後倖存的普通小市民，並無特殊專長，貧困且單身。主角的造型來 自於草稿繪製時常用的「簡易人形」，久而久之逐漸形成特色，其光頭造型也許意味著 長期輻射環境之下的後遺症，臉部也因為相同的原因而有些變異。 女孩：和主角是青梅竹馬的好夥伴，整體故事的鋪陳上，則以她的死亡為序幕。 合成人：同樣也是核災的倖存者，曾經接受過改造手術，形態類似機器人卻擁有人 類的情感和心思，年齡不明卻有著豐富的知識，從核災過後就希望能導正（或拯救？） 這個不正常的世界。 醫生：屬於反派角色，在核災發現許多合成人因改造手術拋棄器官，因此認為從中 牟利，大量進行人體實驗，企圖開發新能源。在整體劇情架構上，醫生被暗示為總是自 以為可以「人定勝天」的貪婪人類。 圖 6、劇中主要角色：主角、女孩、合成人、醫生 4-4. 編排完稿 漫畫中的分鏡，不同於電影或動畫所採用的分鏡，雖然鏡頭的用途和觀念相同，但 是加上平面設計的編排概念之後，往往能夠創造出電影或動畫難以表現的視覺風格，如 同李安（2003）在《綠巨人浩克》大量採用漫畫式之畫面切割與構圖，曾讓人為之驚艷。 在構圖安排上，一般的做法是將重要的情節給予較大的構圖空間，除了一般情節描述之 外，許多構圖空間往往也被用來進行一些過場或營造氣氛的特殊效果，如圖 7 所示。 圖 7、不同漫畫分鏡的編排與嘗試

五、 成果貢獻

對於從未接觸過漫畫繪製的學生而言，藉由產學合作的過程，逐漸地以已知的知識 去完成一項未知且專業的艱鉅工作。雖然，作品完成之後，小組成員自我檢討的感想是： 故事張力不夠、構圖不夠恰當、分鏡不夠流暢…等，但對於初學者而言，在有限資源之 下可以完成 50 頁的漫畫份量，實屬可貴。尤其，小組成員劉書豪，為了符合規定，將

其中一支劇情分枝加以改編之後，參加由上奇科技所舉辦的「2010 Comic Studio 亞洲漫 畫大賽」。雖然，最終未能入圍或得獎，對於有志於漫畫創作的新人而言，已經是一項 難忘的創作經驗。以下，礙於篇幅有限，僅列出封面以及部份精彩頁面。

六、 參考文獻

6-1. 書籍期刊 [1] 高宣揚，2002，“流行文化社會學”，楊智文化：台北。 6-2. 網路資源 [1] 陳韻琳，2010，“後現代、電玩、機運觀—電影《蘿拉快跑》”，心靈小憩，2010-9 下載，http://life.fhl.net/Movies/Lola/lola1.htm。 [2] 冀劍制，2006，“隱藏的價值觀”，華梵大學哲學系批判性思考教學網，2010-9 下 載，http://www.hfu.edu.tw/~cchi/critical%20thinking%20web/。 [3] 維 基 百 科 ， 2009 ， “ 維 基 百 科 — 麥 高 芬 ” ， 維 基 百 科 ， 2010-9 下 載 ， http://zh.wikipedia.org/zh-tw/%E9%BA%A5%E9%AB%98%E8%8A%AC。 [4] 黃 以 曦 ， 2008 ， “ 希 區 考 克 ” ， 局 面 （ 個 人 部 落 格 ） ， 2010-9 下 載 ， http://belafonte17.orzmovies.com/?p=20。 [5] 數位時代，2008，“環保議題：為什麼他們不願面對這個真相？”，數位時代，2010-9 下載，http://www.bnext.com.tw/article/view/cid/141/id/11381。

[6] Barrum, Joachim，2010，“Joachim’s Illustrations”，The art of Joachim Barrua，2010-9 下載，http://www.joachimart.com/illustrations/。

6-3. 電影資源

[1] Tykwer, Tom，1999，“Run, Lola Run”，X-Filme Creative Pool，Germany。 [1] Lee, Ang，2003，“The Hulk”，Universal Pictures，USA。