Page 1


02

目 錄

32 介面設計

Content

平面設計

Use r In terface

Graphic Des ign

文朗字典

04

夢想多拿滋

34

我是夜市王 M

12

我是夜市王

42

金井冰品店

22

個人雜誌對頁

50

教材封面設計

51

52

62 電腦繪圖

動畫專題

I l l us tratio n

Animat ion

炸蝦寶寶

54

日落之後

64

彩色甜點明信片

58

ENVY

74

晶碩看見與眾不同

60

01


介面設 計

User I n te rfa ce

文朗字典

04

我是夜市王 M

12

金井冰品店

22


介面設計

User Interface

設計理念 市 面 上 有 許 多 英 漢 字 典 APP 介 面 設 計 幾 乎 不 是 很 美 觀, 也 常 因 icon 與 排 版 設 計 不 良 而 增 加 操 作 難 度與時間,因此,我們決定重新設計一款結合美觀 與 順 暢 操 作 的 全 新 英 漢 字 典 A P P— 文 朗 字 典 。

標準色 #A32223 #1F3B 59 #D2D3D4

主視覺 | icon 設計| 介面設計| 內文排版| 展版設計| 實驗測試|       成品發表|

04

選 用 這 三 種 顏 色, 是 為 了 凸 顯 英 漢 字 典 給 人 簡 約、 沉 穩 , 搭 配 明 度 較 低 的 紅 色, 給 人 低 調 中不失活潑的感受。

李依靜 、 趙 文 郁 吳致萱 李依靜 、吳 致 萱、 趙 文 郁 、 吳 宜 蓁 、 顏 薏 馨 吳宜蓁 、 顏 薏 馨 李依靜 、吳 致 萱、 趙 文 郁 、 吳 宜 蓁 、 顏 薏 馨 李依靜 、吳 致 萱、 趙 文 郁 、 吳 宜 蓁 、 施孟萱 、 顏 薏 馨 施孟萱

上知天文,下知地理,文朗字典,通通搞定!


User Interface

介面設計

05


介面設計

User Interface

設計流程

06

1

2

3

4

5

設計動機

資料蒐集

實驗測試

數據分析

設計改良

現今大學生對手機翻譯

我們挑選三款市售介面

隨 機 挑 選 18 位 無 使 用

針 對 整 體、 三 個 任 務 、

透過分析結果篩選適合

功 能 的 需 求 增 加, 加 上

與操作有一定差異之英

此 三 種 字 典 AP P 經 驗 之

介 面 配 色、 介 面 排 版 、

之標準色、版面、功能,

市面上英漢字典介面多

漢 字 典 AP P ( 英 漢 字

大 學 生, 每 種 字 典 APP

介 面 字 體 與 操 作, 彙 整

並新增收納我的最愛單

數 不 美 觀、 操 作 多 有 改

典、 影 音 字 典、 哈 電 族

皆操作三個相同指定任

八 種 面 向 之 滿 意 度, 從

字 之 資 料 夾 功 能, 設 計

善 空 間, 因 此 我 們 決 定

辭 典 ),指 定 操 作任務,

務, 紀 錄 使 用 者 操 作 錯

分析結果分析受試者之

整 體 主 視 覺, 多 次 修 正

對 英 漢 字 典 AP P 做 設 計

並設計一份問卷供使用

誤 次 數、 花 費 時 間 與 介

偏 好, 並 參 考 受 試 者 意

調 整 介 面 與 操 作 流 程,

改良。

者回饋。

面設計之滿意度。

見以改良字典 APP。

完成設計改良。


User Interface

介面設計

問卷分析 我 們 請 受 試 者 分 別 操 作 三款英漢字典APP以執行指定任務,統計數據並分析,得到 以下結果, 依 照 此 結 果 做 一 系 列 的 功能設計與介面設計,並新增文朗字典獨家「我的最愛單字收 納功能」。

EC 英漢字典 例句形式簡潔

受試者偏好 共 18 人

影音字典 介面簡潔美觀 快速複製功能

哈電族辭典 操作方便的固 定功能列

介面滿意度 5 4

影音字典 E C 英漢字典

3

哈電族辭典

2 1 0

影響受試者滿意度之原因

配色

排版

字體

操作

配色  影音字典配色有質感且色調統一

1 介面設計美觀

排版  影音字典排版最簡約乾淨

2 i co n 標 示 清 楚

字體  影音字典字體與版面最相襯

3 獨家特殊功能

操作  英漢字典、影音字典並列

07


介面設計

User Interface

搜尋框

搜 尋列表

英文單字頁面

複製單字

取 消搜尋

中文單字頁面

長按單字搜尋

APP 架 構 圖

加入我的最愛 長 按 單 字刪除 歷史紀錄

編 輯 歷 史紀錄 單 字 頁面

首頁

資 料夾

( 每日一字 )

刪除我的最愛 全選 刪除 改變單字排序

刪除

單字列表

長按單字刪除

全選

拖曳資料夾

編輯我的最愛

加入至資料夾

編輯名稱 我的最愛

編 輯 資料夾

新增資料夾 全選 刪除

單 字 頁面 語 言轉換 翻譯 翻 譯 語音播放 設定

08

英美語音播放

輸入名稱

選擇資料夾


User Interface

介面設計

icon 介紹

主頁

我的最愛

歷史紀錄

翻譯

設定

位 於 常 駐 功 能 列,

位 於 常 駐 功 能 列,

位 於 常 駐 功 能 列,

位 於 常 駐 功 能 列,

位 於 常 駐 功 能 列,

按下此鍵可快速回

按下此鍵可快速到

按下此鍵可快速到

按下此鍵可快速到

按下此鍵可快速到

到主頁。

我的最愛頁面。

歷史紀錄頁面。

翻譯頁面。

設定頁面。

快速複製

新增資料夾

編輯資料夾名稱

單字加入

語言轉換

位 於 單 字 頁 面, 按

位 於 我 的 最 愛, 用

位 於 我 的 最 愛, 用

位 於 我 的 最 愛, 可

位 於 翻 譯, 用 於 中

下此鍵可快速複製

於新增資料夾。

於編輯資料夾名

將我的最愛單字加

英翻譯的轉換。

稱。

入指定資料夾中。

單字。

09


介面設計

User Interface

主要頁面

首頁

搜尋介面

進 入 文 朗 字 典 首 頁,

點擊搜尋框右側之搜

可 看 到「 每 日 一 字 」

尋 鍵, 輸 入 欲 查 詢 的

畫 面, 讓 使 用 者 點 開

單 字, 即 會 跳 出 該 單

A PP 時就能看見單字。

字及相近之單字列表。

單字介面

長 按 查字

點擊搜尋單字列表其

長按單字頁面內文某

中 一 個 單 字, 進 入 單

一 單 字, 會 立 即 彈 出

字 介 面。 此 處 有 單 字

單 字 查 詢 結 果。 可 點

的詞性變化、例句及 2

擊單字本身查看單字

種 語 音 播 放 功 能, 也

詳細頁面。

可快速複製單字及加 入我的最愛。

10


User Interface

介面設計

我的最愛

編輯最愛單字

進入我的最愛可看見

點擊資料夾進入收藏

資 料 夾 ,點 擊 編 輯可選

之 我 的 最 愛 單 字 畫 面,

擇 指 定 資 料 夾 、選取、

單 字 列 表 編 輯 可 選 取、

刪 除 、新 增 與 更 改資料

刪除以及新增單字至

夾名稱。

自訂資料夾。

歷史紀錄

翻譯

在 歷 史 紀 錄 頁 面 中,保

在 翻 譯 裡, 使 用 者 可 在

存了使用者所有搜尋

上方框內輸入欲翻譯之

過 之 單 字 ,以 時 間、字

句 子, 下 方 框 內 會 立 即

母 分 層 排 列 ,可 點擊編

顯 示 翻 譯 後 之 文 句, 可

輯管理。

依需求切換英文或中 文。

11


介面設計

User Interface

我是夜市王 M A R 經 營 手 機 遊 戲 — 改 編 自 桌 遊《 我 是 夜 市 王 》 改 編 自 桌 遊《 我 是 夜 市 王 》, 結 合 台 灣 夜 市 文 化, 經 營 自 己 的 攤 位 並 打 擊 偷 吃 霸 王 餐 的 人 。結合現實與虛擬的 A R 玩法,操作簡單易懂,可和家人朋友 一 同 遊 玩 , 也 可 訓 練學齡孩童算數技能。

12


User Interface

介面設計

13


介面設計

User Interface

場景設計

關卡場景

關卡內場景

篷子 電燈 燈籠

背景攤販

14

抹布

調味料


User Interface

介面設計

道具設計

拾圓

壹佰圓

伍佰圓

珍珠奶茶

蚵仔煎

牛排

伍拾圓

貳佰圓

壹仟圓

香雞排

臭豆腐

地瓜球

餐盤

結帳盤

客人 - 地瓜

客人 - 奶牛

15


介面設計

User Interface

遊戲架構圖 遊戲開始 關卡頁面

進入關卡

客人上門 做出餐點

生命扣一

感應出餐

只能重複一次

不做餐點

餐點錯誤 生命扣一

客人離開

餐點正 確 客人不付

客人付錢

丟結帳盤

找   錢

沒 丟 中

有 丟 中

找 錯 錢

生命扣一

獲得獎勵

生命扣一

遊戲企劃|李依靜      吳致萱      趙文郁      吳宜蓁      施孟萱 icon 設計|吳致萱 介面設計|吳致萱 場景設計|李依靜 道具設計|吳宜蓁 角色設計|趙文郁 操作實拍|施孟萱 成果發表|施孟萱

16

客人離開

通關失敗

達標通關

重   玩

進入下關

找 對 錢


User Interface

介面設計

操作展示

客人點餐

抬起出餐

翻面結 帳

在餐盤上放上客人指定的餐點。

將放好餐點的餐盤抬起出餐。

進入結帳階段,把餐盤翻面為結帳盤。

計算找零

抬起找零

抓霸王 餐

客人付錢,計算出正確找零放上結帳盤。

把結帳盤抬起,給客人找零。

若客人不付錢,趕緊揮動結帳盤抓包 !

17


介面設計

User Interface

關 卡介面 返回

設定

此 頁 面 中點擊已解鎖關卡即可進入營業頁面開始通關,通關後即可解鎖下 一 關 。 此處也可返回至主頁面、調整設定、商店及觀看總錢幣數量。

錢幣

商店

已通關關卡

未通關關卡

未解鎖關卡

18


User Interface

營 業 介面 計時

介面設計

當 開 始提示出現後客人即會上門點餐,規定時間內在餐盤上放置 客人想要 的 餐 點,若失誤則會扣除生命。此處可看錢幣總量,也可按暫停 。

生命

錢幣

暫停

開始提示

餐盤

19


介面設計

User Interface

結 帳介面

餐 點 擺 放正確即進入結帳階段,客人對話框內將顯示客人付的錢及是否找 零 正 確 的提示。右側有結帳單可供玩家自行計算需放置的找零。

內容顯示

客人對話框

客人付錢

找零正確

找零錯誤

客人付的錢 用餐花費顯示 找零顯示

結帳盤

20


User Interface

通 關 介面 賺到的錢

介面設計

達 通 關條件即通關成功,系統將跳出結算視窗,內容顯示該關卡 的通關成 績 、 收入、虧損與各狀態客人的出現次數,按下確定即可回到關 卡頁面。

虧損的錢

該關卡標示

通關成績

滿意的客人

不滿的客人

霸王餐客人

確定鍵

21


介面設計

User Interface

じん じ ん 金 井 冰 品 店 Jinjin Ice Shop 此 網 站 介 紹 金 井 冰 品 店 之 發 展、 理 念、 菜 單 品 項 並 且 整 合 消 費 者 之 建 議, 以 改 善 商 品 與 服 務 回 饋 給 消 費 者。 整 體 以 可 愛 手 繪 風 格 為 主, 藉 此 吸引更多年輕客群來店購買。

覺| 吳 致 萱 趙文郁 吳宜蓁 吳致萱 趙文郁 吳宜蓁 吳致萱 趙文郁 吳致萱

                L O G O 設 計| 商 品 文 案| 商 品 插 畫| 活動 Ba n n e r | 網頁架構設計| 網頁介面設計|

22


User Interface

介面設計

LOG O 設 計 以 碗 裝 冰 與 幾 何 形 作 為 主 要 形 象, 採用黃橙色與淡綠配色使整體繽紛 可口又清涼。

標準 色

輔助色

#FCCB 40

# FA F 5 E E

#F 5A844

#473E35

#CF E 290

字體 金井冰品店—Mamelon マメロン 金井冰品店—微軟正黑體

23


介面設計

User Interface

金井冰品店

網頁架構 圖

首頁

24

聯絡我們

關於我們

最新公告

冰品介紹

意見回饋

常見問題

招募夥伴

金井沿革

活動公告

各品項

意見

Q&A

招募

介紹

Ba n n e r

介紹

回饋單

問題統整

表單


User Interface

介面設計

首頁 首頁顯示的是本店當期的主 打商品宣傳圖,點選上方選 單即可連到相對應的頁面, 頁尾則提供了本店的聯絡電 話 以 及 E -m ail 信 箱 , 方 便 使用者聯繫我們。

25


介面設計

User Interface

最新公告 在最新公告頁面整理了本站 的重要事件,包含網頁的更 新項目以及相關活動的參與 辦法。

26


User Interface

香草牛奶口味

介面設計

抹茶和奶茶口味

Banner

繽紛莓果口味

蘭姆葡萄口味

芒果煉乳口味

27


介面設計

User Interface

冰品介紹 此頁面以插圖形式展示了本 店各項冰品的外觀,右側為 對應項目之冰品的介紹,透 過下拉式選單可以到達指定 冰品分類的頁面。

28


User Interface

介面設計

招募夥伴 特別設置招募夥伴的頁面, 讓想加入金井的人可以快速 的向我們提交履歷資料,先 點選招募夥伴頁面的大圖示 即可進入輸入表單的頁面。

29


介面設計

User Interface

關於我們 此頁描述了本店的創建目標與緣起 故 事, 讓 使 用 者 更 加 了 解 金 井 的 開 店歷程。

意見回饋 提供網站使用者提出疑問與建議的 管道。

30


User Interface

介面設計

常見問題 官方對使用者提出的問題提供統一 解答的頁面。

31


平 面設 計

Gra p h i c D e s i g n

夢想多拿滋

34

我是夜市王

42

個人雜誌對頁

50

教材封面設計

51


平面設計

Graphic Design

夢想 多拿 滋

Drea m y Don u t s — 甜 甜 圈 專 賣 店 V I 設 計

設計理念 時 就 如 同 渴 望 著 甜 蜜 的 滋 味, 要 將 幸 福、 美 味、 愉 悅 的 感 覺 分 享 到 全 世 界, 即 是 D ream y Do n u t s 甜 甜 圈 專 賣 店 的 夢 想 !

LO G O 設 計 甜 甜 圈 代 表 著 甜 蜜 的 夢 想, 以 渴 望 夢 想 的 小 人 作 為 LO GO 意 象, 希 望 享 用 Dream y Don ut s 甜 甜 圈 的 同 時 , 能 想 起 夢 想 最 初 的 純真甜蜜。

標準色

C1 M7 4 Y4 4 K 0

34

M9

Y22 K 0

C4

M14 Y36 K 0

C14 M34 Y39 K 0

每個人都有屬於自己的夢想,渴望夢想的同

C3 M3 1 Y8 3 K 0

C3

以亮眼活潑的黃色 與 粉 色 為 主, 給 人 可愛可口的感受。

C44 M63 Y72 K 0 C46 M95 Y93 K 16

C0

M0

Y0

K0

C0

M0

Y0

K 24

C0

M0

Y0

K 40

C0

M0

Y0

K 60

C0

M0

Y0

K 80


Graphic Design

平面設計

LOG O 發想過程 1

2

3

一開始從一般的甜甜圈形狀開始發想,使 用咖啡色與蜂蜜色襯托美味,並以線條幾 何 與 咬 一口 的 概 念 呈 現 。

很 快 的 ,覺 得 前 一 個 LO G O 太 普 通 了 ! 於 是 加 入小 人 的 表 情 呈 現「 渴 望 」的 概 念 , 並 使 用 圖地 反 轉 的 效 果 。

但仍沒有呈現出「夢想」的概念,因此更 改 甜 甜 圈 呈 現 方 式, 加 上 雲 朵, 讓 小 人 像 是 在 渴 望 夢 想 一 般, 成 為 最 終 採 用 的 LO GO 。

35


平面設計

Graphic Design

抽拉式名片 名片與名片套為一組。 將 名 片 由 下 往 上 抽 出 , 可 看 見 LO GO 上 的 甜 甜 圈 樣式隨之變更,增加趣味性。

36


Graphic Design

平面設計

我們的堅持 Dreamy Donuts 堅持使用最

經典多拿滋

高級1CW小麥製成麵粉,以 最佳麵粉發酵溫度1度C製成 麵團,用最優質的酵母菌, 每天手工現做、新鮮出爐,

經典多拿 滋 經典 多拿 滋 經典多拿滋

讓您實現夢想的路 不帶有一絲雜質。

草莓多拿滋

將酸 甜的

草莓 醬

可可多拿滋 整個多拿滋由黑

抹茶多拿滋 多拿滋淋上抹茶

香又不失甜膩的

巧克醬包覆,享

醬,甜而不膩的

碎片,搭配巧克

風味,焦糖是您

受苦中帶甜的滋

滋味讓人一口接

力風味多拿滋簡

最佳的選擇。

味。

一口。

拿滋上,令人愛

想要帶點微苦焦

在草莓果粒白巧 克力上撒上可可

不釋手。

草莓多拿

焦糖多拿滋

莓可多拿滋

將酸甜的草莓醬 沾淋在綿密的多

直絕配。

莓可多拿

焦糖多拿

在草 莓果 滋 沾淋 在綿 粒白 巧 可可多拿 密的 多 草莓多 拿滋 想要 帶點 滋 莓可多 克力 拿滋 上撒 上可焦糖多 拿滋 拿滋 上, 微苦 焦 抹茶多 可 令人 愛 可可多整個 拿滋 香又 不失 多拿 滋由抹茶多 拿滋 拿 滋 將酸甜的 碎片 ,搭 草莓醬 不釋 甜膩 的 黑 在草莓果 配巧 想要帶點 粒白巧 手。 多拿 滋淋 克 草莓多拿滋 莓可多拿滋 焦糖多拿滋 可可多拿滋 抹茶多拿滋 巧克 醬包 微苦焦 風味 上抹 整個多拿 沾淋在綿 力風 味多 滋由黑 覆,多拿滋淋 ,焦 糖是 茶 密的多 享 克力上撒 上抹茶 上可可 拿滋 簡 您 醬, 香又不失 甜而 不膩 受苦 中帶 甜膩的 最佳 將酸甜的草莓醬 在草莓果粒白巧 想要帶點微苦焦 整個多拿滋由黑 多拿滋淋上抹茶 巧克醬包 拿滋上, 令人愛 直絕 配。 的選 覆,享 的 甜的醬,甜而 擇。 滋 碎片,搭 不膩的 配巧克 滋味 風味,焦 讓人 一口 味。 醬,甜而不膩的 沾淋在綿密的多 克力上撒上可可 香又不失甜膩的 糖是您 巧克醬包覆,享 受苦中帶 不釋手。 接 甜的滋 滋味讓人 力風味多 拿滋簡 一口接 一口 最佳的選 拿滋上,令人愛 碎片,搭配巧克 風味,焦糖是您 擇。受苦中帶甜的滋 滋味讓人一口接 。 味。 一口。 直絕配。 不釋手。 力風味多拿滋簡 最佳的選擇。 味。 一口。

能為您的夢想裹上最幸福的滋味是我們的榮幸, 未來 Dreamy Donuts 將會持續推出新產品,

直絕配。

提供顧客更豐富多樣的甜甜圈選擇,敬請期待。

經典波堤

B roc hure 草莓波堤

莓粒波堤

蜜糖波堤

白巧波堤

抹茶波堤

Q彈波堤裹上酸

波堤外層裹著糖

波堤Q彈的口感

香甜的黃金比例

沾上雙倍抹茶巧

甜的草莓醬,甜

粉,沾上酸甜草

在蜜糖糖霜的加

白巧克力,甜度

克力醬,苦甜茶

蜜的滋味揮散不

莓果粒醬,挑逗

持下更顯淋漓盡

拿捏適當,令人

香跟波堤在口中

去。

你的味蕾。

致。

難以抗拒。

結合成交響曲。

經典歐非香

每個人都有屬於自己的夢想,渴望夢想的同時就如同 渴望著甜蜜的滋味,將幸福、美味、愉悅的感覺分享 到全世界,是我們發自內心的期望。 Dreamy Donuts 推出一系列色彩繽紛的甜甜圈,還有

www.dreamydonuts.com

提供茶類、奶茶、咖啡等飲品,讓夢想的甜蜜滋味更

草莓歐菲香

上一層。我們努力提供貼心的服務,傳遞最香甜的美

外酥內綿密的歐

裹上酸甜莓粒醬

獨家調配煉乳配

可可風味的歐菲

菲香,沾上酸甜

和巧克力醬,讓

方,讓整體口感

香,沾上甜巧克

味給你的夢想,你的多拿滋。

外頁

莓巧歐菲香

煉乳歐菲香

可可歐菲香

抹茶歐菲香 抹茶沾醬搭配歐 菲香,味道濃郁

草莓醬,美味又

歐菲香的滋味更

更加滑順,充滿

力醬,最適合巧

有層次,柔和風

可口。

上一層。

奶香味。

克力的你。

味適合全年齡。

內頁

37


平面設計

Graphic Design

歡迎拿取 你可以帶走名片、宣傳單和喜歡的貼紙 有任何問題歡迎透過以下信箱聯絡我 s1051805@mail.yzu.edu.tw

宣傳海報

38

桌面告示立牌


Graphic Design

外帶提盒

紙袋 - 正

平面設計

紙袋 - 背

39


平面設計

Graphic Design

單裝紙袋 - 正

40

單裝紙袋 - 背


Graphic Design

熱飲杯

平面設計

冷飲杯

41


平面設計

Graphic Design

臺 灣 夜 市 文 化 結 合 — 桌 遊 設 計

劃| 李 依 靜 、吳 致 萱、 趙 文 郁 吳宜蓁、施孟萱 吳致萱 吳 致 萱、 李 依 靜 吳宜蓁 吳 致 萱、 李 依 靜 、 吳 宜 蓁 趙文郁 李依靜、趙文郁          吳 宜 蓁 、 施 孟 萱 包 裝 設 計| 吳 致 萱、 施 孟 萱 道 具 製 作| 施 孟 萱 成 果 發 表| 施 孟 萱 遊

         遊戲說明書設計| 遊戲規則卡設計| 美 食 地 圖 設 計| 攤 販 設 計| 美 食 卡 設 計| 命 運 卡 設 計|

42


Graphic Design

平面設計

設計理念 結 合 臺 灣 夜 市 文 化 特 色 的 多 人 桌 上 遊 戲, 遊 戲 時 間 約 30-60 分 鐘。 通 過 策 略 與 互 動 找 出 是 誰 吃 了 霸 王 餐 ! 體 驗 玩 家 間 刺 激 的 心 理 戰, 享 受 吃 霸 王 餐 的 快 感 , 也 希 望 藉 此 桌 遊 推 廣 臺 灣夜市文化。

43


平面設計

Graphic Design

美食地圖 《 我 是 夜 市 王 》 主 要 遊 戲 地 圖, 以 臺 灣 夜 市 街 景 為 主。 美 術 風 格 整 體 採 顏 色 鮮 明 且 簡 約 的 色 塊 風 格, 使 用復古字體並結合臺灣經典夜市風 格, 讓 畫 面 不 失 臺 灣 夜 市 特 色 又 不 顯雜亂。

44


Graphic Design

平面設計

遊戲說明書 四 折 頁 形 式 的 說 明 書, 運 用 圖 示 說 明 遊 戲 目 標 、遊 戲 配 件 、起 始 配 置 、 基本規則及遊戲玩法。

C1 0 0

M85

Y20

K20

C0

M7 5

Y25

K0

45


平面設計

Graphic Design

遊戲規則卡 對 折 式 小 卡, 將 基 本 規 則 濃 縮 成 簡 易 版, 讓 玩 家 能 在 玩 的 時 候 人 手 一 張,幫助觀看規則。

46

C1 0 0

M85

Y20

K20

C6 5

M0

Y55

K0


Graphic Design

美食卡

命運卡

正方形小卡,上頭繪製六種臺灣夜市經典美食,外框選用美食地圖上

命運卡插圖採逗趣可愛的風

對 應 攤 位 之 色 彩 作 點 綴 。 可 供 玩 家 在 遊 戲 中 購 買 蒐集之用。

格,用色繽紛,添增整體色彩 豐富度與趣味性。

平面設計

C100

M85

Y20

K 20

C5

M40

Y80

K0

47


平面設計

48

Graphic Design


Graphic Design

平面設計

49


平面設計

Graphic Design

個人雜誌對頁設計 內 容 以 遊 戲 說 明 對 自 己 的 期 許、 人 生 態 度 與 期 望。 以 簡 單 的 色 塊 和 插 圖 , 搭 配 清 爽 的 藍 綠 色 調, 營 造 充 滿活力又有趣的個人形象。

50


Graphic Design

平面設計

教材封面設計 以錯綜複雜的立體方塊和綠色調強 調 數 學 的 理 性, 為 桃 園 奧 林 匹 亞 短 期訓 練 班 武 陵 競 賽專 用 教 材 封 面 。

51


電 腦繪 圖 Illus t ra t i o n

炸蝦寶寶

54

彩色甜點明信片

58

晶碩看見與眾不同

60


電腦繪圖

Illustration

炸蝦寶 寶 LINE 原 創 貼 圖 創 作 創作理念 當 初 希 望 創 作 一 個 與「 食 物 」、「 可 愛 」 、 「 有 趣 」 相 關 的 貼 圖, 經 過 一 番 努 力 , 設 計 出 了 炸 蝦 寶 寶, 並 增 加 其 他 蝦 類 角 色 — 甜 蝦、 生 蝦 增 加 角 色 互 動 感 , 參 入 許 多 搞 怪 有 趣 元 素, 讓 整 個 貼 圖 更 添 增 趣味 性 !

54


Illustration

電腦繪圖

角色介紹 # F F BE5 E

炸 蝦 寶寶

甜蝦

#F47340

不時會伸出長 長的手和腳來嚇 唬人。 無論發生什麼事都要保持著微笑。

# DA4 7 1 7

外層的炸皮其實是他的衣服。

# F 1 BEBC

可愛的甜蝦妹 妹,又純真又傻。

# EF 9 0 7 8 #F43D26

#F9F9F9

生蝦

厭世的炸蝦寶 寶,最討厭麻煩的事了 !

#D0D0CB #59594D #F1908B

是個冒失鬼, 常常搞 砸 事情。 和生蝦是感情 很好的兄妹。 最喜歡哥哥了 !

溫柔的生蝦哥 哥,非常懂事。 雖然是生的, 個性卻很成熟。 和炸蝦寶寶是 好哥們。 很照顧甜蝦妹 妹。

55


電腦繪圖

Illustration

貼圖創作總覽

56


Illustration

電腦繪圖

3

購 買 預覽畫面

貼圖使用情境

熱銷排行第三名 LI NE 原創貼圖食物類 2018.02.12 57


電腦繪圖

Illustration

覆盆莓馬卡龍

彩 色 甜 點明 信片 創作理念 結 合 紅 、 橙 、 黃、 綠 、 藍 和 紫 六 種 顏 色 的 甜 點 明 信 片 , 全 圖 使 用 Corel Pa in te r 繪 製 ,希望這些美味可口的甜 點 , 能 給 人 帶 來彩色的視覺享受。

58

草莓奶油楓糖鬆餅


Illustration

橙汁聖誕布丁

蛋白霜檸檬塔

抹茶千層派

藍莓乳酪蛋糕

電腦繪圖

59


電腦繪圖

Illustration

第二十七屆時報金犢 獎 入 圍

晶碩看見與眾不同 這裡 , 是 我 戲 水 的 地 方 ! 運用真實與虛擬的結合,帶 入產品使用情境,呈現保濕 含水 的 感 受 。

60


Illustration

電腦繪圖

第二十七屆時報金犢獎 入圍

晶碩看見與眾不同 這裡,是我觀星的地方! 角色在隱形眼鏡裡看見無數 星 星, 表 現 產 品 閃 耀 美 麗 的 特色。

61


動畫專 題 Animation

日落之後

64

E NV Y

74


動畫專題

Animation

「日落之後」講述人類與動物之間的情感。 迪克是一隻愛四處闖禍的搗蛋狗,弄得男孩 班尼暈頭轉向,但當他們遭遇困難時,迪克 用盡全力也想拯救主人的那份心情,並不亞 於人類的善良之心。最後班尼與迪克找到了 溫暖的歸處,希望觀眾也能感受到這部動畫 所帶給大家的溫度。

64


Animation

動畫專題

65


動畫專題

Animation

CAST 導  演| 李依靜 編  劇| 李依靜 、吳 致 萱、 趙 文 郁       吳宜蓁 、 施 孟 萱 、 顏 薏 馨 分鏡腳本| 李依靜 、吳 致 萱、 吳 宜 蓁       趙文郁 、 施 孟 萱 、 顏 薏 馨 色彩計畫| 李依靜 、 吳 宜 蓁 、 顏 薏 馨 角色設計| 吳宜蓁 場景設計| 吳致萱 第一原畫| 趙文郁 、 吳 宜 蓁 第二原畫| 趙文郁 、 吳 宜 蓁 動  畫| 李依靜 、吳 致 萱、 顏 薏 馨 上  色| 吳致萱、 吳 宜 蓁       施孟萱 、 顏 薏 馨 背  景| 吳致萱 特  效| 李依靜 配  音| 趙文郁 、 施 孟 萱 音效配樂| 施孟萱 剪  輯| 施孟萱 指導老師| 張世明

66


Animation

動畫專題

67


動畫專題

Animation

夜晚

黃昏

嘴內

68

鞋子

容易慌張。常被迪克牽著鼻子走。

褲子、手套

身 穿 淺 綠 絨 毛 大 衣, 個 性 溫 順 膽 小,

大衣

男孩—班尼

絨毛、眼白 牙齒、汗水

節, 增 添 角 色 的 特 色 。

皮膚

主 軸, 以 幾 何 形 狀 繪 製 簡 化 身 體 關

眼珠

角色以簡單、顏色鮮明的童趣風格為

頭髮

角 色 設計

影子,透明度 40%


Animation

動畫專題

夜晚

黃昏

嘴巴內壁

舌頭

鼻子、眼瞳

眼白、口水

嘴部

皮膚

影子,透明度 40%

狗—迪克 全 身 光 溜 溜 卻 不 怕 寒 冷, 個 性 活 潑 好 動 ,對主人非常忠心,但常惹事生非。

69


動畫專題

Animation

場 景 美術 場 景 以 雪 地 、冰 湖 和 樹 林 為 主 。動 畫 前 半 為 黃 昏 場 景 ,後 半 為 夜 晚 場 景 ,以 冷 色 調 強 調 主 角 們 遇 到 困 境 的 淒 涼 。整 體 採 用 線 稿 風 格 ,運 用 簡 單 明 快 的 色 塊 與 柔 和 的 色 調 ,加 上材質感,營造動畫整體氛圍。

70


Animation

動畫專題

71


動畫專題

Animation

分 鏡 腳本

72


Animation

動畫專題

73


74


Animation

動畫專題

7th iAniMagic 動畫比賽—參賽作品 在不久的未來,小男孩撿回了一具留著粉 色長髮的姐姐機器人。但男孩家裡養的白 狗,似乎對這個姐姐機器人相當不滿,不 但分散了小男孩對牠的關注,也少了對牠 的愛,使得白狗的嫉妒心不斷膨脹…… 全片為帶點浪漫元素的黑色劇情,描述人 際之間嫉妒心的故事。

75


動畫專題

Animation

Cut_03~06

成品展示 CA ST 導   演| 李依靜 編   劇| 李依靜 、吳 致 萱、 趙 文 郁 、 吳 宜 蓁        施孟萱 、 顏 薏 馨 、 曾 繪 伶 分 鏡腳本|        色 彩計畫| 角 色設計| 場 景設計| 場 景建模|

李依靜 、吳 致 萱、 吳 宜 蓁 施孟萱 、 顏 薏 馨 、 曾 繪 伶 吳宜蓁 、 曾 繪 伶 吳宜蓁 、 曾 繪 伶 趙文郁 、 吳 宜 蓁 李依靜

原   畫| 動   畫|        上   色|        背   景|

吳致萱 、 曾 繪 伶 李依靜 、吳 致 萱 顏薏馨 、 曾 繪 伶 李依靜 、吳 致 萱、 施 孟 萱 顏薏馨 、 曾 繪 伶 趙文郁 、 吳 宜 蓁

特   效| 李依靜 音   樂| 施孟萱 剪   輯| 施孟萱

76

Cut _ 0 1 ~ 0 2


Animation

Cut_07~10

Cut _ 1 1 ~ 1 4

Cut _ 1 5 ~ 1 8

動畫專題

Cut_19~22

77


動畫專題

Animation

角色設計

本 作 時 空 背 景 為「 未 來 」, 角 色 皆 以 此 概 念 做 設 計, 且 手 指 只 有 四 支。 整 體 採 簡 約 日 系 風 格, 並 選 擇 飽 和 度 偏 低的配色,給人灰暗的氛圍。

78


Animation

動畫專題

小男孩 嘴內

袖子

衣服、鞋子

領子

眼睛

良 , 對 人 和 善 。 某 天 撿 回 了 姐 姐 機 器 人 , 對 她 有 好感。

皮膚

瞳, 身 穿 淺 黃 連 身 衣。 個 性 積 極、 樂 觀、 活 潑 開 朗 又 善

頭髮

本 作 主 角, 為 白 狗 的 主 人。 黃 棕 色 的 頭 髮, 淺 綠 色 的 眼

79


動畫專題

Animation

白狗 肉球

內耳

項圈亮光

80

項圈

巴會炸開,表情凶狠。

眼睛

藍 的 項 圈。 嫉 妒 姐 姐 機 器 人 , 生 氣 時 會 尾

毛色

一 身 白 色 絨 毛, 有 著 長 長 的 尾 巴 , 穿 戴 深


Animation

動畫專題

姐姐機器人 插頭金屬

項圈、插頭 外耳

內耳

手套

衣服

項圈亮光 眼睛、

世界尚未充分了解。

皮膚

眼。穿戴貓耳、項圈與插頭裝置,對這個

頭髮

有著一頭粉紅色長髮及無神卻雪亮的雙

81


動畫專題

Animation

場 景 設計

82

場 景 以 未 來 科 技 為 主 題, 前 半 段 為 白 天, 後 半 段 為 黃 昏。 以 3 D 建 模 製 作 場 景 配 置, 再 以 此 為 標 準 進 行 背 景 的 繪 製 。 整 體 採用線稿風格,配色簡約且用色飽和度低,營造灰暗的氛圍 。


Animation

場景設計全景

動畫專題

客廳場景設計

男孩房間設計

客廳落地窗

走廊設計

床頭相框設計

83


動畫專題

Animation

Cut_03~06

分鏡腳本

Cut _ 0 1 ~ 0 2

84


Animation

Cut_07~10

Cut _ 1 1 ~ 1 4

Cut _ 1 5 ~ 1 8

動畫專題

Cut_19~22

85


Thank you! 謝謝看到最後的您


Profile for Chin-Hsuan Wu

吳致萱作品集 | Portfolio 2016-2019 介面×平面×動畫  

UI/UX/平面設計/插畫/2D逐格動畫 Contact me : ice00629@gmail.com

吳致萱作品集 | Portfolio 2016-2019 介面×平面×動畫  

UI/UX/平面設計/插畫/2D逐格動畫 Contact me : ice00629@gmail.com

Advertisement