U IU X
PORTFOLIO H U A N G ZI J I A
2021
JIA About me 我是黃子嘉，目前就讀台灣科技大學工業設計系，曾 在群玩科技擔任GUI與UI設計實習生，有社群圖素及
宣傳Banner等製作經驗，也曾將舊版 APP更新為符 合公司產品需求等實際經驗，在團隊中經常負責視覺 呈現，對視覺美學及跨域溝通有充分的學習，平面方
面設計過包裝、繪本、海報等經驗，UI方面也執行過
Taichung , Taiwan 0975-600-030 start062677@gmail.com
心理引導、知識管理、健康APP等專案，就學期間透
過精進自我，也獲得了IF設計獎及入圍晟銘盃科技應
用大賽，對設計保持熱情及學習心，相信未來有機會 在貴公司帶領下能發揮價值。
Experience
Project
2021
群玩科技
2021
玉山青年菁英設計工作坊
2021 2020 2020
GUI / UI 設計實習生
2021
籌備組工作人員
IF DESIGN TALENT AWARD Health Beauty (health APP)
晟銘盃科技應用大賽 入圍 O+ 藥盒水壺
2021
心理引導APP
專注閱讀APP
2021
健康管理APP
文明病APP
2020
智能水壺APP
智能烘焙秤APP
臺科大設計週作品展
產品類參展
2018 - 2022
國立臺灣科技大學
2015 - 2018
台中市立大甲高中
設計系工業設計組
室內設計科
Design skills GUI/UEUX 文字編排 / 造型設計 / Illustrator / Photoshop 設計思考 / Prototype / Figma/InVision
Industrial design 3D 建模 / 模型製作 / 表現技法 / 包裝設計 Rhino / Sketch up / C4D / Keyshot
CONTENT
01
心理引導APP設計
02
專注閱讀APP設計
UIUX
UIUX
06
22
HU ANG ZI JI A
03
文明病APP設計 UIUX
40
04
衛生棉包裝設計 Graphic design
56
05
社群圖文
Graphic design
64
01 garden
《紀錄迷失的心靈，找回嚮往的花園》 心靈花園是一款透過建構式問題結合植物生長的心理引導A PP，
藉由趣味化的栽種過程，引導想要走出事件壞心情的使用者，在 療癒自我的同時，認識更深層的自我。
專案時間
2021/03 - 2021/06
設計分工
研究 : 團體 / 視覺 : 個人
Background # 壓力的本質：個人與環境的互動和評量
壓力是一個連續變化的動態過程，而非靜態的間斷現象。個人會不斷地評斷所處環境的要求，並試圖運用各種可能的個人 資源（內在、外在），以認知和行動來因應壓力，試著重建個人與環境間的平衡。 壓力源 (自變項)
壓力造成的結果 (依變項)
壓力感受、個人資源 (調節因子 / 中介因子)
Problem 而在現況調查中發現，國內多數大學生都有心理輔導的需求，台大2019年個別心理會談人次高達一萬次，清大、成大每學 年度諮商人次也都達六七千人，而國內多數大學生平均得等上3周至1個月才能見到諮商心理師。 20%的美國成年人有不同程度的心理或精神疾病，約 5%的成年人已達到嚴重程度， 但在所有心 理壓力人群中，僅有不到 45%的人群會選擇以心理諮詢、藥物、住院等方式進行治療。
Reserach 心理類產品需求大幅成長 全球用戶最多的10款心理App在去年4月份產生1000萬的下載量，較去年下載量上漲約25%。
去年第一季度內心理健康公司的融資總額達到破紀錄的5.76億美元， 比之前的季度最高融資額高出60%。
52 33
33
30
42
41
交易總數 融資總額 37
44
22
Interview 對於「暫時逃離壓力源」已有多種解方，且較不涉及根本，故期望從 另外兩項切入：幫助使用者短期面對問題時能更好地思考、防止壓 力生成並培養長期處理問題能力。
短期_自己思考，嘗試弄清楚問題 想出解方
解決問題 (未構成壓力)
想出但無法/不想執行
阻止壓力生成 未想出
短期_想暫時逃離壓力源
可與他人進行諮詢
個人_自行梳理
$247
$129
$125
$210
$357
$225
$115
$576
Q1’18
Q2’18
Q3’18
Q4’18
Q1’19
Q2’19
Q3’19
Q4’19
Q1’20
2018-2020心理健康公司融資總額成長圖表
訪 談對象：6人
5位學生、1位社會新鮮人，年齡19 -23歲 群體特性
讓心情變好
現實問題所迫
長期_尋找徹底的解決方案
$177
解決問題
變得更有抗壓性
自我紓解能力較差，無法只靠自己解決或想開問題
認為壓力可以是正向，但並不總是成功轉換負面壓力 群體目標 短期：釐清問題、防止更多壓力生成，並讓心情變好
長期：讓思考方式活絡，培養問題處理能力與抗壓性
Information Architecture 以引導釐清問題培養問題處理能力進行設計 :
透過栽種植物幼苗至成熟，引導多方位思考的灌溉 目標 群體
大學生、社會新鮮人
水
容易在生活中感到壓力的 較缺乏自我開導能力的
個人花園
栽種頁
圖鑑
新增
陽光
選顏色
肥料
輸入事件
蟲害
問題
命名事件
雜草
輸入回答
選取種子
採收
完成
敲殼
栽種動畫
分類
回顧事件
總列表
收穫果實
移植公有地 鼓勵
主頁面
分享
留言 公有地
個人檔案
查看他人植物
私訊
移植我的植物
選取移植植物
資料設定 登出
重新命名
完成移植
Wireframe 以7種植物生長要素搭配建構式問題為設計核心 : 藉由趣味化的栽種過程，帶領想走出事件壞心情 的使 用者，在療癒自我的同時認識更深層的自我
引導問題 事件紀錄 X 七種引導問題 開啟 栽種
體驗 回饋
栽種植物 動態栽種 X 收穫新植物 X 七種栽種行為
garden 《紀錄迷失的心靈，找回嚮往的花園》
初始畫面 #事件梳理 #心靈探索 從家園中的一把鏟子
開始栽種獨一無二的心靈植物
引導頁面_栽種說明書 以栽種說明書作為引導
讓使 用者能夠了解 心靈花園的運作流程
描述事件
栽種思考流程
心靈植物收成
栽種思考七大流程 #建構式問題 #釐清感受 #植栽過程 以 建構式問題對應植物生長元素 根據回答呈現對應植物成長增進趣味與成就感
心靈植物收成 #對應事件植物 #心靈映照 #植栽動畫 以最終步驟敲殼，敲開專屬於 你的心靈植物
家園_自己的花園 最新的心靈植物會展示於家園
也會不定期飄出過去相關事件提醒自我 畫面背景也會隨著時間、心靈感受變 換
白天黑夜
季節變 換
長期未使 用
公有地 #交流鼓勵 #多元思考 選擇 性地移植植物到公有地
拓寬思考維度認識更多角度思想
圖鑑 #心靈植物 #心靈果實 心靈植物依照季節收 入對應圖鑑
方便使 用者查看不同區間段的心靈感受
garden
video
figma
02
徜徉在浩瀚資料庫，建造專屬你的知識寶庫 專注閱讀 是 一 款 結合存取資料 與 培養閱讀習慣的APP，在專注閱讀，
累積的每篇文章都是能使你堡塔強大的子民，按照文章重要程度進行 分級制度，你的閱讀能夠使他們找到屬於 他們的領土得到歸屬
專案時間
2021/04 - 2021/06
設計分工
研究 : 團體 / 視覺 : 個人
Background 資訊 量暴 增的年代，跟 不上 資訊 速 度已造 成 現 代 人 焦 慮，為了
成 就自我 跟 上 腳步，進而 存 取 過多文 章，文 章累 積 與閱 讀 速 度
不成 正 比，閱 讀 文 章的 動力也隨 著存 取時間 拉長而逐 漸下降。
Problem 根據投 放問卷及深度訪談6位使 用者發現 以下痛點 :
看到 資料
存取 資料
回顧 資料
# 文章儲存後不會回顧儲存的文章 「有時 候資料ㄧ存起來，就會忘記自己存過，或放在哪裡了。」 「存取時覺得之後會讀，沒想到自己這麼 懶 」
Reserach # 7 成使用者希望/嘗試 過解決此痛點 根據40份以上回收問卷結果發現，有儲 存 文 章 習慣的 使 用者 佔 8 6 .7 %
外部 因素
其中，存 取 後 卻 不 再 點 開高達 92 . 3 %，7 成使 用者 希望 / 嘗試 過 解決 此 痛 點
有興 趣卻無法 馬上閱讀 而產生存取的動作
經過訪談也發現了以下問題 : # 閱讀存取的文章經常被排在第二順位 閱讀被認為是一件消耗腦力的行為無法產生樂趣 因此 就 算對文 章內容或 知識有需求進而存取，對
存取 文章
後續「閱讀」卻無法產生吸引及動力
文章累 積 過 量
生心 理抗拒 過多文章
# 文章存取 過量，造成回顧困難 文章存取時缺 乏分 級標 示，不清 楚 對 於文 章是
需 要或 想要，存 放 過 久 忘 記初衷而 更不願 閱 讀
短期：增加閱讀文章之主動性
長期：培養閱讀，增進充實自我習慣
放棄 回顧
Information Architecture 以提升自發性閱讀存取資料進而培養習慣充實自我設計，
希望閱讀 是一件能誘發使 用者主動完成而不拖延的行為 目標 群體
大學生、社會新鮮人
個人可利用時間較多
缺乏動力，易受誘因吸引
選取閱讀文章 暫停閱讀
設立閱讀目標 主頁面
閱讀頁面
閱讀文章
開始閱讀
閱讀文章
閱讀列表 閱讀文章
存取文章
分類
輸入文章連結
重要度 標籤 備註
資料庫
分類
已讀/未讀
簽到
重要度
商店
標籤 時間
主頁面
分析
閱讀分析
年/月/日
閱讀時間量 存取文章量 閱讀文章數
設定
基本資料 提醒設定 日曆
設定時間/日期 系統日曆
連結其他日曆
存取
閱讀時間 備註
閱讀完成
Wireframe
以 知識 庫做為資料 存取並藉由擴 建城市引起使 用者興 趣 : 初期設計風格年齡層偏低，在後 續視覺設計 做了調整
存取資料
閱讀資料
閱讀完成
建 造 堡塔
文 章分級存取
依照個人安排
查看閱讀分析
享受閱讀帶來之回饋
挑 選 適合之內容或時長 花費
記 錄 個人 成長
提 升樂 趣 及 成 就 感
徜徉在浩瀚資料庫，建造專屬你的知識寶庫
當日日期 閱 讀 分析
簽到 商店
主畫面 領地圍繞中心資料庫
透過消化閱讀富裕個人 知識及堡塔 也象徵資料庫與個人 知識的連結
存取資料
閱讀資料
閱讀完成
建 造 堡塔
子民出現
子民移入領地
獲得知識幣
擴建 領土 富裕堡塔
A PP存 取
5星
1星
4星
未標 註
3星
讀 取中
2星
存取資料 #設立標籤 #分級可視化 兩種存取 方式 : 網頁插件/APP存取 存取標籤分 類保留存取初衷
網頁插件存取 快 速存取並簡單分 類
不怕遺忘文章位置
# 可單篇閱讀或選 取多篇文章
恭喜
# 系統收 入 文章後自動判別閱讀時間
閱 讀目的 命 名
閱讀資料 選取資料進行閱讀
系統依照分析績效給予知識幣 閱讀 完成 後 子民 移入個人領地
閱讀列表
視 覺 分析 將領土與閱讀子民加入分析 除了看見圖表示分析內容
堡塔蒐集也一 併顯示成長里程碑
專注 時 間
閱 讀存 取 比
閱 讀 分析 #專注時間 #存取閱讀比 分析閱讀存取 比與閱讀時間 看見個人閱讀的趨向及成長
正向 回 饋 #建造寶塔 #合併收藏 多種排列組合創建個人化堡塔
合 併蒐集享受閱讀帶來成果及樂趣
負向 回 饋 文章存取未讀 超出個人設 定時間
個人堡塔將長出雜草驅 趕子民離開 (限度設 定可依照個人安排選擇)
限度設定
雜 草佔 領
資 料庫 #依照時間標籤多樣化查找 領土中間的尖塔為資料庫
管理 所有資料 象徵王國知識中心
文章依照標註收 入資料庫 以利需要時方便查看
讀 取中
#文章未讀取完成(關閉頁面情況) 當文章未閱讀完成系統會於下次
進入專注閱讀時提醒並標記讀取位置
figma
03
馬鈴薯的貼心建議文明病不 再困擾 跳脫 以往數據式分析，以淺顯易懂的方式讓使 用者找到問題 藉由沙發馬鈴薯角色引導，讓使 用者有趣地面對文明病
專案時間
2020/10 - 2021/01
設計分工
研究 : 團體 / 視覺 : 個人
Background 當 國 家 變 得工 業 化 及 人 類 活 得更 長 壽 時，文 明 病 就 會 變 得更多。 現代 人 緊張的生活壓 力常造 成 許 多問題，長 期下來 找不到解決 方 法 造成身心靈兩頭 燒。根 據醫學研究，每天平均有20% -30%的人 因為壓力、不規則作息 及飲食不正常，引發了更多的症狀。
Problem 科技的進步卻為人們帶來文明病，而現代人的文明病經常導致... # 情緒受到文明病影響，生活品質大幅降 低 情緒起伏不定，身心靈都受到影響
#不知道 文明 病 起因也不知道 怎 麼 辦 外界訊息太龐大，不知道那些才是正確的
#造成分心，無法專 心在工作上 忙碌於工作，卻又被文明病所困
# 依 賴高熱量食品抒發高壓生活 體重持續上升無法維持身材
2018年10大 文明病排名 油膩的飲食習慣、攝入過多的精緻糖、頻繁使用電子產品都可能導致文明病。在早安健康2018年的調查中發布了 現代人時大文明病排名，我們挑選了較有相關連結「全身痠痛」、「肥胖」、「 眼睛痠痛」、「失眠」、「便祕」，作為 疾病功能切入點。
2
1
32％
全身痠痛
6
3
肥胖
7
失眠
13％
30％
4 22％
眼睛痠痛
8
便祕
11％
5
過敏
9
頭痛
9％
20％
17％
胃痛
10
口臭
8％
蛀牙
8％
Information Architecture 以找到個人 文明 病根源以 對症下藥進行設計 :
透過紀錄 給予明確指引，降 低 使 用者工作之餘的生心理耗損 目標 群體
社會新鮮人(單身族群)
招呼頁面
工作忙碌無心照料身心 飲食較不規律靠食物紓壓
切換疾病
五大疾病
運動
運動頁面
飲食
飲食頁面
任務
任務頁面
主頁面
角色設定
角色頁面
分析
切換疾病
社交
添加好友
介紹頁面 開始 登入頁面
輸入帳號密碼 註冊
註冊
忘記密碼
註冊頁面
輸入帳號信箱 登入
資料連結註冊 是
基本資料頁面
資料連結
輸入帳號密碼
登入成功/失敗
選擇連結頁面 年/月/日
否
輸入基本資料
好友列表
主頁面
下一步
完成
ID/QR code 留言
鼓勵
分類
文章
通知 創建角色頁面 配件
社群 下一步
所有問題頁面 小學堂
搜尋
設定
基本資料
問題分析頁面 下一步
測驗 登出
Wireframe 以圖像化日常紀錄，角色提供建議互動為設計方向 :
為了降 低忙碌之餘的額外身心靈負擔，以 角色互動進行 發展，藉此我們挑選５種較有關聯的文明病進行延伸
日常紀錄
分析
建議
利用運動、飲食等日常紀錄， 找出潛在誘發問題因素，並 直接加以標示提醒
ICON
# FBB03B
# 00A99D
創 建 角色 為角色增添個人化的配件
創建屬於自己的專屬馬鈴薯
主畫面 #自我評估 #日常紀錄 可自由切換任意疾病
讓不同屬性馬鈴薯幫助你更加健康
疾病切換 由上方列表切換至不同疾病
功能也會依照疾病有所變化
便秘
全身痠痛
眼睛痠痛
失眠
飲食紀錄 #每日推薦 #飲食紀錄 專屬飲食建議及每日推薦
使 用者不須額外耗時查詢所需
運動紀錄 #運動推薦 #運動紀錄 依照不同使 用者特質
給予不同難易度的運動推薦
分析 #問題點建議 #健康評分 依照日常記錄 給予建議與評分
直接標示關鍵問題點並提供提醒
社交 #添加好友 #發起任務 #互相鼓勵 發起任務與朋友一同完成
讓對抗 文明病的這條 路不孤獨
小 學堂 #健康知識 #項目分類 透過5MB就能在忙碌之餘 補充健康相關知識
figma
引導頁面
引導頁面
引導頁面
登入頁面
文明病選擇
飲水紀錄
個人資料
測驗問題
04
電氣石衛生棉專為年輕女性設計，以星球強調獨特電氣石 成分，誰說衛生棉不能繽紛亮眼，拿出星球衛生棉，跟著 角色開始自信太空漫旅，讓活力充沛的太空人與外星小怪 獸們陪伴著你度過生理期的每一刻
專案時間
2021/03 - 2021/06
設計分工
個人
CONCEPT /
/
東方人害羞的社會風情，衛生棉在拿出時總會產生尷尬 這款衛生棉以星球漫旅強調獨特電氣石成分
讓活力充沛的的太空人與外星小怪獸們陪伴你度過生理期的每一刻。
Character design /
21
包裝上蓋以星球代號標示衛生棉公分數 方便使用者在購買時能快速辨識
28
/ Tourmaline ultra thin day 在經期不舒服時 接住你的煩惱與憂愁
05 社群圖文
社群貼文 | Banner | 網站button
負責過社群貼文及各種尺寸宣傳圖文製作，並能在統一視覺規範下 完成設計，風格也能依照需求設計完成
專案時間
2021/07 - 2021/10
設計分工
個人
Meloop 社群貼文
1080*1080活動貼文設計
宣傳網站Banner
3種不同主題風格Banner設計
Button
圖像式按鈕設計
廠商需求圖文
依照廠商需求設計社群圖文
廠商需求Banner
依照廠商需求設計
H U A NG ZI JI A 09 75-600 -0 30 start062677@gmail.com