PO
R T
FO LI O
PADI
CHENG
推推敲敲
和著複雜的喜悅與未知 一窺每扇門背後創意的秘境
CONTENTS 01
02
UI UX DESIGN
GRAPHIC DESIGN
05-16
17-32
PRODUCT DESIGN
WEB DESIGN
33-58
59-64
03
04
ABOUT ME
程宇菉
PADI CHENG 1996 / 02 / 27 Taipei, Taiwan 0935-283-918 padi850227@gmail.com
Personality 活潑熱情 心思細膩 管理規劃 溝通合作
Education 國立成功大學工業設計學系 臺北市立中山女子高級中學
01
ABOUT ME
Language Interests
100%
90%
60%
國文
英文
日文
TOEIC 945
唱歌
吹長笛
彈吉他
寫書法
Workshop 電機x工設
Fintech工作坊
2017日本千葉大學 Joint Design 工作坊
Skills Illustrator
Solidworks
Photoshop
Keyshot
Indesign
Autocad
Dreamweaver
Premiere
HTML5 / CSS3
After Effects
Javascript
02
ABOUT ME
Experience 大三
2017 Feb.
小情設-成大台科北科工作坊 - 總召
Feb.
成大規設月 - 活動副召
Jan.---成大工設107級畢業設計 - 公關長 Jan.
成大理學院x規設院聯名卡 - 總籌
2016 Sep.---成大工設系學會 - 系會長 Sep.---成大規劃與設計學院 - 院理事
大二
Aug.
成大工設迎新宿營 - 隊輔長
Jul.
成大工設營 - 隊輔長
Apr.
附中山校友會成大參觀營 - 設計長
Mar.
成大單車節 - 工設系總籌
Feb.
小情設-成大台科工作坊 - 副召
2015
大一
Sep.
成大工設系學會 - 公關
Jul.
成大工設營 - 隊輔
Jun.
成大工設夏展 - 班級負責人
2014 Dec.
成大工設冬展 - 班級負責人
Oct.---成大工設系籃球隊 - 球隊經理 03
Mar.
繁星入學成大工設
01 WHANDY
05
UI
UX
DESIGN
06
UI UX DESIGN
01
WHANDY 天氣資訊與我們日常生活息息相關，然而與我們 生活如此密切的產品服務，卻不是那麼完善，不 直覺，不人性化，太龐雜。因此我們團隊決定設 計出一款能夠讓產品服務與使用者更貼近的APP， 如同小秘書般，安排好關於天氣的大小事。
Members
程宇菉 / 黃詩雅
07
WHANDY
Research 一般大眾使用時，最常在出門前查看一天的天氣狀況，然後依據天候的變化，準備 需要攜帶的東西。現今許多天氣APP提供各種不同項目及詳細的天氣數據，雖然精 準，但對於大家直接的幫助不大。一些專業術語及數據，使用者不太能夠直覺閱讀， 也無法轉化為想像中記憶點的感受，反而造成畫面太過於複雜，影響視覺感官，而 使用者想知道的資訊主要還是一些常見項目。於是我們研究了市面上的24款APP， 將他們做了些整理： 含有項目統計圖示
濕度
氣壓
風速 風向
每日 天氣預報
體感 溫度
時間 對應溫度
降雨 機率
空氣 指標
紫外線
最高 最低溫
可見度
日出 日落
氣象圖
露點
現在 溫度 今日 累積雨量
這些APP普遍擁有的項目主要有： 現在溫度，每日天氣預報，最高最低溫，風速風向，濕度，降雨機率。 項目呈現方式 溫度相關
24 C
紫外線
高量級
降雨機率
30%
風速風向
2 m/s 東
空氣指標
47
日出日落
↑ 05:16
濕度
76%
氣壓
47
一些項目如濕度，風速風向，氣壓，空氣指標等皆以我們不熟悉， 沒有概念的數字呈現。
↓ 18:26
08
UI UX DESIGN 特色APP比較
Weather Pal
臺灣超威的
WU
資訊詳盡
LOGO視覺效果好
會將資訊做較細的分類
小圖示有動態感
畫面圖像化表格化
小圖示視覺效果不錯
有紫外線空氣指標提醒
以一天為單位模板呈現
版面配置閱讀不易
地點切換不直覺
太多專業數據
有些東西太文字化
有些圖示無法直覺辨識
折線圖太詳盡
Problem Defining 根據以上以及我們的分析，整理出了使用上的主問題點：
09
數據無法與經驗連結理解
多個地點版面切換不易
項目數字多造成版面龐雜
看了天氣忘了攜帶裝備
WHANDY
Goals 我們針對之前提出的問題點，整理出使用者的目標需求如下所示： 數據無法與經驗連結理解
項目數字多造成版面龐雜
直覺得知天氣資訊
簡約舒適的畫面
多個地點版面切換不易
看了天氣忘了攜帶裝備
方便觀看各地天氣
需要提醒
Direction 依據我們對於使用者的目標詮釋，導引出了進一步的設計方向：
建議 提示
針對不同 使用族群
數字化為 直覺感受
互動化
可個人化 調整版面
Development 經由討論，將設計方向的發想收斂，進而延伸出了我們的概念構想：
不同使用 模式切換
必備用品 獨立提醒
文字圖像 取代數據
10
UI UX DESIGN
11
WHANDY
兩種使用者模式
貼心裝備包服務
簡易圖示及文字
12
UI UX DESIGN
Function 一般
一般模式
台南市 東區
4月9日 星期日 13:00
為預設模式，以淺藍色作為視覺主色。
24°c
體感 23°c
早 晚 溫 差 大！
26 22
標題欄位左方為功能鍵，可以選擇設定或切換為 另一模式，右方為地點定位選擇。 主畫面提供最基本的當天溫度資訊，下方有貼心 小叮嚀，使用一句話提醒當日的天氣狀況，以及 提供裝備小物提醒使用者攜帶。
旅行
旅行模式
STEP2 設定您的旅遊地點
選擇起始地點
設定旅遊地點
形成旅遊行程
(預設為返回地)
(可新增數個)
天氣連續圖
旅行模式以橙色為視覺主色。選擇旅行的起始地點(將預設為 返回地)與開始結束的日期與時間，按確認進入下一步。第二 步選擇造訪的城市與造訪的日期時間，可以按下加號新增地點， 確認完成後則出現旅行的每日當地天氣預測，可橫向拖移觀看。
13
台北市 大安區
4
月
7
日
12
時
日期
4
月
時間
20
時
台北市 大安區
4
月 10 日
18
時
7
日
WHANDY
裝備包提醒
我們提供了四種最常使用的裝備小物 —雨傘、防曬、口罩、外套等，當天 候狀況需要某項物件因應時，裝備包 的提示將會亮起，提醒使用者要攜帶。
圖示說明
以簡易的圖示加上簡短文字取代一些 數據，來表示天氣資訊。
10% 降雨機率
6
80
中量 紫外線
普通 空氣品質
5:10
18:03
日出日落
佳 可見度
14
UI UX DESIGN
Flow 一般模式 一 般
一 般
4月9日 星期日 13:00
6
80 普通 空氣品質
22
5:10
18:03
佳 可見度
日出日落
23 C
手勢上滑
手勢左滑
3秒後自動進入一般模式
載入App畫面 Logo浮現
降雨機率
22:00
中量 紫外線
10% 26
體感 23°c
24小時內預測
台南市 東區
台南市 東區
4月9日 星期日 13:00
24°c
一 般
早 晚 溫 差 大！
早晚溫差大！
00:00
02:00
22 C
21 C
04:00
23 C
06:00
08:00
25 C
25 C
五
六
10:00
12:00
24 C
24 C
14天內預測 一
二
三
四
28 C
30 C
32 C
25 C
26 C
23 C
23 C
20 C
21 C
22 C
日
一
28 C
30 C
32 C
23 C
23 C
20 C
一般模式主要資訊
次要資訊
每時/每日預測時間軸 (可橫向拉動)
旅行
旅行
旅行
旅行
STEP1 設定您的旅遊起點
STEP1 設定您的旅遊起點
STEP2 設定您的旅遊地點
旅行模式
台北市 大安區
4
去
4
月
12
時
日期
4
月
時間
18
時
10
日
日
去
回
日期
4
月
時間
12
時
日期
4
月
時間
18
時
7
10
7
日
12
時
日
日
日期
4
月
時間
20
時
7
台北市 大安區
4
從功能鍵更換模式
15
旅行模式去回地 時間設定
月 10 日
18
日
點擊確認鍵
時間
7
點擊確認鍵
回
日期
月
4/7 12:00
4/7 20:00
台北市 大安區
日本 東京
32 C 28 C
4/8 20:00
4/9 20:00
30 C
30 C
時
旅途各地點 時間設定
每日當地預測 時間軸 (可橫向拉動)
WHANDY
設定與地點 一般
設定
14:00
25 C
16:00
25 C
25 C
三
四
25 C
26 C
26 C
21 C
22 C
22 C
中文
關於我們
26 22
點擊設定鍵
24°c
體感 23°c
二
語言
4月9日 星期日 13:00
18:00
°c
溫度單位
台南市 東區
早 晚 溫 差大！
從功能鍵選取設定
設定畫面
點擊地點鍵 一般
台北市
台南市 東區
台南市 東區
4/10 18:00
台北市 大安區 大安區
台北市 信義區
台北市 信義區 4月9日 星期日 13:00 台中市 南區
4月9日 星期日 13:00
台北市 中山區 中山區
台中市 台北市 中正區南區 中正區 台北市 松山區 松山區
24°c
體感 23°c
24°c
26
在搜尋欄輸入地點
台北市 大安區
台北市 大同區東區 台北市 大同區 台南市
台南市 東區
體感 23°c
22
30 C
26 22
早晚溫差大！
早 晚 溫 差大！
地點選擇
地點搜尋
16
02 Personal Branding
Sparkgo
Pun Place
Birdwatching Festival
Metro Taipei
Eyemood
17
Deep Living
GRA
PHIC
DESIGN
18
GRAPHIC DESIGN
01 PADI
Personal Branding
由自己的英文名字PADI開始發想，將P、A、D、I這四個字母幾何化，再將他們 適切地組合構成了LOGO的原形。利用筆畫架構出三維方格的模樣，同時也代表 著思考從平面延伸至立體的多元與全面性。顏色主要使用黑，輔以黃點綴著點、 線、面，營造出穩重卻不失活潑創造力的形象。
19
PERSONAL BrANDING
PADI
Rough:
Font: RomanD, V/A 50 L:100%, W:100%
Standard present:
Color range:
PADI
PADI
Extension:
mobile PADI
PADI
technology PADI
fashion shop
程宇菉 Padi Cheng
國立成功大學 工業設計學系 系會長 規劃與設計學院 院理事
PADI
brunch
0935-283918 padi850227@gmail.com
PADI
20
GRAPHIC DESIGN
21
PERSONAL BrANDING
22
GRAPHIC DESIGN
METRO TAIPEI
Rough:
Standard present:
Font: Ebrima, V/A 100 L:100%, W:108%
Extension:
Color range:
23
METRO TAIPEI
exhibition
METRO TAIPEI
public art
METRO TAIPEI
street dance competition
METRO TAIPEI
02
METRO TAIPEI
Metro Taipei
透過五個主色—黃、紅、綠、藍、咖啡， 同時也代表著五條主線，由線交織而成 捷運的輪廓，再透過曲線呈現遠近的透 視效果，進而營造出捷運的平易近人以 及速度感，展現台北捷運專業、便捷且 親民的形象。
24
GRAPHIC DESIGN
03
Pun Place
Rough:
Standard present:
25
PUN PLACE
PUN PLACE是一個能夠讓創意充分發展的基地。從兩個字的開頭字母 開始發想，將兩個P組合成立方體，呈現出擁有許多創意的想像空間， 字體的幾何設計增加輕鬆有趣的詼諧感。透過深灰與淺藍的搭配運用， 讓專業感與活力創意並進，另外將A字母用派對帽呈現，讓PUN PLACE 成為一個你能自在地玩創意的好地方。
Font: Berlin Sans FB Demi Bold, V/A 50 L:100%, W:100%
Color range:
Extension: exhibition
tea party
picnic
26
GRAPHIC DESIGN
04 EYEMOOD
Eyemood
Eyemood是一個多功能雙層眼鏡盒。透過字母E與M的變形與結合， 組合成了眼鏡盒的簡易型態，交會產生將兩層盒滑開的透視感，而 最後加上眼睛，讓整個眼鏡盒活起來，塑造使用此產品的愉快心情。
ROUGH：
STANDARD PRESENT：
EYEMOOD FONT： INSPECTIONXPERT GDT NOFRMS V／A 0 L：100% W：100%
27
EYEMOOD COLOR RANGE：
SPARKGO
05
Sparkgo
SPARKGO
Sparkgo是個能讓網路紅人與粉絲們互動分享 的專屬APP。由S去作發想，將S以三個平行 四邊形銜接而成，表示Sparkgo的跨平台串聯， 而同時又像彩帶旋轉般向上竄升，搭配背景的 流星，代表網路紅人在此平台的活躍性，讓 使用Sparkgo的人都能享受獨特的魅力。
28
GRAPHIC DESIGN
29
DEEP LIVING
06
Deep Living
Deep Living是個在山裡能享受古木參天、小橋流水， 夜晚擁有美好景色的境地。透過幾何化的圖像將周遭 的元素整合，搭配深藍背景及漸層的色彩以呈現夜晚 別有一番風味，靜謐別緻的意象，創造出簡單愜意能 沉浸在大自然裡的氣氛。
30
GRAPHIC DESIGN
31
BIRDWATCHING FESTIVAL
07
Birdwatching Festival 透過聖誕季節的紅綠色系，將鳥組合成九宮格， 搭配禮物包裝的形式，將賞鳥季呈現給大家，讓 人們像是收到聖誕禮物般開心，加上背景的冬季 雪白意象，簡約但不單調。
32
03 Bathcube TELEWOK
33
PRO
DUCT
DESIGN
34
PRODUCT DESIGN
簡單的省水浴磚， 利用「有多少用多少」的概念， 讓你輕鬆節能！
35
BATHCUBE
36
PRODUCT DESIGN
此次的節能UX工作坊，要帶各組從人物
persona著手，替這位主角設計一個 符合需求及生活情境的節能產品。
01
Bathcube
Members
程宇菉 / 陳義翔 / 賴廣穎 鄭嵐心 / 呂銘倫
37
BATHCUBE
Persona 35歲的地科老師，與其父母還有妻小居住在一起。 平時嘉宏十分注重節能，能省則省，著重每一個節 能的小細節，並研究電器有何節能的方法，為此不 辭辛勞，樂此不疲。除此之外，他還會多和家人宣 導節能的行為，要求大家一同參與此行列。
張嘉宏 節能無休
注意
收集
能省
細節
新知
則省
於是我們根據張嘉宏的行為特徵，整理出目標需求：
有效率的省電
感應
增加天然資源的利用
再生
讓家人保持省電習慣
節能
38
PRODUCT DESIGN
我們針對張嘉宏的目標需求，進行Brainstorming，將有趣的想法記錄下來。
嘉宏 的活 決定
Direction 依據我們對於目標的詮釋，導引出了進一步的設計方向：
透過直覺的互動方式，
感應
再生
達成有效率的節能效果
與自然環境結合， 自發產生能源
他想 例如 物品
節能 39
將節能行為自然融入生活中
BATHCUBE
Scenario
於社區公告欄看建省水競賽
嘉宏開始努力省水，
嘉宏在浴室端詳了許久，
動，平時熱衷於節能的他便
不辭辛勞地搬運洗米
開始對節約用水有了新
要參加。
水來澆花。
想法。
出了許多可以節約用水的好方法，
最後比賽結果出爐，張嘉宏獲得了這次省水比
洗衣時利用水盆接水，以及清洗完
賽的冠軍，全家人都非常高興，這次的勝利也
快速關閉水龍頭，有多少用多少。
讓全家人開始熱衷於省水。
40
PRODUCT DESIGN
Concept 我們就設計方向以及張嘉宏的生活情境，討論出了一些概念構想， 又將各個概念做更深入的發想。
41
BATHCUBE
Development 最後我們選擇了以「有多少用多少」的構想為主軸，最能符合張嘉宏 的行為特徵與目標需求，並將此概念再做發想，找出最適合的答案。
42
PRODUCT DESIGN
Product Intro
Bathcube是一款全新設計的浴室產品， 利用有多少用多少的概念，達到極致省 水的效果，可以根據所需要的水量來調 整浴缸的模式，同時也可以將使用過後 的洗澡水進行再利用的可能。
43
BATHCUBE
透明度高的塑料， 方便觀察儲蓄的水量。
底部的支撐，同時也可 與造型完美融為一體的
做為連結上層的卡榫。
上蓋，需要蓄水或到水 時在打開即可。
44
PRODUCT DESIGN
Situation
透過堆疊多塊省水浴磚 方便幼兒洗澡時使用
45
BATHCUBE
Using Bathcube可以利用堆疊的方式重新規劃浴缸 內部空間，利用有多少用多少的概念，根據 不同的需求堆積出所需要的浴缸空間大小， 可以堆疊滿整個底部來改變原有浴缸的深淺， 亦可以垂直堆疊。
單人泡澡又想省水時
可將兩塊浴磚堆疊
將泡澡的廢水集中
使用省水浴磚進行空間配置
組合成板凳乘坐
需要使用時再將水倒出
46
PRODUCT DESIGN
47
TELEWOK
TELEWOK TELEWOK，以電話筒為造型核心所設計的廚具 一個逐漸被時間抹去的記憶，卻能引起長輩們的共鳴
48
PRODUCT DESIGN
02
TELEWOK 鍋子太重難以翻炒、手把不好握、 煮菜時鍋蓋該放哪裡...... 下廚的時候，是否不太放心讓長輩們親自操作呢？ TELEWOK幫助你解決問題！ 讓整個下廚流程更加順暢美好！
Members
程宇菉 / 陳義翔
49
TELEWOK
Problem Finding 我們走訪了兩間照護中心，實地觀察有關於廚房的 環境以及實際操作的部分，發現長輩們其實鮮少有 機會能親自參與下廚，多半是由工作人員一次煮好 大分量的食物。其實不讓長輩下廚的原因主要就是 諸多安全考量，但這樣也讓有意願下廚的長輩無法 親自參與。因此我們決定要利用設計做出能夠使工 作人員放心，願意給長輩使用的廚具，改善他們所 顧慮的問題。
50
PRODUCT DESIGN
我們研究了有關於炒鍋的部分，主要的問題點有： 起鍋太重，不易翻炒、鍋蓋放置等等，現行的炒鍋 重量不輕，體積大，且手把細微上斜，這不僅造成 了翻炒和起鍋時的不便，還衍伸出手部動作不適的 問題，手部必須做出不符合常態的姿勢，才能完成 炒菜的流程，尤其對於長輩而言，長久以來更是一 種負擔。
Sketch
51
TELEWOK
為了解決上列的問題，我們參考了一些研究，也實地走訪各賣場參考 現行產品以發想草圖。我們觀察後發現，現有的炒鍋手把幾乎皆位於 鍋面的水平之上，微微向上傾斜。手把和鍋子重心(鍋底)的距離越遠， 我們就必須要花更多的力氣才能將鍋子舉起。同時手勢也會產生人因 稱"尺骨偏斜"的動作，更遑論起鍋時轉動鍋子。
而賣場中的鍋子則幾乎都是較細的手把，重的鍋子加上細的手把，手 部的壓力增大，更會造成手的不適。於是我們根據上列幾點，設計較 能貼近重心以及減少壓力的鍋子手把。
52
PRODUCT DESIGN
Modeling 我們先發想嘗試各種形狀握法的手把，並利用臉盆作為鍋子，將手把黏於盆緣 來進行草模測試。起初我們曾想過C型、T型甚至是杯子拿法的手把，但是經由 測試後發現，這些造型皆會造成手指指間的壓力過大，力道皆集中在和手把接 觸的指頭上，於是我們改成希望能以手掌承受壓力的手把。
53
TELEWOK
我們嘗試將手把接合在鍋緣的中心水平線上，發現拿起來明顯比其他一般接法 輕許多，於是決定延用了這個想法，然後為了符合手型，我們便做了微微上彎 的曲線形狀，再修整它的外觀造型使其能夠讓手更加舒適。造型最後我們以由 小到大的流線型作為定調，讓手部握住大塊面積減輕負擔。
54
PRODUCT DESIGN
55
TELEWOK
Fine Modeling 精模的部分，我們主要將手把區分為橘色與灰色兩個部分；橘色為主 色，以和善正面的意象作為定調，同時也具醒目作用，讓使用者與長 輩更能留心注意。灰色的部分主要是手部握持的地方，我們研究了握 持的手勢，將手部的輪廓描繪下來簡化成灰色部分的形狀，讓使用者 及長輩一目瞭然，方便握取。
56
PRODUCT DESIGN
Ergonomic Details
巧妙造型設計
電話筒造型的手把更 接近炒鍋的重心， 減輕拿起炒鍋的重量，尾部加大的造型 讓使用者握持更順暢。
一般炒鍋
Tele炒鍋
57
TELEWOK
把手特殊角度
把手巧妙的角度，讓你在 煮菜時能輕易的拿起將鍋 蓋放置，且只占少量空間。
省力傾倒食物 在 傾 倒 食 物 時，由於手把通過鍋 子 的 重 心，於 轉 動炒 鍋時力臂接 近0，幾 乎 不 會 有 力 矩產生。
58
04 SKATE-COOL
59
WEB DESIGN
60
WEB DESIGN
01
SKATE-COOL SKATE-COOL是一個為滑板愛好者提供完整完善服務流程 及客製化的團隊。透過黑白色系網頁，將團隊塑造出簡約 的時尚感，表達清楚的服務流程，讓使用者瀏覽網頁沒有 負擔，較能清楚觀看資訊，體驗SKATE-COOL團隊。
61
SKATE-COOL
62
WEB DESIGN
63
SKATE-COOL
64
THANKS FOR WATCHING！
程宇菉
PADI CHENG
0935-283-918 padi850227@gmail.com