平面設計
2012 - 2016
實踐大學 媒體傳達設計學系
創意媒體設計組
2015 Sharelike 會員集點專家 / UI 設計師 實習 2016 Bebit 微拓策略顧問公司 / UX 設計師 接案合作 2017
0987 477 426
zhuanghanjun
上海櫻雅創意設計有限公司
人非人裝置藝術展
小覺裝置藝術展
/ UI 設計師 平面設計師
https://www.facebook.com/yeahhhangg/
/ 參展
給你的夢話 概念演唱會
實踐大學
https://yuka83322.wixsite.com/hangg
/ UI 設計師 平面設計師
2018 - 2019
1994/03/22 牡羊座
Motion Graghic
yukahola@gmail.com
上海博廣廣告傳媒有限公司
台北
UI設計
/ 表演者
/ 影片剪輯 參展
x 財團法人公益平台文化基金會《連動 Interlink 》動畫營 / 活動長
實踐大學 13th 東閔盃
/ 開場影片剪輯
2016 Wacom x 此目 The Sight x 中華民國無障礙科技發展協會公益快閃繪畫行動 / 作畫藝術家
畢業之後就到了上海，一待就是待了三年，決定回來的因素很大是因為 不喜歡那邊的人永遠說的比做的多太多，不管是同事上司還是客戶。 我一直都是一個口拙的人， 比起嘴巴說我還是更傾向於做吧。 想要一直做讓人覺得舒服的設計，
Photoshop
Illustrator
Premiere
After Effect
InDesign
Sketch
一直沒有甚麼多偉大的夢想，就是想要快樂活著。
滾滾長江東逝水
NO.1 音樂的色彩 成都站
LOGOTYPE Client /
中國藝術拓展計畫
Aep China
UI Design / Zhuang Han Jun UX Design / Zhuang Han Jun Graphic Design / Zhuang Han Jun
關於 旋律 x 色彩 COLOR
#FFFFFF
音樂的色彩是一款在微信上運作的 H5 互動遊戲。
FONT
#EDEDEC
#353333
Aa PingFang SC
客戶舉辦的線下活動 音樂地圖課堂 裡有一個環節叫 音樂的色彩 ，是讓參與的觀 微 信 掃 碼 體 驗
根據聽到的演奏舉色
來傳遞自己對音樂的色彩感受。
不過由於參與的人數只限於到達現場的觀
，所以希望能夠把類似有趣的體驗從線
下帶到線上，為大家紀錄靈感。 款遊戲主要面向客群是學齡孩童，所以版面操作還是以簡單直覺為主，事後還可以 訂製成手機殼。
WIREFRAME OVERVIEW
1
2
3
4
6
5
现在 选择最让你感动的乐章
loading
会带来有多少种可能？ 秀出你的个性Slogan
SWIPE
PLAY
0.0 Loading
NEXT
1.0 Home
7
NEXT
1.1 Introduction Page
8
NEXT
1.2 Introduction Page
2.2 Artboard
2.1 Choose Music
9
10
11
11
姓名
Cancel
I
the
q w e r
电话
OK
I’m
t y u i o p
a s d f g h j k z x c v b n m
SWIPE 123
2.2 Artboard - Color
2.3 Artboard - Slogon
2.4 Artboard - Shape
space
2.5 Artboard - Letter
Finish
l Restart
Finish
Restart
return
3.0 Finish
3.1 Information
Finish
5
2.1 Choose Music
選了五首不同曲風的交響樂作為創作的依據音 樂左右滑動選擇黑膠唱片，選擇好音樂之後會 放入上方光
機播放。
根據不同的黑膠也簡單的做了不同的唱片封面 設計。
）
）
）
）
柴可夫斯基
刘天华《良宵》
柴可夫斯基 张弦 指挥
2.2 Artboard
6
7
9
考慮到事後會線下製作手機殼，所以提供了相對低飽和的顏色 做為底色的選擇。形狀提供了成都地區限定熊
貼圖，還有 AEP
的主要幾何形狀的貼圖外，還有比較基本的形狀讓用戶去做組 合。
COLOR
2.2 Artboard
8
Slogan
設計
缑慚灃乱 嗳缑慚 组 从未喜欢过我
愛
Music is the art of thinking with sounds 希望可以吸引年輕族群使用者參與活動，所以想了一些有趣的
slogan 然後進一步將他做些新穎的設計。
FINISHED PRODUCT
NO.2 中國F1電競賽事官網 2019年度
Client /
上海久事智慧体育有限公司
UI Design / Zhuang Han Jun UX Design / Zhuang Han Jun Graphic Design / Zhuang Han Jun
電競 x 賽車 COLOR
FONT
個是為了2019 年在中國舉辦的 F1電 競賽所製作的。 在提案階段就希望以速度感和高科技感來作為網站製作的方向，其中有不少賽程安
#FFFFFF
#D20000
#E1E1E1
#353333
Aa Aa PingFang SC
排的頁面展示，為了讓使用者方便閱讀和查看，在賽程的排版上也下了不少功夫。 主色用了F1 的紅色來作為凸顯色，為了營造科技的深邃感也不是只用純色，而是在某 些地方用了漸層去提升質感。
Formula1
http://www.f1esports.cn/
WIREFRAME OVERVIEW
button
button
button
0.0 Home Page 1
http://www.f1esports.cn/ F1電競中國冠軍賽
首頁第一個板塊是做大屏的幻燈片，直接引導使用者到報名頁面和活動介紹頁面。 第二個板塊是要讓參賽者可以直接清楚的知道現在比賽流程進行到
裡，而需要知道更
詳細的內容可以在點擊進去二級頁面。 強調色都皆用 F1 紅，用紅黑漸層製造層次感、速度感和科技感，也希望以圖片為主文字為 輔的方式營造電競的刺激感。
1.0 News 1 2
http://www.f1esports.cn/ F1電競中國冠軍賽
1.1 News Details page
1.2 Schedule 1
5
http://www.f1esports.cn/ F1電競中國冠軍賽
1
2.1 User Page - My Rewards
2.0 Log in / Registered and User Page
2.1 User Page - Reward Search Systems
登入頁面簡潔明瞭，用右邊的梯形營造賽車的速度感，而不只是規矩的四邊形。 登入個人頁面之後內容都在一屏內一目瞭然，為了區別和首頁導覽的顏色也從黑色變成 紅黑漸層。 個人賽程成績的顯示方式會和首頁的排版差不多，方便使用者不用再重新適應排版，成 績查詢會預設定位在自己的排名位置，然後右方顯示前三名成績方便查看自己和他們的 距離。
NO.3 Beauty Maker Redesign ICONTYPE
Client /
自主練習
UI Design / Zhuang Han Jun UX Design / Zhuang Han Jun Graphic Design / Zhuang Han Jun
美妝 x 商城
COLOR
FONT
#EDE3D2
#D6C3AE
#614F44
Aa Aa
#222327
#BCBEC0
#F1F1F1
#EDB3B2
PingFang SC
Futura
自主練習美妝產品販賣和教學相關的 app , 主要想要給使用者柔和舒適的感受。 也希望主色調和化妝品有所連結，所以顏色用棕色和粉色去搭配。 卡片式設計讓觀者能更直觀的的到資
，舊版的文章上並不好尋找想要的主題，所以
在焦點推薦上也多上了篩選的機制可以更快速找到想要的文章類型。
WIREFRAME OVERVIEW
2
1
3
4
6
5
log in
Go shopping Add to Cart 主題推薦
0.1 Log in
0.0 Loading
商品分類
我
主題推薦
1.0 Home
7
商品分類
我
2 . 0 To p i c R e c o m m e n d
8
主題推薦
商品分類
3.0 Categories
4.0 Product Details
11
10
9
我
12
Beauty Maker
1
1 1 Pay
Clean
Confirm Add to Cart 主題推薦
4.1 Product Add to Cart
商品分類
5.0 Shopping Cart
我
主題推薦
商品分類
6 . 0 U s e r P r o fi l e
Confirm
主題推薦
商品分類
我
Clean
我
2 . 1 To p i c R e c o m m e n d Filter
2 . 2 To p i c R e c o m m e n d Detail
3.1 Product Filter
Confirm
1
0.0 Loading
是以女性為主的 app ，所以一 開啟畫面就用比較溫柔的顏色 的照片為主，後面的頁面也以 樣調性的圖片去營造整體風格。
3
1.0 Home
卡片式設計把每一區塊更明顯做區隔， 首頁的人氣商品推薦就可以先在瀏覽的 階段加收藏，可以減少使用者還需要點進 去的動作，降低操作產生的疲勞。
原版的 app ，把很多優惠活動平鋪的放在 首頁，導致需要往下拉很長才能找到想要 的模塊內容 ，所以我把優惠內容整理放 在一個區域可以左右滑動方便査看。
主題推薦
商品分類
我
3
2.0 Topic Recommend 在主題推薦頁上加了一個焦點篩選，方便使 用者可以快速找到自己有興趣的推薦文章。
10
11
3
3.0 Categories
12
主題推薦
主題推薦
商品分類
我
商品分類
我
9
6.0 User Profile