PORTFOLIO YANG YARU 楊 雅 茹 設 計作品集
17 '
19'
CONTENTS 00
ABOUT ME
05
01
UI UX DESIGN
14
02
VISUAL DESIGN
32
03
ANIMATION
58
自我介紹 經歷
GOGORUN 養成運動 APP
不老灶咖 125 新品牌設計 健康仙楂餅包裝設計 Big or Small
角色場景設計 MoonCake 動畫設計 個人形象動畫設計
ABOUT ME YANG YARU PORTFOLIO
EXPERIENCE EDUCATION
2019 2018 2014
YANG YA RU 楊
INTERNSHIP
2018
向量插畫與動畫角色設計，喜歡與他人交流共創的雀躍感與富有故事
溫度的設計產品，覺得一個好的設計，除了吸引人的視覺，使用時的互 動與背後故事都是讓產品更佳動人的原因，希望自己能用兼具感性與
ACTIVITIES 1995.11.16
+886 952 263 983
UI UX Animation X
X
iIIustrator ・ Photoshop・ InDesign AdobeXD ・ After Effects ・ Maya
4
品牌吉祥物角色設計
視覺設計
Oath Yahoo! Summer intern
雅虎購物中心粉專經營 / 角色、貼文設計
視覺設計
2017
水越設計 翻轉公園計畫
企劃設計
2015
Ctrl+P 3D 列印兒童教育
教學設計
2019
服務設計大會志工
2016
台灣科技大學人文藝術中心
理性的思維設計出有趣、讓人會心一笑的作品，成為有影響力的設計師。
SKILLS
咕嚕咕嚕健康餐飲團隊
商業設計組
雅虎購物中心 / 品牌、動態廣吿設計
目前就讀於國立臺灣科技大學設計研究所碩一，專長於視覺介面設計、
lulu841116@gmail.com
國立台灣科技大學 設計系
商業設計組
粉專貼文、行銷活動設計 2017
雅 茹
國立台灣科技大學 設計研究所
2017
小公園改造計畫 / 活動企劃、原型製作 指導學生學習設計思考與 3D 列印製作
台中設計實驗工作坊
攝影組
視覺設計
視覺設計
WORKS Behance
Artstation
Vimeo
5
跨領域多元學習
教學讓我成為更有價值的人
求學期間，我喜歡不斷擴展自己的學習領域，跨領域合作，探索新的知識。
2015 年我加入 Ctrl+p 3D 列印公司，投入教學的領域，負責設計教學教案。2017 年深入偏鄉，
學生一個友善健康的飲食環境，在當中我擔任視覺與行銷，規劃菜色與活動內容，
程規劃、教學，教導偏鄉小學學生，用設計思考的方式，引導他們解決生活問題，帶領學生創
-Gulu Gulu 餐飲創業團隊
-CTRL+P 3D 列印兒童教育
參與「IDEAS LAB：魔法教室─大學生創新學習計畫」，籌劃約半年的時間，從提案、企劃、課
2018 年，我加入了「Gulu Gulu 餐飲品牌」六人所組成的餐飲創業團隊，目標以提供 初衷是希望可以用好的設計解決一個生活中發現的問題，創造更好的生活品質。
擔任角色： 視覺設計師
6
負責工作： 視覺設計、CIS 設計、品牌定位
造屬於自己的作品，在當中看到小朋友的創意與活力，讓我對教學充滿了成就。
擔任角色： 教案設計師
負責工作： 視覺設計、教案設計、3D 列印
7
INTERNSHIP AT YAHOO 2017 年暑假我很幸運進入 Yahoo EC 設計部當 Summer intern，與設計、行銷、工程師等實 習生跨領域合作，實際操作雅虎購物中心的粉絲專頁，負責規劃貼文內容、品牌定位與形象 角色設計，測試觀察主要消費者，目標提升互動率與觸及率與整體品牌黏著度。
兩個月裡，體驗大公司的制度，學習面對萬變的資訊內容靈機應變的能力與上台發表的技巧， 並與一群不同領域的人合作學習，不僅開拓視野，也成為未來設計合作重要的成長養分。 最後成果發表中獲得 The best intership Awards! 的殊榮。
8
9
FINAL EXPO 雅虎購物中心粉絲團專案計畫 透過不同種類的貼文測試，並分析粉專後台數據，從中找出目標族群最喜愛的貼文類型
三大受歡迎類型貼文
知識型
提供粉絲知識訊息，
解惑大眾長期的迷思， 傳達的訊息明確，一
男女議題型
提供男女方面的議題， 深化對比，產生反差 令人可以拿出來調侃
前期
目標
過程
成果
發現問題
提升品牌黏著度
貼文類型測試
有效貼文導購
1. 粉專以導購為主
提升互動率與觸及
測試不同貼 文 類 型
成果發現三種內容
3. 貼文形式單一
絲增加粉絲對購物
容，從中歸納出幾種
觸及率，並間接式的
2. 與粉絲互動低 4. 紛絲黏著度低
率，喚 醒 沈 睡 的 粉 中心的黏著度
找出粉 絲 喜 歡 的內 未來可用貼文方向
互動型
貼文可提升互動與
引發粉絲在社群上按
讚 留言分享，引發 共
增加整體導購效益 擔任角色： 視覺設計師
10
負責工作： 視覺設計、品排定位
鳴、促使互動
11
YANG YARU PORTFOLIO
UIUX DESIGN
01 / GOGO RUN 養成運動ＡＰＰ
12
13
YANG YARU PORTFOLIO
01
最簡單的 養成運動ＡＰＰ WHAT I DO
擔任角色： 視覺設計師
負責工作： 流程發想、介面設計
GOGO RUN 是 一款養成 運 動 APP，希望
在運動的過程中透過角色的養成遊戲，給 予使用者一個虛擬運動夥伴，一起體驗運
動的樂趣與驚喜，在角色的陪伴下以保持 使用者對運動的熱忱，養成隨時隨地運動 的習慣，帶動運動熱潮。
14
15
YANG YARU PORTFOLIO
設計過程 I Design Process
現況調查
使用者研究
定義問題
競品分析 I Competitive Products
比較市面上三款不同的健康養成習慣的 APP
定位
優勢
Keep
「家庭健身助手」透 過 分級影片與計畫目標， 完整訓練身體各部位。
・健身線上教學視頻 ・提供量體裁衣 & 多 種健身訓練供你選擇
Hahago
透過走路計步獲得哈 奴幣，並依 指定 店家 換 取獎勵
・走路計步獲得哈奴代幣 ・代 幣 依 指 定 商 店 換 取 獎勵
JoiiSports
具有「運動、健康管理、 運 動 記 錄、社 群、個 人 成就」五大功能
・記錄行程路線時不需 要網路，低耗電量 ・揪團活動
初步設計
現況調查 I Background
根據體育署統計與歷年運動城市調查的數據來看，大眾運動習慣難以維持， 多半與「工作太累」、「懶得運動」、「沒有時間運動」這三個原因為主。 另外體育署與國健局分別提倡「333 運動」、「動動 150 輕運動」
研究指出，短時間的運動，並將運動量累計起來，仍可預防或改善心血管 疾病，降低癌症、心臟病、中風、糖尿病風險，並延長三至五年的壽命。
使用者研究 I User Study
透過文獻探討、資料收集、使用者訪談，更進一步地發現使用者的痛點 課業太忙碌
運動資訊太多元不
想運動的時候，找
也找不到動力
正確的運動
有點孤單，就算了
沒有時間可以運動，
知道如何選擇並做
不到人一起，覺得
介面資訊稍多，操作 上較不直覺
步數有時候落差大， 容易不準
介面操作有點不流暢， 資訊稍多
定義問題 I Problem Definition 問題點
・沒有時間
・運動資訊太多不知如何開始 ・覺得一人運動很孤單
・運動後的回饋感少，容易沒 有動力
16
缺點
設計機會點
・簡化運動種類與介面， 讓使用者更直覺使用 ・透過遊戲角色養成， 增進使用黏著度
・角色進化效果明顯，讓 使用者有立即回饋感， 以保持對產品的新鮮度
17
YANG YARU PORTFOLIO
產品定位 I 5W1H
目標族群 WHO
・18~25 歲的年輕族群
・平時沒有運動習慣者
產品四大目標 I Features 01
簡易 操作介面
・自己一人運動會孤單者 ・找不到運動動機
設計目的 WHY
現代人生活多為忙碌，常因課業或工作少有時間從事 運動，而未養成運動習慣。
與遊戲中的角色互動，藉此養成規律運動的好習慣。
健走、跑步、騎單車
在運動過程中，創造屬於自己的虛擬寵物夥伴，記錄
角色 多元養成
04
好友 激發運動熱情
行走範圍、運動場、單車道
使用時機 WHEN
如何使用 HOW
走路 累積能量值
03
使用地點 WHERE
因此希望藉由 GOGO RUN 養成運動 APP，以有趣的
角色遊戲取代市面上較平淡的數據介面，吸引使用者
02
分為三大運動活動 :
從事什麼 WHAT
運動所消耗的卡洛里數、時間、平均速率，並將能量 傳送給寵物，讓寵物能不斷進化改變型態，提升運動 的趣味，最後將整合日、月、週運動紀錄，讓使 用者 有好的運動管理平台。
18
運動
+
養成
讓使用者更直覺使用
透過步數養成角色 增進使用黏著度
角色進化效果明顯
讓使用者有立即回饋感
透過角色與好友
分享交流運動狀況
19
YANG YARU PORTFOLIO
流程圖 I Flow
20
21
角色設計 I Character Design
以各種奇特外型為星球設計鮮明的外星寵物，來吸引使用者的目光，登陸後按下
RUN 鍵，可使生產工廠產出一顆新的寵物蛋，透過運動累積能量以孵化寵物蛋， 使寵物角色不斷進化！
外星寵物設計 I
外星寵物生產工廠 I
Get it !
寵物蛋
外星寵物進化史 I 生產 按鈕
角色 進化低
22
角色 進化高
23
YANG YARU PORTFOLIO
介面設計 I UI Design
登入頁 I 使用故事情境帶入遊戲畫面
R250 G222 B60
透過故事的形式，來介紹運動 APP 的使用說明，從歡迎頁到選擇角色，
# fddf40
用遊戲互動的方式，帶領使用者慢慢進入情境中。
標準色使用 # fddf40 黃與 # fade3 深藍，代表日夜都能充滿運動能量
註冊 上午
C8 M14 Y80 K0 R250 G222 B60 # fade3c
C8 M14 Y80 K0
歡迎頁 上午 上午
選擇角色 上午
簽訂契約 上午
Hi
Get it !
RUN
24
25
YANG YARU PORTFOLIO
運動切換頁 I 三種模式簡單操作
提供大眾最常使用的三大運動：健走、跑步、騎單車，三大模式加上日、週、 月簡易切換選單，讓使用者更直覺地使用，而針對步數的計算轉換成寵物 的進化能量，讓寵物養成與運動一起融入生活當中。
主畫面 健走、跑步、單車三大功能
26
日、週、月頁面切換
距離、時間、卡路里運動紀錄
每個月步數紀錄
27
YANG YARU PORTFOLIO
寵物交友、排行、收集頁 I 交友分享樂趣無限
提供使用者運動分享的平台，與他人一起分享觀看自己的寵物，藉此達到 運動交流的目的，另外透過多種寵物養成，滿足使用者收集的慾望以此達 到持續運動的動力。
主畫面 寵物交友
28
寵物好友排名
寵物收集冊
寵物排名
29
YANG YARU PORTFOLIO
VISUAL DESIGN 01 / 不老灶咖 125 便當新品牌設計 02 / 健康仙楂餅 包裝設計 03 / Small or Big 展覽 DM 04 / 人物插畫設計
30
31
YANG YARU PORTFOLIO
01
高年級送餐新品牌 不老灶咖 125 便當直送 WHAT I DO
擔任角色： 視覺設計師
負責工作： 視覺設計、CIS 設計
BULAO KITCHEN
重現熟年新價值下所創造的高年級創意 餐食品牌，由長輩掌廚，年輕勞動力外送 的經營模式，創造 兼 具「老智慧 」與「新
創意」的九宮格家常料理便當，傳遞「老」 有所用及「食」在健康的品牌精神。 天晴設計
引導師
易瑋勝 李尉郎
32
成員
楊雅茹 張雅萍 李明益 黃季偉 顏炘怡
33
YANG YARU PORTFOLIO
發現問題 I Problem
不老夢想 125 號 -
「不老食埕」
餐飲服務的煩腦
設計過程 I Design Process
現況調查
定義問題
使用者研究
位於台中的「不老夢想 125 號」以銀髮、文創、 「銀創參與」為規畫概念打造而成。 藉由一個個不老夢想、一位位真人圖書長者、一份份兼具老智慧與新創意的食 飲，傳遞心不老、夢不老、行動不老的不老精神。
而「不老食程」便是提供長者們發揮自己的價值的空間，根據訪談與實際造訪 當地，找到創新設計
外商 進駐 製餐 繁複
品牌定位
現況調查 I Background
客源 不穩定
34
創意餐飲
夢想圖書
1. 被動式的團饍訂單難預測
2. 觀光及館內用餐客源不穩定
空間整修大改造，連鎖餐飲進駐
露易莎咖啡進駐，衝擊不老食埕餐飲服務
長輩製餐問題多
1. 長輩製餐 SOP 難控制 2. 創新料理難開發
3. 食材數量及保存難控制
品牌轉型 I New Brand
不老夢想 125 號 -
「不老灶咖 - 便當直送」 新品牌設計
穩定 內用客源
開發外送 新客源 銀創參與
生意時好時壞
「不老食埕」轉型「不老灶咖」
1. 內用精緻套餐轉為「外帶便當」更平價 2. 參訪團體合菜轉為「內用便當」更便利
3. 無菜單便當，讓長輩製作熟悉「家常菜」
開發「便當直送」新服務
1.「不老灶咖—便當直送」，提供方圓 3 公里
內鄰居在 15 分鐘內收到新鮮快速的便當
2. 遞送一份「健康、幸福、家常、」且富有 驚喜感的創意便當給在地的好鄰居
3. 建立長輩備餐及青年外送的青銀共創模式
35
YANG YARU PORTFOLIO
使用者旅程地圖 I User Journey Map 訪談後發現三大問題
實際訪談「夢想 125」的負責人，目前經營狀況，並實際場域觀察， 最後將訪談後的內容與收集到的問題整理成用戶旅程地圖
關係人
送餐前 被廣告吸引 搜尋商家
餐點確認 取餐提醒
拿到餐點
確認餐點
收到訂單
製作餐點
聯絡顧客
尋找目的地
預定餐點
顧客
長輩
痛點
36
送餐中
訂單排程
準備食材
出發送餐
1. 長輩製餐 SOP 難記得
長輩記憶力有限，複雜製作流程易讓長輩製作 中有負擔，無法發揮擅長的拿手菜
多個送餐點
送餐後 收款
抵達交餐
2. 老人送餐困難多
多點外送，可能造成長輩體力負擔與安全
用餐
收款
餐盒處理
回到廚房
給予評價
再次消費
回饋收集
3. 顧客不想吃便當
便當種類太少，易讓顧客吃膩沒有新鮮感
37
YANG YARU PORTFOLIO
目標族群 WHO
學校的教師、上班族與居民
位於台中一中商圈，方圓 3 公里 15 分鐘內可送達的地點 鄰近學校有：中國醫大、臺中一中、台灣體院、臺中科大
「不老灶咖 - 便當直送」新品牌設計 定義問題
老人送餐 困難多
顧客不想 吃便當
長輩製餐 SOP 難記
38
解決問題 老人送餐困難多：「不老灶咖 125- 便當直送」是基於銀髮再 就業，重現熟年新價值下所創造的高年級創意餐食品牌，由長 輩掌廚，年輕勞動力外送模式，解決老人送餐困。 未來長輩及青年的人力配置約 7:3。
在週一至週五搭配不同顏色米食的創意，透過九宮格便當盒， 滿足現代人對視覺美食的期待，讓訂購者在打開便當盒時， 可以收到一份少量多樣及健康加分的驚喜好滋味。
不老料理人擅長料理簡單的家常菜，雖然菜色不夠鮮艷及精緻， 但卻蘊含著長輩對健康及營養的堅持。因此將這樣具有溫度的家 常料理便當作為「不老灶咖 125- 便當直送」的品牌特色。
以無菜單家常料理便當增加長輩備餐及製餐的彈性。
服務新亮點 I Features
不老灶咖結合青銀共創，翻轉便當外送服務新印象，阿公阿媽用拿手好菜照顧您的健康。
友善農作
銀髮就業
青銀共好
便當直送
米食多樣化
九宮格設計
友善食材直送不老灶咖
青銀攜手共創新商機
搭配不同顏色米食創意
活化地區銀髮就業機會
在地好鄰區外送服務
天天驚喜吃不膩多樣菜色
39
YANG YARU PORTFOLIO
品牌設計 I Visual Design
BULAO KITCHEN
餐飲外送品牌（橫式）
BULAO KITCHEN
餐飲外送品牌（網頁）
餐飲外送品牌 LOGO
品牌形象 I
健康清爽的綠，長輩親切形象，方便快速的外送品質
健康
40
親切
快速
標準色 I
標準色使用 #b7c533 草綠與 #b7c533 綠，代表不管日夜都能充滿運動能量 RGB：R183 G197 B51
RGB：R0 G100 B76
#b7c533
#b7c533
CMYK：C37 M14 Y89 K0
CMYK：C89 M50 Y78 K12
41
YANG YARU PORTFOLIO
色彩計畫 I
Fresh Green
網站視覺設計 I
Rich Green BULAO KITCHEN
100%
100%
50%
50%
75% 25%
品牌或企業指定字型 I Noto Sans CJK TC
長輩做便當，天天都健康 米食多樣化，夢想無限大
75%
BULAO KITCHEN
25%
BULAO KITCHEN
Aquarion
ABCDEFGHIJKLMNOPQRSYUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
名片設計 I
42
43
YANG YARU PORTFOLIO
01 I 02 I 03
應用設計 I
01 / 每日特色菜單、酷卡 02 / 九宮格便當
03 / 外送視覺設計
44
45
YANG YARU PORTFOLIO
02 健康仙楂餅
包裝設計
仙楂餅是台灣古早味小甜點，本次包裝用插畫呈現傳統仙楂餅製作過程：
採收、滾壓、成型，加上可愛人像讓他成為令人愛不釋手的小品。以小包分 裝方便攜帶，讓現代人在忙碌又快速的生活，當作休閒用的小零嘴。
46
Concept 採收仙楂
滾壓成粉
仙楂成形 分享喜悅
47
YANG YARU PORTFOLIO
01 / 各個小包裝設計 01
03
48
低糖
原味
檸檬
02
04
02 / 取用方式 03 / 拆開方式
04 / 包裝底部隱約露出
49
YANG YARU PORTFOLIO
03
Small or Big 展覽 DM 以亮眼的粉藍色凸顯小朋友的活潑熱情，並 透過錯視角度，呈現展覽的多視角與有趣的 探索空間。
50
51
YANG YARU PORTFOLIO
標準字 I
輔助插畫 I
1
2
標準色 I
印刷指定字 I 華康黑體
C0 M92 Y55 K0
C80 M0 Y20 K0
52
呈現小與大的翻轉與辯證，透過各種感官 與身體去感受，體驗小與大的豐富世界。
1 2
以錯視的空間元素，來呈現充滿想像的孩童世界 小人物代表保有天真童心的每個人
Estrangelo Edessa ABCDEFGHIJKLMOPQRSTUVWXYZ abcdefghijklmopqrstuvwxyz
53
YANG YARU PORTFOLIO
04 人物插畫設計
不同人物風格、筆觸的嘗試，希望用畫筆帶給別人溫暖的感受
54
Instergram
55
ANIMATION
01 / Pinocchio 角色場景設計 02 / MoonCake 動畫設計
03 / Gugi Gugi 個人形象動畫 04 / YANG
個人形象動畫
YANG YARU PORTFOLIO
01 Pinocchio
運用燈泡與機械的結合，表達小木偶調皮、叛逆的成長 歷程，最後用燈泡的光象徵爺爺對小木物偶的愛，永遠 指引小木偶正確的方向。
58
蔡雨臻 老爺爺、角色設計 楊雅茹 小木偶、鯨魚、場景設計
59
YANG YARU PORTFOLIO
02 Moon Cake
中秋節為一年一度團聚分享喜悅的時刻，以月餅發想為主軸， 表達月餅吃下去的多層次口感，極致的美味。
60
趙宥筑 楊雅茹 動態角色設計 角色插畫設計
61
YANG YARU PORTFOLIO
62
63
YANG YARU PORTFOLIO
03
Gugi Gugi
以奇特造型的雞代表在繁忙之中奔波的人們， 來點輕快的舞步，讓所有煩惱都消失無蹤
64
65
YANG YARU PORTFOLIO
04 YANG
一個個人形象角色動畫，腦中天馬行空的想像，像一台彈珠檯， 彈珠在當中碰撞、滾動、不斷激發不同創意與靈感。
66
67
楊雅茹 Yang Yaru
+886 988 546 950
lulu841116@gmail.com