張智堯
Chang Chih-Yao's
Portfolio
使用者體驗設計、互動設計 、產品設計
ID.UI.UX Design Portfolio
Chang, Chih-Yao 2019 - 2020
張智堯
Kevin Chang
在台灣科技大學攻讀工業設計和互動設計學程，喜歡跨 領域的學習，對曾未遇到的事物充滿好奇心。對於設計 細節精益求精。
2019 - 2020 Chang Chih-Yao
Education 2017.09 -now
B.S. Industrial Design -Senior
Taiwan Tech
Interaction Design Program
Taiwan Tech
Experience 2021.07 -2021.08
UX Design Intern
Public Digital Innovation Space (PDIS)
2020.08 -2021.05
UX Design | Yodex Design - First Prize
Carrefour Taiwan X Taipei Medical University
2019.01 -2019.07
Industrial Design - Electric
Fairly Bike Manufacturing Co., Ltd.
2017.12 -2018.07
Industrial Design - Course Assistant
Department of Design - Taiwan Tech
2016.10
Computer Aided Mechanical Design
2016 National Skills Competition of the
Scooter Design
- First Prize
- Executive Yuan
-College of Interdisciplinary Studies
e-flow | e-scooter
Republic of China
Content
UI / UX
Product
Sketch
CAD / CAID
新北警政行動服務【iPolice】-Redesign App
1
健保快易通【e-Mask口罩預購】-Redesign App
9
長者更容易上手的導航小幫手【EASYBUS】-Design App
17
回收玻璃光柵時鐘 【Cross】
25
為城市旅行者而生的無人機【pat】
29
時尚品牌鍋具配件【Cast Iron Pot Lid Holder】
33
電動速可達【e-flow | e-scooter】
37
Marker + Colored Pencil Sketch
39
Assembly Working Drawing
43
Reverse Engineering
45
Exploded Isometric Assembly
47
UI/UX design
Personal work
2020.04 - 2020.06
Redesign App - iPolice
2019 - 2020 Chang Chih-Yao
新北警政行動服務【iPolice】
Redesign App - iPolice 新北警政行動服務【iPolice】
Personal Work Case Challenge
User Research / Prototype Design
Experience Desirability
Key Points 民眾對於 iPolice 新北警政交通服務品質的整體印象提升
Usability Utility
介面不只好看也易用，資訊架構變得更準確 針對目標民眾操作 app 的情境設計適當的操作流程規劃 客群變得更準確，功能符合使用者期望
Background
2019 - 2020 Chang Chih-Yao
此次為期八周的大三產品設計課程，主題為公部門 app 設計專案，我選擇新北市政府警察局的 app "iPoloce" 進行優化設計。透過使用者的經驗研究，洞察使用者，在使用 app 上遇到的痛 點，進行優化設計，專案無與相關政府單位合作。
iPolice 是一款新北市警政服務軟體，提供民眾眾多警政網路服務，然而官方 App 沒有發揮行 動裝置便攜、即時、易用的價值，且有許多功能頁面不適合在手機上操作。過多的外站跳轉， 造成使用體驗欠佳、介面雜亂無序，使用者無法即時獲得所需資訊或順利完成特定任務，造成
民眾極大的挫敗感，倘若能改善行動介面體驗，帶給民眾良好的使用體驗，便能有效增進民眾 的生活品質 !
Revise Goals 本次改版重新疏理核心使用者，政府服務如何讓民眾外出更安全便利，也重新疏理資訊架構， 將冗餘的功能移除外，重點是在功能上強化易用性。
功能改善的方向：
更精準的資訊架構和介面易用性。 介面改善的方向：
操作流程是以主流的 App 使用者的認知為出發點設計，同時考量到技術可行性。透過易取的 GUI 設計，並除去干擾視覺體驗的裝飾性元素，保留畫面的清新感。
Target User 平常使用 google map 等地圖輔助 app 找路或導航，且自駕交通工具 ( 機車、汽車、腳踏車 )
的族群，或是會透過聽警廣、上網了解路況的使用者。 3
Research 搜集 App Store 上的使用者評論和台灣各大社群討論網站，利用 Card Sorting 方法把許多來自
使用者討論 iPolice 的差評分類成主要兩點，即檢舉功能易用性不良及操作繁瑣，介面架構混亂， 常常找不到功能。
Customer Insights 使用者訪談到顧客旅程地圖：
經由使用者訪談後發現，使用者主要是被檢舉功能的服務吸引才下載使用 iPolice，而核心的需 求是希望藉由檢舉違規讓交通變得更安全，降低用路者的恐慌。因此在模擬使用者操作檢舉功 能做了顧客旅程地圖，在此功能上找到幾點問題。
User Journey Map 起意
出發
起意
打開iPolice App
抵達目的地
查看iPolice App
接觸點
行動 思考
自行駕車出發
時間差不多了，
要去公司上班。
路途看到有人交通違規
公司較偏僻離家也比
平常上班開車會比較
駕車到公司。
規會覺得很不安全，
較遠，因此喜歡自行
快，路上看到交通違 想透過檢舉來改善交 通現況。
打開iPolice app檢舉功能
拍照檢舉
舉報規則也不太清楚，常常沒
有佐證資料就錯過檢舉。
趕到公司上班
趕時間上班，卻要花費時間整理
佐證的資料，還差一點遲到。
開車的時候用手機本身就違規 了，事後檢舉又會忘記發生細
過幾天查看檢舉進度
想知道檢舉結果，卻等很久沒
有檢舉消息。
查看檢舉結果卻發現因為佐證
資料不足而被退件。
節。
情緒
降低舉報的門檻，不用佐證資料
機會點
也可以舉報。
減少打字填選資料的步驟，增加
操作易用性。
不要讓使用者空等，檢舉後透過
進度或統計圖
告訴舉報者貢獻和意義。
Pain Points
How might we?
檢舉時要填寫許多資料，開車卻不能使用手機。
我們要如何在開車的時候檢舉？
檢舉後常因舉報資料不完整導致退件。
我們要如何有效檢舉？
舉報者遲而等不到舉報結果。
我們要如何在檢舉後產生價值並回饋使用者？
4
The Vision 不必等待舉報結果，每次檢舉都能對台灣交通貢獻。 透過易取的介面手勢和 GPS，快速紀錄當時的路況。 透過使用者認知改善介面的微互動，增加易用性。 視覺化顯示檢舉後對交通狀況的貢獻。
Information Architecture 把使用者真正會用到的功能做優化才是首要目標。因此，重新設計的架構以「警政如何透過 app 為民眾達成交通安全」為主要方向。
原先的資訊架構相當龐大，卻沒有經過適當的安排，造成民眾找不到功能，而重新設計的資訊 架構由八個功能疏理成四個主要功能。
2019 - 2020 Chang Chih-Yao
Original Information Archtecture 申請服務
警政服務
服務據點
⾏⾞御守
違規檢舉
交通專區
報案
道路事故相關資料
新北警政⼩記者
依⽬前位置查詢
⾏⾞導航
影⾳檢舉
圖⽂宣傳廣告
視訊報案
道路事故進度
電⼦報
依⾏政位置查詢
易肇事路段語⾳提醒
影⾳檢舉（網⾴版）
拖吊查詢
電話報案
警察刑事進度證明書
治安新聞
查詢服務
案件進度
交通疏導管制查詢
簡訊報案
違規檢舉舉發熱點
路況事件
防騙⼩叮嚀 資料查詢
交通⾞流量 呼叫計程⾞ 交通防治宣傳影⽚ 交通法令 數據統計
Redesign Information Archtecture ⾏⾞資訊
路線搜尋
違規檢舉
報案
設定
交通路況
交通路況
建議⾏⾞路線
交通違規
視訊報案
登⼊/個⼈⾴
警察巡邏點
交通⾞流量
安全優先
案件統計資料
個⼈偏好
測速取締點
即時監視器畫⾯
避開路段
違規檢舉舉發熱點
交通障礙
最短距離
道路施⼯
時間優先
交通事故 交通堵塞 號誌故障
5
交通管制 氣候不佳
（⾴⾯功能）
⾏動保⺟
Wireframes 一共做了約 7 種的主頁面，參考主流的地圖軟體（Google map 和 Apple map 的 UI flow 來 設計此專案），並接收老師和測試者的一些意見。主要討論的方向除了介面乾淨美觀外。首 要考量在於介面容不容易操作，以及減少使用者的錯誤認知，減少頁面撤銷重做。
9:41
9:41
Map
9:41
Map
9:41
Map
9:41
Map
9:41
Map
9:41
Map 檢舉
檢舉
搜尋地點或地址
報案
檢舉
檢舉
報案
搜尋地點或地址
報案
檢舉
檢舉
報案
搜尋地點或地址
報案
羅斯福路 咖啡廳
搜尋地點或地址
Map
報案
測速取締點
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
取消
⼼⼼咖啡
150m
羅斯福路⼀段ＸＸＸＸＸ
XXXXXX
XXXX
羅斯福路⼀段ＸＸＸＸＸＸ
XXXX
羅斯福路⼀段ＸＸＸＸ
XXXXXX
交通⾞流量
搜尋地點或地址
Visual Design 主色 / 輔色
#015C92
#00FF80
地圖配色
#000000
50%透明度
綠地
⽔
地⾯
建築
⼤標
內⽂
#C8DD98
#78BCED
#DBDBDB
#C7C7C7
#515252
#707070
與現實環境貼切的圖示
交通⾞流量
測速取締點
文字
搜尋欄
#3C3C43
60%透明度
精簡而清楚的符號
交通障礙
慢 道路施⼯
交通事故
交通堵塞
STOP
號誌故障
交通管制
氣候不佳
STOP
6
Screens and Features 路況資訊
路況資訊視覺化，比聽警廣更快更準。
2019 - 2020 Chang Chih-Yao
vs.
Redesign
違規檢舉流程易用性
Current
人人輕鬆就能舉報違規，降低違規者投機或狡猾的心態。
vs. vs.
Redesign
7
Current
路線規劃
最安全的路線規劃，避開所有路障。
vs.
Redesign 違規檢舉後回饋 視訊報案
Current
馬上看得到檢舉後的貢獻，而不是空等舉報結果。
畫面及位置同時顯示，優化頁面流程，報警更快速。
vs.
New Feature
Redesign
Current
8
UI/UX design
Group work
2010.02 - 2020.06 2020.03
Design App - eMask
2019 - 2020 Chang 2019Chih-Yao - 2020 Chang Chih-Yao
健保快易通【e-Mask口罩預購】-服務設計 健保快易通【e-Mask口罩預購】
Design App - eMask 健保快易通【e-Mask口罩預購】
Group work
張智堯、王駿騰、楊惠鈞、盧映瑄、周藤香子
My Duty
User Research / Prototype Design
Background 此次為期 12 周的介面設計課程，主題為 redesign app 設計專案，我們這組選擇健保快易通 eMask 口罩預購系統進行服務設計優化。
2019 年底受到新冠肺炎疫情影響，許多人的生活習慣已逐漸被改變，透過各式網路平台 、App 獲得疫情相關資訊，儼然成為許多民眾的防疫日常；然而，多數人在使用口罩相關 App 時，卻時
常被身分驗證流程與回饋感不足所困。若能改進 App 的操作流程與介面設計，使民眾降低心理
2019 - 2020 Chang Chih-Yao
上的對疫情的不安感，便能更輕鬆便利地實踐自我防疫！
起因
關鍵
行動
新冠肺炎疫情影響
防疫習慣成為日常
健保署實施口罩實名制 2.0
健保新服務 健保快易通
e-Mask 口罩預購
目的
紓解藥局與衛生所的壓力
提升民眾多元購買管道便利性
Research 收集 Google Play 和 App Store 上相關找尋口罩的 app 以及健保局的「健保快易通 e-Mask」
著手調查後，針對疫情期間使用者使用「找口罩 app」及「e-mask 的使用阻力」，團隊將發 散的議題利用 KJ 法整理主要 5 大主題，並設計任務請 6 位受試者進行易用性評估，透過找尋 口罩及購買口罩流程等任務後，進行深度訪談並分析痛點。 調研的主要 5 大主題
1「找口罩」App 的使用阻力 口罩和疫情資訊傳遞效果不佳
2 「e-Mask」的使用阻力 對於 e-Mask 的驗證感到費力
地圖搜尋功能沒有達到幫助
e-Mask 預購口罩流程不清楚
使用地圖查看的易用性不佳
e-Mask 資訊架構不良功能易混淆
icon 功能意義不明確
e-Mask 介面易用性不佳
介面缺少回饋感
e-Mask 的提醒及通知功能不明顯
3 生活被疫情改變 4 對現況的期待 5 關心疫情的方式 11
Customer Insights -使用者訪談到eMask購買流程分析 6 位使用者的痛點為我們擬定資訊架構的依據，並對現況需求作為改良重點。
現況需求
民眾習慣透過網路平台、App 快速獲得疫情資訊
本籍人士
身分驗證 eMask App 使用阻力
流程混亂
操作過程
讀卡機認證 臨櫃認證
不確定是否預購成功 ?
什麼時候該繳費、取貨 ?
-收斂後的設計提案
身分驗證流程混亂 實體 操作過程回饋感不足
心理
讀卡機認證
外籍人士
臨櫃認證
回饋感不足
The Vision
行動電話認證
對疫情的不安感
Information Architecture 分析原先 e-Mask 的資訊架構
1 規劃完整驗證流程 2 提升資訊易讀性
3 操作錯誤時提供更多協助管道 1 提供完整記錄查詢與動作提示
2 使介面操作與資訊獲取過程更直觀
1 提供關鍵疫情資訊查看功能
2 降低民眾對疫情的心理不安
-資訊架構設計過程 針對使用者需求優化資訊架構 請受試分類欲優化的功能
比較分類上的認知差異 並優化資訊架構
12
Functional Map 身分驗證流程混亂是一大痛點，因此在認證頁前新增認證條件篩選功能，引導使用者到預想認 證的頁面，在認證失敗的時候也能藉由輔助功能頁引導到其他認證功能，而不是讓使用者不斷 嘗試無法認證的管道。
2019 - 2020 Chang Chih-Yao
口罩預購首頁
行動裝置認證
其他管道認證
口罩預購紀錄
認證條件說明頁
認證條件篩選頁
繳費功能
綁定資料認證
手機認證
電腦認證
認證管道說明頁
認證輔助功能
疫情資訊頁
臨櫃認證
健保卡綁定 口罩預購
Main Functions 首頁 / 疫情資訊
預購查詢
行動電話認證
其他管道認證
Logic Flow and Wireframes 規劃功能地圖
頁面邏輯圖規劃
繪製 UI Wireframe 測試 - 找專家測試
- 找 3 名使用者測試
發現邏輯錯誤，討論修正邏輯
13
14
Wireframes
Logic flow
Userbility Testing and Iteration 疫情資訊
首頁 問題點
圖示看不出跟預購關聯性
改善
將原本插圖的位置改為
ICON，並將插圖移至背景。
問題點
覺得長條圖不太直觀 改善
2019 - 2020 Chang Chih-Yao
「每月確診人數」
問題點
提示頁覺得沒重點，會忘記 要做什麼
預購查詢
改善
將「 提 醒 」 兩 個 字 放 大 並
問題點
改為紅色，提醒使用者。
會想要下收資訊欄，但發現不行 覺得如果一開始只有上方的框 框，會比較直覺
QRCODE 認證
改善
取消以男女形式區分 將標題「累積確診人數」改為
行動電話認證
問題點
分男女統計的意義不大
沒有未繳費提示，覺得容易錯過
在第一步驟不知道要用手 機還是電腦搜尋網頁
改善
詳細資訊列做成可收合形式 主頁的「預購查詢」鍵上方增
在步驟說明裡加上「請以
加紅色小點提示
電腦搜尋」文字
Screens and Features 首頁 / 疫情資訊
預購查詢
視覺化的關鍵疫情資訊查看功能，降低民眾對
優化預購查詢介面，讓使用者能清楚知道自己
疫情的不安感。
15
的繳費情況。
行動電話認證
優化流程、增加所需物件的 ICON 圖示，增加操作易用性。
其他管道認證
透過漏斗篩選機制，引導使用者輕易找到最適合自己的認證管道。
Visual Design #3E8AFB
#FFC04F
中文 : 思源黑體
英文 : Museo Sans
16
UI/UX design
Group work
2010.02 - 2020.04
Design App - EASYBUS
2019 - 2020 Chang Chih-Yao
長者更容易上手的導航小幫手
Design App - EASYBUS 長者更容易上手的導航小幫手
Group work
張智堯、王駿騰、陳勤旻、魏玉珊、汪嘉緯
My Duty
UX Research /Mockup/Interactive Prototype/Usability Test
Background 此次為期 8 周的互動設計課程，主題為公車 app 設計專案，我們這組選擇為長者設計更友善的 搭公車幫手 app，提供長者更簡潔的介面與易懂的流程，分為長者模式與家人模式。長者較易
遇到問題的設定內容與新增路線等步驟皆可由透過家人模式設定，長者只需直接點選設定完成 的分類標籤即可。
User needs
Business Goals
快速簡易操作，找到搭乘路線
提供安穩搭乘，提倡友善都市
提前規劃交通，減少等待時間
減少碳排放量，營造綠色城市
2019 - 2020 Chang Chih-Yao
清楚標示路線，理解觀看資訊
鼓勵大眾運輸，促進通暢交通
Competitive Analysis 調查市面上熱門用來查找大眾交通的 APP
優點
痛點
Moovit
Bus+
台北好行
可拍照記錄環境
多元的交通系統
大眾運輸時間精準
多元的交通系統
顯示離自身最近的站牌距離
多元的交通系統
公車站牌在地圖顯示過小
公車標籤功能藏在深層頁
顏色區分班次 無收尋車站功能 較繁瑣的確認步驟
查看很吃力
多數使用者找不到
資訊架構混亂、功能太離散
機會點
19
1. 優化個人化的地點設定，省去每次查找站牌的步驟 2. 更大的介面，閱讀和點選都省力
Personas 交友廣泛的小美阿嬤 主要坐車找朋友
追求快速方便
了解基本APP操作
是否需要轉車
目標
是否有座位
- 事先了解如何抵達目的地 - 可以獨自找到公車站牌
價錢
- 可以不用太多等待就搭上公車
搭哪一班公車比較快?
挑戰
距離
- 市中心公車常常都很多人，就算等到也不一定能搭上
路況
- 大眾運輸APP有很多介面，有些不太知道怎麼用 - 大眾運輸常常需要轉車
年齡 : 66
有在使用的APP
角色 : 退休的家庭主婦 家庭狀況 :已婚，子女和孫子皆住在自家附近
Bio
居住地 : 大台北市中心 性別 : 女
小美阿嬤退休後即待在家中擔任家庭主婦，常常搭著公車去拜訪
個性 內向
動機
住在鄰近地區的兒女、孫子和朋友們。無聊時也會搭著大眾運輸
外向
出門玩，並會定期去醫院複診。
電視報導
小美阿嬤很依賴大眾運輸，也喜歡在家先用APP看好大眾運輸抵
安靜
活潑
勤儉持家
大方
脾氣好
脾氣
具影響力平台
達時間，雖然她大致了解APP操作，但偶爾還是搞不懂裡面較少
LINE新聞
用到的介面，也常常看不清楚路線圖，偶爾會不小心搭錯公車， 耽誤跟兒女和醫生約好的時間。
FB貼文
小美總是習慣選擇轉車次數最少的班次，但同時也希望花費較少
傳統報紙
的時間抵達目的地。
關心家中長輩的阿明 希望長輩安全
追求快速方便
即時跟長輩聯繫
目標 - 事先為家中長輩找好交通資訊 - 讓長者可以獨自找到公車站牌不迷路 - 可以讓長者搭上有座位的公車
你自己去會不會很危險?
是否有座位 是否能夠即時了解老人狀況
挑戰
隨時幫助長者規劃路線
- 有時候長輩臨時要出門自己卻在上班，無法帶長者去
提醒長者事項
- 一般的APP對於長者來說太複雜，教好幾次都不會 - 大眾運輸有時候會有很多人
年齡 : 40 角色 : 家庭的經濟支柱 家庭狀況 :已婚，和家中長輩住在附近
有在使用的APP
Bio
居住地 : 大台北市中心 性別 : 男
兒子阿明是家中的主要經濟支柱，雖然固定上下班，但是難免
個性 內向
動機 是否能協助老人安全到達
會遇到需要加班、應酬的情況，有時候不一定能夠準時回到家 陪伴家人與家中長者。
外向
具影響力平台 電視報導
某些時間家中長者需要出門的時候，都是由兒子阿明開車載他
安靜
活潑
勤儉持家
大方
脾氣好
脾氣
們去的，因為不放心長輩自己做大眾運輸工具，但是因為工作
LINE新聞
的關係沒有辦法馬上離開，當長輩說自己要出門的時候都感到 格外的擔心。
FB貼文
阿明希望能夠有一個自己與長者可以共同使用的APP，幫助長
傳統報紙
者可以安全的抵達目的地
20
2019 - 2020 Chang Chih-Yao
Story Board 長輩
家人
21
Information Architecture 登入/註冊 選擇身份
家人模式
查看長者狀態
撥打電話
長者目前定位
長者模式
搜尋地點
設定
新增群組標籤
帳號設定
撥打電話
地點群組
偏好設定
切換模式
設定
細分地點
帳號設定
偏好設定
切換模式
地點公車資訊
新增標籤 新增備註
公車到站時間
查看/新增備註
圖片導覽
地圖導覽
公車動態
Customer Journey Map
家人幫忙設定 步驟
起意
搜尋想要加入標籤、註記的地點
接觸點
觀看長者動態
聯絡長者
首頁
APP首頁
標籤列表
標籤列表
地點新增註記
查看長者動態
查看長者動態
進入家人模式的首頁
在搜尋欄位中搜尋” 星光醫院”
將”星光醫院”加入”醫 院”的標籤
新增完標籤之後，在註 記的欄位中提醒長輩要
註記完之後觀看長者現 在的位置情形
發現長者已經在同一個 地點停留過久，決定打
通話模式
行動
想到長輩上次說想 坐大眾運輸工具到“
打開“Easy Bus”APP
星光醫院”復健
思考
拿藥
想幫助長者設定到達星光醫院的路線
在搜尋頁面裡面應該可以找到星光醫院
星光醫院應該要歸類到 ”醫院”的類別
想提醒長者除了去復 健之外記得去拿藥
想要目前長者的位置順 便提醒他有新增註記
按下通話鍵詢問長輩 的狀況，並提醒有新
電話過去
增註記
停留太久的話還是打一 下電話比較安全
提醒長者在註記裡面有 請他記得拿藥的事情
情感曲線
奶奶去醫院 步驟
起意
搭公車前準備
前往站牌
搭上公車
前往醫院
22分
接觸點
24分
首頁
26分 27分
APP首頁
標籤列表
地點詳細資訊
地點詳細資訊
圖片引導模式
公車動態
圖片引導模式
地圖引導模式
通話模式
上車之後打開APP確認 要到”台北車站”下車
下車之後知道怎麼走 了，於是使用地圖模 式走到醫院
出醫院之後透過APP 的電話功能通知家人 自己要回去了
因為知道怎麼走所以開 地圖大概知道自己在那 裡就好
打電話聯絡家人，希望 讓家人都能夠知道自己 的狀況
行動
想坐大眾運輸工具 到“星光醫院”復健
思考
打開“Easy Bus”APP
想看要怎麼最快到達星光醫院
點開家人幫忙設定好 的”醫院”標籤
選擇”星光醫院”
看到醫院的標籤上面 有藍色的點點
點開之後發現自己要去 的星光醫院也有藍點
看到家人幫自己註記的 事項想起要順便去拿藥
選擇附近公車站牌”最 快到達”標題的266
跟著圖片模式的引導走 到公車站
到站等車的時候發現 即將要到站的公車人 數較少，決定搭乘
看到註記欄的位置有 家人打上的提醒註記
希望能快點到達星光 醫院
跟著APP上的圖片走就 不用擔心了
希望可以搭到人不要那 麼多的公車
跟著APP走就知道要在 台北車站下車
情感曲線
22
1
Screen & Features 家人模式與長者模式
2
家人協助為地點新增備註
將對於長者來說較複雜的設定與輸入交由家人完成
提醒長輩該如何每周固定至此醫院回診，和朋
長者只須執行在設定好的內容中進行點選
並有快速日期標註可選擇及新增
友見面的時間為兩點半等
2019 - 2020 Chang Chih-Yao
家人設定完成後即在長者手機中同步更新
3
家人協助設定常去地點 第一次使用時引導使用者幫助長輩新增標籤，搜尋地點後點選分類，方便查找
23
4
長者快速選擇前往目的地 長者模式首頁顯示標籤群組，免去輸入，直接點選常去地點 開始導航後視情況選取圖片模式與地圖模式
圖片模式在途中個點都有放圖片，步行過程中展開可顯示轉彎處圖面
5
尋求協助 撥打電話 查看定位 家人可在首頁地圖即時查看長者定位，發現停留過久時可撥打電話詢問情況 長者介面右下角皆有電話圖標可在須幫助時快速撥打給指定家人
24
25
2019 - 2020 Chang Chih-Yao
Cross x
「在時間即圓的世界裡，每一次握手、每一個吻、每一次生產、 每一個字，都將一絲不移地重演又重演。」 ——《愛因斯坦的夢》
26
Design Product -Cross 回收玻璃光柵時鐘
Designer
張智堯、邱莉媛
玻璃材料雋永、可回收的特質， 充分體現在每一次迴圈裡。 走過時間的洗禮，依然澄澈透明， 不疾不徐的往前邁進。
時鐘 80% 皆為回收玻璃製成， 2019 - 2020 Chang Chih-Yao
利用表面處理製作光柵鐘面， 讓時間流逝的過程模糊浪漫， 大面積展示材質的光學特性。
光線路徑圖 觀察者眼睛
A. 時針存在
觀察者眼睛
B. 時針不存在
時針轉動時會改變 AB 的比例，達到光柵「消 失—存在—消失」效果。
27
註1
註2
註 1、2 圖引用自春池玻璃
28
2019 - 2020 Chang Chih-Yao
A portable drone design for long-distance traveler
29
30
Design Product -pat 為城市旅行者而生的無人機
Designer
張智堯、羅尹余
Background 困難點
目標
- 難以收納
- 簡單收納進背包、能夠保護螺旋槳
- 無人機有許多尖角
- 使用總次數變多，可隨時充電
- 螺旋槳外露
2019 - 2020 Chang Chih-Yao
- 攜帶型無人機電量容易不足（約只有 7~18 分鐘）
- 造型圓潤
- 最體貼的收納 針對攜帶性、收納、使用時間延長，pat 為了長途旅行者而設計。 我們採用圓潤的造型，有別以往無人機的多面體切割產生許多尖角， 以折疊的方式收納雙軸飛行 翼，螺旋槳則以按壓方式彈出與收回， 輕巧的體積、簡單的收納步驟， 讓使用者能安心收置背包 繼續旅程。
pat 擁有專用的充電底座， 在簡易的收納過後，置入背包即可進行充電， 在城市旅程中，使用的體
驗時間加長，讓沿途的美好不再錯過。
31
Frustrations - Hard to Storage
- Propeller exposure
- Many sharp corners
- Run out of battery power quickly (approximately 7~18 minutes)
Goals - Simple put into the backpack, helping protect the propeller. - Rounded Shape
- The times of using the product increases, and the product can be recharged any time, any
place.
-The most thoughtful drone design. For portability, storage, and extended use, pat is designed for long-distance travelers.
Featuring a rounded shape, Pat is different from normal drones producing many sharp
corners. By pressing the propeller's center, users an let it inside to eject or retract. Its lightweight size and simple storage steps make it easy for travelers continue their journey.
Moreover, Pat features a special charging base, letting users simply put it in their backpack
and charge it. By improving endurance, users would no longer miss the stunning scenery during the long journey.
32
2019 - 2020 Chang 2019Chih-Yao - 2020 Chang Chih-Yao
STAUB CLASSIC ACCESSORY Cast Iron Pot Lid Holder
Using cast iron pot lid on the small dining tablve occupies a large area of the table, so this is why Staub cast iron pot holder come out.
mixes classic kitchenware and dynatic functions . whether you’re
g to open a bottle of beer, this gorgeous set features various usabil-
, all while remaining cool to the touch.
zwilling cookware
chiyal chang
Design Product -Staub Classic Accessory Cast Iron Pot Lid Holder
Designer
張智堯
SPACE-SAVING POT LID HOLDER Staub pot lid holder is specially designed for cast iron pots, so that you will no longer be restricted by the dinning table space, solving the pain point of placing the pot lid.
Moeover, The weight of the cast iron pot can greatly increase the stability of the pot
2019 - 2020 Chang Chih-Yao
holder.
Not only easy to use but very stable.
The wood chassis can take off and wash. 35
Environmentally friendly The integrated cast iron material is used. Not only durable, but also less production waste.
Highly compatible The notch has 12mm width, so the holder can be use to place variety of pot lid.
Wide and solid wooden chassis The wooden material prevents the pot from getting injured
by the holder.
36
2019 - 2020 Chang Chih-Yao
Electric Scooter Design 9 month Industry-academia cooperation
My duty | Industrial Design, Mechanical design
Fairly Bike Manufacturing Co., Ltd. e-flow | e-scooter
37
38
Form Design Feature- Visible
2019 - 2020 Chang Chih-Yao
Shaped Supporting Sructure
Form Design- Method Hand-Made Model + CAD
CAD & Assembly
39
Reverse engineering
Human factors engineering
Achievement International Show
Milan Motocycle Show 2019
Taipei Cycle Show 2019
40
Product Sketch
2019 - 2020 Chang Chih-Yao
Marker + Colored Pencil
39
40
Mechanical Drawing -Integrated Assembly
2019 - 2020 Chang Chih-Yao
機械製造與裝配製圖
CAD Assembly Working Drawing
A
2019 - 2020 Chang Chih-Yao
16
15
7
A 24
28
27
3
1
30 20 13 22 14 25
17 2
9 21 8 17 23
43
11
26
B
19
31
開口銷
SS41
1
0.000 kg
30
止推滾珠軸承
SS41
1
0.227 kg
CNS 398 - 0.8 x 14 JIS B 1532 - 51306 30x60x21
29
推拔銷
SS41
1
0.005 kg
CNS 396 - 5 x 30
28
彈簧墊圈
SS41
1
0.001 kg
CNS 5052 - 8
27
平行鍵
SS41
1
0.004 kg
CNS 169 - 5 x 5 x 20
26
平行鍵
SS41
1
0.010 kg
CNS 169 - 5 x 5 x 50
25
帶錐形鑽孔的雙列自
SS41
1
0.305 kg
SKF K1207 EK
動調心滾珠軸承 SKF
31
29
12
B
B 5
24
六角頭螺桿
SS41
1
0.012 kg
ISO 4017 - M8 x 16
23
六角頭螺桿
SS41
11
0.003 kg
ISO 4017 - M5 x 12
22
六角頭螺桿
SS41
2
0.003 kg
ISO 4017 - M5 x 10
21
六角螺帽
SS41
2
0.012 kg
CNS 3128 - M 10
20
O 形密封環
橡膠
1
0.000 kg
CNS 10489 - P11.2
19
抗拉彈簧1
SUP3
1
0.001 kg
18
O型密封環
橡膠
2
0.000 kg
17
固定軸
S35C
1
0.002 kg
16
彈簧固定軸
S35C
1
0.001 kg
15
固定螺栓
S35C
1
0.002 kg
14
油管
橡膠
1
0.000 kg
13
法蘭蓋
FC250
1
0.007 kg
12
拉桿
S35C
2
0.011 kg
11
前蓋
FC250
1
0.002 kg
10
側蓋
FC250
2
0.004 kg
9
旋轉軸
S35C
1
0.024 kg
8
旋轉塊
S35C
1
0.012 kg
7
把手
FC250
1
0.044 kg
6
襯套
S35C
1
0.041 kg
5
轉軸
S45C
1
0.069 kg
4
擺動桿
S45C
1
0.146 kg
3
栓槽穀
S45C
2
0.006 kg
2
栓槽軸
S45C
1
0.006 kg
1
本體
FC250
1
0.279 kg
件號 單位 材質
名稱 mm
材料 數量 日期
6
4
18
5
頁數
重量
比例
-
備註
電腦輔助機械設計製圖
組合圖
10
數量
圖 名
離合器機構
簽 名
張智堯
44
CAD C-C
B-B
Reverse Engineering
5
7
M 2x
39 18 � 50
45 °
B
27
10 21
32
37 1 2.5
R5
C
±0 .1 3
R8
1 5°
12
10°
A
R4 8
2019 - 2020 Chang Chih-Yao
B
11
E(2:1) R8
A
� 3
17°
°
8 M
5
12
7
R1 0
2 x�6
7
R1
51±0.15
60°
0
R6
11
33
R6
3 8°
40
5
R1 0
R3
H
H
R7 4
15 °
20°
41
60
3
1
32 65
H-H 5
9
6
45
2
5 R1 1
7
z
R5 0
R5
x R1
3
° R6
22
13 0. ±
9
45 �
C
R
D
55
2
12
�4
45
4
33
3
°
21
R45
R4 1
3.7
J
Ø7
5 4xØ 5
6 �
51
4xØ 8
D
57
64
J-J ( 2:1 )
66 82
1
8
8
86
D-D G
48
12
12 10
82
17
w
w
Ra 50
x
Ra 12.5
y
Ra 3.2
z
Ra 0.8
註解： 1.未標註之機削公差依 CNS 4018 B 1037之中級規定 2.未標註之鑄造公差依 CNS 4021 B 1040之中級規定 3.未標註之圓角為R2 -0.1 +0.3 4.未標註之去角為1×45° 5.邊緣型態依 CNS 3-17
2
3
表面織構符號對照
Ø 25
18
Ø 14
58
11
Ø 30
4
Ø 18
y
1
12
66±0.15
5 25
G(2:1)
80
x
121
4xM 4
90
19
55
Ø 24 32 10
5
24
E
R17
31
11
5
12
2
R5
7
F
10
13 34
Ø 36
12
14
R20
Ø 30
4
J
36
y
x
(R6 )
2
4 R4
4
R7
7
R
F(2:1)
7
10
9 16
1 件
名稱
mm
單位
材料
數量
日期
1
0.325 kg
材料
數
重量
比例
1:1(2:1)
備註
電腦輔助機械設計製圖
系統分解圖 頁數
鋁合金
圖 名
實物測繪
簽 名
張智堯
46
CAD Exploded Isometric Assembly
38
7
37
43
33
2019 - 2020 Chang Chih-Yao
40 16
27
23 14
18
47
3
34
20
36
21
35 17
表面織構符號對照 w
Ra 50
x
Ra12.5
y
Ra 3.2
z
Ra 0.8
11
3
41
32
25
31
24
2
10
42
9 13
19
C 00 M 89 Y95 K00 C 00 M 00 Y 00 K 64 C 00 M 00 Y 00 K 40 C 00 M 00 Y 00 K 24
43
排氣蓋
塑膠
1
0.018 kg
42
CNS 5050 - A - 6.5
SS41
4
0.002 kg
墊圈
41
CNS 9074 - 15 x 1
SS41
2
0.001 kg
彈簧扣環 彈簧扣環
40
CNS 9074 - 32 x 1.2
SS41
1
0.002 kg
39
卸油螺栓
S45C
1
0.003 kg
38
CNS 4373 - M 4
SS41
1
0.002 kg
37
螺樁
S45C
1
0.001 kg
36
頂軸
S45C
1
0.000 kg
35
套筒螺栓
S45C
1
0.003 kg
34
螺栓
S45C
1
0.001 kg
33
閘門板
S45C
1
0.001 kg
32
彈簧
SUP3
1
0.002 kg
31
止退塞
S45C
1
0.001 kg
IS0 6194/1 -
SS41
1
0.002 kg
30
29
22
環 2 - 金屬罩
CNS 2862 B2116 -
SS41
1
0.128 kg
深溝滾珠軸承
SS41
1
0.103 kg
深溝滾珠軸承
6205 - 25 x 52 x 15 28
CNS 2862 B2116 6204 - 20 x 47 x 14
26
SS41
27
CNS 397 - 5 x 10
26
CNS 4305 - M4.2 x 9.5
15 39
8 29 4
旋轉軸唇類型密封
22x40x7-類型 2
12
30
翼形螺帽
1
28
5
SS41
1
0.001 kg
平行銷
1
0.002 kg
(板金) 自攻螺桿
25
CNS 3121 - M8 x 35
SS41
2
0.020 kg
六角頭螺栓
24
CNS 5052 - 8
SS41
2
0.001 kg
彈簧墊圈 六角頭螺栓
23
CNS 4322 - M6 x 16
SS41
16
0.006 kg
22
油切
S45C
1
0.000 kg
21
活塞套環
S45C
1
0.002 kg
20
活塞環
S45C
2
0.001 kg
19
活塞軸
S45C
1
0.007 kg
18
轉輪墊片
S45C
1
0.002 kg
17
防塵螺栓
SS41
1
0.009 kg
16
開放閘門片
SS41
1
0.001 kg
15
油窗
塑膠
1
0.006 kg
14
轉輪
FC20
1
0.378 kg
13
進氣塞
S45C
1
0.007 kg
12
防塵蓋
FC20
1
0.004 kg
11
活塞
S45C
1
0.060 kg
10
活塞桿
FC20
1
0.035 kg
9
活塞桿下塊
FC20
1
0.016 kg
8
曲柄軸
S45C
1
0.234 kg
7
排氣室
塑膠
1
0.043 kg
5
進氣蓋
FC20
1
0.034 kg
4
軸蓋
FC20
1
0.095 kg
3
上蓋
FC20
1
0.186 kg
2
活塞筒
FC20
1
0.216 kg
1
本體
FC20
1
0.842 kg
數
重量
比例
1:4
件
名稱
mm
單位
材料
材料 數量
日期
電腦輔助機械設計製圖
系統分解圖 頁數
備註
圖 名
空機壓縮機
簽 名
張智堯
48
Chang, Chih-Yao
2019-2020