＃graphic ＃product
HI I’m Liu Tzu chi
＃2023 ＃uiux Enter →
This is my
即使目標很遙遠，也要一步一腳印努力慢慢朝著目標前進，
在這條路途中，不要害怕別人的眼光，這都是必經的過程。
Tzu Chi Liu Design Portpolio 02
劉 子 綺 a0987663565@gmail.com 0983-655-518 摩 羯 座 新 北 市 E - mail New Taipei City Phone T Z U C H I L I U 學 歷 2015 - 2018 新北市私立復興高級商工職業學校 Fu-Hsin Trade & Arts School Advertising Design Education 經 歷 Experiences 2018 - 2022 朝陽科技大學 工業設計系 Chaoyang University of Technology Advertising Design 2020 朝陽科技大學系學會 秘書職位 2021 - 2022 朝陽科技大學畢籌會 秘書職位 工 作 經 歷 Work Experiences 技 能 Skill 2020 - 2022 迅陽有限股份公司 Adobe Illustrator Keyshot Catia Adobe Photoshop Adobe XD Figma Sketch Adobe Premiere Pro Adobe After Effects Adobe Media Encoder 實習平面&美編設計師 2022 - 2023 英丰寶資訊股份有限公司 視覺設計師 & UIUX設計師 2021 毛毛怪有限公司 在家接案_粉絲團插圖設計師 A B O U T M E 廣告設計科 關於我 About me 03
Graphic design LOGO&標準字設計 Banner設計 招牌設計 小物品設計 UI / UX Design 夢幻動物園 - 規律睡眠app Homie - 住宿app Product design 倆倆 C O N T E N T S Enter → Tzu Chi Liu Design Portpolio 04
UI / UX design 03
夢幻動物園 - 規律睡眠app Homie - 住宿app Tzu Chi Liu Design Portpolio 04
UI / UX Design
夢境動物園
這是一款幫助使用者規律睡眠的APP， 在規律的睡眠同時擴大你的睡眠動物園， 也可以邀請親朋好友一起進行規律睡眠。
UI / UX design 05
在手機成癮的時代，許多人在睡前一定都得要滑手機滑個1-2小時，在滑的同時也會因
為手機內許多誘惑(例如:看劇、網拍、球賽等等)而增加滑手機的時間，導致許多使用 者都有無法規律睡眠的問題，尤其是假日時更有這個問題，因此設計了一款為無法規
律作息的使用者的APP，促進使用者兌換APP內的物品來誘導使用者規律睡眠。
WHO:無法規律睡眠的使用者
WHAT:讓使用者能夠設定自己希望的上床、下床時間，規律睡眠。
WHY:讓使用者能夠擁有正常的作息時間
WHEN:晚上睡覺時
WHERE:房間床上
HOW:
1.使用者透過睡眠賺取金幣來收集小動物，建造自己的動物園林以及裝扮小動物
2.可透過賴、分享來去欣賞朋友的動物家園、可合作模式來獲得稀有的動物建築或裝扮。
在執行此專案時，事先設計了一份睡眠作息研究調查，
171份回覆中，有幾件統計資料最為重要
•過半的使用者有無法規律睡眠以及難以入睡的問題
•有高達53.8%的使用者沒有使用過睡眠APP
•並且有 88.4%的使用者回覆說如果有誘導睡眠APP會想使用
•79.2%的使用者表示如果和親朋好友一起規律睡眠會促使自己規律睡眠的慾望
過半使用者都有難以入睡、作息不規律、以及睡眠困難等等問題，
且造成睡眠困難的原因前三名有：
1.上班/上學壓力
2.使用手機過度
3.環境吵雜
設計背景 5W1H 問卷調查
問卷回覆171件 ，以下是問卷調查的統計資訊及圖表。
到了上床時間你有沒有難以入眠的困擾 68.8% 有困擾 31.2% 完全沒有困擾 到了起床時間你有沒有難以起床的困擾 90.2% 有困擾 9.8% 完全沒有困擾 您覺得您作息規律嗎? 70.6% 不規律/ 偶爾規律 29.4% 非常規律 您有沒有睡眠困難的問題? 79.2% 有困難 20.8% 沒有困難
06
Tzu Chi Liu Design Portpolio
Flow Chart app三大主要功能介面：1.鬧鐘設定 2.動物園 3.更多功能
1.鬧鐘設定&就寢起床流程 2.動物園購買建築物&服裝流程
Tzu Chi Liu Design Portpolio 08
0 鬧鐘首頁 5分鐘後 鬧鐘設定
起床鬧鐘
1 設定鬧鐘
UI Flow & Wireframe - 鬧鐘設定&起床鬧鐘
(晚上執行時)
(早上執行時)
設定可開啟也可關閉
Tzu Chi Liu Design Portpolio 10
1 搖手機(特殊機制) 2 醒腦題目(特殊機制) 3 紀錄夢境 4 睡眠品質評分 5 成功起床即獲得獎勵
UI Flow & Wireframe - 夢境動物園
0 動物園首頁 1 側邊功能 獲得睡眠硬幣 獲得睡眠硬幣(有動物建築) 累計睡眠五天獲得動物 無睡眠硬幣 累計兩天失敗動物逃走 規律睡眠成功 規律睡眠失敗
0 動物園首頁 1 建築物選擇 3 好友名單 4 好友名單 2 1 動物資訊 點任一動物 2 動物資訊 Tzu Chi Liu Design Portpolio 12
UI Flow & Wireframe - 夢境動物園(合作模式)
0 動物園首頁 1 導覽頁 2 合作模式首頁 4 合作進行中 5
6
3
啟動者獲得獎勵
合作者獲得獎勵
邀請好友
0 更多功能 1 睡眠分析 2 夢境紀錄庫 3 4 Tzu Chi Liu Design Portpolio 14
UI Flow & Wireframe - 更多功能
進入之前…先閱讀一下教學手冊吧！
累積一定的規律天數可隨機獲得動物
透過規律的睡眠獲得硬幣
睡眠硬幣也可以為動物購買衣物 透過規律的睡眠來擴大動物園吧 !
累積一定的睡眠硬幣可謂動物購買建築
－ 簡單設定
在設計上為了呈現夢境的感覺，整體app都是在雲朵上 進行每個流程，點擊中間時間即可進入畫面設定，並提 供特別機制，以及較為特別的「夢境紀錄」、「睡眠品質紀 錄」。
UI / UX design 17
自訂鬧鐘
起床鬧鐘
如設定特殊機制，早起關掉鬧鐘的程度會相對較高
也會促進使用者起床想趕快關掉之餘，讓睡意也會漸漸 消失。
搖手機機制 紀錄夢境
睡眠品質評分
Tzu
Design Portpolio 18
Chi Liu
夢境動物園
透過規律的睡眠可獲得硬幣及動物，此頁面可查看獲得
的動物以及睡眠硬幣，睡眠硬幣可購買動物的專屬物品 及建築，購買後能夠加成硬幣的獲得量。
UI / UX design 19
20
後隨機得到。 Tzu Chi Liu Design Portpolio
UI / UX design 21
動物建築購買 好友名單 詳細好友名單
可查看動物可購買的衣物，以及金幣加成、獲得日期以
初始服裝 健康蔬菜服 吊帶褲 甜美糖果裝 仙氣公主裝
Tzu Chi Liu Design Portpolio 22
合作模式
透過邀請好友，一起進行規律睡眠任務，所有成員都規
律睡眠運動，該啟動者獲得稀有動物，則合作者獲得大 量睡眠硬幣。
UI / UX design 23
進入之前…先閱讀一下教學手冊吧！
累計規律睡眠30天可出發合作任務
點選右上方按鈕即可進入
合作任務首頁
邀請三位好友即可啟動！
啟動者
獲得稀有動物 合作者 獲得大量睡眠硬幣
Tzu Chi Liu Design Portpolio 24
觸發條件
UI / UX design 25
從其他功能列裡可以查看分析、睡眠紀錄、睡眠品質紀 錄，以及相關手冊等等。
更多功能
每天早起的紀錄都會被放置夢境紀錄庫裡，夢就想雲採一 樣，朦朧又夢幻，充滿了無限幻想，有時想回顧，隨意點 開幾個雲彩，裡面的故事會讓你充滿想像以及回憶。
夢境紀錄 Tzu Chi Liu Design Portpolio 26
視覺設計
我在色彩的設計上使用較為較為夢幻的天空漸層色
，並在漸層色上蓋上一層雲，整體動物園會在雲上夢幻的擴建生活著，再搭配點綴的紅色讓整體層次感更加提升
UI / UX design 27
Tzu Chi Liu Design Portpolio 28
所有建築詳細圖
Tzu Chi Liu Design Portpolio 30
Homie 你旅行休憩的好去處
Design Concept
說到旅行，就會想到美食、景點，在旅行之餘最重要的就是住宿，為了要走更長遠的 路那就需要一個好休憩的地方，要有一個好休憩的地方那就需要搭配一個能夠快速挑 選住宿的APP，我們創新且快速簡化許多不必要的介面只為了帶給使用者更快更好挑 選的住宿APP。
＃2B2C2C ＃F0A42C #231815
UI / UX design 31
Tzu Chi Liu Design Portpolio 32
Line Massage Instagram 1000 2000 ? UI / UX design 33
一般登入 Facebook登入 Google登入 忘記密碼 0 1 1 2 3 a b c 2 1 2 3 4 Tzu Chi Liu Design Portpolio 34
搜尋介面 0 1 2 3 4 7 8 9 10 a 5 6 UI / UX design 35
Tab bar以及按鈕使用較為鮮明的黃色，
1-Search Tzu Chi Liu Design Portpolio 36
2-Categories
每個住宿地點下方都有觀光客熱門景點的距離 以及交通上方不方便的標籤方便直接觀看。
UI / UX design 37
Tzu Chi Liu Design Portpolio 38
三種付款方式
0 1 c 6 UI / UX design 39
轉帳匯款
2-Payment
Tzu Chi Liu Design Portpolio 40
Graphic design 41
Graphic design
LOGO&標準字設計 Banner設計 招牌設計 小物品設計 Tzu Chi Liu Design Portpolio 42
雲林樂齡數位學習大學
Design Concept
雲林縣政府有位老年人推出一個樂齡學習網，透過這個學習網能夠讓老年人透過網路學習不同樂齡運動以及興趣，此標準字設計是為網站 標準字而設計的，目前設計三款樣式，色彩偏向學習的綠色以及代表樂齡的橘色，希望老年人從中快樂學習並且有價値的收穫。
(01) (02) (03)
- 標準字設計
Peteco Club - Logo&標準字設計
Design Concept
Peteco是一個寵物社群網站，目的是希望有養育寵物的主人們能夠將狗狗或貓貓的大小事po上網互相交流分享，此logo使用 許多動物像地球一樣環繞著使整體聯盟感，排版上也做了許多不同調整，整體字體希望偏向自然體系。
排版一 線搞 排版二 排版三
Tzu Chi Liu Design Portpolio 44
2022 MODA客製化數字油畫過年Banner
Design Concept
標題”虎哩全家福”以最直接的行銷方式來吸引消費者的眼光，整體使用 鮮紅的紅色以及較為喜氣的邊框來當作整體主要視覺設計，加上本年的 生肖老虎為主要主角並且旁邊放著客製化好的照片，提倡只要您給我們
一張照片即可製作屬於您們的Q版照片。
Graphic design 45
(1)
Tzu Chi Liu Design Portpolio 46
其他不同款標準字造型
2022 MODA客製化數字油畫過年年曆
Design Concept
整張畫面以暖黃色為主要色調，中間老虎的動作意涵為 step1 客人給予我們照片 step2 設計師開始繪製客人Q版照片 step3 完成的產品交件給客人
此年曆為商品購買贈禮，也是希望讓客人看見會有”這就是當初下單時 的步驟耶!”會有會心一笑的感覺。
Graphic design 47
Tzu Chi Liu Design Portpolio 48
恩典手工丸子
Brand origin
“恩典”取自於老闆娘的宗教，基督教，原本是跟 丈夫共同開了一間手工丸子店，不料丈夫於十年 前過世了，因此剩下他與兒子相依為命，過了這 麼多年，老闆娘很感謝神讓他堅持下來，努力撐 住這間店以及讓兒子好好成長。
恩典手工丸子招牌設計提案之一
Design Concept
整體LOGO以環抱貢丸盆為主軸，環抱的姿勢帶有感恩的心，微笑低頭 營造著善良、慈悲，正向的意象，同時也有思念丈夫之意。
標準字則是以較圓的字體加上貢丸的插圖來呈現。
Graphic design 49
Tzu Chi Liu Design Portpolio 50
恩典手工丸子招牌設計提案之二
Design Concept
整體LOGO以老闆娘捧著貢丸，表情有感謝感恩之意味，加上店內不同口味的貢丸插圖， 其中最大顆的貢丸則是店內銷售最好的香菜丸子。
標準字則是以較圓的字體加上貢丸的插圖來呈現。
Graphic design 51
Tzu Chi Liu Design Portpolio 52
2020揪揪市集海報Banner
Design Concept
七月banner以夏天涼快的海水為主題，並加入揪揪市集的吉祥物老鼠來設計整體視覺。
八月banner則以郊遊為整體主題。
Graphic design 53
朝陽科技大學 工業設計系一年級期末展視覺海報
Design Concept
“巢”意旨我們大一的新生跟剛出生的小鳥一樣，還處在一個懵懵懂懂什麼都都還不知 道的階段，隨著時間的推動我們會破蛋而出，隨著時間慢慢成長。整體海報以深綠色 為主要視覺背景，中間的蛋就像我們這群新生兒一樣純淨潔白並閃閃發光著。
Tzu Chi Liu Design Portpolio 54
Peteco Club - 獎勵幣設計
Design Concept
Peteco是一個寵物社群網站，目的是希望有養育寵物的主人們能夠將狗狗或貓貓的大小事po上網互相交流分享，此獎勵幣是為了讓使用者做了某些回饋(例如: 留言、發文)，能夠獲得獎勵幣來兌換一些理想的物品。
Graphic design 55
(1) (2) (3)
Tzu Chi Liu Design Portpolio 56
額外副業-委託貼圖
Product design 57
Product design
倆倆 Tzu Chi Liu Design Portpolio 58
倆倆－人寵共好傢俱
為了增加飼主與寵物的活動空間，設計出能與寵物共用的友好傢俱； 能夠任意自由、隨心所欲組合，打造你與寵物的生活空間，更加貼近彼此。
是飼主的置物空間、休憩地；也能是寵物的休憩、娛樂之處。
年份 Years
個人項目 Individual
產品歸類 Product Category
材料 Material
尺寸 Dimension
十月 二O二一年 November,2021
產品設計 Product design
傢俱 Furniture
松木 Pine
200*400*400mm
400*400*400mm
900*400*100mm
Product design 59
Tzu Chi Liu Design Portpolio 60
設計背景
對於養過毛小孩的飼主來說，寵物用品的開銷不是很大的問題，但是寵物 用品的數量會隨著飼主一直購買的關係而導致用具越來越多，室內的空間 逐漸地縮減，因此我們希望可以從這個空間上的問題做改變……
設計目標
1. 達到1+1>2的功能，飼主可以使用，毛小孩也可以使用的共用概念。
2. 減少毛小孩用具額外放置的空間，增加毛小孩跑跳的區域。
3. 在家具設計中，讓飼主享受養育毛小孩的樂趣。
4. 增進飼主與毛小孩的親近感。
Product design 61
飼主休憩或收納物品 飼主休憩或翻轉可成雙人座椅
貓抓布坐墊 飼主休憩或收納物品
蓋子 可收納桶身或 反過來集可置放書本
Tzu Chi Liu Design Portpolio 62
產品材質選用松木，天然紋理、淸理方便 漆料選用使用安全無毒抗刮的烤漆漆料
布料選用耐刮耐抓的貓抓布
整體櫃體使用圓角設計，有柔和舒適的視覺感
Product design 63
(1) (1) 雙人乘坐 (2) (3) (4) 不同組合 (2) (3) (4) Tzu
64
Chi Liu Design Portpolio
Design Concept Design Concept
倆倆代表一起與陪伴，飼主用雙臂擁抱著LOGO中幸福洋溢的毛 小孩，也代表著我們的傢俱圍繞在身旁的意象，讓飼主、寵物、
倆倆互相陪伴在幸福的氛圍中。
輔助色 Product design 65
圓潤的外觀字體，與我們的圓角以及圓形設計的 家具呼應，同時也顯現出我們活潑有活力的精神
使用粉嫩的天然綠和點綴的陽光橘，彩度上也使用較飽和的 色調，視覺上足以放鬆舒適；綠色也象徵大自然，也是因為
大自然孕育了萬物，讓我們能夠與寵物相遇，陪伴他們。
C40+M0+Y45+K0
PANTONE 344C
C0+M30+Y50+K0
。
色彩計畫 主要色
PANTONE 148C
周邊
名片
以LOGO的外觀跳脫以往名片正正方方的外框。
Tzu Chi Liu Design Portpolio 66
-
使用傢俱與貓咪的互動照來製作一系列酷卡，背景則是使用英文標準字的lialia來作背景設計。
周邊 -
Product design 67
酷卡
Tzu Chi Liu Design Portpolio 68
Product design 69
周邊 - 包裝、貼紙、貓抓球
Tzu Chi Liu Design Portpolio 70
for your watching
Thanks
a0987663565@gmail.com 0983-655-518 E - mail Phone Name
