陳 潤彥 Jun Yen Chen
UI / UX Designer
具跨領域專業經驗，UI/UX 設計師、行銷企劃PM、日式遊戲插畫。
1987 / 09 / 10
Taipei ，TW
cjy@cjyfit.com
龍華科技大學
電子工程研究所 - 碩士
2010.09.10 - 2012.6.30
龍華科技大學
多媒體與遊戲發展科學系 - 學士
2006.9.25 - 2010.6.25
滬江高中
廣告設計科
2003.9.25 - 2006.6.25
峰馳科技有限公司，2023 年11 月 - 至今
▪ 資深UI/UX設計
1、直播產品相關 UI 設計
2、製作AfterEffect並轉換粒子特效其轉換運用方式
3、轉換結構在遇不同框架情況下輸出動畫至其結構上執行
3、研究並運用Lottiefiles(Jason)、SVGA、APNG、RIVE在高複雜結構縮短其檔案大小方式
3、製作直播相關動畫及特效
巨兆科技股份有限公司，2022 年 7 月 - 2023 年 11 月
▪ 設計總監
1、監製h5及APP體育產品設計及流程改善方式。
2、監製針對區域賽事製作對應圖示。
3、針對聊天IM提出流程方案及預設錯誤行判斷。
4、指導公司企畫及設計團隊軟體應用及轉換方式。
5、協助其他專案團隊優化各項產品內容及對瑩流程
6、RIVE動態研究及製作。
安轉不動產區塊鏈科技股份有限公司，2022 年 1 月 - 2022年 7 月
▪ 設計總監
1、檢視產品流程及改善方式提出。
2、以使用者體驗及房產需求出發提出設計解決方案。
3、依據現行可行性進行WEB設計及Overflow制定設計稿流程。
4、製作動態操作方式及滑鼠觸碰事件規劃。
5、協助尋找對應框架之套件(React、Bootstrap)。
英屬維京群島商耐思財富投資有限公司，2019 年 7 月 - 2022年 1月
▪ Consultant - 資深顧問 UI/UX 專員
1、制定產品 Wireframe 和 pototype 流程。
2、規劃設計文件檔及範圍設定(sketch)
3、After Effects製作SVGA、Lottiefiles動態圖檔。
4、使用 Adobe XD 製作並錄製 UX 操作方式及動態切樣式。
5、跨部門溝通及討論技術方向及導入可行性。
6、改善並設計沙巴官網介面及流程走向。
孕龍科技股份有限公司，2015 年 7 月 - 2019 年 7 月
▪ Mobile App UI/UX 設計師
1、主要負責APP相關開發及硬體介面設計支援。
2、設計含蓋 介面規劃、ICON設計及UX規劃。
3、設計專案為社群商店運用之APP及智慧家電之硬體結合。
所開發APP產品。
1、JONI 社群電商
2、BrookBox 智慧家電控制器
3、Ras1ution 方向盤控制
額外活動及學習經歷
▪ 2015年台北國際發明展參展，動態訊息專利。
▪ Fukushima Game Jam (福島Game Jam) - 29小時獨立開發活動。
▪ KADOKAWA 日本角川教育機構 - カードゲームイラスト 。
▪ OCA 大阪 コミュニケーションアート専門学校見習。
▪ 2018年4月台北國際婦幼展 。
技術能力
UI / UX
角色設計
社群規劃
▪ 扁平化設計。
▪ 以向量設計居多 (Illustrator、Sketch)
▪ SVG出圖
▪ SVGA動態規劃及製作
▪ Sketch、invision、Adobe XD
▪ 主要風格為日式。
▪ 畫風能依案件做變化。
▪ 11種線畫處理。
▪ 上色以賽璐璐及水彩上色為主。
▪ 繪圖以Clip Studio為主(可轉PSD)
平面設計
WEB DESIGN
商品規劃
▪ 設計以扁平化設計為主。
▪ 運用軟體為 (Illustrator、Photoshop)
▪ 計劃書、文宣、平面設計等。
▪ 設計以Moblie 為主。
▪ 能規劃RWD網頁、轉址頁。
▪ Banner設計。
▪ GA流量、SEO關鍵字、UX規劃。
.contentarea .c .a:hover {
color: #fc3a63; position: relative; top: 5px; left: 5px;
}
ビーナスイレブンびびっど
維納斯十一人！VIVID，參與其人物繪製及活動相關衣服設計。
Learn more
キズナストライカー！
羈絆前鋒！日本 Amazing 旗下智慧型手機遊戲，主要工作為線稿及上色。
Learn more
Magical Days
日本 CYBIRD 公司所製的女性向遊戲，專案內主要負責線畫處理、Live 2D等。
Learn more
.contentarea .c .box3 {
width: 620px; min-height: 450px; padding: 5px; position: relative; border: 1px solid rgba(0,0,0,0.1); border-radius: 20px; background: white; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
.contentarea .c .pic {
max-width: 950px; max-height: 1050px; overflow: hidden;
}
.contentarea .c .pic img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pic img:hover {
transform: scale(1.1,1.1); filter: blur(0px);
}
.contentarea .c .pic {
display: block; text-align: center;
}
.contentarea .c .pp:hover {
filter: opacity(0%);
}
.contentarea .c .a:hover {
position: relative; top: 5px; left: 5px;
}
- 動畫展演相關
- 軟體操作為Rive及AfterEffect
- 輸出並測試過 SVGA、JSON、Riv、Webp、Apng
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
直播 - PK動畫開場
Aftereffect JSON輸出
直播 - 隨機配對
Aftereffect JSON輸出
動態 - 愛心點擊
Aftereffect JSON輸出
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.contentarea .c .a:hover {
position: relative; top: 5px; left: 5px;
}
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.contentarea .c .a:hover {
position: relative; top: 5px; left: 5px;
}
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.contentarea .c .a:hover {
position: relative; top: 5px; left: 5px;
}
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.contentarea .c .a:hover {
position: relative; top: 5px; left: 5px;
}
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.contentarea .c .a:hover {
position: relative; top: 5px; left: 5px;
}
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.contentarea .c .a:hover {
position: relative; top: 5px; left: 5px;
}
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
JONI SOCIAL CIRCLE
JONI 生活圈
JONI 生活圈
JONI 讓使用者隨時隨地都能簡單迅速地傳送免費訊息給好友，除了群組聊天功能，還有地圖引導，掌握各方訊息。
交易機制
透過生活圈輕鬆拍賣，讓使用者隨心所欲的出清拍賣，也能夠你隨時隨地尋寶購物。
.contentarea .c .a:hover {
position: relative; top: 5px; left: 5px;
}
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.contentarea .c .pi {
width: 283px; height: 283px; border-radius: 5px; overflow: hidden;
}
.contentarea .c .pi img {
transform: scale(1,1); transition: all 0.7s ease-out;
}
.contentarea .c .pi img:hover {
transform: scale(1.1,1.1);
}
.contentarea .c .pi {
display: block; text-align: center;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.contentarea .c .a:hover {
color: #fc3a63; position: relative; top: 5px; left: 5px;
}
去哪鵝
設計及編排，Google Store上架圖設計。
全民財經詞彙
後續Banner更新、Icon設計等。
.contentarea .c .box:before {
content: ''; width: 110%; left: 0; height: 111%; z-index: -1; position: absolute; border-radius: 20px; border: 1px solid rgba(0,0,0, 0.1); background: rgba(0, 0, 0, 0.0); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -webkit-transform: translate(-5%,-5%);
}
.contentarea .c .box:after {
content: ''; position: absolute; top: -25px; left: 30%; width: 130px; height: 40px; background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
.contentarea .c .box9 {
width: 400px; min-height: 310px; padding: 10px; position: relative; border: 1px solid rgba(0,0,0,0.1); border-radius: 20px; background: white; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}