ＰＯＲ ＴＦＯ ＬＩＯ ＭＥＮＧ
ＣＯＮＴＥＮＴＳ #
關於我 Profile
1
產品設計 Product Design
2
介面設計 UI Design
Once Future N+ Catcare
Music 2gather iLecture
3
平面作品 Graphics
成大工設學生論壇 版標設計 電機系課程 成果展手冊設計
08 14 20
38 42
52 54
ＰＯＲＦＩＬＥ 杜孟霖 Meng-Lin, Du 學歷
國立桃園高級中學
經驗
2012
李紹陽補習班國中部 講義編輯
2013
工業設計系期末聯展 負責人
2013 － 2015
電機工程系分子生醫資訊實驗室 美術設計
2015
北京交通大學設計交流營
國立成功大學工業設計系
工業設計期末聯展 負責人
2014 － 2015
工業設計系系學會 網管組組長 工業設計營 美宣長
能力
中 Ai
興趣
Id
Ps
Lr
Mu
Fl
1
ＰＯＲＤＵＣＴ ＤＥＳＩＧＮ Once Future N+ Catcare
08 14 20
產品設計 Product Design
Look through in the night.
08 ď˝œ 09
背景 Background
「提燈」，一般人聽到這個詞大概都會先認為是「燈籠」，但這次重新設計的目標 是西方的「提燈」。
提燈對於西方人來說是相當熟悉的物品，最廣為人知的故事就是萬聖節的起源，在 故事中也出現使用白蘿蔔所做成的提燈。
概念 Concept
草圖 Sketch
提燈完全的現代化的同時，保留提燈帶給人的溫暖明
用；什麼樣的線條足夠符合現代的簡約風格，卻又不
將提燈從過去帶入現代，實現提燈的「現代化」。將 亮的感受。
思考如何簡化提燈的線條，以及重新確立材質的使 失美感。
10 ｜ 11
模型 Modeling
燈體的部分，使用建模軟體 Solidworks 和 3D 印表機來完成，並透過 3D 印表機使
用的 ABS 材料營造塑膠感。這個部分當初在思考線路的接法、還有 RP 成型時會產 生的傾倒問題時琢磨了很長一段時間。
另外，在燈泡的選擇上猶豫了很長時間，也嘗試了許多配上不同燈泡的組合，最後
捨棄了燈泡外形，使用漸亮漸暗的 LED 燈泡，配合半透明的燈罩，仿造出燭火點燃 跟熄滅的樣貌，相較外形相似更能重現提燈的感覺。
呈現 Present
Once Future 將老提燈的金屬線條完全去除，以錐狀的燈罩取代方正的外形，讓外觀
更柔和。捨棄常見的鐵黑色，選擇純白，讓感覺輕一點，在現代城市中，帶給人放 鬆的感受。漸明漸暗的燈光，在半透明的燈罩籠罩下，有如燭火般，保留了提燈的 精髓。
12 ｜ 13
產品設計 Product Design
專利申請中
Hang Your Clothing Everywhere.
14 ď˝œ 15
背景 Background
衣架最初的原型是個類似肩膀外型的體斯缺與掛鉤所組合成的。不過隨著生活的進 步，我們也越來越需要面對不同需求。
現在許多國中，高中生在上完體育課之後，都要接著上下一堂課，所以他們經常都
會更換衣服避免汗臭。但換下來的衣服卻無處可掛，針對這樣的狀況，才有「Ｎ＋」 的誕生。
概念 Concept
因針對的對象為國高中生，新行的衣架必須要便於攜帶，並可以因應教室內不同的地
方隨處勾掛，如此一來，當換下濕衣服之後，便可以任意掛在教室裡晾乾。且必須為 堅固耐用的材質，才能負荷吸水之後的體育服的重量。
16 ｜ 17
Ｎ＋用法 Usage
結構特殊，可隨意勾掛。
在Ｎ＋的模型與實驗過程中，漸漸發覺這樣的一件掛鉤型的衣架，並不只可以針對運動後的濕衣服使用。國中 生、高中生常常因為課程需要攜帶二至三個背包，也可以使用Ｎ＋來另尋他處掛著。
一
二
此收納狀態可掛於鐵欄杆、木椅靠背等處。
此狀態可以使用於開啟的門板。
足以掛上背包類物件，經實際測試，耐重能力約為兩
使用。突出的地方即可掛上衣物。
由於此狀態下壓克力厚度足夠，使得結構強度提升， 公斤左右。
透過旋轉的特性，Ｎ＋可以完美的跟門板貼合，方便
一 ｜ 二 ｜ 三 ｜ 四
三
四
此收納狀態可掛於窗台處。
此狀態可以使用於直角桌面處。
法，輕鬆的讓Ｎ＋固定在窗台上。勾起的地方即可掛
當的倚靠在直角處，形成可以勾掛的衣物的地方。
由於窗台結構較特別，使用一支卡住、一支頂住的方 上衣物。
特殊的造型，以及內含的卡準結構，使得Ｎ＋可以穩
18 ｜ 19
產品設計 Product Design
Catcare Take total care of your cats.
Meng-Lin Du
Ping-Jung Lu
Ching-Ting Hsu
20 ď˝œ 21
背景 Background
對於現代人來說，寵物幾乎已經成為生活中密不可分的一環，比起養小孩，許多人 更願意投注更多時間在照護寵物上，陪他們玩耍、和他們一起過生活。
選擇和寵物一起過生活，就必須要深入了解他們的生活習性，隨時關心他們的身體 見健康。而在常見的寵物中，貓的健康是最難以關切的。貓是一種善於隱藏病痛的
動物，對飼主來說，想清楚知道貓咪身體狀況是不太容易的，當貓咪身體不適時， 飲食、活動狀態和聲音會出現異常，倘若飼主無法注意到，等到有明顯的表徵時， 病症已經非常嚴重，通常都已經是貓病入膏肓的時候了。
調查 Research
理念 Concept
是砂盆、食器與項圈。我們也決議以這三樣產品作為
能以這套與物聯概念結合的系統化貓用設備，每天記
透過調查，我們了解到與貓的生活最貼近的三樣產品 照護系統中最直接接觸貓隻的部分。
針對這三樣產品，我們做了問卷調查以及細節的訪 談，歸納出以下幾個設計要點。
- 項圈必須有絕對安全的保護機制，以免貓隻受傷。 - 砂盆能過過濾排泄物使得清洗更方便。
為了能夠幫助飼主及早發現貓咪身體異常，我們期望 錄貓隻生理狀況，得到貓咪狀態良好時的各項數據範 圍，建立雲端資料庫，結合 App 讓飼主掌握成貓生
理狀況，以貓咪的各種生理指標判斷貓是否身體不
適，並能在貓隻身體開始出現問題的時候及時通知， 最佳化寵物貓的健康照護。
- 食器能區分水與飼料更加衛生。
- 針對多貓家庭必須要有分辨不同貓隻的方法。
22 ｜ 23
安全圈帶 iBeacon 定位、物聯儀器 脈搏呼吸感應器
App 連結按鈕、安全扣環
貓項圈 Collars
Catcare 項圈配合 iBeacon 定位系統，紀錄貓咪 在固定範圍內的平面和垂直活動路線，推算出每日活 動和休息時數，並紀錄貓咪的脈搏、呼吸速率與聲音
頻率。傳送到雲端的資料將會建立起資料庫，當貓 咪行動異常（活動量等指數明顯改變），出現異於 正常的叫聲、呼吸和心跳速率變化不規則，連動的 Catcare App 便會向飼主發出警訊，提醒就醫檢查。
此外，每個項圈擁有獨立訊號以便區分貓隻。且
項圈為可調整長度設計（似手錶），適合各種不同脖 圍的貓咪。而為了避免貓咪在玩耍或劇烈跑動時項圈 勾到異物，引發窒息意外，使用在一定拉扯力度下會 自動解開的安全扣環。扣環與偵測機盒為塑膠材質， 繩帶為軟布類材質。
24 ｜ 25
飼料碗 水碗
App 連結按鈕
食器測重器、物聯儀器
貓食器 Food Bowl
Catcare 貓食器透過雲端資料庫來紀錄飼主倒入 飼料量多寡、進食量和飲水重量，並透過偵測項圈的 訊號辨認不同貓隻的資料，如此便可在攝取量出現變 異時通知飼主。分別以圖示和碗深區別水碗與飼料
碗，避免兩者混雜使得食物不乾淨。同時加高餐台高 度，讓貓咪能以較自然的姿勢進食，減少脊椎負擔。 主要為塑膠材質。
26 ｜ 27
外殼
砂盆測重器、物聯儀器
砂層
底層
貓砂盆 Litter Box
Catcare 貓砂盆為半罩式雙層貓砂盆，透過重量感測 器來紀錄每日飼主放置貓砂的重量，及貓咪排便和排
尿的重量和次數，並上傳至雲端，資料累積一定量 後，即可建立該貓的資料庫。
若貓咪排便、排尿次數減少或重量減輕，得到的數據
與平時不同，此時 Catcare App 便會警示飼主是否該 帶貓咪就醫。每個項圈擁有獨立訊號區分貓隻，可藉
由項圈的接近遠離來比對辨認並紀錄不同貓隻資料， 便可以輕易的辨認出使用砂盆的貓隻。主要為塑膠材 質。
28 ｜ 29
Catcare App
Catcare App 整合貓項圈、貓砂盆及貓食器三者紀錄 的所有數據，建立專屬的雲端資料庫，分析這些數據 庫的資料，包括平均活動量、活動模式、平均活動與 休息時數、平均排便、排尿重量等，建立標準值，當
日後有異常數據出現，也能及時警示飼主。Catcare App 借鑑 iOS Health 的資料顯示模式，飼主更容易 掌握貓咪的身體狀況，平時就可進行貓咪的健康管 理。
傳
上
料
資
Catcare 貓砂盆
雲端 資料庫
資料上傳
資
料
上
傳
Catcare 貓食器
資料下載
Catcare App
Catcare 貓項圈
運作方式
貓砂盆、貓食器及貓食器三者隨時都會紀錄貓隻的
相關生活數據，並將數據同步至雲端資料庫。此外， 資料庫中也會儲存與貓相關的研究資料。
透過雲端資料庫保存的數據資料也會即時同步至
Catcare App 中，App 將會分析這些資料並與研究數
據相比對，診斷貓隻的身體狀況，並即時將異常傳達
給飼主，而飼主也能透過 App 查看貓隻的健康數據。
30 ｜ 31
數據
在數據畫面中，可以直接查看特定貓隻的身體數據資 料，點選後可進一步查看單項數據的詳細資料。
點選灰色長條可以更換查看資料的對象貓隻，點選最 上方的時間選項可以更換時間的顯示方式。
綜合評斷
在綜合評斷畫面中，可以看見針對貓隻身體數據進行 分析後給予的健康評價分數，點擊後可以查看 App 對於健康狀況的分析，以及診斷結果。
32 ｜ 33
照護通知
在貓隻健康資料出現異常時，App 便會即時發出通 知，警告飼主應帶著愛貓前往寵物醫院檢查。
除次之外，系統也會通知貓隻定期檢查的時間，以及 貓隻使用 Catcare 產品時發生的問題，如項圈脫落。
設定
在設定畫面中，可以針對照護通知、儲存資料的資料 庫、iBeacon 空間定位以及 Catcare 裝置進行細部的 設定。
細節的設定月完整越能讓 Catcare App 的功能更加精 準，提供更佳的體驗。
34 ｜ 35
2
ＵＩ ＤＥＳＩＧＮ Music 2gather iLecture
38 42
介面設計 UI Design
2014 校園瘋雲榜 APP 創意競賽 創意應用組 第一名
Music 2gather 有別於以往社群網站的概念，透過「地 域」與「音樂」將你與你周遭的人互相連結。
透過 M2 來發現周遭的人喜歡什麼樣的音樂、透過 M2 來與周遭的人有更多的聯繫與互動。
38 ｜ 39
使用流程 Process
選單功能中，選擇 Near By 功能查 看附近使用者正在聆聽的歌曲；選
擇 Search 功能搜尋當下想聽的音 樂；選擇 Log Out 功能登出離開。
選擇 new register 註冊新帳號來使 用 Music 2gather 所提供的服務。
Near By 功 能 中， 可 瀏 覽 附 近 M2 的使用者正在聆聽的歌曲，在內遷 的地圖中會顯示使用者的位置。
透過點擊位置地點或是歌曲，可以 與這些人互相認識，成為朋友。
Search 功能中，將會隨機推薦最
近 M2 使用者正在聆聽的歌曲，也 可以搜尋喜好的歌曲。
當開始放音樂後，其他使用者可透 過 Near By 功能與你成為朋友。
40 ｜ 41
介面設計 UI Design
2014 全國校園雲端創新應用大賽 大專院校組 第一名
iLecture
iLecture 是一套教學即時反饋系統，本系統透過問答 系統以及即時訊息的引入，將上課時的師生互動提升 至更有趣的新層次。
不管是一般上課教學或是視訊教學等不同的教學模 式，都能透過此系統獲得最即時的回饋。
42 ｜ 43
使用介面 Interface
教師手機版
在手機版介面中，透過選擇頁面標籤進行功能操作。
開始畫面
教學資訊
連線資訊
當老師進入開始畫面後，點擊
在「教學資訊」頁面中，程式
在「連線資訊」頁面中，可將
教室，使用 iLecture 的功能。
上 課 的 狀 況， 並 將 結 果 分 別
生。學生便可透過超連結或 QR
「open a classroom」 開 啟 新
將會統計並分析學生參與與
以「Number of People」、 「Learning Situation」
及
「Learning Speed」 三 項 數 值 顯示。
即時教室的資訊公開提供給學
code 進入教室，並以教室號碼 進行核對。
即時問答
結果統計
訊息
老師可透過即時問答的功能，在
顯示最後一次即時問答的統計
訊息功能適合使用在非面對面
針對問題變更選項的數目和選
學生的學習狀況。
簡答的題目，或是回應學生的
課程中對學生提出問題。也可
擇題目的形式（單選、多選）。
結果，老師可透過此功能觀察
的教學中，老師可以提出一些 問題。
44 ｜ 45
使用介面 Interface
學生手機版
在手機版介面中，透過選擇頁面標籤進行功能操作。
進入教室
訊息
變更顯示名稱
學生透過老師給予的連結或是
訊息功能適合使用在非面對面
點選訊息輸入欄左側的人形按
開始學習。
對老師提問，或是回應老師的
名稱，方便老師辨認學生。
QR code 即可進入開設的教室，
的教學中，學生透過訊息功能 問題。
鈕，可變更在聊天室中顯示的
表情符號
即時問答
統計結果
iLecture 使 用 表 情 符 號 對 上 課
學生在問答頁面將可以看見老
顯示最後一次即時問答的統計
不同表情背後具有不同的數值，
來做出回答，結果會於「統計
同儕回答問題的狀況。
速度以及學習狀況做出回饋， 會統計分析後將會顯示於老師 版「教學資訊」頁面中。
師所提出的問題，並透過點選 結果」頁面顯示。
結果，學生可透過此功能了解
46 ｜ 47
使用介面 Interface
電腦版
電腦版將大部分功能整合在同一頁面，方便快速操作。
教師版
學生版
在教師電腦版中，將「教學資訊」 置於中間，方便老師隨時了解上課
在學生電腦版中，訊息功能是學生
「連線資訊」頁面獨立顯示，避免
因此訊息功能的版面較大，方便使
的狀況。並將教學中較不常使用的 使用介面資訊過多難以判讀。
與老師溝通的強橋樑，尤為重要， 用。
48 ｜ 49
3
ＧＲＡＰＨＩＣ S 成大工設學生論壇 版標設計 電機系課程 成果展手冊設計
52 54
平面設計 Graphics 成大工設學生論壇 版標設計 http://forum.ide.ncku.edu.tw
Logo 2014
Logo 2015
日常 2014
日常 2015
在 2014 年暑假接手學生論壇時，我們捨棄論壇舊有
的形象重新設計，給予新氣象。當時一起捨棄的還有 標語，但是 Logo 並沒有隨著改變。 Meng-Lin Du
Ping-Yen Wu
成大工設學生論壇是由成大工設系學會網管組管理
2015 經過我們一番討論之後，決定更新 Logo，去除 右上方的 2 圖樣，讓 Logo 保留最直接的 ID 含義， 也就是「Industrial Design」。
的學生論壇，由工設系與系學會所舉辦的活動消息都
在不同節日或是大事件的時候，我們也會改變一下論
訊，也有技術交流的板塊。
版標。
會透過論壇傳達，也會提供一些工廠資訊、實習資
壇的風格，增加新意。右頁為部份由我主設計的論壇
中秋節 2014. 09. 08
香港佔中運動 2014. 09. 28
聖誕節 2014. 12. 25
春節 2015. 02. 18
聖派翠克節 2015. 03. 17
52 ｜ 53
平面設計 Graphics 電機系課程 成果展手冊設計
Social Web Design 2014. 06
Web Programming 2015. 01 54 ď˝œ 55
杜孟霖
Meng-Lin, Du
ＲＯＰ ＯＦＴ ＯＩＬ
+886 933 353 898 alltonew.1203@gmail.com issuu.com/058642