portfolio
a designer based in Taiwan
UI / Visual designer website design
/ product design
")*+,)
!"#$%&&'#$( 王 永 昱
-./+0 目前就讀亞洲大學創意商品設計學系，高中畢業於復興商工廣告設計科，從小熱愛美術及設計因此對於展覽及設計
相關書籍都很有 興趣，當然「運動」也是我擅長的項目之一，每週都會習慣與朋友打球，很享受跟一群人的感覺。
喜歡設計的個性讓我決定從高中開始就朝向技職方向邁進，很幸運的在高三那年跟著班上同學一起拿到「金點新秀設計 獎的產品 設計獎」。
幾年來自己從高中的專題製作及大學的專題課程發現到，團隊合作其實事一件很棒的事情，每個人都有不同的想
法及能力，雖然會有些意見不合但如果能統一整理及歸納，最後將會產出更好的想法，那設計出的品質一定遠大於一個 人所能思考的，所以
樣的經 歷讓我很享受團隊合作的工作。
大一後的自己漸漸的在作業上或是課餘時間我都會花時間做作品， 幾年下來自己也有許多不錯的作品，也因為如此自
己得到了許 多不錯的機會，有平面設計的接案、公司短期實習、各類案子等都有相當不錯的經驗，現在希望能夠再次藉由 實習的經驗磨練自己，面對更多不一樣的客戶及環境，相信在
樣得過程中可以讓自己學到很多不一樣的處理方法。
為何想要應徵Visual designer或UI designer? 常常使用很多軟體總是覺得使用上並不是那麼順手，不單單是因為畫面設計上的複雜程度，反而覺得視覺上的理解程度 不佳並不能馬上熟悉介面使用，身為對視覺有一定熟悉的我希望可以從使用者的習慣與焦點可以著手，透過網站的視覺 在閱讀上可以更流暢更吸引人。。
得獎紀錄 金點新秀設計獎 產品設計獎 2020 中亞聯大AI人工智慧創意競賽首獎
學經歷/教育程度 畢業於 新北市永和區 復興商工 廣告設計科 在學中 台中市霧峰區 亞洲大學 創意商品設計學系
實習公司 荷米斯數位設計
遠 端 工 作 設 計 師（ 目 前 在 接 案 中 ） u disign 設計師
接案經歷 工研院 國際資安交流活動2020 /2021主視覺設計 三峽康喜軒金牛角 品
形象重新設計
the no name 髮廊形象網站設計 DTM 形象網站設計
more....
擅長領域 illustrator photoshop
次要領域 after effect rhino
聯絡方式 0986076877 grand890820@gmail.com
portfolio
UI /website design/product design 設計案例 1 moodi workshop 專案
2.AI Friend-Crib 3.DTM 競賽作品 首獎
4.i ping select 5.妍筑個人
個人接案 網站視覺設計 2020
個人接案 網站視覺設計 2021
個 網 20
人形象網站
人接案 站視覺設計 020
UI /website design/product design
6.寰宇一家親 個人接案 網站視覺設計 2020
7.the no name 個人接案 網站視覺設計 2020
8.有 好茶 個人接案 網站視覺設計 2020
UI /product design
moodi
次 是 一 個 產 品 設 計 與 U I 介 面 的 設 計 提 案 ，為 了 讓 使 用 者 可 以 更 輕 鬆 的
使 用 該 服 務 系 統 ，我 們 的 設 計 概 念 是 想 要 透 過 一 個 新 的 共 享 平 台 讓 上 下
班族可以順便透過租借電動代步工具來連結共享送貨服務平台來賺取小 額 費 用 ，m o o d i 除 了 是 共 享 租 借 系 統 另 一 設 計 是 透 過 上 下 班 的 人 可 以 順 便 送 貨 或 是 食 物 給 路 途 附 近 的 住 戶 ，每 達 一 定 的 里 程 數 便 會 有 相 對 應 的
點 數 回 饋 ，該 回 饋 可 以 減 少 租 借 費 用 。因 為 本 產 品 有 兩 種 模 式 可 使 用 ，所
以 在 A P P 的 操 作 上 必 須 要 設 計 的 更 淺 顯 易 懂 ，因 此 我 們 將 視 覺 元 素 都 放 大 到 一 定 的 比 例 ，A P P 中 的 資
都是可以利用上下滑動的方式跳出所選
的 頁 面 ，讓 使 用 者 可 以 在 省 下 思 考 的 時 間 下 直 覺 的 使 用 該 共 享 平 台 A P P 。
UI /product design 2020 國際工作坊設計提案
負責工作：將產品視覺化 UI 介面設計
領
取
恭
達
章
你
獎
喜
靠
8
2
成
就
5 04次
到
4
停
1
0
4
0
5
1
月
3
5
6
1
5
7
0
8
2
2
9
5
0
10
3
11
12
1
1
月
里
我
章
的
獎
程 %
路 度
印
獻
#$
貢
!"
程
換 算 金 額 !" #$ %
道
'
-
路
&
,
救
援
1
#$
)-
!"
*+
+
0
)*
./
(
+
%
+
#$
2-
!"
3
%
-
2(
掃
描
條
碼
後
立
即
始
#$
開
!"
體
%
驗
M
O
O
D
I
!"
#$
%
!"
#$
%
UI /product design
中
華
民
中
灣
次
臺
六
國（
第
市
霧
峰
灣
次
臺
五
國（
中
民
）臺
華
第
中
區
南
柳
5
南
路
區
0
號
5
0
0
號
5
0
豐
路
5
0
號
0
民
5
華
0
號
國（
次
路
0
豐
中
二
柳
：
柳
號
裡
0
柳
址
南
路
區
豐
峰
柳
霧
裡
市
柳
中
南
路
區
）臺
豐
峰
柳
霧
裡
0
柳
市
灣
次
臺
三
國（
中
民
）臺
華
豐
峰
柳
霧
裡
市
灣
次
臺
四
國（
中
民
）臺
華
第
中
第
地
第
臺
中
灣
華
中
國（
）臺
民
市
臺
第
霧
灣
峰
區
峰
裡
霧
柳
市
南
中
次
）臺
一
南
裡
項
柳
單
區
接
接
柳
豐
路
5
次
目 ：
單
0
0
號
數 ：
紀
錄 !"
1
#$
0
%
次
偵 測
事
中
故 位 置
4
靠
8
送
問
5 04次
停
傳
的 ？
月
題
道
中
路
華
1
灣
中
2
0
華
中
民
市 霧
0
5
柳 柳
0
豐 5
南
路
區
8
2
峰
7
霧
裡
市
6
1
中
南
）臺
區
灣
5
1
峰
臺
4 國（
5
3
）臺
務
臺
服
國（
援
民
救
0
5
柳
9
號
裡
0
柳
2
豐
0
路 5
10
3
0 0 號
11 12
1 1 月
向
里
上
滑
程
開
始
!" %
教
#$
學
moodi
UI /product design 實際操作說明
里 程
!"#$%
!"#$%
!"#$%
道 路 救 援
換算金額
11月
路程 貢獻度
30
獎章
25
道路救援服務
20
我的
15 10
印
的 問 題？
5 0
1 2 3 4 5 6 7
8
傳 送
9 10 11 12
中 華 民 國（ 臺 灣 ）臺 中 市 霧 峰 區 南 柳 裡 柳 豐 路 5 0 0 號
中 華 民 國（ 臺 灣 ）臺 中 市 霧 峰 區 南 柳 裡 柳 豐 路 5 0 0 號
事 故 位 置
偵測中
8月 停靠4次
450
3種使用服務
外送服務模式
一般模式
共同功能
moodi !"
請選 一
50
般
擇模 使用
#$%
式 外
送
服
務
! %%
掃描
後 條碼
立即
開始
體驗
MO
OD
I
12
73
選擇今天想要的服務模式 掃描後系統立即開啟
預
分成兩種模式
73 預
計
10
分
鐘
到
%
12
:30
計
10
分
鐘
到
:30
am
%
達
am
達
你的
目的
地
12 切
0 :3 換
模
式
am
UI /product design
!"#$%
向 上 滑 開 始 教 學
為了節省使用者的操作時間，我們將頁面選取設計成上下滑及左右滑動， 利用大拇指就能輕鬆選取所需要的功能
moodi
!"#$%
!"#$%
掃描條碼後 立即開始體驗MOODI
,-+./0*+)-12-+3-2(
&'()*+
畫面使用乾淨利落的視覺方式，讓使用上更直覺
UI /product design
!"#$%
!"#$%
里 程
換算金額
11月
路程 貢獻度
30
獎章
25 20 15
我的
10
印
5 0
1 2 3 4 5 6 7
8
9 10 11 12
8月 停靠4次
450
恭喜你達到成就
領取獎章
藍色畫面是一般的代步模式，選取選項皆以上下左右滑動即可，除了在視覺上更直覺之外moodi app使用平坦式得線條及圖案設計，讓使用者可以將焦點放在所要觀看的資 設計或顏色所干擾
上而不會被過多的
moodi
!"#$%
!"#$%
里 程
11月
紀 錄
接 單 次 數：
10次
接 單 項 目：
第一次
30 25 20
中 華 民 國（ 臺 灣 ）臺 中 市 霧 峰 區 南 柳 裡 柳 豐 路 5 0 0 號
15 10 5
第二次
0
1 2 3 4 5 6 7
8
9 10 11 12
地 址 ：
中 華 民 國（ 臺 灣 ）臺 中 市 霧 峰 區 南 柳 裡 柳豐路500號
中 華 民 國（ 臺 灣 ）臺 中 市 霧 峰 區 南 柳 裡 柳 豐 路 5 0 0 號
中 華 民 國（ 臺 灣 ）臺 中 市 霧 峰 區 南 柳 裡 柳 豐 路 5 0 0 號
8月 停靠4次
450
第三次 中 華 民 國（ 臺 灣 ）臺 中 市 霧 峰 區 南 柳 裡 柳 豐 路 5 0 0 號
第四次 中 華 民 國（ 臺 灣 ）臺 中 市 霧 峰 區 南 柳 裡 柳 豐 路 5 0 0 號
第五次 中 華 民 國（ 臺 灣 ）臺 中 市 霧 峰 區 南 柳 裡 柳 豐 路 5 0 0 號
第六次 中 華 民 國（ 臺 灣 ）臺 中 市 霧 峰 區 南 柳 裡 柳 豐 路 5 0 0 號
橘色畫面是送貨服務，選取選項皆以上下左右滑動即可，如次可以在選擇住家或是商品之選項時更加 快速的操作而節省回家的時間。
UI /product design
!"#$%
道 路 救 援
道路救援服務
的 問 題？
傳 送
事 故 位 置
偵測中
灰色畫面是道路救援服務，為了快速解決該問題moodi app將介面設計成一頁彈跳式設計
，所有資
不需要自己點開只需要用大拇指滑動即可傳送資
一按即可以撥。
或查看，而自動定位系統
moodi
教學服務
UI /product design
AI FRIEND-CRIB 2020 中亞聯大AI人工智慧創意設計競賽 獲獎：首獎 競賽作品
負責工作：產品設計 系統規劃 UI設計
AI Friend-crib
AI FRIEND-CRIB
AI FRIEND-CRIB
凌 晨 3:46
凌 晨 3:46 小米粥
小米粥 2020 5/20 03:46 記錄中
2020 5/20 03:46 記錄中
70%
AI FRIEND-CRIB
2020 5/20 03:46 記錄中
正在降低濕度
小米粥
APP
控制中
濕度
2020 5/20 03:46 記錄中
67% under
WELCOME 手動
寶寶目前鄭感受到不安全感
臉部表情偵測
2020 5/20 03:46 記錄中
正在進行臉部偵測
睡眠品質降低了，請爸媽關心一下囉！！
睡眠指數：80% 熟睡程度：70%
新訊息
情緒變化：適中
目前處於熟睡狀態
2020 5/20 03:46 記錄中
溫度
我該如何處理
有無哭鬧：合宜
ＤＡＴＡ
請您放心！祝你有個美好的休息時光 舒適指數：20% 濕度
溫度
臉部表情偵測
1
數據分析與AI學習
數據傳輸與語音APP
3
4
5
6
舒適指數：80%
空氣濕度：適中 行為偵測
2
7
熟睡指數：25%
溫度：合宜
數據顯示中
濕度
溫度
臉部表情偵測
數據顯示中
數據顯示中
熟睡指數：70%
熟睡指數：70%
空氣濕度：適中
空氣濕度：適中
溫度：合宜
帳號登入 行為偵測
數據分析與AI學習
數據傳輸與語音APP
APP 使用者介面 AI學習後判斷出寶寶當下的狀態及需求後，會將資料立即回傳給父母參考及 提醒，如果情況緊急或是嚴重時會發出聲響提醒父母，APP也能手動控制嬰兒 床及睡袋;AI的輔助也希望能夠精準的為父母提供更好的服務，讓寶寶在成長 的過程中能夠感受到父母般的呵護。
舒適指數：80%
行為偵測
數據分析與AI學習
數據傳輸與語音APP
溫度：合宜
UI /product design
AI Friend-crib
APP的功能提供24小時的畫面情況 即時回傳爸媽
AI FRIEND-CRIB APP 使用者介面 AI FRIEND-CRIB HOME
AI學習後判斷出寶寶當下的狀
AI FRIEND-CRIB HOME
態及需求後，會將資料立即回 傳給父母參考及提醒，如果情
凌 晨 3:46
凌 晨 3:46 小米粥
況緊急或是嚴重時會發出聲響
2020 5/20 03:46 記錄中
小米粥
提醒父母，APP也能手動控制
2020 5/20 03:46 記錄中
嬰兒床及睡袋;AI的輔助也希 望能夠精準的為父母提供更好
70%
2020 5/20 03:46 記錄中
的服務，讓寶寶在成長的過程 正在降低濕度
中能夠感受到父母般的呵護。
控制中
濕度
67% under
手動
臉部表情偵測 正在進行臉部偵測 睡眠指數：80% 熟睡程度：70% 情緒變化：適中
新訊息
溫度
目前處於熟睡狀態
我該如何處理
有無哭鬧：合宜
ＤＡＴＡ
?
2020 5/20 03:46 記錄中
請您放心！祝你有個美好的休息時光 1
數據顯示中
濕度
溫度
臉部表情偵測
2
數據顯示中
3
4
5
6
7
數據顯示中
舒適指數：80% 熟睡指數：70% 空氣濕度：適中
行為偵測 行為偵測
數據分析與AI學習
數據傳輸與語音APP
溫度：合宜
數據分析與AI學習
數據傳輸與語音APP
add
舒適指數：80% 熟睡指數：70% 空氣濕度：適中 溫度：合宜
UI /product design
AI FRIEND-CRIB
AI FRIEND-CRIB HOME
凌 晨 3:46 小米粥 2020 5/20 03:46 記錄中
22 c Humidi ty
70%
Lerni
ng...
新訊息
目前處於熟睡狀態
2020 5/20 03:46 記錄中
請您放心！祝你有個美好的休息時光
舒適指數：80% 濕度
溫度
臉部表情偵測
熟睡指數：70% 空氣濕度：適中
行為偵測
數據分析與AI學習
數據傳輸與語音APP
溫度：合宜
App design
AI 偵測產品
AI Friend-crib
AI偵測系統與連結之APP功能 「 學 習 寶 寶 的生活型態」例如翻身、彎曲、伸直等細微動作觀察，一發 現 寶 寶 有 不 適或是不安定的狀態時，AI偵測器會透過不斷學習的數據模 式 ， 判 斷 並 提供最適當方案，給予「新手爸媽」參考。 利用數據庫的資 料 與 寶 寶 的 臉部表情、哭聲、行為、動作等等作出判斷，來計算出寶寶 當 下 最 有 可 能的需求，多樣化的數據庫及資料的整合可以更加準確的推 測 出 寶 寶 的 需要，並立即傳送至APP，這樣完整的輔助產品可以減輕「 新 手 爸 媽 」 的負擔，也能讓寶寶與爸媽都能夠增加睡眠時間且提供高效 率的輔助。
系統功能說明： 1.寶寶腳的空間過大而產生不安全感時，自動調整睡袋大小提供寶寶 包覆溫暖的感覺 2.因應環境自動調節睡袋及嬰兒床內的溫度、空氣中的濕度避免寶寶因環境而影響睡眠 3.學習寶寶哭聲，告訴新手爸媽當下寶寶各種不同的需求 4.寶寶睡眠時哭鬧會模仿媽媽的聲音提供寶寶的安全感與保護 5.當爸媽在廚房或忙家務事而無法顧小孩時隨時輔助監控小孩行為 如果有任何異狀或危 險會隨時發出聲音提醒爸媽
UI/website design
DY N A M I C TO O L S & M E TA L E N T E R P R I S E C O . , LT D .
Dynamic tools & metal enterprise co,ltd
Client /
DTM
專 案 歷 時：1 個 月 個人接案
網站視覺設計師
UI/website design
UI/website design
次 合 作 的 對 象 是 台 中 的 一 家 工 廠 ，由 於 合 作 公 司 都 是 屬 於 國 外 廠 商 ，因
此 我 將 整 體 視 覺 規 劃 設 計 成 具 有 國 際 感 且 大 膽 的 風 格 定 調 。將 重 點 及 客 戶 資
簡 單 俐 落 的 設 計 到 網 頁 中 ，讓 用 戶 可 以 方 便 閱 讀 。
DTM
生 產
加 工
品質
Machinery Equipment CNC machine & Verticle Milling Machine
UI/website design
Client /
i ping select 愛萍選
專 案 歷 時：2 - 3 個 月 個人接案
網站視覺設計師
UI/website design
i ping select
UI/website design
i ping select
次合作的案子屬於購物型網站
，購物除了賣的東西好之外更重要
的是購物時的體驗， 次設計希望 從網站本身下手，利用強烈的視覺
來吸引消費者的眼球為了不讓過多 的資
讓消費者的焦點被混淆，因此
使用了簡單的插畫設計搭配文字告訴 消費者網站該如何
，良好的設計
對會為客戶帶來最好的回饋。
UI/website design
i ping select
UI/website design
Client / 妍筑個人形象網站 專案歷時：1個月 個人接案 網站視覺設計師 UI/website design
妍筑個人形象網站
次合作的對象是個人品
行 銷 網 站 ，根 據 客 戶
的 特 質 及 工 作 內 容 ，我 們 設 計 出 一 款 專 屬
的視
覺 頁 面 ， 次 主 要 以 圖 片 方 式 作 為 設 計 主 軸 ，讓 使 用者可以依據他的照片直接對
的經歷有所認識
。視 覺 元 素 中 安 排 插 畫 與 分 界 區 塊 設 計 是 凸 顯 客 戶本身的個性與特質。
UI/website design
妍筑個人形象網站
UI/website design
Client /
寰宇一家親
專 案 歷 時：3 個 月 個人接案
網站視覺設計師
UI/website design
寰宇一家親
UI/website design
寰宇一家親
次 合 作 的 對 象 是 公 益 性 質 的 專 案 設 計 ，為 了 提
升協會的品
形 象 ，將 網 頁 視 覺 定 調 為 吸 引
使 用 者 確 保 有 低 調 而 不 張 揚 ，此 理 念 讓 我 們 在 設 計頁面時考慮是否能凸顯協會資 可以閱讀資
，使 用 者 是 否
及快速了解協會的所有資
。
UI/website design
寰宇一家親
UI /website design
Client / the no name 髮廊形象網站 專 案 歷 時：2 - 3 個 月 個人接案
網站視覺設計師
UI/website design
the no name
Welcome
UI/website design
the no name
次合作的案子非常特別，客戶一開始
就希望能使用古早的倚天系統視覺風格 因此我們開始著手思考，該如何讓倚天 系統的精神與髮廊融合，所以我們設計
了一款簡潔的網頁視覺，我們將資
放
大，圖片則是以視覺上最好閱讀的比例 做設計。
UI /website design
the no name
畫面示意
當你進入網站時畫面會是空白的
你必須要透過滑鼠游標滑到指定 位置上方，網站內的形象照片才
會顯示，神秘且充滿互動性的網 站是一個相當有趣的專案。
UI/website design
Client /
有好茶
專 案 歷 時：2 個 月 個人接案
網站視覺設計師
UI/website design
有 好茶
UI/website design
有 好茶
A bout us
portfolio