Graphic User Interface Visual Identity
陳柏勳 +886 988726301 spirits8246@gmail.com www.shunchendesign.com
學歷 Education 國立臺北科技大學 創新設計研究所 設計碩士 Design Master National Taipei University of Technology Innovation Design Institute
國立臺灣師範大學 圖文傳播系 工學學士 Bechelor of Engineering National Taiwan Normal University Graphic Arts & Communications
工作經驗 Work Experience 自由接案 / 個人 Freelance / Personal 平面設計, 視覺辨識設計 Graphic Design, Visual Identity Design
實習生 / 砌禾數位動畫股份有限公司 Intern / Cheer Digiart 電影特效合成, 衣物材質模擬 After Effect Synthesis, nClouth Simulation
專案經驗 Project Experience 2017 / 國立臺北科技大學 圖書館指標設計案 NTUT Library Sinage System Design
2017 / 臺北世界大學運動會 商品設計合作案 Taipei Universiade Commodity Design
2016 / 協助傳統產業技術開發計畫 東州能源科技 CITD Tung-Chou Energy Technology
學校社團 School Club 2014 - 15 / 國立臺灣師範大學 圖文傳播系學會 會長 Director of Student Association NTNU Department of Graphic Arts & Communication
2016 / 國立臺灣師範大學 年度社團評鑑 評審 Juror NTNU Annual Club Evaluation
2016 / 國立臺灣師範大學 圖文傳播系畢業展 總籌 Coordinator of Graduation Exhibition NTNU Department of Graphic Arts & Communication
證照 License Google 基礎數位行銷認證 Google Basic Digital Marketing Certification
Adobe Photoshop ACA 國際認證 ACA Visual Communication Using Adobe Photoshop
國家技術士證 廣告設計丙級 Level C Technician for Advertising Design
技能 Skills 軟體技能 Software Skills
研究和設計技能 Research & Design Skills
精通
中等
尚可
設計
研究
Adobe Illustrator Adobe Photoshop Adobe Lightroom Final Cut Pro X
Adobe InDesign Sketch After Effect
Invision Dreamwaver
視覺化 / Visualization
觀察研究 / Observation Method
版面編排 / Typesetting
訪談研究 / Interview Method
靜態視覺稿 / Mockup
量化分析 / Quantitative Analysis
原型製作 / Prototype
目錄 Contents
01 捷運月台流量查詢App
06
/ Platform Flow
02 配色比例方案App / Color Ratio
03 臺北科大圖書館指標系統設計
16
26
/ NTUT Library Signage Design
04 深圳速八環保有限公司視覺識別設計
40
/ Shenzhen Supar Environmental Protection Corporate Identity Design
05 臺師大圖傳系105級畢業展覽 傳染圖鏡
48
/ NTNU Department of GAC ‘16 Graduation Exhibition Narration for Vision
06 視覺海報設計 / Visual Poster Design
56
01
捷運月台流量查詢App / Platform Flow
輕鬆掌握捷運月台人流 Easy to know flow of metro platform.
台北捷運月台常會有大量的人潮， 乘客可能因為冗長的隊伍，而無法順利進入車廂。 Platform Flow讓使用者能夠在第一時間檢視月台狀況， 並且挑選人數較少的車廂以避開人潮。 There often have a lot of people on the platform in Taipei Metro. Passengers may not be able to get on because of long line.Users can look up the situation of platform on “Platform Flow”, and line up the line which is less.
Ai
Sk
專案時間 : 2017.10 - 12 專案類型 : UI Design 專案內容：觀察研究, 訪談分析, 用戶旅程地圖, Wireframe, 介面設計Mockup
06
SHUN CHEN PORTFOLIO
07
01
捷運月台流量查詢App / Platform Flow
觀察研究 隊伍過長造成情況:
Such a long line:
1. 乘客常常無法在時間內進入車廂。
1. Passenger usually can’t enter the compartment.
2. 下電扶梯的行人動線受到阻擋。
2. Downstairs traffic flow blocked.
其中有一列隊伍特別少人排的時候，
If there have line of less people,
後來的人會選擇較長的隊伍，而非較少人的隊伍。
people who come later will choose longer line.
這樣的狀況讓隊伍無法達到預估的容載量。
The queue can’t hold so many people in this situation.
63% 08
SHUN CHEN PORTFOLIO
訪談分析 1. 乘客下手扶梯後就近排隊
1. Passengers usually line up near the escalator.
2. 如果知道人潮較少的區域，願意前往排隊
2. Passengers willing to go to the line which has less people if they know
3. 不確定沒人排的隊伍是為什麼， 所以選擇排多人的
3. It can’t sure about why the line has no people, so choose the long line.
痛點
排隊 人潮過多
Such a long line
無法確定 人少區域
Can’t know the area
排隊動線 缺乏引導
Lack of line flow’s lead
which has less people
09
01
捷運月台流量查詢App / Platform Flow
用戶旅程地圖
Albert 男 / 上班族 / 28歲
每日搭捷運通勤
“每次排隊隊伍都好長啊！常常要等下一班， 到底要排哪節車廂人會比較少啊？” 車廂排隊人流
T
T
出門前
前往捷運站
查詢歷史流量
查詢各車門
選擇通往
隊伍人流
較少人區域的手扶梯
排隊隊伍狀況
T
查詢 月台狀況
刷票入站
T 前往人少隊伍 排隊
10
順利進入車廂
接觸點
SHUN CHEN PORTFOLIO
Wireframe
點擊
X
X
X
X
X
X
X
X
X
X
XX XXXX XX
滾動式 選單
點擊 從下方彈出
XX XXXX XX
XX XXXX
XX%
XX%
XX% 每個車門 排隊狀況
XX%
點擊
手扶梯
XX%
XX%
XX%
XX%
顏色變化 單周每日
XX% XX% 切換 左手模式
動態水波 顏色變化
點擊 夜間模式
11
01
捷運月台流量查詢App / Platform Flow
各色路線，一手掌握 使用者能夠輕易從顏色分辨不同路線， 以滾動式選單選擇站別，方便使用者單手操作。 Users can distinguish lines of metro easily by different color. And it is conveniently choose station in one hand by using scrolling menu.
R
BL 板南
G
O 中和新蘆
BR 桃園機場
12
SHUN CHEN PORTFOLIO
人潮在哪，一目瞭然
100%
使用者能即時查詢月台上的人流狀況， 並得知月台三個區塊的資料。 查詢不同路線的車站時，介面會變成該路線的識別顏色。 Users can search flow of plateform immediatily, and get three areas data of platform.
1%
Interface will change color which is identification of metro line when users search different line’s station.
13
01
捷運月台流量查詢App / Platform Flow
現在，過去，無所不知 為了讓使用者更精確的知道排隊現況， 我們將每列隊伍的狀況都顯示出來，提供使用者參考。 並且可以透過歷史資料查詢，得知每日平均人流的資料。 To know more detail of queue on platform, “Platform Flow” show the situation of every line. User also can know the average of daily flow by searching history.
排隊現況
每日平均人流
Line 2 Line 3
1% Mon
14
Tue
Wed
Thr
Fri
Sat
Sun
100% Empty
Full
SHUN CHEN PORTFOLIO
左手右手，黑夜白天 使用者可以調整介面，以符合不同的慣用手。
Users can setting interface to follow
也可以在下班眼睛疲勞時，切換成夜間模式，
your habitual hand.It also can be
讓眼睛閱覽更加舒適。
switch to dark mode when eyes fatigue, which can let eyes comfortable.
15
02
配色比例方案App / Color Ratio
COLOR RATIO COLOR RATIO提供使用者最佳的色彩比例建議 Provide the best suggestion of color ratio.
許多平面設計的初學者常常無法做出配色良好的作品， 那或許就是顏色比例出了問題。 COLOR RATIO除了提供使用者配色建議外， 還能計算出配色的最佳比例。 So many graphic beginner can’t make great color works. It is perhapes the problem about ratio. COLOR RATIO not only provide the suggestion of color matching,but also calculate the best ratio.
Ai
Sk
專案時間 : 2018.09 - 11 專案類型 : UI Design 專案內容：訪談分析, Persona, 功能架構圖, Ｗireframe, 介面設計Mockup
16
SHUN CHEN PORTFOLIO
17
02
配色比例方案App / Color Ratio
訪談分析 1. 配色常常靠感覺，蠻花時間的。
1. It’s time consuming to choose color on no reference.
2. 用參考配色還是很怪，可能是畫面比例不對。
2. It may be a problem of ratio when works still strange
3. 會使用參考配色，不過應用上還是得靠經驗。
after use reference color. 3. It need have experience on pratice.
痛點
配色測試 花很多時間
18
別人的顏色 自己用也很怪
色彩應用 需靠經驗
Color testing is
It’s strange of color
Color application need
time consuming.
even using reference color.
accumulating experience.
SHUN CHEN PORTFOLIO
Persona
Darlene 女 / 平面設計師 / 25歲
工作經歷年1年, 常會看設計圖書和網站, 喜歡攝影。
“每次要想新的配色就好頭痛，網路上分享的作品都好美， 為什麼我做起來就好像哪裡怪怪的？”
機會點 配色組合 建議
分析 色彩比例
應用 方案
Suggestion of
Analysis of
Cases of applications
color matching
color ratio
19
02
配色比例方案App / Color Ratio
功能架構圖
OPEN APP WELCOME PAGE VISITOR BEGIN
MEMBER LOGIN HOME
HOME
CHOOSE COLOR
COLOR EXPLORE
CHOOSE COLOR SAMPLE
PHOTO GALLERY
TAKE PICTURE
COLOR ANALYSIS
COLOR REPORT APPROPRIATE SUGGESTION
20
PROFILE HISTORY
SHUN CHEN PORTFOLIO
Wireframe Explore Color Info
Designer
COLOR RATIO
History
Collection
Explore
顏色組合 預視 點擊 點擊
Login Visitor Begin
固定工具列
點擊
Choose Color
Choose Color
Color Report
Color Report Color
點擊
Suggestion
CMYK / XXX, XXX, XXX
Suggestion
Poster
sRGB / XXX, XXX, XXX
#XXXXXX
CMYK / XXX, XXX, XXX
Color Code
點擊
Color Ratio
+ ADD
Web Page
#XXXXXX
X
X
sRGB R
XXX
G
XXX
B
XXX
#XXXXXX
C
XXX
#XXXXXX
M
XXX
Y
XXX
K
XXX
Color Code sRGB / XXX, XXX, XXX CMYK / XXX, XXX, XXX
CMYK
點擊
Color
sRGB / XXX, XXX, XXX
#XXXXXX
Analyze
點擊
Mobile UI
sRGB / XXX, XXX, XXX CMYK / XXX, XXX, XXX
Choose
+ ADD 右向左 彈出
#XXXXXX
Profile
Profile Info
History
Collection
Info
History
Photo Analyze Collection
Analyze
點擊
點擊
21
02
配色比例方案App / Color Ratio
完美色彩比例，實用設計建議 COLOR RATIO提供使用者色彩組合分析，
Color Ratio provide users a color report to improve
計算出最佳的色彩比例，
their color schemes. System will calculate the best
並提出海報、網站、手機介面等設計建議。
ratio According to the data, it will provide a suggestion of design application.
22
SHUN CHEN PORTFOLIO
#B64139
sRGB / 182, 65, 57 CMYK / 35, 87, 81, 0
選色專業，配色自由 使用者藉由輸入色碼、sRGB和CMYK數值以取得需要的顏色。 使用者能夠根據需求挑選2-5個有彩色進行分析，並取得色彩報告。 In this function, users can enter color code, value of sRGB or CMYK to choose colors which they need. Accroding to demand, users can analyze two to five color which they choose and get report.
23
02
配色比例方案App / Color Ratio
分析、分享，一拍即合。
24
使用者可以拍下他們發現的美麗風景或作品，並進行
If users discover beautiful landscape or works.
分析。他們不僅能夠將這些結果記錄下來，也能夠分
They can take a shot and analyze. Users not only can
享到網路上
record result, but also can share on internet.
SHUN CHEN PORTFOLIO
Login
Visitor Begin
你的分析，我們幫你記錄 如果你註冊了會員，這個應用程式會將所有您分析過的報告，儲存到你的個人頁面。 當然，它也提供不想註冊的使用者可以透過「訪客開始」來使用部分功能。
This app will record all of your analysis reports on your profile,if you sign up. And it also suports “visitor begin” for users who don’t want register to use partial function.
25
03
臺北科大圖書館指標系統設計 / NTUT Library Signage Design
臺北科技大學圖書館指標設計 National Taipei University of Technology Library
我們的團隊在2017年的10月接下了指標系統設計的工作， 並經歷三個月設計期、兩個月施工期後完成。 指標系統設計是一項繁複的設計工作， 我們需要與室內設計團隊溝通，暸解現場的限制， 我們查找相關數據資料並進行標示的易讀性測試， 我們希望每一項細節都須符合使用者閱讀需求與習慣。 最終我們成功完成了這項任務，並且很開心能讓圖書館擁有更完善的指標系統。
Our team took the design project of signage system in October. We completed after three-month design stage and two-month construction stage. Signage system design is a complex work. We need to clarify restrictions on site by discuss with interior design team. We search related data and test legibility of signage. We hope every detail would meet users needs and habits of reading. Finally, we successfully completed this task, and it’s glad to design better signage system for library.
Ai
Ps
SKU
專案時間：2017.10 - 2018.02 專案類型：Signage Design 專案成員：陳柏勳 邱欣怡 游瓊怡 黃思遠 詹捷夫 張乃懿 曾郁芸 負責事項：主形象牆設計, 入館導覽設計, 樓層導覽設計, 服務區牌設計
26
SHUN CHEN PORTFOLIO
27
03
臺北科大圖書館指標系統設計 / NTUT Library Signage Design
舊有問題 欠缺樓層導覽 / Lack of floor navigation
流向指標不明確 / Uncertain wayfinding
書籍分類標示不清楚 / Unclear classification
使用者界定
主要使用者：大學生 次要使用者：教職員, 校外人士 Main users : University student Minor users：Faculty, Off-campus
28
尋找 書籍
閱讀 自習
影音 學習
借用 廁所
Finding book
Reeding
Digital learning
Using toilet
SHUN CHEN PORTFOLIO
設計過程
分析 現況
使用者 界定
資料 蒐集
主視覺 設計
應用物 設計
易讀性 測試
完工
驗收
施工
施工圖 修正
施作 討論
設計 修正
1. 易讀性測試 2. 色票選色
1 2
3
3. 廠商討論
29
03
臺北科大圖書館指標系統設計 / NTUT Library Signage Design
標準字體｜標準色 -1 Flo or
1 Flo o r
C /6
C /1 6 M /9 3
微軟正黑體
指 標 系統設計
M /2 9
Y/9 0 K /0
Y/6 2 K /0
2 Flo o r
3 Flo o r
C /8 1 M /2 9
C /8 0 M /3 7
Y/8 0 K /0
Y/8
Cen tu r y G othic
Signage System Design
符號設計
01
30
K /0
SHUN CHEN PORTFOLIO
入館導覽 在圖書館入口處，我們設計了樓層導覽，使用者可以先搜尋各樓層的設施。 我們經過多次的測試，找出使用者舒適的視線高度與角度， 讓樓層導覽設置的位置是能夠更快速且清晰的瀏覽。 We designed the floor navigation at libary entrance. Users can search facilities of each floor on navigation before they enter. In order to browse faster and clearer for navigation, we surveied the most comfortable height and angle for users after multiple tests.
31
03
臺北科大圖書館指標系統設計 / NTUT Library Signage Design
1. 2F樓層導覽＿各樓層簡介 1
2 3
32
2. 2F樓層導覽＿2F平面圖 3. 1F樓層導覽
SHUN CHEN PORTFOLIO
樓層平面導覽 各樓層的樓梯間皆有樓層平面圖， 我們以色塊做分區標示，讓使用者可以更清楚的知道分區位置。 此外，在上面也能看到清楚的設施位置，以及其他樓層的簡介。 There have floor plans at each staircases. Inorder to know each area’s position clearly, we ditingushed by color block. In addition, you can found the position of facilities and navigation of other floors on it.
平面圖分區色塊
各樓層簡介 其他樓層 灰色
目前樓層
目前樓層
滿版顏色
亮白色
其他樓層 外框顏色
33
03
臺北科大圖書館指標系統設計 / NTUT Library Signage Design
34
1
1. 1F樓流向指標
2
2. 2F區域標示
SHUN CHEN PORTFOLIO
懸掛式 流向指標｜區域標示 我們設計了懸掛式的區域標示和流向指標。
We designed hanging sign for area and wayfinding.
白底黑字為區域標示，黑底白字為流向指標。
Black text white background is area sign,
我們也加入各樓層的顏色作為辨識的依據。
White text black background is wayfinding sign. We also add floor’s color as a basis for identification.
Detail of Area Sign design
Detail of Wayfinding Sign design
35
03
臺北科大圖書館指標系統設計 / NTUT Library Signage Design
壁貼式流向指標｜書籍分類牌 在無法使用懸掛式標示的地方，我們採用壁貼式標示。 另外，我們也在書架上設計了書籍分類的標示牌。 We used wall sticker sign at where can’t hang sign. In addition, we design the book classfication sign on book shelf.
36
SHUN CHEN PORTFOLIO
1. 1F雜誌分類牌 1
2
2. 1F廁所壁貼式流向指標
3
3. 2F壁貼式流向指標
37
03
臺北科大圖書館指標系統設計 / NTUT Library Signage Design
主形象牆 主形象牆的設計概念為一本書， 我們在書籍書腰的部分帶入日治時期的校徽元素， 讓新修建的圖書館留有歷史的印記。 Design concept of library image wall is a book. To leave a history impression for new library, we put a japanese colonial period school badge in tummy band.
38
SHUN CHEN PORTFOLIO
服務區牌 我們在提供服務的區域做了特別的設計，以桌牌的方式製作， 並帶入樓層顏色的色帶作為辨識。 We have a spcial design at library service area. It’s a area sign which made with table-board. And we add floor’s color bar as identification.
1. 2F壁貼式流向指標 1
2
2. 1F書籍分類牌
3
3. 2F雜誌分類牌
39
04
深圳速八環保有限公司視覺識別設計 / Shenzhen Supar Environmental Protection Corporate Identity Design
深圳速八環保有限公司視覺識別設計 Shenzhen Supar Environmental Protection Corporate Identity Design
速八環保是一間致力於防治空氣污染的環保公司， 他們主要提供中國地區商業空間的油煙淨化設備租賃服務。 Supar environmental protection committed to prevention air pollution. They provide rental service of fume purification equipment for commercial spacein China.
Ai
Ps
專案時間：2017.10 - 2018.02 專案類型：Corporate Identity Design 專案內容：識別規範, 名片設計, ＤＭ設計
40
SHUN CHEN PORTFOLIO
41
04
深圳速八環保有限公司視覺識別設計 / Shenzhen Supar Environmental Protection Corporate Identity Design
商標修正 ｜標準字
0.2a
3a
a
a 6a
a
42
5.5a
a
2.5a
2.5a
0.5a a
0.5a a a
a
SHUN CHEN PORTFOLIO
標準色｜組合規範
C 76
M9
R 48
G 159
#909F3F
Y 100 B 63
K0
C 72
M 22
R 56
G 156
Y6
K0
B 205
#389CCD
優先 使用
43
04
44
深圳速八環保有限公司視覺識別設計 / Shenzhen Supar Environmental Protection Corporate Identity Design
SHUN CHEN PORTFOLIO
1. CI設計示意圖 1
2 3
2. 名片設計 3. 合約夾設計
45
04
46
深圳速八環保有限公司視覺識別設計 / Shenzhen Supar Environmental Protection Corporate Identity Design
SHUN CHEN PORTFOLIO
1. 看板廣告 1
2 3
2. 油煙淨化器DM 3. 空氣清淨機DM
47
05
臺師大圖傳系105級畢業展覽 傳染圖鏡 / NTNU Department of GAC ‘16 Graduation Exhibition Narration for Vision
臺師大圖傳系105級畢業展覽 傳染圖鏡 NTNU Department of GAC ‘16 Graduation Exhibition Narration for Vision
這是我們在大學籌辦的最後一場展覽， 我們希望創作者將自己的創意透過這個“途徑”展現出來， 並將對設計激盪的熱情“傳染”給大家。 This is the last exhibition which planned by us before graduation. We hope creators can show thier creation on this approach, and contagious passion of design for everyone.
Ai
Ps
專案時間：2015.11 - 2016.06 專案類型：Visual Design 專案成員：陳柏勳 黃愛玲 鄭芸 嚴君儒 陳孟鍇 負責事項：總籌, 主視覺設計, 展場規劃, 影片拍製
48
SHUN CHEN PORTFOLIO
49
05
臺師大圖傳系105級畢業展覽 傳染圖鏡 / NTNU Department of GAC ‘16 Graduation Exhibition Narration for Vision
視覺圖像
50
我們凍結水在一個空間內翻滾的動態，
We freeze the motion of water which roll in a space.
企圖抓住它的變化作為視覺呈現。
And catch its variety to be main vision.
SHUN CHEN PORTFOLIO
標準字｜標準色
C98 M91 Y47 K13
C98 M91 Y47 K13
C0 M0 Y0 K0
R27 G51 B93
R27 G51 B93
R255 G255 B255
#1B335D
#1B335D
#FFFFFF
51
05
臺師大圖傳系105級畢業展覽 傳染圖鏡 / NTNU Department of GAC ‘16 Graduation Exhibition Narration for Vision
尺寸：841 x 594 mm 紙張：日本美禾紙 高白 286G 後加工：局部膜
52
SHUN CHEN PORTFOLIO
1. 主視覺海報設計 1
2 3
2. VI 設計 3. VI 設計
53
05
臺師大圖傳系105級畢業展覽 傳染圖鏡 / NTNU Department of GAC ‘16 Graduation Exhibition Narration for Vision
尺寸：280 x 210 mm 紙張：封面 鋼古象牙錶馬賽板 2mm 內頁 光感象牙 180G 後加工：封面、封底局部燙銀 裝訂：裸背線裝
54
SHUN CHEN PORTFOLIO
募資影片
https://youtu.be/LiYQ8eyKklM
55
06
視覺海報設計 / Visual Poster Design
Ai 主題：創新創業情報站 專案時間：2017.06 專案類型：Visual Design 專案內容：海報設計, 旗幟設計, 網站Banner設計
56
SHUN CHEN PORTFOLIO
1. 海報設計 1
2 3
2. 旗幟設計 3. 網站Banner設計
57
06
視覺海報設計 / Visual Poster Design
Ai 主題：創新創業講座 專案時間：2017.07 專案類型：Visual Design 專案內容：海報設計, Banner設計
58
SHUN CHEN PORTFOLIO
1. 海報設計 1
2 3
2. 旗幟設計 3. 網站Banner設計
59
06
視覺海報設計 / Visual Poster Design
Ai 主題：創新創業講座 作品時間：2018.08 作品尺寸：841 x 594 mm 材質：日本NT元素紙
60
SHUN CHEN PORTFOLIO
Ai 主題：禁食海報 作品時間：2015.05 作品尺寸：841 x 594 mm 材質：彩藝紙
61
06
視覺海報設計 / Visual Poster Design
Ai 主題：超英聯盟 作品時間：2018.09 作品尺寸：841 x 594 mm 材質：日本NT元素紙
62
SHUN CHEN PORTFOLIO
Ai 主題：木藝獎座 作品時間：2016, 17 作品尺寸：841 x 594 mm 材質：日本美禾紙
63