第三章 研究方法與實驗設計
3.5 研究工具與實驗材料
為配合研究目的之需要，本研究使用的工具有：財團法人二○○九年臺北聽 障奧林匹克運動會籌備委員會基金會所發行的《國際手語教材編輯委員會》 (周 國棟，陳志和，邱金治，陳 康，靳武龍，賴銘輝，王興嬙, 2009)。研究所需器 材有：投影機、電腦，智慧型手機。
由於實驗設計的驗證，本創作已先進行創作設計以便研究進行，針對角色設定 並繪製。以下為草圖設計（圖 31）。
圖 31 草圖繪製
39
40
(二) 實驗空間
以國立臺灣師範大學設計學系系館 6 樓 6A 教室作為本次實驗空間，空間包含 投影機、電腦、桌子、椅子，該空間最多可容納 30 位同學 (圖 32)；為了維持實 驗的客觀性，研究者進行實驗操作必須盡可能保持環境的一致，除了獨變項與依 變項。
圖 32 實驗空間。
3.7 資料統計分析
本章節針對 google 表單測驗回收之有效問卷，依據受試者對於手語的詞彙理解 與認知能力表現進行 T 檢定（T-test）檢測分析。
(一) 資料統計
為了進行獨立樣本 T 檢定，需要一個獨（分組）變項（實驗組：動態圖像、控 制組：影片）與一個依變項（如答對率）。（表 4）為統計結果。
41
42
24 1 1 0
25 1 1 0
答對人數 19 19 15 答對人數 25 25 23 答對率 90% 90% 71% 答對率 100% 100% 92%
(二) 資料分析
表 5 T-test 單個題目與控制組比
第一題 第二題 第三題 平均
實驗組 100% 100% 92% 97%
控制組 90% 90% 71% 84%
單尾檢定 0.060 0.060 0.035
結果統計分別對實驗組及控制組之學生進行後測，實驗組平均分數為 97%，控 制組平均分數為 84%，（上表 5）顯示，第一題與第二題未達顯著差異，第三題 則達顯著差異。整體相比（表 6）（66 個控制組結果 vs. 75 個實驗組結果），檢 定前提是假設每一個測驗結果都是獨立的，達顯著差異。小於 0.05 視為顯著差 異。
表 6 整體相比
雙尾檢定 0.006 單尾檢定 0.003
43
44
也讓學習更具有彈性。動態圖像設計手語教學不僅在學習成效較佳，其畫面品質 檔案大小與格式傳輸上更具競爭力，數位的學習也突破傳統的學習方式，透過行 動學習能增加了學習的意願，並隨時提供使用者資訊，動態圖像設計的學習未來 也慢慢成為線上主流教學方式，提供最快速、畫面最清晰的學習教材。
45
46
47
以下為創作設計過程說明與限制 1. 角色造型設定 :
角色整體風格設計採扁平化設計（圖 33），由於手語的溝通位置幾乎都位在半 身焦距上，所以造型上以避開下半身之設計，而人們在觀看角色並學習過程中，
避免因造型過於複雜增加學習的困難度，在角色中刻意拿掉脖子部分，脖子是頭 與身提連接的重要部分，但在動態圖像設計中不需刻意表現，觀看能清楚知道該 位置為脖子部位，另一方面，在頭型動態部分不會因脖子而限制動態範圍。
圖 33 角色設定
2. 角色設定色彩
在角色的膚色與服裝顏色採較低彩度色彩應用，膚色（R255. G189. B130.），服 裝選擇灰色（R132. G132. B132.）作為應用，低彩度色彩搭配目的是減低載體色 光的刺激影響觀者造成視覺疲勞（圖 34）。
圖 34 灰暗色背景降低眼睛視覺疲勞，並聚焦於角色手勢中
48
3. 角色動態設計色彩規劃
由於本創作為動態圖像應用於手語的學習上，在手語的手勢，在動態畫面中以 白手套設計聚焦在手勢（圖 35），讓視覺點突顯在手勢姿勢上，也避免與臉部膚 色混淆，這也是動態圖像的一項特色與優勢。
圖 35 動態截圖，白色手套能避免與人體膚色混淆
5.4 作品呈現與執行
本創作選定 100 個常用手語單字基本用語作為本次設計，除了動態圖像的手語 圖形記憶學習外，作品也透過行動裝置應用程式(APP)設計的呈現，讓動態圖像 更加完整的應用在學習上，增加學習的互動，透過交互的設計提升使用者學習的 興趣，並帶來學習上的成效。以下作品為手語詞彙與 app 設計：
（一）動態圖像設計應用於手語作品 1. 100 個常用詞彙之動作設定
經過了研究方法的角色設計並實驗研究完成後，原有的角色設計臉部呈現縮下 巴，這有可能誤導觀看者觀看臉部表情，而本次創作已在臉部表情上經過了修正，
以及在手勢上的優化（圖 36），以下為 100 個手語動態辭彙之作品圖表（表 7）。
每個詞彙正面與側面之呈現
49
圖 36 左圖為實驗研究的原本設計，右圖為修正後的創作
表 7 100 個手語辭彙動態截圖作品圖表
fat 胖 thin 瘦
know 知道 dontknow 不知道
go 去 come 來
50
thick 厚 light 薄
night 晚上 noon 下午
want 要 motorcycle 摩托車
thanks 謝謝 sorry 對不起
51
feel 感覺 happy 快樂
afraid 害怕 short 矮
mrt 捷運 misunderstand 誤會
job 工作 no 不
52
not 不是 think 心想
disappointed 失望 dream 作夢
forget 忘記 man 男
expensive 昂貴 cheap 便宜
53
yes 是 home 家
remember 記得 high 高
subway 捷運 2 buy 買
hungry 餓 worry 擔心
54
doctor 醫師 medicine 藥
people 人 female 女生
daughter 女兒 bus 巴士
sport 比賽 train 火車
55
father 父親 they 他們
brother 兄弟 taipei 台北
taiwan 台灣 mother 母親
name 名字 old 老
56
teacher 老師 self 自己
son 兒子 child 兒童
sister 姊妹 friend 朋友
brave 勇敢 see 看
57
ask 問 teach 教
love 愛 talk 說
write 寫 help 幫忙
hearing 聽人 deaf 聾人
58
dislike 不喜歡 outside 外
angry 生氣 young 年輕
you 你們 hope 希望
us 我們 that 那
59
why 為甚麼 what 甚麼
taxi 計程車 heavy 重
time 時間 store 商店
this 這 like 喜歡
60
toilet 廁所 thirsty 渴
wait 等 give 給
open 開 hotel 飯店
bike 腳踏車 inside 裡
61
slow 慢 light 輕
bank 銀行 school 學校
close 關 nurse 護士
本創作整理。
62
2. 執行製作
依據 100 個手語詞彙手勢，在實際製作階段中，首先角色人物設定必須在製作 動態前確定，國際手語部分透過專業的手語老師吳牧師協助拍攝影片，之後進行 手勢的描繪，描圖也必須考慮到側邊，工作狀況如下（圖 37）所示。
圖 37 執行的前置作業-國際手語「姊妹」。
開始進入軟體的動態設計，軟體版本為 Adobe After Effect CC 2015.3，無使用外 掛插件，物件的命名上，R 表示在右半邊的物件（也就是人物的左半），L 反之。
首先將人物 AI 設計稿拆層並匯入 After Effect （以下簡稱 AE），再將 AI 檔全部 轉換成 AE 的形狀。為了能較靈活地彎曲，決定直接在 AE 裡重新以 path 線條繪 製手臂。（正、側面同） 如下（圖 38）所示。
圖 38 AI 檔全部轉換成 AE 的形狀。
63
之後選取頭部物件，點及滑鼠右鍵選擇 pre-compose，將頭部先包在一個合成裡，
以利製作。（正、側面同）如下（圖 39）所示。
圖 39 點及滑鼠右鍵選擇 pre-compose。
製作袖子方面，因希望袖子可以跟著手臂做相同的變形，這邊使用到子母屬性
（Expression pick whip）的功能，製作共有四階段，以下進行解說。
(1) 首先複製貼上一個 armL，命名為 sleeveL，並將此線段圖層的屬性欄展開找到 Path 屬性，按住鍵盤 Alt 鍵滑鼠點擊 以新增表達式，點擊後會看到 Expression 欄位被呼叫出來（圖 40）
圖 40 複製貼上一個 armL 命名為 sleeveL。
64
(2) 將 armL 圖層的屬性欄展開，找到 Path 屬性，滑鼠點擊所叫出的 Expression 欄位裡的螺旋圖示（Expression pick whip） 不放，拖曳至 armL 的 Path 屬性層，
意即新增表達式 thisComp.layer("armL").content("Shape 1").content("Path 1").path。此 作法可使 sleeveL 的 Path 屬性等同 armL 的 Path 屬性，做到變形連動的效果
（圖 41）。
圖 41 找到 Path 屬性叫出的 Expression 欄位裡的螺旋圖示。
(3) 袖子過長，這裡使用 Trim Paths 的功能將線段截短：點擊 Add 旁邊的小箭頭，
選擇 Trim Paths（圖 42），並打開 Trim Paths 屬性將 End 調整為 96%。
圖 42 打開 Trim Paths 屬性將 End 調整為 96%。
65
(4) 接著由於剛剛將 Line Cap 的模式切換為 Butt Cap，肩膀缺了一個半圓，所以 在不選取任何圖層的狀態下，快點兩下圓形形狀工具新增一個圓形命名為 shoulder cup L，Fill 選擇袖子顏色，Stroke 調整為無，找到 size 屬性，調整為 40,40，
並將其移動到肩膀的位置（圖 43）。另一邊重複同樣的步驟做出 sleeveR。
圖 43 調整為 40,40 並將其移動到肩膀的位置。
綁定手掌方面，為了讓手掌跟著手臂的前端移動，這裡使用到 Expression pick whip、Trim Paths、sourceRectAtTime() ，三種功能配合。前兩者在製作袖子的步 驟中經解釋過，而 sourceRectAtTime()是一個可以抓出圖層邊界的表達式。利用 Expression pick whip 做到變形連動後，再利用 Trim Paths 將線段截短到只剩下一 個極小的點，最後利用 sourceRectAtTime()抓到小點的邊界，而因為是極小的點，
所以點的邊界近乎為點的位置，如此就能指定任何物件的位置為此位置；製作方 面分四階段，以下進行解說。
66
(1) 首先直接複製貼上一個 sleeveL，如此就可以得到一個已經做好變形連動並設 有 Trim Paths 的圖層，重新命名為 armL_bottom，並將 Trim Paths 屬性中 Start 的表 達式欄位呼叫出來，輸入 99.999；End 調整為 100%，如此就會得到極小點
（圖 44）。
圖 44 輸入 99.999；End 調整為 100%。
(2) 任意新增一個形狀或空物件(null object)，命名為 hand follow L，在此物件的 Position 屬性新增以下表達式：
target = thisComp.layer("armL_bottom");
sRect = target.sourceRectAtTime(time,false);
target.toComp([sRect.left,sRect.top])
這段表達式大致上的意思是：指令 target 為 armL_bottom 的屬性，又令 sRect 為 target 的邊界，此位置為 target 的 sRect 中的（右邊界值, 上邊界值），而“ . ”在表達 式中是「的」的意思，為方便替換，這裡是用另外的物件做跟隨而不是直接用手 掌。完成表達式後就會發現該物件已經移動到手臂的前端了（圖 45）。
圖 45 這裡是用另外的物件做跟隨而不是直接用手掌。
(3) 接著使用中心點工具將手掌的中心點調整到適合的位置後，按住鍵盤 Shift 鍵滑鼠點擊手掌圖層的螺旋圖示不放並拖曳到 hand follow L 圖層，使手掌成為
67
hand follow L 的子圖層，並把 hand follow L 圖層眼睛圖示關閉。子母圖層概念：
子圖層會跟隨母圖層的動作，但母圖層不受子圖層的動作影響（圖 46）。僅點擊 螺旋圖示拖曳是在不改變現狀下，子圖層的其他時間點將跟隨母圖層；若拖曳同 時按住 Shift 鍵不放則可以讓子圖層的位置、旋轉、大小對齊至母圖層。
圖 46 子圖層的其他時間點將跟隨母圖層。
(4) 最後回到 armL_bottom 的 Trim Paths 屬性，調整一下 Offet（偏移），使手掌（極 小點）移動到適當的位置（圖 47）。
圖 47 調整一下 Offet（偏移）。
正面頭部設定方面各有三階段，以下進行解說。
(1) 轉頭時頭髮的中間部分會稍微偏移，故在匯入前有先將頭髮分為兩部分，分 別為（圖 48）中間部分 hair_center 左 1 及基底 hair 左 2，影子部分也依照頭髮分
(1) 轉頭時頭髮的中間部分會稍微偏移，故在匯入前有先將頭髮分為兩部分，分 別為（圖 48）中間部分 hair_center 左 1 及基底 hair 左 2，影子部分也依照頭髮分