國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
50
第肆章、創作結果
第一節 創作成果
一、互動介面與視覺呈現
視覺方面以電腦繪圖呈現，使用Photoshop 及繪圖板製作手繪感插圖，並搭 配適當材質營造氣氛。背景以色塊表現，人物及可點選的物件則在輪廓加上白色 線條加以強調。插圖完成後再使用illustrator 上文字、排版。
介面部分分為封面頁、說明頁、故事本文、場景／人物選擇頁、人物故事頁、
故事曲目播放頁。以下（表4-1）僅以其中一頁代表各類型的頁面（完整作品成 果請見附錄一）：
（一） 封面頁
此頁音樂為微小的鋼琴聲（主角單一音軌）。
介面
點選【PLAY】進入說明頁。
視覺與動態設計
城市灰白畫面，與微微顫動 的弦。開始閱讀的按鈕使用 PLAY 意旨聽音樂、玩音 樂、玩故事。並以圓形唱片 形狀為造型。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
51
（二） 說明頁
介面
點選下一頁進入本文。
點選上一頁／回到首頁按 鈕回到封面頁。
視覺與動態設計
簡易圖像示意互動流程，背 景呈現城市風格。
此二頁音樂皆為微小的鋼琴聲（主角單一音軌），按 鈕也設有音效。
介面
點選下一頁進入本文。
點選上一頁進入流程介紹 頁。並在畫面放置建議攜帶 耳機體驗icon。
視覺與動態設計
用簡短文字說明故事概念：
「心與心觸動的時候，會交 織出美麗的和弦」
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
52
（三） 故事本文
此頁為地鐵環境音效及微小的鋼琴聲（主角單一音 軌）。
介面
淡入淡出的插圖和文字。
介面基本按鈕：
「上一頁」、
「下一頁」及「回到封面」
視覺與動態設計
黑白色系的插圖，呈現都市 的鬱悶氣氛。
（四） 操作教學頁
此頁為地鐵環境音效及微小的鋼琴聲（主角單一音 軌）。
介面
淡入淡出的插圖和文字。
介面基本按鈕：
「上一頁」、
「下一頁」及「回到封面」
視覺與動態設計
為了讓音樂在音樂家說完 話後彈奏，文字框為定時出 現，並出現提示框讓讀者熟 悉故事概念與操作方式。
整體除了音樂家以外色調 偏暗。
‧
‧
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
55
（九）故事曲目播放頁
介面
介面按鈕：
1.「播放」、「暫停」切換 2.「下載」
3.「回到封面」。
4. 文字：今晚的回憶化為一 首心弦之歌，在我心中來回 地合奏。
5. 目前播放的曲目：例如左 圖文字為心弦之歌 |
Track1：我／Track2：街頭 音樂家／Track3：喜憨兒／
Track4：劇本作家／
Track5：滷味攤阿姨
6. 音樂暫停，切換至下圖。
視覺與動態設計
本頁設計為播放「人生的唱 片」，唱片及唱針為個別物 件，隨著暫停播放旋轉／停 止。背景為根據遇見的角色 所代表的顏色，並在上方加 註唱片曲目（今晚遇見的人 物）。
表 4-1 互動與介面設計
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
56
二、故事文字呈現
文字敘述可分為故事描述及音樂描述，在故事各情節皆會鋪陳故事概念及音 樂與人物的描述，引導讀者仔細聆聽故事中的音樂和故事之間的關係。
三、音樂與音效呈現
音樂設計根據角色與故事設定完成了總共10 個角色（樂器）音軌，並組合 成8 首風格不同的曲子。App 中含有的所有音檔如下表 4-2：（請參考附錄光碟）
主要呈現內容 音樂長度 檔名(.mp3) 第一部分 城市環境音樂 1min loop Track-0 第二部分：
人物音樂
A-主角女上班族 2-3min Track-A
B-音樂家 Track-B
C-賣餅乾喜憨兒 Track-C D-外國女背包客 Track-D E-咖啡店老闆 Track-E
F-劇本作家 Track-F
G-花店老爺爺 Track-G
H-滑板少年 Track-H
I-滷味攤阿姨 Track-I J-補習班高中生 Track-J 第三部分：
各音軌合成的最終曲 子
A + B + C + E + G Track-1 A + B + C + E + H Track-2 A + B + C + F + I Track-3 A + B + C + F + J Track-4 A + B + D + G + E Track-5 A + B + D + G + F Track-6 A + B + D + H + I Track-7 A + B + D + H + J Track-8
表 4-2 音樂輸出格式列表
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
57