R U E N
2020 spring
[ resume & portfolio ]
Port1
>
<
>
1
c
;
0
0
0
;
;
.
/
<
<
0
1
1
1
>
/
0
b
/
:
8
1
<
/
/
0
1
;
0
>
<
/
0
8
/
>
/
1
>
0
1
p
<
.
/
1
0
>
<
1
1
1
>
<
>
1
c
;
0
0
0
1
1
8
8
0
:
8
1
<
/
/
<
/
0
8
/
>
<
/
:
;
1
<
/
-folio 1
>
<
;;
/ / contents. 01
個⼈資料
[ 000 ]
02
響應式網站架設
[ 001 ]
⽜仔服飾電商 - Nudie Jeans 男仕保養品電商 - Upper
03
App設計
攝影交友軟體 - 樂樂LeLe 知識內容軟體 - 空氣閱讀 妝髮預約軟體 - 簡剪
04
其他設計作品
[ 001 ] [ 027 ]
[ 031 ] [ 031 ] [ 037 ] [ 045 ]
[ 055 ]
程群閏 Ruen chunjuncheng@gmail.com 0926305739
新北市
嗨，我是群閏，元智機械系畢業，過去曾任⼯程師與採購⼈員。 平 常喜歡拿著相機記錄著⽣活中遇到的種種，⽬前剛從資策會的 UIUX前端設計師養成班結業，持續的朝⼀個全⽅位的產品⼈邁進 E X P E R I E NC E
2016/07 ~ 2019/01 威誠企業（批發及零售業） 採購⼈員 >供應鏈管理 -曾代表公司取得億東 及宇進等兩⼤進貨通路 >供應商維護 >庫存及運送
2015/07 ~ 2016/01 光騰光電（光電產業） 研發部 助理⼯程師 >燃料電池研發 >繪製3D模型與2D⼯程圖 >設備之組裝及測試
L A N G U A G E S
:640
料資⼈個
[ 000 ] /
I N T E R E S T S
E D U C A C T I O N
2019 / 08 ~ 2020 / 01 資策會 UIUX前端設計師養成班 結業 2019 / 03 ~ 2019 / 04 全曜財經 產品經理訓練計畫 結業 2011 / 09 ~ 2015 / 07 元智⼤學 ⼯程學院 機械⼯程學系 學⼠ 2014 / 06 ~ 2015 / 06 元智⼤學畢業⽣聯合會 活動⻑ >舉辦校園徵才博覽會及多場名⼈講座 >主辦⾸屆畢業野餐與泡泡⾜球競賽， 吸引數百⼈參加 >主辦畢業舞會活動，吸引數百位 畢業⽣共襄盛舉
2013 / 06 ~ 2014 / 06 元智⼤學轉學⽣聯合會 會⻑ >負責轉學⽣招⽣、考試等事宜 >與北部17所⼤學合辦多場營隊活動 >主辦淨灘及社區義⼯活動 >統籌及規劃聖誕節舞會活動， 近1600⼈參加 >任職期間於社團評鑑中獲獎
S K I L L S
X
FCP
HTML
JS
CSS
程式語⾔ A BO U T
php
Illustrator Photoshop
Xd
平⾯影像處理
原型製作
Ae
Final Cut Pro X SolidWorks
影片剪輯
M E
我是群閏，是個樂觀負責的⼈，朋友總是對我說「事情交給你，我很放⼼」；熱愛所有 美的事物，喜歡拍照，喜歡⽇系清新⾵格及寫實派的街頭攝影。⼤學就讀元智⼤學機械 系。期間，曾任社團會⻑，舉辦過⼤⼤⼩⼩的活動，最⾼紀錄單個活動達1600⼈次參 與，募資達30萬；畢業後曾任助理⼯程師，主要負責設備的研發與維護。第⼆份⼯作為 採購⼈員，負責業務⼯作與供應鏈管理。因爲興趣使然，⼀直想從事設計領域的⼯作， 在第⼆份⼯作結束後，2019年春天，我參與了全曜財經舉辦的產品經理訓練計畫，學習 規劃App產品，與原型設計，開始了我的設計之路。 訓練計畫結束後，雖然得到了產品經理必要的思維與規劃能⼒，但仍覺得技術⾯有許多 不⾜，因此參加了資策會所開設的UIUX前端設計師養成班，開始了⻑達5個⽉（570⼩ 時）的進修課程，主修程式語⾔（HTML5 , CSS3 , JavaScript , php7）平⾯繪圖 （Photoshop , illustrator）原型設計（Xd），技術層⾯得到了扎實的提升。 在未來的⽇⼦，期許能發揮我的所⾒所學，秉持著持續學習，堅持上進的⼼，不斷提昇 ⾃⼰；為未來所服務的公司貢獻⼀份⼒量。
模型建置
[ 001 ] / RWD Website / Nudie Jeans
2020.01
IN INSTITUTE FOR INFORMATION INDUSTRY
[ 002 ] / RWD Website / Nudie Jeans
RWD網站規劃與架設
Nudie Jeans 台灣站
[ STORY
/ / 品牌故事
Nudie Jeans 於 2001 年創⽴，由曾任 Lee 的⽜仔褲創意總監 Maria Erixon 與 Palle Stenberg 共同創⽴，僅僅是因為他們太愛丹寧了，想要更獨⽴地去完成對 ⽜仔褲的理想。 以『丹寧養褲⽂化』、『環境永續價值』、『注重⼈道製程』為品牌核⼼理念， 採⽤ 100% 有機棉。把環保永續當作⼰任，更將理念化為更實際的⾏動，⿎勵顧 客減少清洗⽜仔褲次數，更提供免費的⽜仔布修補服務，進⼀步延⻑了顧客⽜仔 褲的使⽤壽命。縮⼩消費循環中的缺⼝，出售經修補的⼆⼿服裝，並回收磨損的 產品等。 Dry Jeans(Raw Jeans)原⾊⽜仔褲是沒有經過⼯廠⽔洗、打磨等處理⼯序的⽜仔 褲，為的就是保留原布料本⾝顏⾊的⽜仔褲，本意是「 關於丹寧的⾚裸真實 ” Naked truth about denim.”」，把⽜仔褲當成⼈體的第⼆層肌膚，達到了「⼀ 旦穿上了就不想脫下」的境界。不管你當初購買時它的樣⼦如何，它都將慢慢的 變成你獨特的⽣活記憶故事。
劃規期前
[ 003 ] / RWD Website / Nudie Jeans /
劃規期前
[ 004 ] / RWD Website / Nudie Jeans /
/ / 市場概況
MARKET ]
從 19 世纪末第⼀條⽜仔褲的誕⽣⾄今已有數百年的歷史「她」曾是歷久不衰服飾 單品，直到 21 世紀初期都還是流⾏的指標，但受到今⽇穿⾐習慣、流⾏趨勢改 變，消費者們更喜愛穿著⾊彩鮮豔寬鬆好活動的褲款、歐美 Leggings 運動⾵。隨 著⽇韓流⾏服飾與平價品如 Uniqlo 與 無印良品 等品牌的崛起，丹寧產品轉為弱 勢，消費者逐漸不會特別去專⾨的⽜仔褲商店選購，因此銷售上也遇到很⼤的瓶 頸。
/ / 困境 − Nudie Jeans ⾝為⼀個新創年輕品牌，對於消費者來說較為陌⽣。 − 台灣市場對於養褲⽂化也較為陌⽣，⽬前也⾮主流市場所關注的議題。 − 品牌堅定的環保永續思維與⼈道⽣產過程，使得⼊⼿單價較⾼，⾯對平價服飾 崛起的市場，相對來說較為不利。
[ DILEMMA
/ / ⼈物誌 Persona
丹寧硬漢
已是⽜仔服飾消費者 注重穿著 喜歡特別 關注環保議題
⽜仔褲的愛好者，平時很注重⾃⼰的穿著。喜歡同中求 異穿出⾃我⾵格。也喜歡⽪製配件；在穿著上留下歲⽉ 的記憶，成為經典。是他所追求的⽣活⾵格。平常很關 ⼼社會環保議題，對於運動活動與服飾也相當關注。
劃規期前
[ 005 ] / RWD Website / Nudie Jeans /
社群活躍-年輕族群
尚未接觸⽜仔服飾消費者 在乎品質 網美網帥 IG重度使⽤者
Instagram的重度使⽤者，時常從社交平台上暸解最新 的潮流與知識，平時最喜歡逛網拍，穿著有⾃⼰的⾵格 ，很在乎服飾的品質。
1.從社群網站上看到很多 明星與網紅穿著時髦 的⽜仔褲 2.看到路⼈的⽜仔服飾 ⾮常有個性
想法與感受 覺得擁有幾件流⾏好看的 ⽜仔褲是很潮的事情！
痛點 1.不知道其他⼈對於該產品的 回饋與評價 2.不喜歡去實體店⾯，害怕被 推銷 3.找不到⿑全的版型與款式
聽到什麼
1.同事與同學都在討論 時下最流⾏的寬版⽜仔 褲 2.網路上時常出現有關 ⽜仔褲穿搭的討論串
做了什麼 ⾝為⼀個忙碌的上班族沒有 時間出⾨購物，因此想要上 網訂購新的⽜仔褲
得到 1.透過⽤⼾回饋功能，消費者能 迅速知道其他購買者的⼼得 2.透過穿搭建議找出最適合⾃⼰ 的褲款 3.款式⿑全，並且可以暸解各品牌 間的差異，包含材質、特⾊等等
劃規期前
看到什麼
[ 006 ] / RWD Website / Nudie Jeans /
/ / 同理⼼地圖
/ / 核⼼路徑圖
使⽤者⽬標
提供者⽬標
＊ 購買適合⾃⼰⾝形的⽜仔褲 ＊ 獲得⽜仔褲商品情報 ＊ 暸解⽜仔褲相關知識 KOL（意⾒領袖） 社群媒體 廣告投放 選物店合作 EDM 搜尋引擎
劃規期前
[ 007 ] / RWD Website / Nudie Jeans /
關鍵字 潮牌 褲⼦ 養褲 卡其褲 ⽜仔褲 直筒褲 外套 環保 ⽜仔穿搭 其他類似品牌
＊ 盈利與銷售 ＊ 推廣⾃我品牌 ＊ 宣傳品牌之核⼼價值
核⼼資訊
價格/規格/新品⽜仔系列圖⽚ 品牌的核⼼價值（環保材質/個性化)
輔助資訊 簡介/產地/材質/保養⽅式
核⼼元素 價格 / 商品名稱 / 商品分類 / 尺⼨ 放⼊購物⾞ / 其他商品 / 收藏 社群分享
分享 結帳⾴⾯ 購物⾞ 相關商品 相關分類 收藏清單
預期⾏為
加⼊官⽅IG/FB 加⼊購物⾞ 填寫會員資訊
＊讓受眾可透過便利的篩選系統 ，了解我們商品由寬到窄的產品線與褲款特⾊， 更可利⽤線上褲款⽐較功能．更進⼀步了解各褲款間的差異。 ＊網站中透過答題互動遊戲讓消費者對 Nudie Jeans 與養褲⽂化有進⼀步認識。 ＊透過網站詳細的介紹，傳達 Nudie Jeans 的核⼼理念 — 環境永續價值與⼈⽂ 關懷，建⽴ Nudie Jeans 的品牌態度。⼈⼈皆可在我們的網站找到最適合⾃⼰ 的⽜仔褲 ！
/ / 技術與⼯具
TOOL]
HTML5 CSS3 JavaScript php7 Photoshop XD Illustrator
劃規期前
＊從市場分析中我們發現我們主要的兩群受眾都擁有幾點共同特質，他們對於 『動』這件事都⾮常的在乎，因此我們企圖⽤全新概念的 The New Raw 在網站 的作為⾸⾴的主畫⾯以吸引他們的⽬光，將丹寧與彈性延伸布料融合，推出符 合受眾⼝味的商品。
[ 008 ] / RWD Website / Nudie Jeans /
[ PLAN
/ / 網站計畫
[ 009 ] / RWD Website / Nudie Jeans /
程流設架
/ / 網站架構
程流設架
[ 010 ] / RWD Website / Nudie Jeans /
/ / 會員UI Flow
[ 011 ] / RWD Website / Nudie Jeans /
程流設架
/ / 帳⼾UI Flow
No
程流設架
———————
Yes /
———————
———————
(
/
)
(
/
)
Yes
No
/
No
——————— 7-11
(
/
)
(
/
)
No
OK Mart
Yes
Google Yes No
———————
No Yes
Yes
(
/
)
(
/
)
/
Yes
No
1-1-a
1-1-c [
1-1-b
1-2-a ]
1-3-a
1-4-a
1-3-a [
]
1-4 [
(
1-4-b
1-1-c (
)
1-4-c (
or )
[
]
]
(
)
1-2-b
1-6-a
1-5-a
1-5-a )
/
(
[ 012 ] / RWD Website / Nudie Jeans /
/ / 購物⾞UI Flow
)
/ / 線框稿⽣成過程
Compare
SEE ALL
Strat Compare
程流設架
[ 013 ] / RWD Website / Nudie Jeans /
程流設架
[ 014 ] / RWD Website / Nudie Jeans /
AE3F9F# 753ABE# 39F89D#
8CEEDF# 080808#
}”ROLOC“{
333333#
主要⾊彩為「野莓紅」、「紙質灰」、 「復古⿈」。配合排版，整體視覺上呈 現在紙張上⼿繪記錄的復古⾵格，加上 以拼貼這種較為隨性的表現形式；就像 ⼀條⽜仔褲，伴隨著每⼀個⼈的⽣活， 產⽣了獨⼀無⼆的變化，都是如此的獨 特！以此建⽴起消費者與品牌的強烈連 結。
15440A#
/ / 網站配⾊
/ / 字體選⽤
程流設架
[ 015 ] / RWD Website / Nudie Jeans /
{“font-family”} Flood Std regular
思源⿊體 Bold 思源⿊體 Medium 思源⿊體 Regular
Palanquin Bold
Palanquin Medium Palanquin Regular
[ 016 ] / RWD Website / Nudie Jeans /
展⽰
⽰展
[ 017 / 018 ] / RWD Website / Nudie Jeans /
場景轉換與動態雲霧效果給⼈輕量、柔軟的感覺；傳達品牌之「動」的理念 橫向捲軸與使⽤者微互動動態裝飾元素
⽰展
[ 019 ] / RWD Website / Nudie Jeans /
場景變換與雲霧特效，展現RAW之輕量，柔軟的感覺
⽰展
[ 020 ] / RWD Website / Nudie Jeans /
⼿寫字體呈現⼀種不羈的獨特品味 ⼿繪⾵格插圖與ICON是本網站的特⾊
期間限定及特殊系列商品會使⽤較為不同的設計⾵格呈現 丹寧相關知識與有獎徵答提升與使⽤者的黏著度
⽰展
[ 021 ] / RWD Website / Nudie Jeans /
場景變換與雲霧特效，展現RAW之輕量，柔軟的感覺
⽰展
[ 022 ] / RWD Website / Nudie Jeans /
褲款⽐較功能快速幫助消費者快速找到適合⾃⼰的版型 獨特的保固與維修服務是我們的特⾊
⽰展
[ 023 ] / RWD Website / Nudie Jeans /
Step4 選擇付款⽅式
Step2 加⼊收藏櫃 Step1 瀏覽商品
[ 024 ] / RWD Website / Nudie Jeans /
Step5 填寫資料與加⼊會員
Step6 訂單成⽴
Step3 瀏覽產品細節與選擇尺⼨
展⽰
⽰展
[ 025 / 026 ] / RWD Website / Nudie Jeans /
[ 027 ] / RWD Website / UPPER
2019.12
IN INSTITUTE FOR INFORMATION INDUSTRY
[ 028 ] / RWD Website / UPPER
⼀⾴式網站切版與設計
男仕保養 UPPER
/ / 這是⼀個以男⼠為消費客群打造的保養品網站 台灣⿊熊是我們的吉祥物 環保、天然是我們的特⾊ 設計⾵格： 使⽤⼀⾴式的排版與簡約⾵格 讓使⽤者可以快速的暸解品牌理念與產品內容 #008080
#F0F0F0
HTML5 CSS3 Photoshop JavaScript XD Illustrator s U t u Abo
[ 029 ] / RWD Website / UPPER
⽰展
[ 030 ] / RWD Website / UPPER /
Lele
樂樂
[ 031 ] / APP Design /
2019.11
IN INSTITUTE FOR INFORMATION INDUSTRY
樂樂
[ 032 ] / APP Design /
Lele
APP規劃與原型繪製
樂樂 LeLe
樂樂
[ 033 ] / APP Design /
嗨，我是本專案的吉祥物，我叫⼩樂。 這是⼀個為攝影愛好者為⽣的⼿機應⽤程式 在這裡你可以曬圖、技術分享交流、還可以呼朋引伴出團呢！
Lele
設計上主要使⽤的⾊彩： #26547C #26547C
對話式註冊流程 提升親切感， 不再是個冷冰冰的App
所使⽤到的⼯具： Photoshop XD Illustrator
客製化選項 給你第⼀⼿你想要的資訊
攝影天氣少不了 ⽇落、⽉相通通有 今晚，要不要 陪我去看流星⾬呢
呼朋引伴，交流交流 旅⾏不再寂寞， 攝影不再孤單！
[ 034 ] / APP Design / Lele /
樂樂
朋友圈功能 來看看最近朋友 都曬了什麼新照⽚吧
⽰展
最近⼈們都在討論什麼呢？ 有沒有什麼新的秘境可以探險？ 加⼊現在⼤家都在討論的話題圈 以圖會友吧！
樂樂
Lele /
⽰展
[ 035 / 036 ] / APP Design /
讀閱氣空
CMONEY
2019.03 練訓理經品產經財曜 全
[ 037 ] / APP Design /
讀閱氣空
[ 038 ] / APP Design /
APP規劃與原型繪製
空氣閱讀
/
劃規期前 讀閱氣空
[ 039 ] / APP Design /
/
劃規期前 讀閱氣空
[ 040 ] / APP Design /
標籤選擇客製化 (可跳過)
仿照交友軟體的配 對功能，左滑跳過 右滑觀看；讓讀者 挑選⾃⼰喜歡的⽂ 章；並於後台⾃動 建⽴⽤⼾喜好標籤
/
⽰展 讀閱氣空
[ 041 ] / APP Design /
主畫⾯利⽤讀者標 籤，智能演算推送 有趣的內容給讀 者；讀者也可以很 ⽅便的更改及管理 推送標籤
動態牆顯⽰⽤⼾所 訂閱之內容
[ 042 ] / APP Design /
⽰展 讀閱氣空
每⽇⼀書，提供每⽇ ⼀本的書摘，讓讀者 每天花⼀點時間閱讀 就可以領略⼀本書的 精華，養成⽤⼾每天 打開App的習慣，進 ⽽提⾼⽤⼾留存率
好宣傳 好懂我
透過後台所收集的⽤⼾標 籤，⽂章會更精準地到達受 眾⼿中；發⽂者可以針對⽤ ⼾的興趣推播對應內容
依照⽤⼾⾃選興趣及標籤的 ⽅式提供⽤⼾想看的內容， 並且使⽤越久，越暸解你！
/
獨特問答題，增加⽤ ⼾閱讀後的記憶，⽽ 不會讀過即忘！倘若 答對則有點數及成就 獎勵，點數可以換取 或折抵合作的商品， 如：⼆⼿書、雜誌等
好閱讀
提供每⽇⼀書的書摘導讀及 成就系統，培養⽤⼾固定閱 讀的習慣
好選擇
相對Line@2.0，提供對企業 與個⼈⽤⼾，體驗更好，成 本較低的推送平台
獨特價值
內 容 來 源 ？
初期 (萬事起頭難)
1. 使⽤公司⾃產的⽂章，同時向⼩眾新聞 平台（如太報、insight洞⾒、Medium 作家）邀稿 2. 撰寫每⽇⼀書的書摘，吸引使⽤者閱讀 3. 社群流量累積⽤⼾
中期 (漸趨穩定)
吸收獨⽴作家、或是各領域的專家使⽤本 平台，建⽴帳號，分享⾃⼰所創作的內 容，利⽤本平台累積⾃⼰的知名度，甚⾄ 打造個⼈品牌！
/
展發 讀閱氣空
[ 043 ] / APP Design /
後期 (願景)
成為眾多撰⽂者的⼤本營，他們可以利⽤ 此平台推廣，⽽讀者可以依照⾃⼰的興 趣、喜好，接收各種知識
構架⽤應 讀閱氣空
[ 044 ] / APP Design / /
推播 個⼈化
標籤
好的內容
反饋
應⽤架構
使⽤原型製作⼯具
剪簡
CMONEY
2019.02 練訓理經品產經財曜 全
[ 045 ] / APP Design /
剪簡
[ 046 ] / APP Design /
簡剪 Simple Cut APP規劃與原型繪製
/
劃規期前 剪簡
[ 047 ] / APP Design /
/
劃規期前 剪簡
[ 048 ] / APP Design /
以下使⽤原型製作⼯具
歡迎畫⾯
[ 049 ] / APP Design /
/
⽰展 剪簡
歡迎畫⾯
歡迎畫⾯
歡迎畫⾯
/
⽰展 剪簡
[ 050 ] / APP Design /
基礎個⼈化設置 （⼿機號碼）
基礎個⼈化設置 （性別）
基礎個⼈化設置 （臉型）
基礎個⼈化設置 （⽬前髮⻑）
主畫⾯ 1.找店家 2.找設計師 3.到府服務 4.發起需求 5.我的預約 6.我的收藏 7.點數及商城 8.設計師專區 可以透過多種⽅式 搜尋店家： 1.下拉式選單 2.關鍵字搜尋 3.地圖
/
⽰展 剪簡
[ 051 ] / APP Design /
關於店家涵蓋了基本 資訊，店鋪位置，聯 絡⽅式，店鋪及設計 師個⼈評分等顧客所 關⼼的資訊
可以迅速得知該店 有哪些設計師
不⽤再打電話⼀⼀ 詢問，先選取所需 要的服務標籤，在 觀看⾏事曆，所有 可以預約的⽇期⼀ 眼便知！
預計花費時間及 清楚的時間表
⽰展 剪簡
/
設計師可透過「上 傳圖⽚」及「與 Instagram連動」 的⽅式曬曬⾃⼰的 作品集！顧客不⽤ 再花很多時間尋找 設計師的作品，也 可迅速找到適合⾃ ⼰⾵格的設計師！
[ 052 ] / APP Design /
想要預約⼀位設計 師時，所可能需要 的資訊都可以在這 裡看到！
可以上傳⾃⼰的 髮型近況，供設 計師線上討論及 評估；「發起需 求」功能可以被 動地讓設計師找 到⾃⼰
到府服務功能
/
⽰展 剪簡
[ 053 ] / APP Design /
設計師看到顧客的 需求後可以將⾃⼰ 的資訊推送給顧 客，找客⼈好容 易！⽽顧客則可以 照⾃⼰的喜好需求 來選擇⾃⼰喜愛的 設計師，不怕踩到 雷！ 商城 透過這個App來預 約提供回饋點數， 可在商城中使⽤
[ 054 ] / Others
- Others -
其他作品
>>>
化美端前庫料資
[ 055 ] / Others /
HTML5 CSS3 JavaScript php7
化 美端前庫 料資
[ 056 ] / Others /
>>> HTML5 CSS3 JavaScript php7
計設單菜
[ 057 ] / Others /
Illustrator
計設覺視站網
[ 057 ] / Others / RWD
Photoshop
R U E N