nextdrive
重塑設計系統，提升開發效率，
增強品牌調性
重塑設計系統，提升開發效率，增強品牌調性
重塑設計系統，提升開發效率，
增強品牌調性
專案時程
專案時程
2024/06-08
2024/06-08
專案任務
專案任務
負責盤點兩產品所有功能頁面，以 Google material design 3 為基礎，建立設計系統包含基礎設定與元件，並調整UI 風格
負責盤點兩產品所有功能頁面，以 Google material design 3 為基礎，建立設計系統包含基礎設定與元件，並調整UI 風格
專案團隊
專案團隊
產品經理 *1
工程師 *2（iOS/Android）
產品經理 *1
工程師 *2（iOS/Android）
產品經理 *1
工程師 *2（iOS/Android）
專案貢獻
專案貢獻
優先針對產品核心流程建立設計系統，加快專案進行時程
擴展元件使用場景，提升開發效率，工程師無需因功能更新而重複製作元件
優先針對產品核心流程建立設計系統，加快專案進行時程
擴展元件使用場景，提升開發效率，工程師無需因功能更新而重複製作元件
專案背景
專案背景
有限制的設計系統
有限制的設計系統
有限制的設計系統
Ecogenie+ 和 Connect 兩產品經多位設計師共同開發並共用設計系統。其中，Ecogenie+ 作為家庭能源管理系統（HEMS），具備多種功能並持續透過插件擴展。隨著功能增加，缺乏巢狀元件（nested components）概念且難以擴展的設計系統變得不易維護，影響使用者體驗。
Ecogenie+ 和 Connect 兩產品經多位設計師共同開發並共用設計系統。其中，Ecogenie+ 作為家庭能源管理系統（HEMS），具備多種功能並持續透過插件擴展。隨著功能增加，缺乏巢狀元件（nested components）概念且難以擴展的設計系統變得不易維護，影響使用者體驗。
專案目標
專案目標
從最具影響力的部分開始！
從最具影響力的部分開始！
從最具影響力的部分開始！
盤點所需元件後，為加快開發速度，首先將重點放在兩產品「共同使用」的元件開始執行，並以 Google Material Design 3 Kit 為基礎，逐步建立元件庫，提升開發效率。兩產品在使用流程上有重疊的部分，包含一開始的閘道器聯網到連結裝置的過程。
盤點所需元件後，為加快開發速度，首先將重點放在兩產品「共同使用」的元件開始執行，並以 Google Material Design 3 Kit 為基礎，逐步建立元件庫，提升開發效率。兩產品在使用流程上有重疊的部分，包含一開始的閘道器聯網到連結裝置的過程。
基礎設定
基礎設定
本設計系統與其他網站產品共享部分，如間距（spacing）、圓角（radius）、斷點（Breakpoints）等基礎設定將不再贅述，以下將針對新設定內容說明。
本設計系統與其他網站產品共享部分，如間距（spacing）、圓角（radius）、斷點（Breakpoints）等基礎設定將不再贅述，以下將針對新設定內容說明。
Color System
原先的色彩系統包含 67 種顏色，盤點後我們發現大多數顏色的使用頻率較低。因此，在此次更新設計系統時，我們將色彩數量減少至剩餘 1/3 的核心顏色，以提升系統的整體效率與一致性。
原先的色彩系統包含 67 種顏色，盤點後我們發現大多數顏色的使用頻率較低。因此，在此次更新設計系統時，我們將色彩數量減少至剩餘 1/3 的核心顏色，以提升系統的整體效率與一致性。
Typography
在字型定義中，iOS 和 Android 系統均採用 Noto Sans 系列字型，並根據三種語言的特性，分別使用各自適合的字型類型。
在字型定義中，iOS 和 Android 系統均採用 Noto Sans 系列字型，並根據三種語言的特性，分別使用各自適合的字型類型。
盤點所需元件後，為加快開發速度，首先將重點放在兩產品「共同使用」的元件，並以 Google Material Design 3 Kit 為基礎，逐步建立元件庫，提升開發效率。
Shadow
在字型定義中，iOS 和 Android 系統均採用 Noto Sans 系列字型，並根據三種語言的特性，分別使用各自適合的字型類型。
在字型定義中，iOS 和 Android 系統均採用 Noto Sans 系列字型，並根據三種語言的特性，分別使用各自適合的字型類型。
盤點所需元件後，為加快開發速度，首先將重點放在兩產品「共同使用」的元件，並以 Google Material Design 3 Kit 為基礎，逐步建立元件庫，提升開發效率。
Icon
元件各狀態定義
元件各狀態定義
以下列舉幾種核心元件，並針對其在 App 中互動狀態進行定義，包括原始 / 正常（Enabled）、聚焦（Focused）、錯誤（Error）和禁用（Disabled）等情況。
盤點所需元件後，為加快開發速度，首先將重點放在兩產品「共同使用」的元件，並以 Google Material Design 3 Kit 為基礎，逐步建立元件庫，提升開發效率。
讓元件可以被廣泛使用！
讓元件可以被廣泛使用！
以 List 元件為例，我們運用 Figma Properties 建立各種排列組合，
最大化單一元件未來的使用情境，下圖展示 List 元件在產品應用的實際畫面。
以 List 元件為例，我們運用 Figma Properties 建立各種排列組合，最大化單一元件未來的使用情境，下圖展示 List 元件在產品應用的實際畫面。
盤點所需元件後，為加快開發速度，首先將重點放在兩產品「共同使用」的元件，並以 Google Material Design 3 Kit 為基礎，逐步建立元件庫，提升開發效率。
Let's See！
Let's See！
圓滑曲線，提升產品質感
圓滑曲線，提升產品質感
團隊影響力
團隊影響力
在有限資源中最大化設計系統效用
在有限資源中
最大化設計系統效用
在有限資源中最大化設計系統效用
這次重塑設計系統不僅提升了整體開發效率，工程師在建立元件庫後無需因功能更新而重複製作元件。同時，我們也調整了兩款產品的視覺風格，使其更加符合公司的產品調性。
這次重塑設計系統不僅提升了整體開發效率，工程師在建立元件庫後無需因功能更新而重複製作元件。同時，我們也調整了兩款產品的視覺風格，使其更加符合公司的產品調性。
考量未來系統的擴展性
考量未來系統的擴展性
考量未來系統的擴展性
隨著 Ecogenie+ App 功能不斷增加，設計系統變得難以維護。建立跨產品設計系統時，應考慮未來擴展性，確保時間人力的最大效益。
隨著 Ecogenie+ App 功能不斷增加，設計系統變得難以維護。建立跨產品設計系統時，應考慮未來擴展性，確保時間人力的最大效益。
80 / 20 法則：
先做最具影響力的部分
80 / 20 法則：
先做最具影響力的部分
80 / 20 法則：
先做最具影響力的部分
在重建這兩款產品的設計系統時，首先從功能重疊的部分著手，快速定義並建立雛型，增加團隊的成就感與信心，未來隨著資源的增加，再逐步擴展功能。
在重建這兩款產品的設計系統時，首先從功能重疊的部分著手，快速定義並建立雛型，增加團隊的成就感與信心，未來隨著資源的增加，再逐步擴展功能。
