2019 Portfolio

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