nextdrive
視覺化智慧辦公室配電盤資訊，
提升設備操作易用性
視覺化智慧辦公室配電盤資訊，
提升設備操作易用性
視覺化智慧辦公室配電盤資訊，提升設備操作易用性
人機介面設計
人機介面設計
專案時程
專案時程
專案時程
2023/12
2023/12
專案任務
專案任務
專案任務
負責實際場域調查、競品研究、介面設計、易用性測試等任務
負責實際場域調查、競品研究、介面設計、易用性測試等任務
專案團隊
專案團隊
專案團隊
產品經理 *2
工程師 *3（前後端、韌體）
產品經理 *2
工程師 *3（前後端、韌體）
產品經理 *2
工程師 *3（前後端、韌體）
專案貢獻
專案貢獻
專案貢獻
專案上線後，成功驗證公司產品整合能力，不僅大幅提升產品市場能見度，更打造出業界指標性的成功案例，為公司未來爭取更多合作機會奠定堅實基礎。
專案上線後，成功驗證公司產品整合能力，不僅大幅提升產品市場能見度，更打造出業界指標性的成功案例，為公司未來爭取更多合作機會奠定堅實基礎。
專案背景
專案背景
協助智慧辦公室統一管理裝置與狀態
協助智慧辦公室統一管理裝置與狀態
協助智慧辦公室
統一管理裝置與狀態
本專案是 NextDrive 驗證產品整合的重要代表產品之一，欲整合能源管理系統，模擬智慧辦公室運作，並打造直觀的人機介面（Human Machine Interface, HMI），以下簡稱人機介面為 HMI。
本專案是 NextDrive 驗證產品整合的重要代表產品之一，欲整合能源管理系統，模擬智慧辦公室運作，並打造直觀的人機介面（Human Machine Interface, HMI），以下簡稱人機介面為 HMI。
專案目標
專案目標
透過 HMI 輕鬆控制各裝置
透過 HMI 輕鬆控制各裝置
透過 HMI 輕鬆控制各裝置
使用者可輕鬆辨識配電盤中各斷路器的位置並進行操作。透過觸控螢幕，可快速控制裝置，增強辦公場域的安全與管理便利性，提升系統效率與安全性。
使用者可輕鬆辨識配電盤中各斷路器的位置並進行操作。透過觸控螢幕，可快速控制裝置，增強辦公場域的安全與管理便利性，提升系統效率與安全性。
驗證代表專案
驗證代表專案
驗證代表專案
與台電綜研所合作
驗證產品功能並展現品牌特色
與台電綜研所合作
驗證產品功能並展現品牌特色
直觀 HMI 設計
直觀 HMI 設計
直觀 HMI 設計
讓使用者能快速識別裝置位置，
並進行順暢的操作
區分模式裝置狀態
區分模式
裝置狀態
區分模式裝置狀態
切換遠端控制模式時，需在畫面呈現裝置開關與其狀態
前期研究
前期研究
實際場域
實際場域
實際場域
在專案中，PLC（可程式化邏輯控制器）負責執行和控制系統的指令。HMI 連接配電盤，組成了管理和分配電力的控制中心，確保電力順利、安全地傳送到各個用電設備。斷路器則扮演保護的角色，防止電路過載或短路引發的風險。
在專案中，PLC（可程式化邏輯控制器）負責執行和控制系統的指令。HMI 連接配電盤，組成了管理和分配電力的控制中心，確保電力順利、安全地傳送到各個用電設備。斷路器則扮演保護的角色，防止電路過載或短路引發的風險。
左圖為配電盤與其內部的斷路器；右圖為配電盤外的 HMI
左圖為配電盤與其內部的斷路器；
右圖為配電盤外的 HMI
設計挑戰
設計挑戰
設計挑戰
轉化電力設備資訊，區分裝置狀態
轉化電力設備資訊，區分裝置狀態
轉化電力設備資訊，
區分裝置狀態
一個斷路器對應多個同類型裝置
需整合裝置資訊，確保使用者理解功能與對應位置
需整合裝置資訊，確保使用者理解功能與對應位置
有效區分不同裝置狀態
切換遠端控制模式時，確保使用者能清楚辨識裝置狀態
切換遠端控制模式時，確保使用者能清楚辨識裝置狀態
競品分析
競品分析
競品分析
觀察控制面板資訊呈現方式
觀察控制面板資訊呈現方式
觀察控制面板資訊呈現方式
分析 Google Nest Hub（2nd gen）、Apple Home、Amazon's Alexa 產品後，我觀察到智慧家庭的控制面板有以下特點：
分析 Google Nest Hub（2nd gen）、Apple Home、Amazon's Alexa 產品後，我觀察到智慧家庭的控制面板有以下特點：
明確的狀態指示：裝置的開關狀態透過 icon 或卡片變化清楚展示
整體佈局設計：使用如 Bento Grid 的佈局方式，強化整體視覺統一性
俯視圖顯示空間：俯視圖讓使用者能更容易判斷裝置的相對位置
明確的狀態指示：裝置的開關狀態透過 icon 或卡片變化清楚展示
整體佈局設計：使用如 Bento Grid 的佈局方式，強化整體視覺統一性
俯視圖顯示空間：俯視圖讓使用者能更容易判斷裝置的相對位置
設計策略
設計策略
設計策略
簡化室內配置
簡化室內配置
簡化室內配置
經過實地探訪後，我們取得智慧辦公室的電路圖，並簡化了將在面板呈現的資訊，並嘗試以剖面圖和俯視圖展示室內空間的相對位置。
經過實地探訪後，我們取得智慧辦公室的電路圖，並簡化了將在面板呈現的資訊，並嘗試以剖面圖和俯視圖展示室內空間的相對位置。
Before
電路圖中複雜的斷路器與設備配置
電路圖中複雜的斷路器與設備配置
After
重點呈現的室內配置
重點呈現的室內配置
剖立面圖（上）：畫面複雜度較高，可能影響立體空間位置的判斷
俯視圖（下）：簡化室內配置，專注於裝置位置，便於快速掌握整體空間
剖立面圖（上）：畫面複雜度較高，可能影響立體空間位置的判斷；俯視圖（下）：簡化室內配置，專注於裝置位置，便於快速掌握整體空間
設計策略
設計策略
設計策略
清楚呈現空間與裝置類型的對應關係
清楚呈現空間與裝置類型的對應關係
清楚呈現
空間與裝置類型的對應關係
統整所有斷路器編號（J1、J2…etc.），並確認對應裝置類型
左圖為配電盤與其內部的斷路器；
右圖為配電盤外的 HMI
Before
為簡化配電系統的複雜度，
以「顏色」區分斷路器與相應裝置
左圖為配電盤與其內部的斷路器；
右圖為配電盤外的 HMI
After
以「顏色」和「icon」提升辨識度
使用者可根據 icon 快速尋找對應裝置，文字作為輔助說明
左圖為配電盤與其內部的斷路器；
右圖為配電盤外的 HMI
設計探索
設計探索
設計探索
如何清晰呈現不同模式下的裝置狀態？
如何清晰呈現
不同模式下的裝置狀態？
如何清晰呈現
不同模式下的裝置狀態？
根據系統預設功能，遠端調控模式的開關狀態會影響可調控的裝置。當模式關閉時，所有裝置均可調控；當模式開啟時，僅冷凍櫃、緊急照明及插座可調控。
根據系統預設功能，遠端調控模式的開關狀態會影響可調控的裝置。當模式關閉時，所有裝置均可調控；當模式開啟時，僅冷凍櫃、緊急照明及插座可調控。
在 HMI 介面中，需清晰呈現「遠端調控模式」和「裝置」的開關狀態。以下將針對 disabled toggle 元件與裝置卡片測試不同的呈現方式，評估三種方案的可讀性與易用性，並進行迭代。
在 HMI 介面中，需清晰呈現「遠端調控模式」和「裝置」的開關狀態。以下將針對 disabled toggle 元件與裝置卡片測試不同的呈現方式，評估三種方案的可讀性與易用性，並進行迭代。
我們首先進行各方案的易用性測試，隨後再到現場進行實際測試
我們首先進行各方案的易用性測試，
隨後再到現場進行實際測試
裝置卡片與狀態
裝置卡片與狀態
裝置卡片與狀態
遠端控制模式關閉
遠端控制模式開啟：僅冷凍櫃、緊急照明及插座可調控
方案三：兩種模式共用裝置狀態，避免混淆
無法被調控的裝置，移除換按鈕
遠端控制模式關閉
遠端控制模式開啟：僅冷凍櫃、緊急照明及插座可調控
方案三：兩種模式共用裝置狀態，避免混淆
無法被調控的裝置，移除換按鈕
方案一
方案一
以底色區分「裝置開關狀態」
以底色區分「裝置開關狀態」
以底色區分「裝置開關狀態」
遠端模式關
toggle 呈現裝置開關狀態
toggle 呈現裝置開關狀態
toggle 呈現裝置開關狀態
遠端模式開
不易判斷裝置實際的開關狀態
不易判斷裝置實際的開關狀態
使用者測試反饋
使用者測試反饋
使用者測試反饋
我看得出來遠端模式開啟的時候冷凍櫃、緊急照明、緊急插座都可以開關，其他裝置不行，不過我不太能判斷其他裝置到底是開啟還是關閉狀態，需要花心力去比較兩者的差異。
我看得出來遠端模式開啟的時候冷凍櫃、緊急照明、緊急插座都可以開關，其他裝置不行，不過我不太能判斷其他裝置到底是開啟還是關閉狀態，需要花心力去比較兩者的差異。
方案二
方案二
以底色區分「是否可被調控」
以底色區分「是否可被調控」
以底色區分「是否可被調控」
遠端模式關
卡片底色、toggle 呈現裝置開關狀態
卡片底色、toggle 呈現裝置開關狀態
卡片底色、toggle 呈現裝置開關狀態
遠端模式開
不易判斷裝置是否可開關
不易判斷裝置是否可開關
使用者測試反饋
使用者測試反饋
使用者測試反饋
關閉遠端模式時，我覺得裝置卡片很清楚的呈現哪些裝置開啟、哪些關閉；開啟遠端模式時，反而第一眼不太容易判斷哪些裝置目前可以開關，不過我可以看出來目前哪些裝置目前是被開啟的。
關閉遠端模式時，我覺得裝置卡片很清楚的呈現哪些裝置開啟、哪些關閉；開啟遠端模式時，反而第一眼不太容易判斷哪些裝置目前可以開關，不過我可以看出來目前哪些裝置目前是被開啟的。
方案三
方案三
🥳 移除干擾元素
🥳 移除干擾元素
🥳 移除干擾元素
經使用者測試發現，無論是方案一還是方案二，使用者都容易產生疑惑，不確定在不同模式下哪些裝置可被調控，以及當前裝置的實際開關狀態。
經使用者測試發現，無論是方案一還是方案二，使用者都容易產生疑惑，不確定在不同模式下哪些裝置可被調控，以及當前裝置的實際開關狀態。
為了提供更直觀的使用體驗，將無法調控的卡片移除干擾的「切換元件」，裝置卡片及上方的裝置狀態將僅顯示實際的開關狀態。
為了提供更直觀的使用體驗，將無法調控的卡片移除干擾的「切換元件」，裝置卡片及上方的裝置狀態將僅顯示實際的開關狀態。
遠端模式關
卡片底色、toggle 呈現裝置開關狀態
卡片底色、toggle 呈現裝置開關狀態
卡片底色、toggle 呈現裝置開關狀態
遠端模式開
易判斷裝置實際的開關狀態
易判斷裝置實際的開關狀態
使用者測試反饋
使用者測試反饋
使用者測試反饋
我覺得這個版本很好理解！不管是哪個模式，我一眼就可以知道裝置的開關狀態，而遠端控制模式開啟時，只留下可調控裝置的開關，讓我很容易聚焦，使用過程輕鬆許多。
我覺得這個版本很好理解！不管是哪個模式，我一眼就可以知道裝置的開關狀態，而遠端控制模式開啟時，只留下可調控裝置的開關，讓我很容易聚焦，使用過程輕鬆許多。
