邱立全_Charlie's portfolio

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