2016
UI/UX Graphic Product Animation
2018
立 全
CHARLIE CHIU NTUST Industrial Design
PO RTFOLI O
邱
About Me
我是
邱立全
UI & UX 之於我的設計之路
高中理科背景讓我在設計時更喜歡以理 性的方式思考，大二時接觸到 UX&UI 領 域，開始在作業上運用一些 UX 研究技巧 瞭解使用者，也自學 UI 的相關軟體。
實習、比賽增進能力
除了實習外，大三時報名了 UXPA 用戶體 驗大賽，希望藉此了解台灣學生 以及大陸 學生在用戶體驗設計上各自的特色及優 勢，以及了解大陸 在互聯網的生態趨勢。 為期半年的比賽最後獲得全國二等獎，也 在南京聽到了 Alan Cooper、阿里巴巴、 京東等精彩演講，讓我對於未來進入產業 更抱著 期待。
Award & Activity 2017 Uxdaward 國際用戶體驗設計大賽 創意設計學士班 Idea+ X 改善生活的創意
- 中國全國二等獎 - 班代 - APP 提案
2016 龍吟言論長者工作坊 Behance Review NTUST 法拉利姐新歌發表 台科系學會 台科設計周晚會 設計系金歌杯聖誕晚會
- 訪談、設計參與 - staff - 籌辦、專輯設計 - 器材組長 - DJ - DJ
2015 台科設計營 台大藝術季可視聲波 DVJ 表演
- 器材組長 - DJ
Experience PicCollage UX intern 2017.7~2017.8
後台資料研究使用者 APP 操作行為
在公司中我負責研究使用者APP 的操作行為，利用後台的轉換率 以 及使用者操作手機的軌跡等數 據推測介面需要優化的地方。
實習讓我更清楚未來的方向
很幸運地在大三暑假進入PicCollage新創 APP公司實習，擔任UX實 習生，在這兩 個月的實習，觀察到業界UI/UX設計師的 工作內容，學習很多實戰技巧，也對於 自己未來的方向更加確定。
學習團隊合作、開發流程 藉由每週公司開會學習到實際優化 APP 介面的流程中，要如 何在設 計、ＰＭ、工程之間取捨，以及如 何利用質化訪談、數據的結果 說服 主管進行頁面的優化。
Skills UI
Modeling & Rendering
Illustrator Photoshop Sketch Adobe XD Principle
AutoCad Rhinoceros ProEngineer Keyshot
Animation AfterEffect Maya
Education 台灣科技大學創意設計學士班 - 工設組 國立師大附中 - 普通班
Inside the portfolio
Contents
01
UI / UX Design
Starship 自閉症教育 APP 11 Sportcollege 運動交友 APP 45 FOODAY 食材管理 APP 67
02
Product Design
P-PUPPY 智慧盆栽 83 蟲蟲藏寶圖戶外遊戲書 93
03
Interaction Design VR 遊戲 - 細菌大作戰
04
105
Graphic & Animation 企業事務用品設計 專輯封面設計 插畫設計 Motion Graphic
115 119 121 125
what is inside
UI Design Starship 自閉症教育 APP
Sportcollege 運動交友 APP FOODAY 食材管理 APP
01
中國國際用戶體驗設計大賽 全國二等獎
自閉症生活技能訓練APP
Starship是一款針對自閉症兒童生活技能訓 練設計的App，治療師能夠透過此App製作 教具給家長回家使用，訓練過程中遇到的 問題、結果也能紀錄在App上，方便家長 與治療師溝通，利用視覺化呈現也有利治 療師做評估以及長期追蹤。
MEMBERS 邱立全
UI設計 視覺設計
周辰
用戶研究 PM
陳韋儒
UI設計
楊喬宇
吳東承
莊以琳
蔡捷安
前端開發
後端開發
UI設計 用戶研究
視覺設計 用戶研究
PORTFOLIO
Uxdaward 用戶體驗設計大賽 決賽晉級
11
關於自閉症 about autism
穿衣、刷牙、洗臉、上廁所、吃早餐... 這些日常生活事務對我們來說是多們的簡單微不足道
自閉兒難以獨立完成日常生活技能
然而自閉症孩子卻難以獨立完成這些日常生活自 理任務,這些孩子需要把握6歲以前的黃金期,接受 持續不斷的刺激與訓練。
PORTFOLIO
需要治療師分解生活技能動作 讓家長照著指示一步一步訓練小孩 一步一步教導小孩，等一個步驟學會了 再進行下一個步驟。然而我們發現在家 長在家中訓練孩子以及諮詢治療師過程 中存在著許多問題。
13
設計過程 design process
1.問題發現 discover
文獻蒐集 訪談治療師 問卷量化調查
2.資料整理
data compilation
WAAD 整理通點尋找機會點 Customer Journey Map Persona
PORTFOLIO
我們決定從生活技能訓練下手 尋找過程中治療師、家長、兒童的痛點 初期藉由質化、量化研究理解自閉症兒 童訓練過程中遇到的問題，之後藉著測 試與訪談不斷優化我們的設計
3.初步設計 Desgin
Wireframe Flowchart Prototype
4.測試驗證 testing
治療師與家長實際測試
5.設計修正 Redesign
設計修正 App開發
15
用戶旅程地圖 customer journey map
利害關係人
家長
治療師
治療師評估
治療師依照孩子狀 況評估訓練項目
問 題 點
自閉症兒童 教學、製作教具 製作圖卡教具 並進行教學
交代家長 叮囑家長回家訓 練的注意事項
1.教具製作耗時 治療師製作教 材耗工費時
2.醫師建議難以消化 諮詢時間短，家長無法消 化治療師的大量指示，在 家中仍不清楚如何訓練
PORTFOLIO
訪問後發現四大問題點
我們實際訪談治療師與家長針對自 閉兒訓練的流程，並將文獻、訪談 中搜集到的問題點整理成 Customer Journey Map。
家中訓練 家長依照治療師 吩咐在家中自行 訓練孩子
回診 諮詢治療師在 家中訓練遇到 的狀況
3.孩子厭倦重複性訓練 自閉兒在學習過程 中容易對重複性訓 練內容感到厭倦
4.家長與治療師無法順利溝通
治療場所與家中場域的轉 換，家長無法清楚回報訓練 狀況，導致家長與治療師無 法順利溝通
17
設計特點 redesign
我們針對四大問題點做了以下設計
問題點
1.教具製作耗時
問題點
2.醫師建議難以消化
設計特點 ABC
公版教材庫功能 創建教材功能 設計特點 ABC
創建教材功能
PORTFOLIO
問題點
3.孩子厭倦重複性訓練
問題點
4.家長與治療師 無法順利溝通
設計特點
遊戲化學習功能
設計特點
學習成效追蹤功能 即時記錄估能
19
功能介紹 Function
1. App入口
治療師入口
sidebar 常駐，讓治療師可以在三項主要功能間切換 為了方便治療師在看診時找尋病患資 料，以病歷列表作為治療師入口
PORTFOLIO
家長入口
家長所需功能較少，將sidebar隱藏至hamburger
家長主頁呈現孩子的最近被指派的課程、圓餅圖與 折線圖，讓家長快速了解孩子的狀況
21
2. 創建教材 治療師端功能
針對相同任務不同情境設計兩個創建教材的Flow
情境1. App查看完學員狀況，決定指派給學員教材 在學員資訊的頁面中看完學習狀況後，點擊“指派教材”
可以選擇從已經做好的教材庫指派教材，或是重新創建新的教材
PORTFOLIO
情境2. 打開App直接開始創建教材 點擊sidebar的創建教材icon，直接進到創建教材頁面
選擇從教材庫指派教材，或是重新創建新的教材
23
卡片式設計，輕鬆創建、重新修改教材 每週重複的看診，治療師需要針對當週狀況微調教材 數位化方式可以讓他輕鬆重新編輯
PORTFOLIO
點擊灰色Placeholder區域拍照 or 從相簿中選取照片
點擊文字區域編輯文字
25
長按卡片跳出 Toolbar 操作細節功能ex. 移動、刪除、新增步驟
情境1. 沒有特定指派對象 導向到我的教材庫
PORTFOLIO
針對不同的任務流程 設計兩個教材完成後的流程
情境2. 已經確定指派對象 導向學員列表選擇 27
3. 公版教材 治療師端功能
利用segmented controls做第二層的引導
預設公版教材提供新手治療師參考 新手治療師會先查詢案例才開始製作教材 經過訪談後發現有些新手治療師會先問 前輩or網路教材，觀察怎麼分解動作。 因此我們加入生活技能、粗動作等 公版教材提供參考。
下拉選單則針對動作訓練教材內的種類做第三層引導
PORTFOLIO
下拉選單快速尋找教材類別
我的教材庫
我的教材庫是放置治療師自己創建教材的地方
29
查看課程的詳細資訊
重新編輯公版教材
治療師可以編輯教材後再 給學員也可以直接指派
PORTFOLIO
加入收藏
將喜歡的教材加入收藏 方便治療師做比較
31
4. 即時記錄 家長端功能
文字紀錄
每個步驟卡片都可以點擊"留言" 針對該步驟留下紀錄
即時記錄，雙方溝通更有效率
家長以文字、錄影方式紀錄，諮詢溝通更容易
一般家長僅以口述方式跟治療師敘述問題，若把紀錄功 能與治療師的指派的教材結合，在教小孩時就可以同時 紀錄，能減少與治療師的溝通時間。
PORTFOLIO
協助程度紀錄
選取教學時協助的程度，幫助數據化學習狀況
錄影紀錄 針對打字比較難說明的狀 況可以用錄影功能紀錄 治療師端的資訊呈現
家長的評語、協助程度紀錄會同步在治療師端的頁面。
33
5. 遊戲化學習 家長端功能
轉場動畫讓小孩 進入遊戲情境
遊戲化角色互動，避免重複訓練過程中的無聊 自閉兒難以專注，容易在重複的訓練過程中失去耐心， 我們利用角色動畫回饋在孩子完成每個步驟時給予獎勵
PORTFOLIO
擊掌互動 當孩子正確完成動作後可 以點擊小熊與角色擊掌
動畫遊戲情境
完成訓練，成功幫助小熊 角色抵達星球，用動畫讓 孩子有成就感
35
6. 成效追蹤 治療師功能
學員資訊
圓餅圖
比較不同教材學習狀況
折線圖
比較相同教材不同步驟學習狀況
PORTFOLIO
視覺化學童學習狀況，節省諮詢時間
自閉兒難以專注，容易在重複的訓練過程中失去耐心，我 們利用角色動畫回饋在孩子完成每個步驟時給予獎勵
課程訓練狀況
該步驟協助程度
該步驟家長留言
37
依照學童學習狀況重新編輯教材
治療師會依照每次諮詢後學童的學習狀況，微調教材達到 最好的訓練效果。
在學童每個課程資訊裡，點擊“編輯”修改教材。
PORTFOLIO
長按叫出toolbar
39
FLOW 流程圖
治療師
PORTFOLIO
家長
41
UI GUIDLINE 設計規範
Colors Primary
#5d6bce
#93a2f5
#5f5f5f
#919191
#b0b0b0
#ffdc6b
#87d2f5
Secondary
#ff7aab
#ffa58c
PORTFOLIO
Typeface PinFan TC
PinFang TC Medium 20pt PinFang TC Regular 17pt PinFang TC Regular 17pt PinFang TC Regular 15pt PinFang TC Regular 15pt PinFang TC Regular 15pt PinFang TC Regular 12pt PinFang TC Regular 12pt
43
SportCollege Best College Life
運動交友 APP
SportColleg 是 款 運 動 交 友 APP， 以
大 學 生 為 主 要 客 群， 學 生 可 以 透 過 APP，參加、舉辦在校內或校園附近
的運動活動，也可以以團隊報名友誼 賽，藉此找到運動同好，發展為常態 運動關係。
邱立全
UX design Researcher
游蕎綺
邱韋如
UI/ UX design
UI/ UX design
PORTFOLIO
MEMBERS
45
核心理念 why this app
運動時最大的問題是缺少人陪伴
一開始透過組員內互相分享關於「運動」碰到 問題點，我們發現運動容易讓人無法持續的原 因似乎是缺少「人」陪伴。
PORTFOLIO
因此我們決定設計一款運動社交APP 發現問題 問卷驗證需求 概念發想 訪談驗證概念
設計流程 process
以此為目標，我們擬定了研究 流程，並依序往下進行驗證這 個假設及訪問，期望設計能夠 更為貼近使用者。
Persona Design
47
問卷調查 Analysis
在初步發現問題後，為了驗證使用族群是否「真 實」有這樣的需求，我們利用「問卷驗證法」蒐 集300份的問卷。
PORTFOLIO
問卷題目
曾因為什麼困擾打消運動念頭?
我們藉問卷之問答中發現，主要有四種原因導致人打消運動念頭。
1. 一個人運動的孤單 2. 對於新的運動因為不熟悉與面子問題不敢嘗試 3. 排球等團體運動揪不到人一起打 4. 沒有專業的人教導ex.健身
什麼能夠提升運動意願?
在問卷中我們也發現，有五點能夠提升他們的運動意願
1. 有朋友的陪伴 2. 增加成就感 3. 找到程度相近的人一起運動 4. 結交志同道合的朋友 5. 有專業的人教學
49
有人陪伴能夠提升你的運動意願嗎？
問卷中問了「有人陪伴是否能提升你的運動意願？」並讓他們 以1至5去做評分，問卷的結果平均為4.2分，這高度顯示「陪 伴」在提升人運動意願中扮演很大的角色。
PORTFOLIO
Analysis
問卷結論 運動與社交有強烈關聯性
藉由問卷我們發現「運動」與「社交」有強烈之關聯性，不 論是打消運動念頭之原因，或是提升運動意願，兩者共同元 素都與 「人」有相當大的關係，因此若能把運動與交友做結 合，是不是就能解決「無法維持運動習慣」這個關鍵問題？
運動
社交
51
初步概念 concept
1.瀏覽身邊附近 2.隨機配對運動對象 運動活動
根據問卷結果提出初步概念 針對問卷結果，我們提出設計之初步 概念是一個「運動交友」平台，裡面 包含三大功能：
3.舉辦運動活動
PORTFOLIO
實際訪談 interview
訪談驗證初步概念
接著以初步概念為基準，設計了訪 綱，並找了目標族群做實際的訪問。
53
人物誌
Persona
訪談及問卷結果繪製成Persona 我們歸納出兩種目標客群，分別是：有運動 習慣的人＆斷斷續續運動的人並且繪製三個 人物誌，以及描述他們運動的行為、需求目 標、情境。
PORTFOLIO
55
訪談結論 interview
場地
希望是熟悉的地點，並且開放性 之空間，如學校的戶外籃球場。 較能降低他們的疑慮及提升 對活動的信任、安全感。
運動活動
希望不只是一次性活動。
期待可藉此找到合適的人一起參加比 賽，或培養成常態性之運動活動。
運動陪伴者
希望運動對象是年齡相 近、族群相近的學生。
因背景相近可以大大提升使用 的安全感及提升運動過程之話
PORTFOLIO
針對訪談修正
Design
大部分人對於安全有疑慮，因此刪掉隨機配對功能 針對訪談中大多數人對於隨機配對有安 全上的顧慮，因此將此功能刪掉，並加 入團隊競賽功能。
團隊
五大功能 活動列表
團隊友誼賽
創建活動
聊天室
個人頁面
57
功能介紹 functions
活動列表
PORTFOLIO
活動內容
以校園篩選
以日期篩選
迅速瀏覽、搜尋校園運動 隨時找到與你速配、鄰近的活動 以所在校區為中心搜尋活動
以校區為中心出發的地點篩選。 在這看到活動創辦主資訊、程度 要求，還有該活動的男女人數比 例，以及參與成員的資訊，使用 者可依需求，更迅速、方便的挑 選自己想要之運動活動。
呈現活動參與者男女比，增加安全性 訪談中得知女生想要了解活動 的男女比以避免尷尬並增加安 全性，因此在活動資訊加入了 男女比例。
59
團隊競賽、即刻發送戰帖 隨時組團，挑戰更強團隊
PORTFOLIO
團隊列表
團隊競賽這個需求，主要為針對 「平常有固定運動夥伴」的人開 發的，同時也能引起單一運動者 的組織慾，以增加使用者更多元 的運動習慣。
團隊介紹
發送戰帖
如何讓這些已經有長期夥伴、運動 習慣的人打破既有原則，以良性友 誼賽競爭方式，由「團隊」這樣更 緊密連結性為出發點，讓他們既可 不脫離原本族群，又能去尋找新運 動關係。
61
舉辦活動，找夥伴更輕鬆 創立屬於你的活動找夥伴更容易了！
選擇舉辦學校
PORTFOLIO
建立活動
透過種類選取、照片上傳、主題 命名、校區選擇，及條件門檻來 建立活動，讓其他人可以報名參 加使用者創辦的活動。
活動資訊書入
以條件篩選參與者 初步除了先透過簡單條件 門檻來篩選，活動舉辦人 也能藉由審核機制決定誰 能參加這個運動活動。
選擇時間 (顯示校園體育課時間
參加者條件設置
63
隨時聊天，相約更容易
活動、好友專屬聊天室，暢聊你們的運動生活
PORTFOLIO
為了隱私性，我們不讓使用者需 用到第二軟體去做活動方面的聯 繫，所以開發了這個功能，可 以將一起參加過活動的夥伴加入 好友，方便下一次相約。
聊天室
好友列表
聊天室列表
65
FOODAY Food Every Day
PORTFOLIO
食材管理 APP
FOODAY 是一款專為愛煮飯的人設計的 APP 具備三大功能，造就一個流暢的體驗 1. 食材管理 - 輕鬆把購買的食材輸入 APP，並在快到到期日時提醒 2. 食譜推薦 - 可以依照已購買的食材搜尋食譜，消耗家中快到期的食材 3. 購物清單 - 將搜尋到的食譜中缺少的食材一併加入購物清單
67
we solve these
Pain Points
食材放太久過期
不知道冰箱裡 存放了什麼食材
不知道要煮什麼 新菜色
PORTFOLIO
the three
Main Functions
食譜推薦
勾選食材庫內的食材推 薦食譜，依照個人喜好 推薦，不用再擔心菜色 沒有變化，還能輕鬆消 耗掉快到期的食材。
食材管理
輕鬆把購買的食材輸入 食材庫，並在快到到期 日時提醒，不用再擔心 有食材被遺忘。
購物清單
搜尋完食譜後，將缺少 的食材直接加入購物清 單，讓買菜時更方便。
69
what other apps do
Competitive Analysis 食材管理
優點 缺點
食材組菜
1. 內建常見食材選單，加 快輸入食材速度
優點
2. 食譜未整合於 APP 內
缺點
1. 功能多但彼此，缺 乏連結性
1. 介面簡潔好辨識 2. 食譜推薦整合在內 3. 食譜所需食材，資訊清晰 4. 預備常見食材 1. 食材沒有細項資訊 2. 缺少到期提醒 3. 偏向食譜查詢，單一功能
PORTFOLIO
食材輸入速度 食材細項資訊 食譜方便性 流程整合 到期提醒
Food Stocker
食材輸入速度 食材細項資訊 食譜方便性 流程整合 到期提醒
優點
缺點
1. 管理、食譜、購物，清單三 功能整合佳 2. 食材檢視方式多元 1. 輸入過程繁瑣 2. 沒有常見食材預備
食材輸入速度 食材細項資訊 食譜方便性 流程整合 到期提醒
71
主要頁面 四大
食材管理
食譜查詢
購物清單
清單內容共享
PORTFOLIO
功能心智圖
Functional Map 食材管理
食譜
手動
輸入資訊
掃描
瀏覽品項
輸入資訊
食譜
Filter
搜尋結果
我的最愛
食譜資訊
食譜資訊
加入購物清單
加入購物清單
購物清單
清單成員 設定
帳號 教學 登出
73
功能介紹 functions
食材輸入
以掃描方式快速輸入食材名稱，利用 Pickers 加速食材資訊填
PORTFOLIO
75
搜尋食譜 ＆ 購物清單
食材清單依照到期日排序，使用者可以優先選擇冰箱內快到 期的食物作為推薦食譜的搜尋條件，清掉快過期食品。 食譜資訊頁中會呈現食譜需要的食材列表，使用者可以輕鬆 地將不夠的食材加入購物清單。
PORTFOLIO
清單共享
當遇到家裡、宿舍都有食材的狀況可 以創建多個清單，清單可以邀清同居 成員一同編輯
77
UI FLOW
PORTFOLIO
79
what is inside
Product Design P-PUPPY 智慧盆栽 蟲蟲藏寶圖遊戲書
02
P-PUPPY 智慧盆栽
長者陪伴盆栽
P-PUPPY 是一個智慧盆栽產品 藉由聲音互動跟表情的視覺互動 達到長者獲得成就感、身心靈陪伴的滿足
PORTFOLIO
寵物互動模式融入盆栽設計
我們將寵物的互動模式 + 植物養殖，讓 長者既能輕鬆的養植物，又可以體會寵 物的陪伴感。藉由比養寵物還輕鬆的智 慧盆栽達到長者心靈陪伴的功能。
83
長者碰到的問題 訪談之後
孤寂感 孤寂感
利用焦點團體法與多達十位長者訪 談，聊天過程中多位長者都有受孤寂 感所苦的狀況
PORTFOLIO
許多給養老院、看護照顧的老人因為缺少心 靈上的陪伴，造成內心的孤獨感，缺少連結 感的心靈問題進而影響身體狀況。
85
思考過程
SKETCH發想
原本發想與復健用品結合，訪問後發現使 用者覺得麻煩，後來將功能精簡成單純情 感上互動的智慧盆栽
PORTFOLIO
最終設計 擬人化盆栽
藉由與智慧盆栽擬人化 產生聲音互動跟表情的視覺互動 達到長者獲得成就感、身心靈陪伴的滿足
藉由與智慧盆栽擬人化 產生聲音互動跟表情的視覺互動 達到長者獲得成就感、身心靈陪伴的滿足
87
功能介紹 functions
種植 顯示面板
蓄水
充電座
PORTFOLIO
缺水時我想哭
土壤溼度感應器提醒澆水 顯示哭泣表情
靠近我時我會微笑 紅外線感應手部靠近 顯示微笑表情
晚上到了該充電囉 ( 打呼 充電提醒 顯示打呼表情
89
如何使用
使用情境影片
PORTFOLIO
91
長者與小孩互動遊戲書設計
植物拼貼遊戲書
蟲蟲藏寶圖是一款以大安森林公園為主題 的植物拼貼遊戲書，分為遊戲書與收藏書， 需要長者與小孩一同完成。
PORTFOLIO
增進老人與小孩互動
利用葉子拼貼成昆蟲形狀的遊戲以及拼 貼完收藏書上的昆蟲教材介紹，增進老 人與小孩互動、增加小孩的知識，並藉 此鼓勵老人出去戶外活動。
93
怎麼玩
遊戲方式
遊戲將大安森林公園分成 ABCDE 五區，每 區三種昆蟲，尋找區內的葉子拼成指定的 昆蟲樣貌，再把蒐集好的葉子貼到收藏書
PORTFOLIO
95
書本內容
遊戲書
遊戲書封面以可愛風格、鮮 豔色彩設計吸引孩子目光。
PORTFOLIO
昆蟲樣貌
葉子所在地圖
葉子所在環境
植物樣貌
97
書本內容
收藏書
經由遊戲書引導後蒐集到的 葉子，長者可以與小孩一同 拼貼到收藏本上。
PORTFOLIO
昆蟲介紹
植物收藏區
99
如何使用
使用流程 選擇一個遊戲區
依照地圖尋找樹
藉由環境照片
蒐集完全部葉子
貼到收藏書裡
教小孩認識昆蟲
PORTFOLIO
101
what is inside
Interaction Design 細菌大作戰 VR Game
03
細菌大作戰
BACTERIA WAR
孩童傷口處理VR遊戲
細菌大作戰(Bacteria War)是一款幫助小朋友學 習傷口處理的虛擬實境遊戲,它運用虛擬實境與 LeapMotion 的技術,讓小朋友在沈浸於遊戲世 界的同時,也能學習傷口處理的正確知識。
PORTFOLIO
MEMBERS 清大資工 蕭意子 | Yi-Tzu Hsiao 陳思宇 | Chen Szu Yu 張雅貴 | Juliana Chang 周庭瑱 | Ting Tian Zhou 台科設計 邱立全 | Charlie Chiu 劉家勳 | Jia-Xun Liu 簡禎廷 | Jimm Jian
105
設計流程 how we design
在工作坊中,我們結合資工與設計背景 的成員,試圖利用設計思考以人為本的 特點與資工端對於 AR/VR技術的優勢, 發展能真實深入使用者日常生活的虛 擬實境應用。
Brainstorming
Storyboard
我們腦力激盪出了許多有趣的點 子,最後選出針對小朋友的清洗傷 口教學為題目,並且利用簡單的模 型與圖畫演繹出來。
為了幫助我們更深入思考每個情境中 觀眾是如何與遊戲互動的,我們用故 事版的方式將各個場景畫下來,並且 在旁註記此時會使用到的科技,最終 將之發展為詳細的流程。
PORTFOLIO
Interview
Design & Demo
為了能夠更正確地在遊戲中教導小朋 友們傷口處理的知識,我們訪問了一 些專業護理師,將我們的概念與他們討 論,讓我們了解到清洗傷口的個步驟須 注意的事項。
經過不斷的修正，我們與清大合作， 設計負責遊戲流程以及介面、模型設 計，清大負責用 Unity 將概念實現， 最後用 HTC Vive 及 Leap motion做 現場測試。
107
使用流程 flow
止血
消毒
清洗
擦藥
包紮
我們將實際傷口處理的五大流程導入 遊戲中，讓孩子藉由遊戲學習到如何 正確處理傷口
VＲ的必要性
Why VR 細菌可視化 VR可以將實際看不到的細 需要配備 : 椅 子上體驗 ，固定視角 菌可視化，讓小孩更瞭解
減少暈 眩、 空間 認知錯誤 錯誤處理傷口的嚴重性
360度沈浸 VR可以讓孩子有置身真實 場景的感覺，加深學習的 印象。
可視範圍
以第三人稱視角幫 助受傷的
人清理傷口，消滅細 菌
PORTFOLIO
草圖 S CEN ARIO S HEIO TCSHHE TC H SCE NAR
Sketch
109
遊戲場景 VR GAME
01 主頁
遊戲主頁有三款不 同難易度的傷口可 以選擇
02 提示
點入小傷口處理後 以箭頭提示目前要使 用的藥品順序
03 遊戲開始
閱讀完提示以及教 學後，小孩開始進 行遊戲
PORTFOLIO
04 錯誤懲罰
若選擇錯誤藥品，細菌的數 目增加，角色血量減少，提 醒小孩目前的動作是錯誤的
05 視覺化提示詳細動作
以視覺化呈現時間提醒小孩 紗布需要敷傷口需要的秒數
06 獎勵
做出正確動作後細菌的數目 減少，以此獎勵小孩，增加 遊戲的樂趣
07 任務完成
全部步驟完成後以獎章 獎勵孩子，標示出該次 表現狀況以及須多加注 意的地方
111
what is inside
Graphic & Animation 事務用品設計
法拉利姊專輯設計 插畫設計
04
事務用品設計
PORTFOLIO
台北市政府 CIS 設計 Commercial Design
115
指標系統
PORTFOLIO
旗幟設計
海報設計
117
法拉利姊 BOBOBO 單曲專輯設計
PORTFOLIO
專輯設計 Commercial Design
119
插畫設計 graphic design
PORTFOLIO
121
邀請函設計
PORTFOLIO
桌遊插圖設計
123
BABI JOJO Motion Graphic
Vimeo 動畫連結
PORTFOLIO
THREE SMALL STUDIO Motion Graphic
Vimeo 動畫連結
125
3D Animation
The Outerspace
Youtube 動畫連結
PORTFOLIO
3D Animation
The LOOP
Vimeo 動畫連結
127