摘要
這篇文章將帶你走進Flutter設計系統的世界，不僅是對基礎Token的了解，更深入到Atomic Design的完整架構，讓你感受到設計系統如何為開發帶來便利和效率。 歸納要點:
- 深入探討Flutter設計系統的原子設計架構，幫助提升可維護性與擴展性。
- 解析如何整合動態主題與黑暗模式，確保應用程式在多種主題下保持一致性。
- 分享最佳實踐以減少冗餘程式碼，提高效能，同時介紹版本控制及團隊協作策略。
為什麼需要設計系統
想像一下，走進一個每個細節—from 照明到家具—都能和諧運作的工作空間，為你創造出無縫且激勵人心的體驗。就像 WeWork India 精心設計的空間一樣，你的 Flutter 應用程式也可以透過 **SpaceDesign** 這個設計系統來實現相同水平的一致性、可擴展性和優秀的用戶體驗。在這次多部曲的冒險中，我們將從打好基礎開始。如果不一致的 UI、任性的顏色或混亂的間距曾經困擾過你的代碼，那麼準備好吧！我們即將深入探討建立一個設計系統所需的基石，確保你的 UI 不僅一致，更是引人入勝。讓我們啟航吧！🚀
在此需要強調的是，即使這種做法主要針對 Flutter，但可擴展設計系統實施原則同樣適用於其他平台，以確保在不同生態系統中獲得統一體驗。
## 為什麼需要設計系統？🤔
如果沒有設計系統，你的應用很快就會變成不堪入目的雜燴—充斥著不規則的按鈕、隨意搭配的顏色以及不可預測的間距。而設計系統所帶來的是：✅ **一致性**—每一個畫面和元件都感覺像是同一應用的一部分。此外，它還提供了可重複使用性與效率，使得開發者能夠更方便地維護與擴展產品。
良好的設計遵循材質設計原則，包括色彩搭配、排版風格及圖示使用等，這些元素共同提升產品可訪問性與整體用戶體驗。而客製化參數，如主題顏色或間距設定，可以根據不同品牌需求進行調整，讓你的設計系統具備靈活應用能力，以達到最佳效果。
在此需要強調的是，即使這種做法主要針對 Flutter，但可擴展設計系統實施原則同樣適用於其他平台，以確保在不同生態系統中獲得統一體驗。
## 為什麼需要設計系統？🤔
如果沒有設計系統，你的應用很快就會變成不堪入目的雜燴—充斥著不規則的按鈕、隨意搭配的顏色以及不可預測的間距。而設計系統所帶來的是：✅ **一致性**—每一個畫面和元件都感覺像是同一應用的一部分。此外，它還提供了可重複使用性與效率，使得開發者能夠更方便地維護與擴展產品。
良好的設計遵循材質設計原則，包括色彩搭配、排版風格及圖示使用等，這些元素共同提升產品可訪問性與整體用戶體驗。而客製化參數，如主題顏色或間距設定，可以根據不同品牌需求進行調整，讓你的設計系統具備靈活應用能力，以達到最佳效果。
從主題到堅實基礎
✅ **速度** - 可重用的樣式和元件讓您的開發過程更高效。 ✅ **可擴展性** - 容易在不破壞設計的情況下進行擴展。 ✅ **品牌識別** - 確保所有元素與品牌美學保持一致。有了 SpaceDesign，您的 Flutter 應用將保持 **乾淨、精緻且專業** - 遠離混亂！🚀---## 從主題到堅實基礎 🏗️我們已經了解到設計系統如何使應用在視覺上保持一致，但現在是時候深入探討了。一個優秀的設計系統不僅僅關乎顏色和字體，它始於 **設計原語**，這些是您 UI 的核心構建塊。可以把 **設計原語想像成您設計系統的 DNA** - 這些基本元素確保您的應用感覺結構良好、平衡且具可擴展性。從顏色到間距，再到字體和圓角，這些元素為您應用中的每個元件奠定了基礎。但我們該如何讓這些值在整個 Flutter 應用中變得可重用且具可擴展性呢？這就是 **Token 的登場**。## 那麼 Token 究竟是什麼呢？🤔一個 **Token** 是一種可重複使用的設計值，有助於在整個應用中維持一致性。在此過程中，我們還可以利用 Material Design 和 Cupertino 樣式來創造出更加一致的視覺體驗。此外，深入探討自定義參數如顏色、字型及間距設定，可以幫助讀者更好地理解如何調整與運用這些 Token，以達成更具個性化的設計效果。如果能提供一些範例代碼或工具鏈接，那就更有利於讀者實際操作與應用了。
觀點延伸比較:
| 結論 | 內容 |
|---|---|
| 設計系統的重要性 | 透過一致性、可重用性與效率，避免應用成為不堪入目的雜燴，提升整體用戶體驗。 |
| 代幣的角色 | 使用原始代幣和語意代幣來維持設計的一致性，使代碼更易於維護和更新。 |
| 設計原則 | 包括色彩、間距、字體及圓角等基本元素，以確保UI的結構良好和平衡。 |
| 原子設計方法論 | 將UI拆解為可重複使用的基本元素，提高組件的可擴展性與效率。 |
| Flutter主題化的優勢 | 利用ThemeData提供全局樣式控制，支持動態切換主題以增強用戶體驗。 |
什麼是設計代幣
在設計過程中，與其到處硬編碼顏色、間距或字體，不如將它們定義為**代幣**——也就是可以在整個代碼庫中引用的命名值。舉例來說，與其這樣寫：
### 代幣有兩種形式：
1️⃣ **原始代幣** - 就是那些基本的設計值，比如十六進制顏色（`#FF5733`）、間距單位（`8dp`）、字型大小（`16sp`）等等。
2️⃣ **語意代幣** – 給原始值賦予更具意義的名稱，例如 `primaryBackground` 或 `bodyTextColor`。這些名稱描述了代幣的用途，而不僅僅是它們本身是什麼。
## 設計原則：你的 UI LEGO 積木 🏗
把設計原則想像成構建你 UI 傑作所必須的基本 LEGO 積木。它們包括：
( color: Color(0xFF6200EA),)( color: AppColors.primaryColor,)### 代幣有兩種形式：
1️⃣ **原始代幣** - 就是那些基本的設計值，比如十六進制顏色（`#FF5733`）、間距單位（`8dp`）、字型大小（`16sp`）等等。
2️⃣ **語意代幣** – 給原始值賦予更具意義的名稱，例如 `primaryBackground` 或 `bodyTextColor`。這些名稱描述了代幣的用途，而不僅僅是它們本身是什麼。
## 設計原則：你的 UI LEGO 積木 🏗
把設計原則想像成構建你 UI 傑作所必須的基本 LEGO 積木。它們包括：
設計原語：你的UI樂高積木
## 🎨 色彩原則
- **中性色調**：包括如黑、白及透明這些核心顏色。
- **灰階**：用於分隔線和非活動元素的細微色調。
- **品牌顏色**：一系列代表品牌身份的顏色，用於您的 Flutter 應用中的主要操作、重點及裝飾。
## 📏 間距原則
- **比例與基本單位**：一個一致的間距系統，能夠適應不同螢幕尺寸。
- **邊距**：確保佈局呼吸良好的垂直和水平間距。
## 🔡 字體原則
- **字型系列與字重**：從常規到粗體，讓文本既時尚又易讀。
- **大小與行高**：為可存取性和美觀提供完美的度量標準。
- **字母間距與大小寫風格**：提升視覺層次感的小細節。
## 📐 圓角原則
- **比例**：從銳利邊緣到柔和圓潤的角落，讓人倍感親切。
- **特定元件值**：針對按鈕、卡片及彈出框等進行量身定制的圓角設計。
---
## 語意標記: 為設計注入意義 🧠
在建立基礎之後，語意標記便能賦予您的設計更多內涵。透過使用命名標記，例如 `AppColors.primaryBackground` 來替代直接編碼數值如 `Color(0xFF0000)`，讓您的程式碼變得更聰明、更整潔。
- **中性色調**：包括如黑、白及透明這些核心顏色。
- **灰階**：用於分隔線和非活動元素的細微色調。
- **品牌顏色**：一系列代表品牌身份的顏色，用於您的 Flutter 應用中的主要操作、重點及裝飾。
## 📏 間距原則
- **比例與基本單位**：一個一致的間距系統，能夠適應不同螢幕尺寸。
- **邊距**：確保佈局呼吸良好的垂直和水平間距。
## 🔡 字體原則
- **字型系列與字重**：從常規到粗體，讓文本既時尚又易讀。
- **大小與行高**：為可存取性和美觀提供完美的度量標準。
- **字母間距與大小寫風格**：提升視覺層次感的小細節。
## 📐 圓角原則
- **比例**：從銳利邊緣到柔和圓潤的角落，讓人倍感親切。
- **特定元件值**：針對按鈕、卡片及彈出框等進行量身定制的圓角設計。
---
## 語意標記: 為設計注入意義 🧠
在建立基礎之後，語意標記便能賦予您的設計更多內涵。透過使用命名標記，例如 `AppColors.primaryBackground` 來替代直接編碼數值如 `Color(0xFF0000)`，讓您的程式碼變得更聰明、更整潔。
)
Free Images語義代幣：為你的樣式增添意義
## 標記類別概覽
- **顏色標記**：定義背景、互動狀態、狀態顏色，甚至是漸層效果。
- **間距標記**：為設計標準化邊距、佈局及格網系統，以達到平衡的視覺效果。
- **字型標記**：設置一致的文本樣式，以區分標題與正文。
- **效果標記**：管理陰影、模糊度、不透明度，甚至是平滑的運動過渡。語義標記旨在實現可擴展性和一致性，使你的用戶介面既可靠又美觀。
## 原子設計：SpaceDesign 的秘密武器 ⚛️
原子設計的方法論由 **Brad Frost** 提出，它為紛亂的界面帶來結構。這種方法將用戶界面拆解成小而可重複使用的元素。我們來看看讓你的應用既視覺協調又高效組織的五個基本構件。
## 1️⃣ 原子：基本單元
原子是最小且不可分割的 UI 元素，可以把它們想像成你設計系統中的「原材料」。按鈕、輸入框、標籤和圖示都是屬於這一類。在 Flutter 中，如 `IconButton`、`Text` 和 `ElevatedButton` 都可以歸納為原子的範疇。
- **顏色標記**：定義背景、互動狀態、狀態顏色，甚至是漸層效果。
- **間距標記**：為設計標準化邊距、佈局及格網系統，以達到平衡的視覺效果。
- **字型標記**：設置一致的文本樣式，以區分標題與正文。
- **效果標記**：管理陰影、模糊度、不透明度，甚至是平滑的運動過渡。語義標記旨在實現可擴展性和一致性，使你的用戶介面既可靠又美觀。
## 原子設計：SpaceDesign 的秘密武器 ⚛️
原子設計的方法論由 **Brad Frost** 提出，它為紛亂的界面帶來結構。這種方法將用戶界面拆解成小而可重複使用的元素。我們來看看讓你的應用既視覺協調又高效組織的五個基本構件。
## 1️⃣ 原子：基本單元
原子是最小且不可分割的 UI 元素，可以把它們想像成你設計系統中的「原材料」。按鈕、輸入框、標籤和圖示都是屬於這一類。在 Flutter 中，如 `IconButton`、`Text` 和 `ElevatedButton` 都可以歸納為原子的範疇。
原子設計：SpaceDesign的秘密武器
在設計系統中，元素的組合從基本到複雜，可以分為幾個層級。首先，我們來看看**原子**這一最小單位。想像一下，一個簡單的按鈕，當你點擊它時會觸發某種動作。雖然看似微不足道，但這樣的小元件卻是功能強大的基石！接著，我們進入第二層次——**分子**，也就是將多個原子結合起來形成的小型功能性組件。比如說，一個包含輸入框和圖標的搜尋欄，就可以被視為一種分子，就像我們喜愛的食物搭配：**花生醬與果醬**、**薯片與沾醬**，彼此結合後更加美味！
再往上，我們談談第三層級——**有機體**。這些較大的UI組件是由多個分子和原子組成，它們能夠執行更為複雜的任務並與使用者進行互動。例如，一張包含圖標、文字和按鈕的卡片，就是一個典型的有機體，它們各自協同工作，共同提升整體用戶體驗。在設計過程中，不僅要關注每一個元素本身，更要思考如何透過色彩、排版及動態效果等細節來增強使用者情感上的共鳴，使得整體界面不僅實用，也充滿吸引力。
再往上，我們談談第三層級——**有機體**。這些較大的UI組件是由多個分子和原子組成，它們能夠執行更為複雜的任務並與使用者進行互動。例如，一張包含圖標、文字和按鈕的卡片，就是一個典型的有機體，它們各自協同工作，共同提升整體用戶體驗。在設計過程中，不僅要關注每一個元素本身，更要思考如何透過色彩、排版及動態效果等細節來增強使用者情感上的共鳴，使得整體界面不僅實用，也充滿吸引力。
Flutter的主題化優勢
## 4️⃣ 模板：佈局大師
模板定義了**組件的排列方式**，但不會指定實際的內容。它們為頁面提供結構，但並不決定填充它們的具體細節，就像是等待肌肉和皮膚覆蓋的**骨架**。📐 **範例：** 一個具有預設區域的`Scaffold`，如**標題、主體和頁腳**。
## 5️⃣ 頁面：最終產品
頁面是所有元素融合在一起的地方。它們是用戶所見及互動的**最終成果**。📱 **範例：** 完整設計好的**首頁畫面**，包含導航欄、英雄區塊與內容區。
---
## 為什麼Flutter的主題化是一場革命 🎨
Flutter可不是一般的UI工具包，它是一個強大的平台，提供多種樣式應用的方法來美化你的應用程式。在這裡，你可以透過使用`ThemeData`來設定顏色、字型以及形狀等參數，進一步優化你應用內部的一致性。此外，你還能利用`Material Design`和`Cupertino Design`中的組件，以確保跨平台的一致性。
再者，我們可以深入探討如何透過自訂樣式Token（例如間距、邊框圓角）來提升UI的一致性與可維護性，使得設計系統更加靈活且具擴展性。因此，在這些方面上，Flutter無疑帶來了全新的可能與機遇。
模板定義了**組件的排列方式**，但不會指定實際的內容。它們為頁面提供結構，但並不決定填充它們的具體細節，就像是等待肌肉和皮膚覆蓋的**骨架**。📐 **範例：** 一個具有預設區域的`Scaffold`，如**標題、主體和頁腳**。
## 5️⃣ 頁面：最終產品
頁面是所有元素融合在一起的地方。它們是用戶所見及互動的**最終成果**。📱 **範例：** 完整設計好的**首頁畫面**，包含導航欄、英雄區塊與內容區。
---
## 為什麼Flutter的主題化是一場革命 🎨
Flutter可不是一般的UI工具包，它是一個強大的平台，提供多種樣式應用的方法來美化你的應用程式。在這裡，你可以透過使用`ThemeData`來設定顏色、字型以及形狀等參數，進一步優化你應用內部的一致性。此外，你還能利用`Material Design`和`Cupertino Design`中的組件，以確保跨平台的一致性。
再者，我們可以深入探討如何透過自訂樣式Token（例如間距、邊框圓角）來提升UI的一致性與可維護性，使得設計系統更加靈活且具擴展性。因此，在這些方面上，Flutter無疑帶來了全新的可能與機遇。
自定義世界與主題擴展
在Flutter的設計系統中，你有幾種選擇來打造你的應用界面：1. **Material Design (`MaterialApp`)** – 這是現代、受Android啟發的設計風格，適合想要迎合當前潮流的開發者。2. **Cupertino Design (`CupertinoApp`)** – 如果你偏好那種優雅且具蘋果風格的感覺，這就是你的最佳選擇。3. **Vanilla Design (`WidgetsApp`)** – 這是一個極簡主義的空白畫布，可以讓你自由創作出獨一無二的介面。而所有的一切，都圍繞著 **`ThemeData`** 的核心運行。- **ColorScheme**: 幫助你保持色彩調和與一致性。- **TextTheme**: 提供清晰易讀的排版設計。- **自定義主題**: 通過擴展 `ThemeData` 加入你的個人化元素，讓設計更具特色。- **動態主題切換**: 可以隨時在明亮和黑暗模式之間轉換，提升用戶體驗。- **可擴展性**: 確保每個屏幕和組件都能看起來同樣出色。
## 自定義世界與主題擴展 ✨
當你需要更多個性化時，自定義主題擴展是絕佳選擇，它允許你向 `ThemeData` 添加自訂屬性，而不會影響整體結構。在Flutter中，基礎Token如顏色、字體和間距等都可以方便地進行客製化管理，使得全局樣式更加一致。此外，在Material Design與Cupertino風格之間靈活切換，也能透過自定義Widget進一步增強用戶互動體驗，讓開發者能夠靈活運用各種參數來創造出獨特且協調一致的界面設計。
## 自定義世界與主題擴展 ✨
當你需要更多個性化時，自定義主題擴展是絕佳選擇，它允許你向 `ThemeData` 添加自訂屬性，而不會影響整體結構。在Flutter中，基礎Token如顏色、字體和間距等都可以方便地進行客製化管理，使得全局樣式更加一致。此外，在Material Design與Cupertino風格之間靈活切換，也能透過自定義Widget進一步增強用戶互動體驗，讓開發者能夠靈活運用各種參數來創造出獨特且協調一致的界面設計。
如何在小部件中使用自定義樣式
要在應用程式中統一使用我們的自定義樣式，首先需要將一個 `ThemeData` 實例提供給 `MaterialApp`。這裡是一個基本範例：
接下來，我們可以創建一個名為 `MyApp` 的小部件，如下所示：
在這段代碼中，`lightThemeData` 和 `darkThemeData` 包含了我們的主題擴展，確保應用中的自定義樣式能夠一致地生效。
## 創建樣式預設 ✨
在開始之前，讓我們先設置一個自定義樣式容器：
## 將自定義樣式添加到 ThemeData 🎯
現在，我們可以將這些自定義樣式整合進應用的主題中：
## 使用上下文擴展輕鬆訪問 🔮
為了簡化長篇的主題查找，可以使用以下擴展方法：
## 在小部件中使用自定義樣式 🚀
現在，我們可以在實際的 UI 元素中運用這些樣式了，例如：
## 為什麼這麼好 🌟
利用主題擴展不僅使得風格簡單、統一且具可擴展性。IDE 中的自動完成功能讓你更容易找到所需的樣式，而所有內容都集中於同一位置。此外，在光明模式和黑暗模式之間切換也變得非常流暢。通過有組織的風格、工廠構造函數和上下文擴展，可以保持代碼乾淨、可讀且高效。
void main() {
runApp(MyApp());
}
接下來，我們可以創建一個名為 `MyApp` 的小部件，如下所示：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: lightThemeData,
darkTheme: darkThemeData,
themeMode: ThemeMode.system,
home: HomeScreen(),
);
}
}
在這段代碼中，`lightThemeData` 和 `darkThemeData` 包含了我們的主題擴展，確保應用中的自定義樣式能夠一致地生效。
## 創建樣式預設 ✨
在開始之前，讓我們先設置一個自定義樣式容器：
class TextStyleThemeExtension extends ThemeExtension<TextStyleThemeExtension> {
final TitleTextStyles titleTextStyles;
final BodyTextStyles bodyTextStyles;
factory TextStyleThemeExtension.create({
required TitleTextStyles titleTextStyles,
required BodyTextStyles bodyTextStyles,
}) {
return _getExtension(
titleTextStyles,
bodyTextStyles,
);
}
@override
ThemeExtension<TextStyleThemeExtension> lerp(
covariant ThemeExtension<TextStyleThemeExtension>? other,
double t,
) => this;
static TextStyleThemeExtension _getExtension(
TitleTextStyles titleTextStyles,
BodyTextStyles bodyTextStyles,
) {
return TextStyleThemeExtension._(
bodyTextStyles: bodyTextStyles,
titleTextStyles: titleTextStyles,
);
}
}
## 將自定義樣式添加到 ThemeData 🎯
現在，我們可以將這些自定義樣式整合進應用的主題中：
ThemeData theme = ThemeData(
extensions: [
TextStyleThemeExtension.create(
titleTextStyles: titleTextTokens,
bodyTextStyles: bodyTextTokens,
),
],
);
## 使用上下文擴展輕鬆訪問 🔮
為了簡化長篇的主題查找，可以使用以下擴展方法：
extension ThemeExtensions on BuildContext {
TextStyleThemeExtension get textStyles => Theme.of(this).extension<TextStyleThemeExtension>()!;
}
## 在小部件中使用自定義樣式 🚀
現在，我們可以在實際的 UI 元素中運用這些樣式了，例如：
Text(
"Hello, Flutter!",
style: context.textStyles.titleTextStyles.heading,
);
## 為什麼這麼好 🌟
利用主題擴展不僅使得風格簡單、統一且具可擴展性。IDE 中的自動完成功能讓你更容易找到所需的樣式，而所有內容都集中於同一位置。此外，在光明模式和黑暗模式之間切換也變得非常流暢。通過有組織的風格、工廠構造函數和上下文擴展，可以保持代碼乾淨、可讀且高效。
下一步會發生什麼
🚀 **P.S.: 一旦你開始使用主題擴展功能，就再也回不去了！**## 接下來會發生什麼？敬請期待第二部分這僅僅是個開始！在第二部分中，我們將揭開更多秘密：- **基於JSON的ThemeData** - 了解SpaceDesign如何透過設計標記的JSON檔案提供`ThemeData`，讓管理和更新應用程序主題變得輕而易舉。 - **動態主題切換** - 根據用戶偏好，實時自動更新你的UI，實現流暢的明暗模式切換。 - **持久化用戶偏好** - 輕鬆存儲和獲取用戶選擇的主題，確保帶來個性化的使用體驗。 - **全局色彩方案** - 通過結構化的方法在應用內保持一致的色彩風格。 - **元件庫** - 探索一系列預先構建的UI元件，以適應不同品牌美學。整合**SpaceDesign**到你的Flutter項目中，不僅是建立一個應用，而是打造一種體驗，一種能夠捕捉[WeWork India]那種既精緻又親切氛圍的體驗。所以，你準備好提升你的Flutter UI了嗎？讓我們一起創造一些非凡的東西吧！🔥---你覺得怎麼樣？準備好讓你的Flutter設計混入一些[WeWork]魔法了嗎？隨時分享你的想法和問題，我們一起來討論吧！
參考來源
awesome-ChatGPT-repositories/docs/README.zh-hant. ...
利用OpenAI 的GPT-3 模型，FigmaChain 可以讓開發人員從Figma 設計輸入中快速生成HTML/CSS 代碼。它還包括一個基於Streamlit 的聊天機器人界面，用於交互式代碼生成。
來源： GitHubTensorFlow Lite，ML Kit 和Flutter 移动深度学习：1~5
在本章中，我们将构建一个Flutter 应用，该应用能够使用ML Kit 的Firebase Vision 人脸检测API 从从设备图库上传的媒体中或直接从相机中检测人脸。 该API ...
來源： 博客园2019-2021美团技术年货
先来回顾一下Flutter 的三层结构：. 在Flutter 的架构设计中，最上层为框架层，使用Dart 语言开发，面向Flutter 业务. 的开发者；中间 ...
來源： meituan.netf2e-awesome/knowledge: 文档着重构建一个完整的「前端 ...
文档着重构建一个完整的「前端技术架构图谱」，方便F2E(Front End Engineering又称FEE、F2E) 学习与进阶。 - f2e-awesome/knowledge.
來源： GitHub学习之路指南：GitHub 教程与指南精选手册一
现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript ...
來源： CSDN博客Neutralinojs教程项目实战初体验（踩坑指南），干翻electron ...
本项目实现了一个所见即所得的网页实时操作页面，旨在演示一些如何搭建项目，并介绍Neutralinojs中的一些常见api，包括IPC消息通讯，托盘，消息通知等.
來源： CSDN博客你不知道的VSCode 代码高亮原理
Vscode 的代码高亮、代码补齐、错误诊断、跳转定义等语言功能由两种扩展方案协同实现，包括：. 基于词法分析技术，识别分词token 并应用高亮样式; 基于可编程语言特性 ...
來源： 腾讯云
全部
資訊科技
相關討論