智慧物聯網管理平台
智慧物聯網管理平台
智慧物聯網管理平台
智慧物聯網管理平台
打造一站式 IoT 解決方案｜輕鬆管理，全面掌握
打造一站式 IoT 解決方案｜輕鬆管理，全面掌握
打造一站式 IoT 解決方案｜輕鬆管理，全面掌握
打造一站式 IoT 解決方案｜輕鬆管理，全面掌握
視覺介面設計 & 操作流程規劃
視覺介面設計 & 操作流程規劃
產品概覽
產品概覽
產品概覽
產品背景
產品背景
在數位化快速發展的今天，物聯網已經成為提升效率和創新的重要工具，許多企業也開始追求數位轉型與智慧發展，所以我們團隊希望利用 IoT 技術打造靈活又高效的智慧系統，讓工作環境更智慧、生活品質更舒適。因此，我們開發了一套IoT 解決方案，適用於智慧辦公室、智慧家庭等場景，幫助各產業在快速變化的市場中能跟上趨勢。
在數位化快速發展的今天，物聯網已經成為提升效率和創新的重要工具，許多企業也開始追求數位轉型與智慧發展，所以我們團隊希望利用 IoT 技術打造靈活又高效的智慧系統，讓工作環境更智慧、生活品質更舒適。因此，我們開發了一套IoT 解決方案，適用於智慧辦公室、智慧家庭等場景，幫助各產業在快速變化的市場中能跟上趨勢。
團隊成員
團隊成員
產品經理、UIUX設計師、前端工程師、後端工程師
產品經理、UIUX設計師、前端工程師、後端工程師
我的角色與職責
我的角色與職責
擔任 UIUX設計師，負責系統的介面設計及功能流程規劃
擔任 UIUX設計師，負責系統的介面設計及功能流程規劃
產品定位與目標挑戰
產品定位與目標挑戰
產品定位與目標挑戰
核心價值｜『輕鬆部屬快速導入』
核心價值｜『輕鬆部屬快速導入』
只需簡單操作即可輕鬆完成部署與管理，即時獲取並洞察有價值的數據，並將其轉化為有力的商業決策。
_
提供整合完成的設備與系統平台
以視覺化儀表板呈現關鍵數據，協助使用者即時掌握現況
透過簡單的管理介面，快速完成設備綁定與狀態監控
只需簡單操作即可輕鬆完成部署與管理，即時獲取並洞察有價值的數據，並將其轉化為有力的商業決策。
_
提供整合完成的設備與系統平台
以視覺化儀表板呈現關鍵數據，協助使用者即時掌握現況
透過簡單的管理介面，快速完成設備綁定與狀態監控
任務目標
任務目標
．數據視覺化：將感測器數據轉化為容易理解的視覺圖表，如儀表板卡片、曲線圖與柱狀圖，讓資訊是易讀好懂的。
．數據視覺化：將感測器數據轉化為容易理解的視覺圖表，如儀表板卡片、曲線圖與柱狀圖，讓資訊是易讀好懂的。
．介面與流程優化：聚焦於數據顯示頁面，建立直觀的視覺圖表與操作流程。
．介面與流程優化：聚焦於數據顯示頁面，建立直觀的視覺圖表與操作流程。
限制與挑戰
限制與挑戰
．數據視覺化：要將每一個感測器的數據都轉為易於理解的視覺圖表，我必須深入思考每個數據的意義，並選擇最合適的圖表類型，確保資訊易讀。
．數據視覺化：要將每一個感測器的數據都轉為易於理解的視覺圖表，我必須深入思考每個數據的意義，並選擇最合適的圖表類型，確保資訊易讀。
．時程壓力與限制：我們只有三週的時間，需完成一個功能完善的 Demo 版本，而非最終上線產品。這意味著我們必須在設計與開發上做出取捨。面對這些限制，我們頻繁溝通，即時同步進度，確保在有限的時間內，能將核心功能與關鍵資訊有效呈現，成功交付成果。
．時程壓力與限制：我們只有三週的時間，需完成一個功能完善的 Demo 版本，而非最終上線產品。這意味著我們必須在設計與開發上做出取捨。面對這些限制，我們頻繁溝通，即時同步進度，確保在有限的時間內，能將核心功能與關鍵資訊有效呈現，成功交付成果。
解決方案
解決方案
解決方案
智慧辦公室
智慧辦公室
透過部署各式感測器，企業能全面掌握辦公室的環境狀況，打造更健康、更高效的工作空間。
．環境監測：即時監測室內空氣品質、溫度、濕度、光照等，確保員工處於最佳工作環境。
．空間管理：監測會議室或特定區域的使用率及人數，優化空間資源配置。
透過部署各式感測器，企業能全面掌握辦公室的環境狀況，打造更健康、更高效的工作空間。
．環境監測：即時監測室內空氣品質、溫度、濕度、光照等，確保員工處於最佳工作環境。
．空間管理：監測會議室或特定區域的使用率及人數，優化空間資源配置。
智慧廁所
智慧廁所
提升公共空間的衛生與管理效率，改善使用者體驗。
．耗材管理：即時偵測衛生紙、洗手乳等用品的餘量，當存量不足時，可隨時掌握並通知管理人員補充。
．環境品質：監測空氣異味與溫濕度，當數據超標時發出提醒，清潔人員能及時處理，確保環境清潔舒適。
提升公共空間的衛生與管理效率，改善使用者體驗。
．耗材管理：即時偵測衛生紙、洗手乳等用品的餘量，當存量不足時，可隨時掌握並通知管理人員補充。
．環境品質：監測空氣異味與溫濕度，當數據超標時發出提醒，清潔人員能及時處理，確保環境清潔舒適。
設計流程
設計流程
設計理念｜視覺展示
設計理念｜視覺展示
設計理念｜視覺展示
設計概念
設計概念
作為工具類產品，我們想要傳達的核心價值為——「輕鬆部署、快速導入」，所以在設計上希望帶出產品「輕量、好上手」的感覺，所以選擇使用明亮的配色搭配活潑的插圖。這樣不只讓畫面更有親和力，也能在第一眼就傳達品牌風格，讓使用者覺得系統是清爽、沒有負擔的。
作為工具類產品，我們想要傳達的核心價值為——「輕鬆部署、快速導入」，所以在設計上希望帶出產品「輕量、好上手」的感覺，所以選擇使用明亮的配色搭配活潑的插圖。這樣不只讓畫面更有親和力，也能在第一眼就傳達品牌風格，讓使用者覺得系統是清爽、沒有負擔的。
註冊登入頁｜建立明確的產品風格
註冊登入頁｜建立明確的產品風格
我們希望從進入系統的第一步，就能帶來愉快的體驗，所以從註冊登入頁開始，我們開始建立明確的產品風格
我們希望從進入系統的第一步，就能帶來愉快的體驗，所以從註冊登入頁開始，我們開始建立明確的產品風格
．輕盈活潑的設計：我們採用明亮的色系與大量的留白，營造出舒適、無負擔的系統體驗，讓使用者即使面對工具型產品，也能保持輕鬆愉悅的心情。
．輕盈活潑的設計：我們採用明亮的色系與大量的留白，營造出舒適、無負擔的系統體驗，讓使用者即使面對工具型產品，也能保持輕鬆愉悅的心情。
．童趣插圖的應用：我們在登入頁面與系統中，融入了風格有趣的插圖。這些插圖不僅提升了整體的視覺體驗，更重要的是，它為冰冷的產品有了人性化的溫度和活力，展現了產品年輕、積極的品牌形象。
．童趣插圖的應用：我們在登入頁面與系統中，融入了風格有趣的插圖。這些插圖不僅提升了整體的視覺體驗，更重要的是，它為冰冷的產品有了人性化的溫度和活力，展現了產品年輕、積極的品牌形象。
透過多樣的插圖設計，
希望讓使用者從開始就能感受到產品的友善與易用性。
透過多樣的插圖設計，
希望讓使用者從開始就能感受到產品的友善與易用性。
數據儀錶板｜資訊洞察 隨時把關數據變化
數據儀錶板｜資訊洞察 隨時把關數據變化
數據視覺化這一部分是我們這次產品的核心，整合感測器即時回傳的數據，協助使用者監測設備與環境狀態，並在異常發生時快速反應、加速決策。
數據視覺化這一部分是我們這次產品的核心，整合感測器即時回傳的數據，協助使用者監測設備與環境狀態，並在異常發生時快速反應、加速決策。
．視覺介面：因為會需要瀏覽大量的數據資訊，所以整體配色採用明亮淺色系並大量留白，這樣可以讓數據點突出。
．視覺介面：因為會需要瀏覽大量的數據資訊，所以整體配色採用明亮淺色系並大量留白，這樣可以讓數據點突出。
．上方TAB：透過上方 TAB 分頁，使用者可依據地點或場域快速切換頁面，方便管理不同情境。
．上方TAB：透過上方 TAB 分頁，使用者可依據地點或場域快速切換頁面，方便管理不同情境。
．主要數據卡片區：在儀表板的核心區域，包含了各式的狀態卡片以及趨勢統計圖表，使用者可以查看當前最新狀態也可以追蹤歷史數據統計和分析。那卡片設計搭配 icon 呈現，降低數據帶來的壓迫感，另外儀錶板內容支援高度客製化，使用者可依需求自由新增，以保持靈活彈性。
．主要數據卡片區：在儀表板的核心區域，包含了各式的狀態卡片以及趨勢統計圖表，使用者可以查看當前最新狀態也可以追蹤歷史數據統計和分析。那卡片設計搭配 icon 呈現，降低數據帶來的壓迫感，另外儀錶板內容支援高度客製化，使用者可依需求自由新增，以保持靈活彈性。
統一功能按鈕｜保持畫面簡潔
統一功能按鈕｜保持畫面簡潔
在數據儀表板中，使用者的核心任務是「專注於數據瀏覽與判讀」。如果畫面上同時擺放太多編輯操作的按鈕，會增加干擾與視覺負擔。
因此，我們將一些按鈕的功能，統一收納到右上角的單一操作按鈕中。這樣能保持畫面乾淨，又能讓設定功能集中、好記。
在數據儀表板中，使用者的核心任務是「專注於數據瀏覽與判讀」。如果畫面上同時擺放太多編輯操作的按鈕，會增加干擾與視覺負擔。
因此，我們將一些按鈕的功能，統一收納到右上角的單一操作按鈕中。這樣能保持畫面乾淨，又能讓設定功能集中、好記。
數據視覺化亮點｜狀態卡片設計
數據視覺化亮點｜狀態卡片設計
在大量感測數據中，如何快速辨識「正常」與「異常」 是使用者最在意的需求，因此我在設計上特別強化即時狀態：
在大量感測數據中，如何快速辨識「正常」與「異常」 是使用者最在意的需求，因此我在設計上特別強化即時狀態：
直覺化的設計
直覺化的設計
以 icon + 狀態文字組合，讓使用者一眼即可理解設備或環境的狀態。
以 icon + 狀態文字組合，讓使用者一眼即可理解設備或環境的狀態。
即時的動態反饋
即時的動態反饋
當數據異常時，卡片會即時轉換顏色、icon，幫助使用者能快速發現狀況。在設計時會根據所有數值標準，去制定每一個區間的狀態顯示規則。
當數據異常時，卡片會即時轉換顏色、icon，幫助使用者能快速發現狀況。在設計時會根據所有數值標準，去制定每一個區間的狀態顯示規則。
易於擴展
易於擴展
同樣的設計語言可套用於空氣品質、光線、溫濕度等不同指標，延伸設計的同時維持一致性的體驗。
同樣的設計語言可套用於空氣品質、光線、溫濕度等不同指標，延伸設計的同時維持一致性的體驗。
Icon設計
Icon設計
為了讓每個數據都有好辨別的icon輔助接收資訊，我們深入理解每個感測器的數據意義和應用場景。
根據數據意義，我們設計了多樣的icon視覺風格，讓使用者能夠跳過閱讀文字，藉由icon就能快速理解數據的類型與含義。
為了讓每個數據都有好辨別的icon輔助接收資訊，我們深入理解每個感測器的數據意義和應用場景。
根據數據意義，我們設計了多樣的icon視覺風格，讓使用者能夠跳過閱讀文字，藉由icon就能快速理解數據的類型與含義。
建立數據卡片
建立數據卡片
選擇數據卡片類別
選擇數據卡片類別
左側類別選項：我們分成「Basic」和「Industry」兩大類別，讓使用者可以根據自身習慣來選擇：
左側類別選項：我們分成「Basic」和「Industry」兩大類別，讓使用者可以根據自身習慣來選擇：
．Basic (圖表類型優先)：可以直觀的選擇想要的圖表類型，針對熟悉要看哪一種數據類型的人員。
．Basic (圖表類型優先)：可以直觀的選擇想要的圖表類型，針對熟悉要看哪一種數據類型的人員。
．Industry（使用情境優先）：可以直接根據使用的場所情境，找到預先為該情境設計好的卡片模板，降低選擇的思考時間。
．Industry（使用情境優先）：可以直接根據使用的場所情境，找到預先為該情境設計好的卡片模板，降低選擇的思考時間。
右側數據圖表：
右側數據圖表：
．圖像與文字輔助：每個卡片都以Icon輔助文字的方式呈現，符合我們在儀表板設計中建立的Icon視覺系統。這能讓使用者快速理解卡片的功能，降低瀏覽大量文字的疲乏感。
．圖像與文字輔助：每個卡片都以Icon輔助文字的方式呈現，符合我們在儀表板設計中建立的Icon視覺系統。這能讓使用者快速理解卡片的功能，降低瀏覽大量文字的疲乏感。
．資訊說明：每個卡片右上角的資訊Icon(藍色i符號)，讓使用者可以在選擇前，hover查看該卡片適用的的設備相關說明，可以節省畫面空間。
．資訊說明：每個卡片右上角的資訊Icon(藍色i符號)，讓使用者可以在選擇前，hover查看該卡片適用的的設備相關說明，可以節省畫面空間。
設定數據內容
設定數據內容
左側預覽：左側的預覽區讓使用者在完成設定前，就能及時預期卡片的最終樣式和佈局，降低了對介面的不確定性。
左側預覽：左側的預覽區讓使用者在完成設定前，就能及時預期卡片的最終樣式和佈局，降低了對介面的不確定性。
右側欄位設定：在欄位設定有個小巧思，最下面的Target Name在進行編輯時，左側的卡片會動態即時更新，使用者可以立即確認他們輸入的名稱是否正確、是否會導致文字過多版面不協調。這種即時的可視化對比，讓使用者對儀表板的客製化更有掌握度，優化了體驗。
右側欄位設定：在欄位設定有個小巧思，最下面的Target Name在進行編輯時，左側的卡片會動態即時更新，使用者可以立即確認他們輸入的名稱是否正確、是否會導致文字過多版面不協調。這種即時的可視化對比，讓使用者對儀表板的客製化更有掌握度，優化了體驗。
Prototype
Prototype
建立卡片流程
深色模式
深色模式
我們特別設計了深色模式可做切換，讓使用者多一個選擇。當使用者在亮色背景下的閱讀資訊看久了容易疲乏，切換成深色背景能補足這個缺點，將重要內容置於焦點，令眼睛更舒適，尤其是在比較昏暗的環境。同時對於視力較低，或對強光敏感的用戶而言，也是相對友善的。
我們特別設計了深色模式可做切換，讓使用者多一個選擇。當使用者在亮色背景下的閱讀資訊看久了容易疲乏，切換成深色背景能補足這個缺點，將重要內容置於焦點，令眼睛更舒適，尤其是在比較昏暗的環境。同時對於視力較低，或對強光敏感的用戶而言，也是相對友善的。
顏色規範與設計元件
顏色規範與設計元件
反思與總結
反思與總結
反思與總結
本次專案的核心目標是設計一個能即時呈現感測器數據的智慧儀表板。
由於物聯網數據龐大且複雜，我們希望透過清晰的視覺化設計，幫助使用者快速掌握環境狀態並做出決策。
設計過程中，除了考量數據的精確傳遞，我們也希望畫面能保持簡潔、直觀，讓不同產業背景的使用者都能輕鬆理解。同時，因應不同場景需求，我們嘗試設計可自定義的卡片式模組，讓儀表板具備更高的彈性與延展性。
本次專案的核心目標是設計一個能即時呈現感測器數據的智慧儀表板。
由於物聯網數據龐大且複雜，我們希望透過清晰的視覺化設計，幫助使用者快速掌握環境狀態並做出決策。
設計過程中，除了考量數據的精確傳遞，我們也希望畫面能保持簡潔、直觀，讓不同產業背景的使用者都能輕鬆理解。同時，因應不同場景需求，我們嘗試設計可自定義的卡片式模組，讓儀表板具備更高的彈性與延展性。
成果：在時程緊湊的情況下，團隊完成了最小可行性產品，專案最終交付 DEMO，成功展現數據儀表板的核心功能，並獲得客戶正面的回饋，對未來產品的擴充性充滿期待。
成果：在時程緊湊的情況下，團隊完成了最小可行性產品，專案最終交付 DEMO，成功展現數據儀表板的核心功能，並獲得客戶正面的回饋，對未來產品的擴充性充滿期待。
收穫： 過程中，我與產品經理、前後端工程師持續密切溝通。由於大家的觀點與專業不同，討論中常能發現彼此沒有注意的細節，這讓我在設計思考與跨部門合作上有了更多提升，也更能理解即便有很多想法但「在壓力下如何快速做取捨」。也幫助我在設計思考有更深的領悟。
收穫： 過程中，我與產品經理、前後端工程師持續密切溝通。由於大家的觀點與專業不同，討論中常能發現彼此沒有注意的細節，這讓我在設計思考與跨部門合作上有了更多提升，也更能理解即便有很多想法但「在壓力下如何快速做取捨」。也幫助我在設計思考有更深的領悟。
