2
致力於邁向互動設計之路 - 曾唯哲 2018
3
關於我 | About me
曾唯哲
Wei-Zhe, Tzeng
國立臺灣科技大學 電資學士班 主修資訊工程
INTP - T 邏輯學家 MBTI Persnoality
j4170149@gmail.com +886-935-998-922 曾唯哲
叛逆執著於設計的工程師
邏 輯 思 考 與 人 文 思 維 並 存 的 性 格， 有 追 求 各 種 知 識 的 企 圖 心， 主 要 跨 領 域 學 習 程 式 與 設 計， 透 過 有 許 多 不 同 角 色 的 專 案 合 作 經 驗， 希 望 能 整 合 自 身 資 訊 與 設 計 的 能 力，深入遊戲互動設計領域。
專長 | Profession C# (Unity) 程式語言
開發工具 4
Adobe AI/PS/XD
Python C/C++
軟體技能
Unity
OpenCV
Arduino
TensorFlow(Keras)
Processing
OpenGL
Maya
Axure RP 電腦圖學 & 影像處理
知識領域
人機互動
使用者研究 認知心理學 音樂理論
活動經歷 | Experiences
OpenHCI 2018 人機互動工作坊 - 總召 2018.2 - 2018.8
統籌跨校、跨域的 30 人籌備團隊，為國內目前最大 HCI 學生主辦之活動
OpenHCI 2017 人機互動工作坊 - 人事組 2017.3 - 2017.7 負責工作坊學員資格制定及篩選、各項人力資源招募活動
11th 台科大電資學院傑出青年 2017.3 書卷獎 2017 Fall
臺科大人文藝術中心 - 研究助理 2016.9 - 至今
協助音樂相關論文、書籍撰寫，文獻蒐集，統計報表及音樂教學事務
臺科大國樂社 - 社長 2015.7 - 2016.7
舉辦超過十場音樂會、舞台規劃、活動企劃、講座，辦理各種形式商演 / 義演演出
臺科大國樂社 - 大提琴教學 2015.7 - 2018.6 大提琴演奏技法、基本樂理、獨奏 / 合奏練習
2017 臺科大設計週主題展 - 參展人 2017.2 - 2017.5 統籌概念發想、展場空間規劃、音樂設計
學術發表 | Research Publication
虛擬實境 (Virtual Reality) 之認知經驗設計初探 2017.11
發表於 GCIDC 2017，收錄於明志科大工業設計雜誌 No.137、國家圖書館
競賽經歷 | Competition & Awards Line Hack 2018 十強入選 2018.9 參賽中 手機 UI 設計、視覺呈現
MediaTeK 通訊大賽 智慧城市組 - 研華專題獎 入圍 2017.7 - 2017.8 負責使用者研究、影像辨識開發、Linkit 軟硬體整合
第七屆臺科大創業競賽 專利商化組 - 第二名 2016.9 - 2016.11 負責軟體系統架構規劃、使用者研究、市場調研、商業模式
曉數碼 遊戲黑客松 - 創意履歷獎 2017.11
負責遊戲開發，參與機制發想、部分平面視覺產出
第十二屆 myfone 行動創作獎 原創歌曲組 2018.7 參賽中 負責微電影主題曲作曲、樂團編曲
第六屆北區計算機概論會考 優等 2015.6
文以載數文學創作獎 散文組 優等 2015.12
5
Selected Projects
程式研究開發
01
Software RD 在做的事。
1. Hoplay 桌遊卡牌辨識 ( 產學合作案 ) 2. 無對號座列車人潮分流系統
設計研究
02
Developement & Research
UI / UX
一些 UXR / UXD 經驗
1. 虛擬實境之認知經驗設計之初探 2. 專案管理軟體之介面設計評估 3. 百老匯電影院場域觀察 6
遊戲 & 互動設計
03
整合資訊力和設計力 及一些 HCI 作品
1. Playable City - Alternate Reality Game 3. 「Tranimal」電梯互動裝置
其他作品
04
Interaction Design & Game
others
設計衍生作品 / 數位藝術
1. 空間數位藝術「Reconnect」 2. Maya 建模作品 3. 微電影配樂設計「Keep in tape」
Let's Go!
7
void func { // comp
}
8
if ( lo { prin }
tion Demonstration() uter graphic application. ading == finish ) tf("System start running ...");
01
程式研究開發
Developement & Research Software RD 在做的事。
1. Hoplay 桌遊卡牌辨識 ( 產學合作案 ) 2. 無對號座列車人潮分流系統
9
桌上型遊戲卡牌辨識系統 成員
黃小峰 林承達 曾唯哲 江昱維
負責項目
CNN 機器學習辨識研究 特徵追蹤技術開發
Hoplay 遊戲介紹 | Introduction Hoplay 是 一 款 浮 空 投 影 結 合 卡
牌遊戲的桌遊，互動模式為透過
平板或手機裝置作為遊戲運作核 心，透過裝置前鏡頭辨識 Token 及卡牌等遊戲道具進行。目前已 推出多款遊戲，有單人遊玩與多 人競技多種類型。
10
開發需求 | Requirement 基於條碼做為辨識基礎
Fiducial Mark
卡牌辨識
A
Feature Matching
基於影像特徵 A
深度學習方法 ( 捲積神經網路 CNN) 辨識 | CNN Recognition 訓練階段
Pipeline
蒐集 data
Find ROI 灰 階 化
邊 緣 偵 測
FindContour
(Convolution Neural Netwrok)
高 斯 模 糊
CANNY
深度學習
訓練 CNN 模型 驗證 accuracy
儲存模型 ( 權重 ) 應用階段
載入 CNN 模型 辨識 Labell
判斷答案有效性
資料 準備
用 Webcam 翻 拍 要 用 來 學 習 的 data， 需 要 各 種 光 源、 角 度 以 確 保學習品質的通用性。根據圖片複雜度與情境決定翻拍的張數， 我們一個 label 落在 100~200 張照片左右。
人工篩選品質太差的照片、並透過程式做基本的處理（去背、縮 放平移旋轉、大小校正…）
11
模型 訓練
移轉與 測試
我 們 採 用 捲 積 神 經 網 路 (CNN) 進 行 影 像 辨 識， 平 台 採 取 Keras/ TensorFlow，選用 MobileNet、InceptionV3 模型框架訓練。
目 標 平 台 為 Unity(Android)， 因 此 透 過 TensorFlow# 及 CNTK(Microsoft Cognitive Toolkit) 移轉至 Unity 再發布 APP 測試。 因機器學習運算量大，目前仍無法在行動裝置上即時運算，會有發燙、 延遲過久問題，且硬體廠商與軟體開發工具支援仍十分有限。 雖然機器學習強健性較高，但須教會廠商訓練 Model，門檻較高。
辨識率：目前以撲克牌及方形卡牌實測，手機及電腦可達 99.9% 以上 效率：以 200 * 200 pixels 的卡牌而言，電腦 (Unity 端 ) 約 500 ms， 手機
VuMark 條碼辨識 | Vuforia Mark Recognition vuMark 介紹
12
vuMark 為 Vuforia 公司自訂的條碼格式，類似 QR Code，如右圖， 包含 5 個部分，其中 Design Area 為讓設計師放視覺的區域。因此較 QR Code 運用更靈活。
辨識原理 圖解
1
2
S
MORTON TUXEDOS
原圖
Contour 明顯對比交界， 用來定位與找到 Mark。
Pipeline
條碼辨識
MORTON TUXEDOS
FindContour
decoding
FindHomography 透視變換
CANNY 邊緣偵測
getRectSubPix 取得像素
FindContour
ArcLength 形狀校正
ApproxPolyDP 估計邊數 ShapeMatch 比對形狀
結果
紅 色 圈 圈 區 域 為 Code Element，用來編碼以產 生不同 Label。
高斯模糊 灰階化
(Convolution Neural Netwrok)
MORTON TUXEDOS TUXEDO
WrapPerspective 矩陣對應 Otsu's method 二值化 色彩校正、轉換 Bit 紀錄 Bit Element
Reed-Solomon Decoding
因 讀 Code 的 辨 識 效 率 較 快， 且 穩 定 性 較 好， 最 後 廠 商 請 我 們 仿 造 vuMark 做一樣的辨識系統出來。 條碼辨識的處理流程較步驟且繁瑣，前期花了比較多時間測試。 準確率：100% 效率：電腦上約 50 ms，行動裝置上不超過 300 ms
13
TokinFree
無對號座列車人潮分流系統
打造更優質的捷運搭乘體驗 !
穿戴式電子設計 期末專題 MeidaTeK 2017 通訊大賽 智慧城市組 - 研華專題獎 入圍 團隊成員 陳致穎 曾唯哲
14
負責項目
場域調查 互動原型 擁擠程度辨識開發
作品簡介 | Abstract TokinFree 是一款基於影像辨識技術、適用於捷運、鐵路等情境的 人潮系統，主要目的是為了增進大眾運輸效率，及改善搭乘品質 問題 定義
現況 調查
心智 模型
系統 開發
技術 驗證
問題定義 | Problem Deifinition 車廂擁擠程度 分布不均 車廂人潮影響 搭乘品質
部分車廂還有空間，但有乘客找不到位子上車 的狀況。 研究指出，「車廂內空間足夠」是使用者重 視的項目，但也是不滿意的項目。
現況調查 | Problem Deifinition
文獻探討
場域觀察
國外案例
１影響北捷容量最短運轉間隔因素第一名為停站時間，人潮越多的站影響越大
２據板南線統計，乘客認為影響乘車舒適度的關鍵，第一名為「車廂內擁擠感受程度」 ３據高捷的服務品質調查， 「車內空間足夠」為乘客重視但非常不滿意項目之一
車廂在近月臺出入口處與月臺邊緣分布不均 且發生兩側有空位卻有人擠不上去的情形
日本將列車通勤現象稱作「痛勤 (Tokin)」，
鐵路公司甚至研發特殊車廂及 APP 來解決此 問題。
15
乘客心智模型 | Mental Model
內在變因 考量因素
外在變因
自主喜好 人潮觀察
車廂 人潮
哪裡可能有空座位 哪裡可能擠得上去 月臺人潮排隊分布
分色 等候線
指示 燈號
排隊 人潮
心智模型
習慣偏好 月臺手扶梯 / 樓梯位置 車站出入口 / 轉乘位置 特殊功能車廂設計
自主 喜好
改善前乘客策略
車廂 人潮
自主 喜好
排隊 人潮
改善後乘客策略
概念原型 | Concept Prototype
預期以物聯網方式解決問題，根據上述之改善策略提出使用情境之示意圖
將燈號依擁擠程度分成綠、黃、紅、紫四色，並劃設預估可容納人數之分色等候線。
2. 伺服器運算 擁擠程度
4. 分色排隊線
16
3. 進出站時燈號顯示
1. 監視器捕捉畫面
系統架構 | System Architecture 核心邏輯
靜態系統 架構
1 處理影像，計算現時人數 2 歷史資料分析，預測下車人數
即時物體偵測、辨識人潮及車內物件
捷運燈號 伺服器
監視器
網頁 & APP
伺服器 運作架構
HTTP
HTTP
整合 儲存 資料
HTTP
場域驗證 | Testing & Validation 透過 YOLO 影像辨識計算人潮，將擁擠程度分成 4 個等級，以下為 4 種不同擁擠程度 之燈號與人潮實際對應範例。
17
02
18
設計研究
User Research 一些 UXR / UXD 經驗
1. 虛擬實境之認知經驗設計之初探 2. 專案管理軟體之介面設計評估 3. 百老匯電影院場域觀察
19
虛擬實境 之
認知經驗設計初探 Cognitive Experience Design of Virtual Reality: a Preliminary Study.
為互動介面設計課堂上延伸之作品，是第一次嘗試撰寫研究論文，以及 融合自己資訊、設計的能力。 本研究發表於 2017 GCIDC 研討會，並收錄於國家圖書館。
成員
曾唯哲 ( 第一作者 ) 周辰 蕭文信 ( 指導 )
20
負責項目
文獻探討 研究設計 VR 程式開發 (Unity) 質化訪談 訪談實驗分析
研究簡介 | Abstract 探討人在虛擬實境空間中，與現實世界的認知經驗異同，以及 不同輔助設計下的行為脈絡。 文獻 探討
研究 設計
程式 開發
實驗 測試
質性 訪談
結果 分析
研究目的 | Purpose 心智負荷
認知輔助設計
受試者
地圖設計 輔助策略
情緒 錯誤與修正 記憶完整性
虛擬實境
認知經驗
Gaze-Reticle Input 3D 空間
記憶理解脈絡 經驗再現
文獻探討 | Literature Review 空間訊息 處理與記憶 認知地圖的記憶建立 (Kim, & Hirtle, 1995)
尋路依目的性強烈程度 分 為 天 真 搜 索、 引 導 搜 索、 探 索 (Darken, & Sibert, 1996)
空間認知能力 包 含 空 間 定 向、 空 間 視 覺、 空 間 知 覺 ( 羅 雅 薇 , 2005)
人類處理地圖認知時，仰 賴地標知識、路徑知識、 綜覽知識作為基礎 (Darken & Sibert 1996; Elvins 1997; Tversky et al. 1994)
虛擬實境 感官限制 感 官 退 化 現 象、 缺 乏 現 實 知 覺 線 索 (Downs, & Stea, 1973)
缺乏前庭系統及其他物理 感 知， 造 成 迷 失 方 向 或 錯誤的距離判斷 (Jerald, 2015)
21
研究設計 | Research Design 地圖 設計
地圖結構 | 採用真實地理之放射狀都市設計，確保中心到各路線 的時間相近 地圖具有 3 個主要道路區塊，做為基本單元 場景設計 | 僅有樹與地面兩種景觀，避免額外干擾
放射型都市及 基本單元示意圖
輔助 策略
根 據 Kahana(2006)、Jerald(2015) 及 Vinson(1999) 的 研 究， 將 輔助策略分成以下五種不同系統
A
基本網格狀地圖
B
22
總體布局 (General Layout)
C
D
地標取向 (Landmark)
區域地標
E
全域地標
強化區域結構
不規則區域
(Local Landmark)
(Global Landmark)
各區域有不同顏色樹
無明顯方位、區域性
位於路口 / 交會點
位於地圖中心
基於五種不同輔助策略之實際地圖設計及 Unity 場景畫面
互動 介面
操作互動 | 採用 Gaze-Reticle 控制行走，上方有 GO/STOP 兩種 狀態的切換開關 陀螺儀偵測轉彎、抬頭 硬體介面 | Android 手機螢幕搭配 VR 頭戴式顯示器
問卷及 訪談設計
認知
心智 負荷
半結構式訪談為主，搭配圖表及量表輔助 記憶元素、認知地圖為請請使用者用手繪回答的題目
記憶策略 記憶元素 認知策略 認知經驗再現 地圖繪製 錯誤與修正 地圖困難度 情緒
圖表題
地圖與記憶 元素繪製
質性訪談
認知經驗 邏輯策略 Thinking-Aloud
問卷量表
Value-Arousal 模型 Likert 五級距 23
實驗流程 | User Experiencment Procedure 任意探索 3 mins
測驗說明 5 mins
填寫量表 繪製地圖 3 mins
深度訪談 30 mins
重複三輪 ( 三張地圖 )
結果分析 | Result Analysis 一共測試了 6 名受測者，其中男女各半，部分受過立體視覺 / 空間建模等訓練，目前 實驗發現路癡程度、方向感等對實驗結果沒有顯著影響
一手 資料
1. 畫面側錄 2. 放聲思考紀錄 3. 問卷及訪談 4. 認知地圖
分析 面向
1. 探索策略 2. 記憶結構 3. 認知經驗再現 4. 錯誤情形與修正方式
路徑探索 策略整理
24
受測者地圖探索的順序簡單可分為以下三種，其中環境比對型，為受測 者透過比較空間旋轉來探索路徑的方法
主幹型
先設定一條主要路徑優先探 索，再探索支線。
環形
先尋找環狀的路 ( 街區 )， 繞一圈後再探索支線。
環境 比對
用熟悉的環境當作認知的元 素比對差異性。
記憶結構 整理
根據認知地圖繪製、放聲思考及訪談結果，整理出不同的記憶方式，實驗 發現受測者皆有自己習慣的記憶方式，不一定受到實驗給定之認知輔助設 計的影響。 其中也發現，放聲思考記憶頻率對路徑長度準確度有較明顯影響，事件法 的記憶結構，比例失準較多。
特定路 徑法
從端點開始，每次設定 特定起點和終點，階層 式的記憶結構。
區域層 級法
岔路層 級法
以遇到岔路的順序作為 記憶節點的層級的樹狀 結構。
事件法
以方位、區域劃分作為 記憶層級的階層結構。
以事件發生順序 ( 如地 標、轉彎 ) 作為記憶單元 的鏈狀結構。
25
錯誤情形與 修正整理
錯誤情形主要為受測者自主表示「迷路」、「失去方向感」，以及 繪製地圖時的路徑錯誤，實驗或操作過程中感到挫折感等情形的歸 納。
區域 錯誤
1. 忘記某個區域樣貌 2. 以為走訪全部區域， 但實際沒有。
方位 混淆
1. 轉彎過多而失去方向感 2. 迴轉時迷失
操作 錯誤
1. 操作介面干擾記憶 2. 行走速度無法掌握
底下為受測者在實驗過程中遇到「迷路」、「失去方向感」、「忘記地圖」等，採取的修 正策略。
原地 重啟
捨棄過去認知，原地重 新開始。
模糊 結構
將走到某一端點的大致 過程做為主要路徑，再 補上中間細節。
走回 原點
先走回原點，再重新開 始認知。
參考 地標
以地標做為參考點，定 位方位及位置
認知經驗 再現
26
在實驗過程中，受測者部分下意識的行為或感受，以及在訪談過程中對 於真實世界的聯想經驗。
特定場 域類型
「好像到了沙漠，雖然我沒去過。」 「這是一個像迷宮的地方。」
特定情 緒經驗
「感覺好像被困在有很高的圍牆 裡，有點不知所措。」
特定空 間經驗
「這裡跟蘆洲的路一樣曲折。」 「玩魔獸時 NPC 也是這樣。」
輔助肢 體動作
插腰（認為能看較遠、增加氣勢 ) 探頭（期望看到更多景物 )
情緒分析 結果
採用 Valence-Arousal 二維情緒圖為基礎，透過語意差異法量表誘發回 答，再透過訪談探討實驗變因對情緒之影響，整理出對於情緒之洞見。
1. 物件的多樣性
感到愉悅 ( 多 ) 慌張、困惑 ( 少 )。
2. 地標貼近真實世界物件
感到安心、具信任感 ( 像 ) 驚奇、干擾，不具信任感 ( 不像 )。
3. 地標位置高度
具敵意 ( 位置高 ) 親切感 ( 位置低 )。
4. 有地標的地圖較能使人感到安定放鬆。
研究結論 | Conclusion 1. 地標的設計能降低受測者在虛擬實境中的空間錯誤情形、增加 理解力，同時增加正向情緒。 2. 地圖的認知困難度與是否勾起過去的認知經驗，目前質化數據 無法得知是否有正面影響。
27
針對大學生社 團 活 動 之 專案管理軟體 介 面 設 計
本作品包含使用者調研、網站介面設計研究、與網站原型開發。 完整從 UXR 到 UXD 的獨立專案經驗。
成員
負責項目
曾唯哲
使用者研究 網站易用性分析 網站原型開發
研究簡介 | Abstract
探討專案管理之網站介面分析與設計，及大學生族群日常管理習慣情境之研究， 本研究共分兩階段進行。
28
階段一
前期調查
階段二
針對社團需求 之個案研究
相關競品 易用性研究 管理習慣與 偏好研究
提出洞察
提出設計洞見
網站開發
第二次 使用者測試
前期調查 | Pilot Study 針對 6 名不同科系、性別之大學生，根據工作量、任務類型、使用自我管理軟體習 慣與使用經驗等做訪談。
使用介面 喜好
使用軟體 時機
1. 不喜歡冰冷的虛擬介面 2. 許多人喜歡手寫的感覺 3. 方便為第一考量
所使用的 工具
1. 親朋好友推薦 2. 專案規模複雜 3. 任務類型多且繁瑣 4. 團隊成員要求
1. 排程規劃 - 電子日曆、紙本行事曆 2. 任務備忘 - 筆記本、便條紙 3. 團隊協作 - LINE、Facebook、 Google Office 系列
競品分析 | Conpetitive Product Analysis 針對以下三款任務管理工具之網頁版介面進行評估，實驗採用任務法搭配量表作為 易用性評估指標。一共實驗 12 人，實驗順序採拉丁方格分配。
發行日期
Todoist
Trello
Wunderlist
第二個外掛 開始付費
部分功能付費
部分功能付費
看板式管理
條列任務呈現
2007
2011
2011
發行平台 商用情形 產品特色
任 務 操 作
完成效率紀錄 條列任務呈現
1. 基本常用操作 2. 進階細部設定 3. 環境偏好設定 4. 團隊協作 5. 錯誤復原
評 估 方 式
1. SEQ 任務後評估 2. SUS 量表
3. 任務時間分析 4. 簡單訪談
29
第一階段結論 | Conpetitive Product Analysis (1st Stage) 題目
SEQ 分析結果 ( 時間分析雷同 )
易用性 建議
Wunderlist
M(SD)
M(SD)
M(SD)
6.00(1.54)
P
6.00(0.74)
1.56
.26
4.08(1.56)
4.75(1.82)
.40
.69
環境偏好設定 4.42(1.78)
6.00(1.21)
5.75(1.29)
5.7*
.02
5.67(1.50)
4.75(1.71)
4.33(1.83)
3.74
.06
4.25(1.48)
4.17(2.17)
6.33(0.98)
14.06**
<.01
基本常用操作 6.33(0.78)
進階細部設定 4.00(2.09)
錯誤復原
競品比較 小結
Todoist
F
團隊協作
SUS 分析結果
Trello
Trello
Todoist
M(SD)
68.54(21.15) 66.04(16.60)
等級 百分點 35-40 C C
Wunderlist 85.21(11.88) A+
35-40
96-100
F
36.84**
p
<.01
1. Trello : 能一次呈現所有工作大綱，可簡化使用情境 2. Todoist/Wunderlist 較接近手寫筆記本的概念呈現 3. Trello 雖易用性最差，但以有趣、美觀的使用經驗取勝
針對跨平台相容性、用字遣詞、系統狀態可視性、預視性… 等六個面向提出介面設計建議。
第二階段需求分析 | User Requirement (2nd Stage) 分析「OO 社迎新茶會」之案例為主，歸納出社團之族群特性、專案規劃流程與問題 點。並沿用第一階段的研究結果，並以 PMIS ( 專案管理資訊系統 ) 的三個面向 ( 任 務管理、時間管理、人力資源管理 ) 設計網站。
30
社團組成 特性
人員異動 頻繁
不以專業 分工
社團專案 規劃流程
規劃活動
團隊分工
訂定時程
時程表 制定
常見問題
各組工作內容具有順序關係，制定完才發現互相打結 先前的任務更動或延宕，影響後面相關任務
工作分配
職責定位含糊，各組工作沒有完全切開 時常冒出臨時性任務，但通常直接交付給領導人 學生團隊合作經驗較為不足，工作量不均
資訊溝通 管道
學生大多以日常生活接觸的社交平台 (Facebook、Line) 作為 溝通渠道，但缺乏許多專案管理軟體才有的功能 市面上的平台功能複雜且較符合企業，難以導入社團
網站原型設計 | Website Architecture
依循舊有 流程 使用者可依舊有 的專案規劃流 程， 依 序 分 別 在 任 務 清 單、 團 隊 管 理、 時 程 規 劃 三個頁面依序操 作做好任務管 理。
團隊協作
任務單元 設計
第一階段研究發 現， 競 品 部 分 功 能對學生族群較 不 常 用 且 複 雜。 簡 化 部 分 功 能， 重新設計團隊協 作機制。
以 專 案、 任 務 做 為 單 元 設 計， 避 免含糊用詞及限 制 用 法， 減 少 學 生因經驗不足的 而衍生的管理問 題。
首頁 (專案列表)
任務單元設計
專案首頁
時程規劃
團隊管理
時程規劃 任務清單
到期日
任務清單 父項目/ 子項目
團隊管理
負責人
先後順序
任務狀態
當前任務
子項目展開 /收斂
隸屬列表
已完成任務
修改評論 31
原型展示 | Website Architecture 拖曳式看板設計
排程式流程圖
查看 / 編輯兩用職責分工表
條列式任務清單
第二次使用者測試 | Experiment (2nd Stage) 7 名符合條 件受測者
訪談法
五項操作 任務
SUS 量表
受試者回饋 M(SD)
75.36(15.08) 「時程規劃可能會過於複雜。」(6)
「覺得滿好的，會想使用，期待實際推出或商品化。」(4) 「可能需要導入權限分級。」(3)
「先把工作都一次列上去再來規畫還不錯。」(2)
「很喜歡分配工作的頁面，管理臨時性任務很方便。」(2) 32
百 老匯電影院 場域觀察與服務評估 百老匯 Broadway cinema
簡介｜於 2016 年底翻修，升級座椅、音響、裝潢設備， 為公館地段大學生常去的電影院之一。 地址｜台北市中正區羅斯福路四段 200 號 3~5 樓 官網｜ http://www.broadway-cineplex.com.tw
成員
曾唯哲 邱立全
負責項目
顧客旅程地圖 問卷與訪談
摘要 | Abstract 從介面及服務設計角度切入，從場域觀察、服務流程體驗、訪談到分析的完整評估報告。
01
06
場域觀察
團體訪談
02
05
問卷調查
Customer Journey
03
Persona
04
實地看電影
07
提出洞察 AEIOU 分析
33
場域觀察 | Field Study 先行場勘調查、決定後續的研究流程。
記錄方式
時間
觀察地點
肉眼、手機
平日晚上
售票處 放映廳 大廳
等待區 食物區 電梯 & 樓梯
問卷調查 | Questionnaire 透過問卷繪製大學生之電影院經驗 Persona，題目採封閉選項，可分基本資料和 看電影習慣兩部分，共計 15 題。
基本資料
性別、年齡 系級、人格特質
34
看電影 習慣 頻率、消費、目的、人數 電影院地點、觀賞時段、 票種、花費金額、片種、 如何決定…
Persona 描繪 | Persona
㔡ᇽ
實地看電影任務 | Task of Seeing a Movie
任務流程
有意識地記錄流程， 看完電影後需要做 Journey Map 和 Scenario 的 分 享， 及參與團體訪談。
實驗變項
因部分人無法參與 購 票 流 程， 統 一 事 先 購 票， 並 分 成 三 部電影。
實驗 參與者
一共 11 人參與，共 分 3 組 3 部 電 影， 每 部 電 影 3-4 人， 分別在不同樓層的 觀賞廳。
參與者的 Customer Journey Map 繪製範例 35
顧客旅程地圖 | Customer Journey Map
36
37
團體訪談 | Group Interview
透過團體半結構式訪談的差異，針對自己的顧客旅程、情境、看電 影時心理因素及偏好及其他競品（電影院）做分享與問題洞察。 討論面向
訪談結論
顧客旅程 討論
情境討論
電影院 抉擇因素 1. 場次時間 2. 朋友參與 3. 交通成本
38
心理偏好
競品比較
社交因素 95% 有人約才想去電影院看
90% 的人堅持和朋友看同一部電影
80% 寧願等下一場也要和朋友坐一起
評估結果與洞見 | Insight and Evaluation
1. 使用 AEIOU 中的 EIO( 環境、活動、物品 ) 探討場域 2. 利 用 易 用 性、WayFinding 準 則、Compatibility 相 容 性 分 析 問
排隊購票
39
樓層移動
40
取餐等待
41
驗票
散場離開
42
散場等待
43
44
03
遊戲 & 互動設計
Interaction Design & Game 整合資訊力和設計力及 HCI 作品
1. Playable City - Alternate Reality Game 3. 「Tranimal」電梯互動裝置
45
原本專題的題目，目前開發中止，完成度約 70%，有機會想繼續做完 並投相關競賽。 以「Playable City」概念為基底，是一款 Alternate Reality 結合 Real Time Strategy 的策略競技遊戲 , 期望玩家在透過虛擬世界與現實世界 的虛實對應之間體驗樂趣。
成員
負責項目
曾唯哲
獨立開發，部分策略與 戰鬥機制構想由同學 ( 邱宇倫 ) 協助
遊戲介紹 | Introduction
CityHunter 是一款與真實場域互動的多人即時策略遊戲，目的是透過和景點互動的過 程中，取得最高的遊戲分數，遊戲可分為前期（景點互動、收集資源），以及後期（對 戰、積分）兩個階段。玩家為多人組隊，在玩遊戲的過程中，同時又能體會探索真實 世界的樂趣。
場域 互動 透 過 GPS 與 地 圖 上景點產生互動， 解任務及收集遊戲 資源。
戰略 經營 透過塔防及佔領據 點的機制，體驗和 玩家競技的樂趣。
實境互動參考：Pokemon GO
即時戰略參考：世紀帝國 Age of Empires 46
對戰模式參考：植物大戰殭屍、貓咪大戰爭、Warcraft3 castle war
多人 連線 玩家被分配到不同陣 營， 和 同 陣 營 合 作， 異陣營敵對，充滿社 交樂趣。
玩法介紹 | Game Mechanism 勝利條件
透過各種管道蒐集積分，試圖獲得最高積分，取得陣營勝利。以下為三 種不同的積分取得方式
戰鬥勝利
遊戲流程
遊戲系統
破解任務
探索景點
共分三組陣營，一組為 6-7 人，從不同位置同時出發往中間移動，遊戲時間約 2-3 個小時左右，最後在中間集合結算，此地圖以淡水為藍本設計。
陣營系統
塔防對戰系統
景點任務系統
地圖佔領系統
不同玩家組成陣營 合作，共享部份資 源與其他陣營競爭
與其他玩家利 用塔防形式一 對一對戰
探索景點觸發任 務，再透過任務引 導場域互動及探索
不同陣營玩家透過 對戰侵略與防守在 地圖上的景點 47
遊戲分析 | Game Analysis 遊 戲 分 析 框 架 很 多， 如 GAME、MDA、Octalysi， 此 處 用 的 是 從 我 從 遊 戲 企畫書中看到的確保遊戲可玩性的分析方法。包含用來確保規則的「玩家 目標」、用來確保道具互動的「玩家資源」、描述遊戲變化的「玩家差異」、 用來描述遊戲深度的「玩家策略」 玩家目標
玩家資源
玩家策略
金幣 兵力 對戰道具 任務破獲獎勵 景點攻占獎勵
陣營勝利 取得成就 探索所有景點 破解所有任務 戰鬥勝利
玩家合作策略 佔領與防守 金幣運用 路線規劃 對戰戰術
玩家差異
同盟隊友 兵種類型 景點路線 戰鬥技巧 玩家體力
開發時程規劃 | Development Plan
因開發壓力，遊戲素材選用線上素材包，把重心放在實作遊戲機 制上，這次嘗試用好入門的 Photon 和 MySQL
景點地圖 (GOMAP)
階
連線 (Photon)
技術
段
遊戲伺服器
對戰 ( 自行研發 )
企劃
美術
HCD 文件(包含 TA 及市場分 系統需求及關鍵技 析、競品比較、遊戲定位、 規
術
分析(MDA)、遊戲關卡設 計、模組、示意圖…)
劃 階
確認開發平台、系
段
統及使用技術、核 GDD(FLOW) 心功能可行性測試 Functional Map
製作燃燒圖
開
功能開發
配合功能修改遊戲開發文件
發
模組測試
及項目、項目刪減
階
系統整合，放入遊戲內容
段
系統運作測試
繪製 UI 及畫面素材
測
釋出 alpha 版
試
小規模使用者測試(設立測試任務、評估指標、白盒/黑盒測試)
營
釋出 beta 版
運 階 段
48
列出工作項目、確認整 體風格呈現、UI 設計
1. 公開測試、試辦活動 2. 規劃商業模式(合作計畫、遊戲介紹文件、投比賽…)
資料庫
此為較廣泛的開發 流 程， 此 外 還 有 描 述 開 發 功 能 流 程 的 GDD(Game Developement Document) 文件。 開 發 進 度 大 約 70%， 完成大部分 UI、地圖 模 組、 故 事 內 容、 對 戰系統測試。
遊戲原型展示 | Game Prototype 進入畫面與遊戲主畫面 ( 地圖 )
（圖左 ) 進入遊戲時，可選擇自己要哪個陣 營，共有三種可以選擇。
( 圖右 ) 地圖場景畫面，透過 Mapbox 的地圖
API 繪製地圖，並顯示自訂的的景點及其他玩家。
玩家資訊與陣營資訊
( 圖左 ) 玩家個人資訊頁面，可查看成就：如 破獲任務數、行走距離、戰鬥勝場…等等。
( 圖右 ) 陣營資訊，可查看目前三方陣營的景點 對戰狀況、每名玩家的強弱程度排行榜等等。
任務畫面
道具與兵種升級
戰鬥系統為參考對戰塔防遊戲設計，一對一透過兵種對戰，每名玩家初始會有三 種基本兵種，之後根據陣營不同會有不同兵種與特殊功能。
49
超覺未來 Gitopia 「科技流動於人與環境之間，達到平衡而完美的世界」
OpenHCI 2016 人機互動工作坊 簡 介
50
「超覺未來 Gitopia」取自「未來科技」、「與人文結合」 以及「提升知覺」等核心價值展開，透過主題串連六天的活 動，帶領學員發想、小組合作、建構、實現互動展示物。 過去，我們總如此的想像：當科技突破人的想像、文明超越 形體的限制之後，人類將擁有更廣闊的覺知、知識、能力與 情感。現在，將時光的尺度收縮拉至眼前，等待未來最快捷 的路徑就是創造，期待夢想中的世界在此展開。
除了團隊合作，一系列的講座與議題討論，聚焦於當今互動 設計、人機互動領域中的課題，探討人與智慧物件在物連網 時代下的新互動模式以及其設計框架。
互動裝置設計
Tranimal : OpenHCI 2016 x TaiCHI 16 作品
場域觀察 / 概念發想 / 情境分析 / 設計迭代 / 原型實作
成員
張嘉珊 洪湘婷 曾唯哲
翁士軒 何采穎 張馨云
TA
高李恩 林湧達
負責項目
概念發想 原型製作 Processing 開發 系統整合
51
設計理念 | Concept 搭乘運輸工具是現代文明日常生活不可或缺的行為，大眾因運輸過程而被迫擠 在同個空間，假想未來具有類似長途電梯的交通方式，針對這樣的假想情境推 測，做互動設計
問題 定義
場域 觀察
情境 洞察
互動 設計
原型 開發
問題定義 | Problem Definition 配合 OpenHCI 的情境設定，針對 90 年後的「社交與環境」面向，做問題探 討並提出互動設計。而本設計透過分析現在人類的生活脈絡，探討人類基本心 理，連貫過去與現在，推敲未來的可能需求。
過去
現在
未來
基本社交需求
需要社交 害怕尷尬
針對未來的 設計可能性
場域觀察 | Field Study 考量到未來仍有需因交通而屎人潮聚集在同一個空間的情境，挑選人潮眾多的 公館捷運站為目標，分別對「出入口」、「月台」、「列車上」三個場域觀察。
52
提出洞察 | Insight 社交
人與人交集稀少
如何增加社交
創造觸發社交 的環境
環境
人潮眾多的地方
觀察捷運站
不假思索 下意識的行為
不自覺地看鏡子
社交與環境
互動設計 | Interaction Design
注視到鏡子時， 使用者頭 像及聲音會被置換成動物。
當頭像被置換時，會將他人發出 的聲音，轉化成動物叫聲，一同 送出，而此時他人因此被吸引而 注視鏡子，則會開始產生循環。
當使用這走出車廂，回饋給使 用者，還原原本的對話於空中。
創造價值 | Values 先透環境創造人與環境間的互動，進而造成人與人之間的交流。 人
人 環境
人
人
53
設計特點 | Features
身分跳脫、角色扮演
觸發點 : 人下意識的看向鏡中的自己 -> 以詼諧幽默的方式，跳脫現實生活中 的自己，並引發話題。
對話紀錄顯示
在離開電梯時顯示兩人真實的對話內容， 給予使用者回饋與創造獨特回憶。
系統架構 | System Architecture
Processing
系統整合
54
臉部 偵測
Processing (OpenCV + Webcam)
畫面 顯示
液晶螢幕、 透明壓克力 + 汽車隔熱膜
聲音 處理
Arduino 麥克風模組 + 藍芽模組、耳機
原型展示 | Prototype Demonstration
製作電梯微縮模型、互動裝置原型 向評審與觀眾說明。
用隔熱膜加透明壓克力板模擬電梯 鏡面效果，再透過臉部偵測、麥克
Youtube 概念影片
55
56
其他作品 others
04
設計衍生作品 / 數位藝術 / 配樂 1. 空間數位藝術「Reconnect」 2. Maya 建模作品 3. 微電影配樂設計「Keep in tape」 57
空間互動藝術
2017 臺科大設計週「面目模糊的今日 」主題展作品
你有沒有過這樣的經歷 ， 在人群中，感受到自己與群體格格不入， 這樣的情境，會帶給你甚麼感受 ?
成員
蔡鈞宇 賴淑婉 曾唯哲 58
負責項目
概念發想 空間規劃 聲音互動設計
作品簡介 | Abstract 「人們常把自己的心散到四處去，散到角色行為裡，讓自己成了四分五裂的人，以 為只要用心經營每個角色就能感到滿足。然而這是不夠的，如果你只把自己丟到角 色裡，全心全意去滿足別人對你的期待，藉以得到肯定，你已經失去了你自己。」 這是一個為「孤獨」和「疏離感」創作的空間互動體驗設計，從疏離感的建立、體 驗自我在人群中的孤立感、一路到最後感受寧靜自我的機會。
概念 發想
訪談 驗證
互動 流程
第一版 提案
體驗流程與空間規劃 | Experience flow & Space
第二版 提案
概念 實作
展區 1
模仿桌椅三人對話的情境，另外兩人透 過 Arduino 及播放對話的聲音呈現，桌 上擺放文字，是觀者角色的日記獨白。
2
3
迭代
4.5 m
1
展區２
透過驚喜與無人的灰色生日派對的反差 製造疏離感。 展區３
6 m
透過半透明鏡片與燈飾，營造出自我、 寧靜的氣氛。
作品特色與紀錄 | Features & Records
自動偵測引導場景轉換
透過 Arduino 距離偵測、場景配樂與燈 光引導空間切換，串聯整個作品
59
故事輔助
透過第一人稱主觀文字，描述情境中的 內心狀態，藉以傳達疏離感。
強烈感官對比製造失落感
假裝要幫你慶生，吹完蠟燭後開燈後， 卻發現是灰色空無一人的生日派對，製 造心情上的情緒落空。表達突然轉折、 疏離的心境。
透過透明壓克力板結合汽車隔熱摩製造 鏡面效果，同時透過掛飾與燈光效果製 造寧靜感。
60
3D 建模作品 動物擬人化 自我角色設計
以憂鬱和放鬆兩個對立情境做為場景主軸，以長臉瘦 頰為特色挑選糜鹿作為設計。
模型主題 視覺設計
模仿樂高模型及拼裝玩具主題，並以浦島太郎的故事 為主軸，做成模擬樂高包裝的主視覺。
61
UI 設計 微電影配樂設計
此幫畢製同學做的配樂設計與主題曲創作一共包含五首配樂與一首主題曲作曲， 音樂與影像的關係密不可分，有趣的是之前做作業都是練習做無聲的動態畫面， 這次改成根據畫面傳遞的氛圍來製作配樂，同時也增強了我對畫面節奏感及情緒 轉折的掌握。
配樂
主題曲
02. Silent sorrow (0:38)
keep in tape - 晨皓版 ( 樂團 )
01. From lone to warmness (2:35) 03. Moving (0:42)
04. Thinking Back (1:58) 05. Regret (1:18)
62
Keep in tape - Liz 版 ( 純吉他 )
01. From Lone to Warmness
用鋼琴獨奏襯托主角小男孩的孤獨感，
利用長笛與鐘聲表達內心想說卻無從發 洩的情緒，再到象徵溫暖的吉他聲與規 律的節奏，象徵女主角的出現帶給小男 孩生活的改變。
02. Silent Sorrow
用刺耳的鐘聲表示爸媽吵架的情緒，高
音鋼琴安靜緩慢的旋律對比出激動的吵 架聲背後小男孩內心的感受。
05. Thinking Back
用弦樂、聲音飄渺的電子音效表示時間 抽離到回憶的狀態，不和諧的和聲表示 內心的糾結複雜，最後加上鐵琴、鋼琴 將情緒推至最高潮
63