Jhang Nai-Wun - Portfolio 張乃文
WEB • APP • UX
//////
Hello. 聽見設計之聲
2018 2019 網頁設計 APP 設計 使用者體驗設計
//////
“ 好的設計 源自於使用者體驗與對細節的要求 ”
02
Portfolio
Contents
04
自我介紹
網頁設計
Web Design
10
BonBonMusic
16
Sparbag
使用者研究•響應式網頁設計•前端切版
22
最後修改
響應式網頁設計•前端切版
26
地方二樓
響應式網頁設計•前端切版
//////
使用者研究•響應式網頁設計•JS動態設計
Contents
03
////// APP設計
APP Design
32
LLNC語言學習導航系統
使用者研究•響應式網頁設計•APP介面設計
36
BonBonMusic
使用者研究•響應式網頁設計•APP介面設計
產品設計
Product Design
42
Note 同步共鳴演奏系統
52
Clear Pot 除霧鍋蓋
58
聯絡我們
服務設計•產品設計•APP設計
產品設計
04
Portfolio
I’m JHANG NAI-WUN
About Me
我是張乃文，一位從產品跨至UI,UX 的 設計人，從來不設限自己所能嘗試的事物 ，享受在現有的環境中，不斷常識，不斷學 習。發現“真實”問題，並勇於去解決。
一個享受設計與解決問題的跨領域學生 同時是熱愛吸收新知和用於挑戰的斜槓。
//////
UX • UI • WEB • APP 使用者介面設計
使用者體驗設計 網頁設計
Education / 教育背景 2019
服務設計
National Cheng Kung University Department of Industrial Design
視覺設計 產品設計 前端開發 SEO 搜尋引擎優化
國立成功大學 工業設計所
大葉大學 工業設計系
2014
DAYEH University Department of Industrial Design
Exchange / 海外交流
聯絡我吧！ Mobile / (+886) 917 680 220 Email / jerry10jerry10@gmail.com Website /http://jerry.minews.synology.me/me/
2017
加州大學聖地牙哥分校 University of California, San Diego Extension International Programs
2016
香港理工大學 Hong Kong Polytechnic University 2016 International Summe School
About Me
Working / 工作經歷 2019
BonBonMusic 音樂家教媒合平台 - UI/UX 設計 • 前端開發 產品設計師 ＆ UX 設計實習生 蹦蹦資訊有限公司 JUL. 2018 - Now
2018
大葉大學國際語言中心 - 網頁設計 兼任助理 大葉大學 OCT. 2015 - JUN. 2018
2015
淞煜科技 - 網頁設計 • 前端開發 網頁設計實習生 淞煜科技股份有限公司 JAN. 2015 - FEB. 2015
Award Records / 得獎紀錄 2018 奇想設計大賽 / 創新科技組 / 銅賞 GIGABYTE Great Design
育秀盃創意獎 / 入圍 YSED Creative Award
Red Dot Design Award / 入圍 Red Dot Concept Design Award
IF Talent Award / 參賽 IF Talent Award 天府寶島工業設計大賽 / 入圍 Sichuan-Taiwan Industrial Design Awards
2015
康寧創新家 / 佳作 Corning Future Innovator
Patent / 專利 TWM557072U 可拆式溫度顯示裝置 Detachable temperature display device
TWM557497U 改良式電腦散熱裝置 Improved computer heat dissipation device
TWM558273U 伸縮圍欄柱 Extendible fence column
TWM558925U 多功能投影機裝置 Multifunctional projector device
05
06
Portfolio
E xperience / 職務經驗 2018 大葉大學 ID25 工業設計系畢籌會 / 官網負責人 DYU ID 25 - Stories to be Continued
大葉工設期末聯展 / 文宣組負責人 DYU ID 25 - Final Exhibition
第二十六屆工業設計系聖誕晚會 / 社群經營 Twenty-sixth Industrial Design Department Christmas Party
2016 跨文化英語先修營 / 影音組負責人 2016 Intercultural English Prerequisite Camp 大葉大學國際語言中心戶外電影夜/ 總招 DYU ILC Outdoor Movie Night
2015 跨文化英語先修營 / 活動組負責人 2015 Intercultural English Prerequisite Camp 大葉大學設計學院三系聯誼 / 聯合主辦人 Da Ye University School of Design Friendship party
弘文中學第一屆畢業典禮籌備委員會 / 社群經營＆影音組負責人
2014
HWHS Graduate Student Association
Design Skills / 設計技能 2D
Illustrator Photoshop Indesign
3D
Rhino Keyshot Auto CAD Solidwork
UI
Sketch Adobe XD InVision Zeplion
Code
HTML CSS Javascript
Video Final Cut iMovie
//////
About Me
Learn More....
07
//////
Web Design 網頁設計
10 29
10
Portfolio
BonBonMusic 蹦蹦資訊有限公司 //////
使用者研究•響應式網頁設計•JS動態設計
BonBonMusic 是個專為音樂學習者所打造的音 樂家教媒合網路平台，擁有數百位不同專長的音 樂老師，橫跨30多種的樂器教學與音樂課程 。 在整體平台網站設計上，除了完整地將品牌視覺 語彙呈現於網頁中，更藉由相關的使用者研究，瞭 解網站使用者，使用網站的情境，重新定義所有課 程開設與課程購物的流程，並運用大量的頁面展 開與收合的方式，將資訊內容進行隱藏，幫助老師 與學生在手機裝置體驗上，能夠更清晰的了借所 重要資訊。
//////
Web Design
11
專案設計時間： 2018. 7月～8月
12
Portfolio
//////
Web Design
#F16C77 #495EAD
12
14
Portfolio
Web Design
15
BonBonMusic平台上擁有超過40種不同樂器的課程，課程堂數與課程形式多達十二種不同 組合，因此2018改版新的課程清單，由原本的下拉式篩選清單，改成彈出式單選與多選清單， 幫助引導使用者在篩選完課程後，也能完整的瀏覽所有課程，塞選清單的干擾。老師端的開課 頁面也使用頁籤與色彩標籤的方式，讓老師能 迅速的瞭解所有課程狀態，進行課程管理。 在此專案已UX與UI的角色參與PC與Mobile Web 的開發，負責Mockup , Prototype 的製作, 定義所有使用流程與網站設計架構，再交由視覺進行修飾與工程端進行開發。
1
2
3
4
5
Understand
User Study
Research
Talk
Design
使用者研究 需求評估 GA 數據分析
相關網站搜尋 競爭者分析 設計頻估
視覺溝通 程式開發溝通
User Flow Sketch Prototype
網站架構評估 使用流程評估 網站問題檢視
16
Portfolio
Sparbag 畢業專題 //////
使用者研究•響應式網頁設計•前端切版
Sparbag行李重量共享平台，提供機場行李重量 交換的媒合服務。Sparbag透過網路平台與APP媒 合重量提供者與需求者，並設置了共享行李箱，方 便裝運超重的行李。 網站整體設計已簡約大方的風格，搭配主視覺顏 色進行設計，也針對旅客的使用習慣與操作情境 已卡片式的方式呈現行李資訊，並整合ios的設計 準則，設計相對應的APP介面，幫助旅客能夠在最 短的時間瞭解操作方式與使用Sparbag服務。
//////
Web Design
17
專案設計時間： 2017. 9月～2018.4月
18
Portfolio
//////
Web Design
#7CCAD4 #333333
19
20
Portfolio
Sparbag行李重量共享平台，包括前置媒合的買方與賣方的網站及APP應用程式，還包括行李 交戶過程所使用的操作機台介面，以及負責所有運送的公共行李箱。 在此專案扮演UX與UI的角色參與整個專案的服務設計,介面設計與前端開發，負責Mockup , Prototype 與網頁前端切版等製作, 規劃所有服務設計·人機交互流程與軟體介面設計，再交 由產品設計夥伴一同整合。
Web Design
前端開發 HTML / CSS 切版
4
1
2
3
Empathy
Define ＆ Ideate
Design
旅遊體驗觀察 使用者研究
定義問題與需求 使用流程架構 服務設計
User Flow Sitemap Prototype
5 Test 使用者測試 問題修正
Coding
21
22
Portfolio
最後修改
Stories to ___ be Continued
大葉工設-畢製作品集網站 //////
響應式網頁設計•前端切版
從零到有，畢業展不代表結束，未來還要繼續延伸寓有經過 多次反覆實驗更改的最終之完成品，呈現出具有萬千過程的 故事；所寓涵成為設計過程，也象徵著設計過程中無限的延 伸，沒有限制的思維與可能性。 在網站設計上面，除了完整個呈現主視覺意象與主題資訊， 也透過為動畫的方式，將龐大的作品資訊隱藏起來，盡可能 完整個呈現所有作品的圖面。
//////
Web Design
23
專案設計時間： 2018. 3月
24
Portfolio
#F4CF5C #363944 #EBE9E8
//////
Web Design
25
26
Portfolio
Ergobar地方二樓 成大工設-地方二樓展覽網站 //////
響應式網頁設計•前端切版
Ergobar 是由國立成功大學工業設計系-人因與互 動設計實驗室的成員組成，透過對外的主題展覽， 將有趣互動設計放入人群中，讓在地的人們透過 體驗感受互動設計的魔力。 在官網設計上，為了方便瀏覽者迅速瞭解展覽內 容與展覽資訊，前往展覽現場，採用一頁式的網頁 設計型式，並搭配部分動畫的元素，讓使用者在進 入網站時，就能感受到展覽與人的互動性。
//////
Web Design
27
專案設計時間： 2018. 10月
28
Portfolio
//////
Web Design
29
//////
APP Design 應用程式設計
09 19
36
Portfolio
LLNC語言學習導航預約系統 大葉大學國際語言中心 //////
使用者研究•響應式網頁設計•APP介面設計
大葉大學習語言學習導航中，以諮詢輔導為主，客 製化訓練課程及語言學習活動為輔，永續學習為 目標，七大航線包含語言諮詢輔導航線、戀練口說 航線、客製化課程補給航線、全員動競航線、數位 漫遊學習航線以及葉 (Yeh) 遊航線。學生得依據個 人學習狀況與需求預約所需航線累積個人學習里 程數。 在網站與APP設計上，也針對每天數百位的同學 的使用需求與GA數據進行UI設計，透過大面積的 色塊設計，幫助同學能快速瞭解所要的預約服務， 增加語言諮詢服務的記憶點。
//////
APP Design
37
專案設計時間： 2017. 3~5月
38
Portfolio
大葉大學語言學習預約系統 Android APP/手機版網頁設計與製作
//////
APP Design
photoshop 切版 html / css 編輯與調整 SQL 資料庫連結測試
Design Process
4
1
2
Understand
User Study
系統架構評估 操作流程規劃 UI優化分項 調整與運作調度
39
使用者問卷調查 用戶需求評估 google analytics數據分析
3
Coding
5 Assessment
Prototype
客服問題整理 用戶訪談與諮詢 google analytics數據監控
user flow low prototype prototype testing hight prototype
Redesign
問題整合 prototype 調整
6
32
Portfolio
BonBonMusic 蹦蹦資訊有限公司 //////
使用者研究•響應式網頁設計•APP介面設計
BonBonMusic老師端APP是個專為平台老師所打 造的課程管理與通知的應用程式， 幫助平台上兩 百多位老師能夠透過手機APP 管理所有課程狀態 ，並可即時的與學生進行溝通，回應學生的提問。 在整體APP設計上，除了維持與網頁一致的視覺 語彙，更重新針對音樂老師使用習慣，設計一套課 程回覆與管理的使用程序，幫助老師能隨時回應 學生，掌握所有課程進度與學生動態。也完整的遵 循iOS的設計準則與BonBonMusic 網頁手機版的 設計風格，降低使用者操作時的學習時間。
//////
APP Design
33
專案設計時間： 2019. 3月
34
Portfolio
//////
APP Design
35
//////
Product Design 產品設計
09 19
42
Portfolio
Note
同步共鳴演奏系統
技嘉科技-奇想設計大賽 銅賞 //////
服務設計•產品設計•APP設計
樂團演奏仰賴指揮與樂手間的默契搭配和演奏技巧。然而樂 團在正式演出前，指揮和樂手間需耗費大量的時間去契合彼 此間的節拍、音準、指揮家訊息和整體共同演出的效果。 同步共鳴演奏系統利用AI智能引擎，串聯樂團節奏以及指揮 家訊息，提供樂手個人化的演奏建議與重點提示，讓樂手能 及時修正自己的演奏狀況。 同步共鳴演奏系統也讓每個想學習音樂的人，可以搭載猶如 莫札特的音樂耳每個人都好像擁有一個虛擬音樂老師，以更 輕鬆、簡單的方式，認識音樂的組成結構，降低學習成本，加 快學習音樂的速度。
//////
Product Design
專案設計時間： 2018. 7月～8月
43
44
Portfolio
//////
Product Design
放飛藝術夢想，打造音樂人生
45
Product Design
47
Product Design
49
Product Design
51
52
Portfolio
Clear Pot
除霧鍋蓋
iF DESIGN TALENT AWARD 參賽 //////
產品設計
精緻的料理烹調需要精準的食物熟度控管, 直接觀察食材是 最簡單的方法, 固有透明的玻璃鍋蓋設計, 讓廚師不被鍋蓋 阻擋視線, 但事實上透明的玻璃表面在烹調過程中, 很快就 會因為水氣凝結而遮蔽視線, 看不清楚鍋內狀況。 ClearPot將玻璃鍋蓋結合除霧線解決了這個問題。食物的水 氣因為加熱蒸發, 遇到較低溫的玻璃表面則凝結成水珠附著 , ClearPot結合汽車除霧線概念, 利用玻璃鍋蓋周圍的導熱 金屬將鍋體受熱的溫度導引上銀漿線, 間接加熱部分玻璃面 , 使特定區域溫度高於凝結點, 而避免了水氣的凝結, 營造了 一個真.透明 視野, 讓玻璃鍋蓋真正發揮他的價值。 ClearPot的設計省力又節能, 導引火爐熱能加熱玻璃鍋蓋表 面, 空出沒有水氣遮蔽的適當區塊, 讓烹煮人不用打開鍋蓋 又或者想辦法刮除水珠也可以清晰地看見鍋內食物。
//////
Product Design
專案設計時間： 2018. 7月～8月
53
55
Product Design
57
//////
Contact Me
Thanks for watching. 請多指教
jerry10jerry10 @gmail.com
0917680220
http://jerry.minews. synology.me/me/
//////
“ 設計不僅僅是它的外觀和感覺，好的設計是一種無形的體驗 。 ”
//////
Wait for you.
2018
2019