第四章 系統設計與實作
第三節 應用案例三：魔法海報
第三節 應用案例三：魔法海報
ㄧ、設計概念
在日常生活當中，有很多的印刷品，像是報紙、雜誌、海報、傳單、書 籍等，上面都記載了很多的文字與圖片，如果這些印刷品能像電影哈利波特中 的魔法報紙，具有會動的影像或文字，應該會是件很神奇的事情。而本應用案 例就是想透過電影海報及擴增實境的技術呈現這樣魔法般的效果，使用者在操 作行動載具時，螢幕上會看到平面的紙上有動態的影片在播放，讓人有很新奇 的感受。
二、視覺設計
「魔法海報」是以電影海報結合擴增實境的技術呈現新的視覺感受。電 影海報是使用美國好萊塢電影「雨果的冒險」為主題，並搭配著宣傳的預告片，
讓使用著有耳目一新的感覺。
三、互動介面設計
「魔法海報」除了運用 Vuforia 套件的擴增實境辨識技術之外，還使用了 專門設計給智慧型載具的影片貼圖套件 MobileMoveTexture，讓使用者在操作智 慧型載具時，只需藉由載具的移動、旋轉及靠近等，就能簡單又直覺的體驗互 動介面。
圖 4-12 魔法海報圖卡設計
在操作「魔法海報」時，使用者直接使用智慧型載具上的攝影機拍攝圖 卡，螢幕就會即時的顯示影片內容，互動方式相當的簡單，只可惜目前
44
MobileMoveTexture 套件不支援聲音，如能呈現聲光影音會有更好的效果。下圖 4-13 為「魔法海報」的互動示意圖。
圖 4-13「魔法海報」互動示意圖
本應用案例不需要使用 3Ds Max 製作 3D 模型，直接用 Unity3D 內建的 Box 製作平面即可，另外還需要影片素材、影片轉檔程式 FFCoder 及影片貼圖 套件 MobileMoveTexture。下表 4-7 為「魔法海報」軟硬體項目。
表 4-7「魔法海報」軟硬體項目
軟體 硬體
FFCoder 1.3 Unity3D 3.4.2 Photoshop CS5
Xcode 4.3.2 Vuforia 1.5 MobileMoveTexture
iPad2 或 iPhone4
四、互動模式設計
本應用案例使用擴增實境套件 Vuforia 的自然特徵辨識特性，以此技術嘗 試不同的互動模式的可能性。海報是一種很常見的宣傳素材，記載著很多的文
使用 iPad 或 iPhone 感應圖卡
應用案例對應的圖卡
使用者可以任意移動位置
使用者操作行動載具
Pause），影 片就會停止 lay，如要再
的獲得影片
bileMoveTe 合，圖 4-14 exture 套件使
為「魔法海 otoshop CS5 告片，並經
47
圖 4-14「魔法海報」系統整合示意圖
在 Unity3D 中，可以建立簡單的 3D 模型物件，本應用案例只需要一個平 面，所以把建立的方塊（Box）Z 軸設定值為 1，讓方塊趨近於平面，再使用 MobileMoveTexture 套件把影片材質設定成方塊的表面，就能呈現播放影片的效 果，詳細的系統設計如下表 4-9 所示。
Unity 3D
使用 FFCoder 1.3 將
影片轉成 OGG 格式 Photoshop CS5 製作 Marker
安裝 Vuforia 1.5
使用 MobileMoveTexture 套件設
定影片材質及圖卡的連結設定
匯入
匯出 iOS 格式
Xcode 應用程式設定
iPad 或 iPhone 運作應用程式
track 轉檔 Unit 步驟
驟 1：用 FF
下載的雨果 驟 2：製作
用 Photoshop 影機在辨識 站(網址：ht Trackables kable，輸入 檔分析，最 Marker 並上
p 設計 Mark 識時能比較有
ttps://ar.qual
建立一個 N 入 trackable 最後將給 Uni。
Vuforia 1.5
表 4-9 「魔法 將影片素材
片檔載入，
上傳 Qualco
ker 的圖案 有效率。完
lcomm.at/qd
New Project的格式與尺 ity3D 的 Tr
48
法海報」應 材轉成 OGG
File Format omm 的網站
，圖案最好 完成後另存為
devnet/sdk/io
，輸入新專 尺寸，然後
rackable Ass
應用程式建置 sets Package
置 Qualcomm 的 入，接著在
Mov
步驟 的連啟動
Qualcomm 的 程式的擴增 夾的路徑中 驟 4：下載
Unity Comm
vie-Texture)
驟 5：匯入影 連結動 Unity3D
的網站(網址 時竟套件 v
，完成後就 MobileMov
munity 的網 )下載試用版 影片素材，
，建立一個
址：https://a vuforia-sdk-就可以使用 veTexture 套
站(網址：h 版的套件 M 再用 Unity
個新的專案
49
ar.qualcomm
ios-1-5-8.zip 用套件了。套件
http://forum.
MobileMovie y3D 設定 M
，建立時勾
m.at/qdevnet/
p，接著將程
.unity3d.com
eTextureDem Marker 與 Vu勾選
Vuforia-/sdk/ios)下載
程式安裝到m/threads/11
mo1.1.1.unityuforia 套件
-ios-1-5-9.un
載開發 iOS 到 Unity3D 資
5885-Mobil
ypackage。AR 程式庫
nitypackage 應 資
le-庫
，
這樣 Pack Vuf ARC 模型 步驟
在 F iPad 步驟 kage、Mobi foria 套件 A Camera 屬性 型 Box。
驟 6：用 Un
File 中點選 d 或 iPhone 驟 7：用 Xc
Unity3D 輸出 前，藉由傳 機做測試。
驟 8：將應用
Vuforia 擴 ileMoveTex AR 程式庫的 性中的 Data
nity3D 匯出
Build Settin 的應用程式 code 設定應
出的.xcodep 傳輸線把 iPa
ng，Platform 式，完成後 arker，Imag
檔
geTarget 屬性
S，在 Player 就能輸出了
成最新的 iO
，選插上的
arker 的 Trac 以開始設定
mera 及 Ima 性中的 Dat
r Settings 中
。
OS5.1 版本 的 iOS Devic
ckable Asset Marker 與 ageTarget，
ta 設定給 3
，因 iPhone 螢幕解析度 示（icon）設 toshop 設計 的螢幕解析 度比較低，圖
hone 後就可
四節 應
「變裝喬巴 程式（APP 用程式，為 用案例整合 三張圖卡上 設計
設計：
計「AiR」應 析度比較高
「AiR」圖
魔法海報」 為「AiR」圖
可以 每 驗，
動這
兩 Pad 圖
應用
底，
1024
二
案例 入一 最後 4-17
用程式啟動 hotoshop 設 擴增實境的意 素及 640x960
式整合 nity3D 將「
一個應用程式
設計「AiR」
意象，並配 0 像素。下圖
圖 4-16「
「手指足球 式「AiR」
設定互動程 圖示與啟動 程式整合，圖
7「AiR」應
52
應用程式的 配合 iPad 及
圖 4-16 為
AiR」啟動
」、「變裝 iPhone 的螢
「AiR」啟動
動畫面設計
合（iPhone
面。啟動畫面
圖 44-18「AiR」
53
」在 iPhone 上的測試畫畫面
54
第五章、應用程式測試與評估
第一節 應用程式測試
「AiR」應用程式開發完成後，公開讓使用者進行操作，本應用程式於 2012 年 5 月初提供給使用者實際操作，操作期間準備了裝有「AiR」應用程式 的 iPad 與 iPhone 各一台給使用者體驗，在使用者操作的過程中，全程以攝影機 拍攝操作過程並觀察使用者的操作行為，使用者操作完進行訪談。「AiR」應用 程式分別包含了「手指足球」、「變裝喬巴」及「魔法海報」三件應用案例，
以下為本研究三件應用案例展示的內容介紹。
一、「手指足球」展示
應用案例「手指足球」的互動介面非常的簡單，使用者很容易被新奇又 有趣的互動方式吸引。本研究設計的辨識圖卡是一個足球場的樣式，當使用者 用智慧型載具的攝影機辨識到圖卡時，畫面中央會出現一顆靜止的足球，使用 者可以移動智慧型載具或圖卡變換不同的視角。當使用者在攝影機前用手指輕 輕的碰觸足球時，足球會從手指碰觸的方向而反向滾動，球滾動到邊緣的黑線 時會有反彈碰撞的效果。本應用案例可單人或多人一起操作，多人操作時，使 用者可以輪流碰觸足球（不可同時碰觸），增加互動的樂趣，以下圖片為操作 期間使用者實際操作時所拍攝。
圖 5-1 使用者使用手指操作 圖 5-2 使用者使用兩隻手指操作
55
圖 5-3 多人一起操作 圖 5-4 使用者在測試觸碰互動
二、「變裝喬巴」展示
應用案例「變裝喬巴」是「手指足球」虛擬按鍵的延伸，不同之處在於 虛擬按鍵是印在圖卡上面，使用者在操作時，可以用手指接觸四個按鍵，互動 的選項變比較多。本研究設計的辨識圖卡是卡通「海賊王」的樣式，當使用者 用智慧型載具的攝影機辨識到圖卡時，畫面會出現可愛的人物「喬巴」，會以 緩慢的速度轉動，使用者可以移動智慧型載具或圖卡，觀看人物不同的視角。
人物「喬巴」的帽子在正常狀態時是粉紅色，當使用者在攝影機前用手指碰觸 到圖卡上的任何一個按鍵時，人物「喬巴」的帽子就會呈現按鍵上的顏色，分 別有藍、綠、紫、黃等四色。本應用案例在操作時，圖卡上的虛擬按鍵不能同 時接觸，程式在判別時，會以最後碰觸的按鍵顏色為主，以下圖片為操作期間 使用者實際操作時所拍攝。
圖 5-5 使用者觸碰虛擬按鍵 圖 5-6 使用者觸碰虛擬按鍵
56
圖 5-7 使用者觸碰虛擬按鍵 圖 5-8 使用者變換不同視角觀看
三、「魔法海報」展示
「魔法海報」是結合平面設計與多媒體的應用案例。本研究設計的辨識 圖卡是好萊塢的電影「雨果的冒險」宣傳海報，上面設計了一個 Play Video 的 影片播放區塊，當使用者用智慧型載具的攝影機辨識到圖卡時，影片播放區塊 會開始播放電影雨果的冒險的預告，使用者可以自由的移動載具觀看，載具越 靠近圖卡，影片播放的畫面會越來越大。使用者在操作時，當載具的攝影機沒 感應到圖卡時，影片會暫停播放，之後再感應到圖卡時，影片會接續著播放。
智慧型載具的螢幕上設計了一個按鍵，可以控制影片播放或是暫停。以下圖片 為操作期間使用者實際操作時所拍攝。
圖 5-9 使用者觸碰螢幕的控制鍵 圖 5-10 使用者測試感應效果
57
圖 5-11 使用者觀看影片 圖 5-12 使用者觀看影片
第二節 成果評估–觀察法與訪談使用者
經過公開操作展示後，本研究運用了研究方法中的觀察法，來觀察使用 者操作「AiR」應用程式的行為與反應。使用者在操作完三件應用案例後，接著 進行使用者訪談，訪問使用者針對操作這三件應用案例的感覺與意見。以下為 本研究的觀察結果與訪談使用者結果分析。
一、觀察結果分析
本研究觀察結果分析依序分別為「手指足球」、「變裝喬巴」及「魔法 海報」，觀察 2012/5/2 至 2012/5/13 展示操作期間，拍攝使用者操作的錄影影片，
分析使用者操作行動載具時，對三件應用案例在操作介面、方式與互動的程度，
將觀察使用者實際情況分成指標「低」、「中」、「高」，綜整出一個指標表。
觀察細項分成人機介面及互動性等兩種評估項目，人機介面評估項目以 Jakob Nielsen 提出的五個效標中的學習性、錯誤性與滿意度為評估要點；互動性 評估項目則以 Borsook, T.K 提出的七大互動要素中的立即回應、適應性為評估 要點。觀察結果如表 5-1、5-2、5-3。
使用 iPhone 順暢，原因
61
圖 5-13 應用案例觀察指標分析圖
二、使用者訪談結果分析
在 2012/5/2 至 2012/5/13 期間，透過讓使用者操作行動載具的擴增實境應 用程式的應用案例之後，進行使用者訪談，訪談人數 31 人，訪談重點在應用程 式應用案例的互動性、滿意度、學習性等，以下為受訪者料統計及使用者訪談 項目表綜整。
（一）受訪者資料統計
針對受訪者的性別、教育程度、年齡、職業、是否有智慧型手機、是否 有看過擴增實境技術相關的應用案例及是否有在智慧型載具使用過擴增實境技
針對受訪者的性別、教育程度、年齡、職業、是否有智慧型手機、是否 有看過擴增實境技術相關的應用案例及是否有在智慧型載具使用過擴增實境技