使用者介面設計課程講義

UI/UX Design Figma

Design System｜設計系統

Author

JinJin Wang

UI/UX Design Lead
December 3, 2025

Design System｜設計系統概論

什麼是設計系統（Design System）？

設計系統（Design System）是一套 用來建立、管理與維持產品設計一致性 的完整規範與資源集合。它不是單一元素，而是一套「共同語言」，讓所有設計師、工程師與團隊成員都能以統一的方式建立界面。

figma
Modern Style Guide Design
  1. 設計系統的核心概念
    2. 設計系統 =規則（Rules）+ 元件（Components）+ 文件（Documentation）+ 原則（Principles）
    figma
    Design System Architecture (full-fat version)

    設計系統包含：

    1. 視覺規範（Visual Guidelines）

      2. 如顏色、字體、間距、按鈕風格、影線、圓角等。

    2. 元件庫（Component Library）

      3. 把常用界面元素做成可重複使用的形式，例如按鈕、表單、卡片、導覽列。

    3. 可組裝的模板（Templates）

      4. 例如列表頁、產品卡片、文章區塊、Hero Banner。

    4. 設計原則（Design Principles）

      5. 　規範整個產品應有的語氣、操作邏輯、使用體驗。

    5. 文件化（Documentation）

      6. 為什麼這樣設計、什麼時候要用、要注意什麼。

  2. 為什麼要有設計系統？
    1. 讓所有頁面風格一致

      2. 沒有設計系統，就會發生：

      • 每個頁面按鈕長得不一樣
      • 文字大小亂跳
      • 間距不一致
      • 顏色不統一
      • 設計系統就是為了避免「越做越亂」。
    2. 提高效率（做一次，用很多次）

      3. UI 製作時：

      • ❌ 沒有系統 → 每次從零開始
      • ✔ 有設計系統 → 像積木（元件）快速組裝頁面
    3. 方便維護與擴充

      4. 品牌改色只需調整一次，所有頁面自動更新。增加新功能時，只需用既有元件組裝

    4. 設計與工程能用同一套語言

      5. 　工程師看到 Design System 就能知道：元件名稱、原子組成、對應的 CSS 樣式、Component Variants

  3. 設計系統與風格指南的差別
    1. Brand Guideline（品牌指南）
      • Logo、品牌色、字體、影像風格
      • 公司層級的品牌規範
    2. Style Guide（視覺風格指南）
      • UI 色票、字級、Icon、按鈕樣式
      • UI 視覺統一
    3. Design System（設計系統）
      • 色、字、間距、元件、模板、原則、文件
      • 整個產品的完整設計規範

      👉 Design System 是比 Style Guide 更完整、更實用的「界面設計規範」。

  4. 設計系統的完整架構

    5. 設計系統常見的內容如下：

    1. ① Color System 色彩系統

      2. Primary / Secondary / Neutral / Functional（Success / Error…）

    2. ② Typography 字體系統

      3. H1–H6、Body、Caption、字重、行高、節奏

    3. ③ Spacing & Layout 間距與版面

      4. Spacing scale、Grid、Auto Layout 規則

    4. ④ Components 元件庫

      5. 按鈕 Button、表單 Input、圖片卡片 Card、彈窗 Modal、導覽列 Navigation、Tag / Badge

    5. ⑤ Variants 與狀態

      6. Default / Hover / Pressed / Disabled

    6. ⑥ Templates 範本

      7. 列表頁、文章頁、商品卡、頁面 Hero

    7. ⑦ Documentation（使用說明）

      8. 說明：何時使用按鈕？表單間距應該是多少？卡片內的留白規則是什麼？

  5. 設計系統範例
    1. Design System設計系統-Example
    2. Figma Design System
    3. Flamingo Design System

設計系統的形式演變

  1. 印刷媒體的設計系統

    2. 廣泛被應用在企業識別系統 CIS，研究指出其時代可追溯到二戰希特勒的德國國家設計系統，1950 年後因應品牌全球化浪潮，廣泛被美國、日本企業使用於品牌宣傳。在網路傳播盛行前，識別系統手冊主要以印刷媒體傳播，利用各種規範可逆向製作商標，為避免被仿冒，這類手冊多被企業當作營業機密。

    figma
    1964年東京奧運會徽標重繪
  2. IOS6至IOS7之介面演化

    3. iOS 7 於2013年9月18日正式推出。iOS 7 引入的扁平化設計風格給 iOS 1 到 iOS 6 不斷完善的擬物化設計風格畫上了句號。

    figma
    iOS 7 icons vs iOS 6 icons
  3. 扁平化設計

    4. 從2014年開始，扁平化設計趨勢逐漸蔓燒到了所有的網頁、系統與裝置介面，眼前所及之處無不是扁平化風格，形成新一代介面設計的熱潮。 扁平化設計(Flat Design)，泛指一種完全以平面化來呈現視覺元素，去除浮雕、陰影、漸層等3D立體感；通常以對比度高的色塊、搭配無襯線字體，呈現乾淨簡約的風格。

    它的出現某程度上是回應追求過於寫實的設計之下的產物。由於早年Apple的擬真化設計(Skeuomorphism)實在太成功，在硬體裝置和網頁介面設計上引起了一股熱潮，就是將所有按鈕畫得像實物一樣，令用戶完全代入。就這樣，Microsoft開展其改革腳步，提倡扁平化設計，將重心放於呈現按鈕的功能性，省去不必要雕砌的枝節，2012年推出 Windows 8電腦作業系統向 Apple宣戰。

    figma
    Windows 8電腦作業系統

    在2015-2016年的兩年間，許多大廠的商標形象在一夕間似乎也天翻地覆了起來。YouTube、ebay、Spotify、Twitter等眾多科技公司無不換上了嶄新的商標。大型車廠如奧迪和BMW也對其LOGO進行最大幅度的一次調整。

    figma
    ig
  4. 網路媒體的設計系統

    5. 設計系統可以想像是一個資源庫，裡面有設計風格規範、重複使用的介面設計元素(UI element)、重複使用的互動設計元素(像是檔案管理)、大方向的設計方向，甚至是動畫設計元素或是檔案工具管理等等。設計系統不僅僅只是介面設計的規範而已，更是團隊的工作方式和團隊所注重的核心價值。設計系統(Design System)可以幫助不同產品有和諧的使用者體驗以及風格，不僅讓公司對闡述品牌的核心價值有幫助，使用者也可以預期他們怎麼去使用產品。

    設計系統(Design System)可以幫助不同產品有和諧的使用者體驗以及風格，不僅讓公司對闡述品牌的核心價值有幫助，使用者也可以預期他們怎麼去使用產品

    設計系統的架構

    當今的設計系統通常由三個部分組成：風格指南 Style Guides、模式庫 Pattern Library、組件庫 Component Library。- Design Systems and Their Benefits。

    1. 風格指南 Style Guides
      • 品牌設計 Brand Design 方面：字體、色彩、商標。
      • 使用者體驗 UX Style Guides 方面：設計方向、視覺互動設計標準。
    2. 模式庫 Pattern Library

      3. UI 元素（如按鈕和表單）

    3. 組件庫 Components Library

      4. UI pattern 加上 code（已具備功能樣式的模組，是可以直接套用的一段程式碼）

Design System｜知名設計系統案例

Design System 範例

現在的設計系統，已經無法避免被複製，現在的全球化佈局，也需要即時傳播給全球各辦公室/供應商，為了降低成本，快速發布、有效控管版本，許多 Design System 與 Guideline 從紙本轉變為線上公開下載的資料，甚至 Apple、Google、Microsoft 還為自家產品開發商設置設計系統網站。 透過觀察這些大神級設計系統，能幫助同學見識到大師價值上億的秘訣，但我們此時未必需要應用 OS 級的龐大系統，在學習階段先觀察學習產品等級的就非常夠用了。

  1. APPLE Human Interface Guidelines｜蘋果人機界面準則

    2. figma
    APPLE Design

  2. Google Material Design

    • Material 3 Design Kit

      • Material Design 3 是Google的開源設計系統，用於建立美觀、易用的產品。利用情感驅動的使用者體驗，打造更易用、更具吸引力的產品。 M3 Expressive 增加了鮮豔的色彩、直覺的 動態效果、自適應 組件、靈活的 字體和對比鮮明的 形狀。

    figma
    Google Material Design

  3. IBM and Lauren Rice｜Carbon Design System(v11)

  4. Microsoft Fluent 2

ICON｜概述

ICON｜概述

隱喻作用

圖標通過傳遞我們已經理解的屬性來使用視覺隱喻來加快理解速度。
figma
隱喻作用

圖片來源： Unsplash和 Material Design 圖標 產生的鬧鐘

觸發動作

當用作按鈕時，圖標執行操作。APP中的常用圖標按鈕包括用於搜索的放大鏡或用於瀏覽的漢堡健等。
figma
觸發動作
Dropbox Android應用中的圖標按鈕
圖片來源： Foundations of iconography｜圖標設計的基礎

指路

隨著人們工作越來越忙，圖標已經成為了我們生活中的一部分。它們幫助我們快速定位，幫助我們快速的做出決定和行為，以及幫助我們找到需要的東西。圖標連接著整個世界。不管你使用什麼樣的語言，作為視覺語言的圖標都發揮著巨大的作用。
figma
指路系統

圖片來源： makebardo的皇后鎮機場

IconFont 圖示字體

圖標在APP的UI設計上，是非常重要的部分，但常因需要快速設計等問題，目前IconFont 圖示字體，非常流行，比較常見的如：Font Awesome 、 IcoMoon …等由於其輕便快速以及免費的性質，被廣泛運用在網頁設計與APP設計上，缺點則是無設計上的獨特性與品牌的象徵性，因此設計APP，獨特專屬的ICON設計也非常的重要。
figma
圖示字體

Font Awesome

Keyline Shapes

繪製ICON，可以使用不同的方法，包括：像素網格（pixel grid），關鍵線形狀（Keyline Shapes），正交形狀（orthogonals），蒙版（mask）和安全區域/修剪區域（safe area / trim area），每種方式都提供了關鍵的參考點。ICON的創作者可以選擇要使用的內容和要忽略的內容。
figma
Keyline template for your icons (Community)

Icon Grids & Keylines Demystified｜圖標網格和關鍵線不再神秘
iOS App圖標網格：蘋果的圓形圖標（例如Safari，時鐘，指南針和設置）直接遵循其圓形鍵線。
figma
iOS App圖標網格
在設計ICON之前，需了解如何保持一致的視覺比例，Keyline形狀是基於網格。通過使用這些核心形狀作為基線，可以在整個產品 icon 中保持一致的視覺比例。 iOS和Material網格之間的主要區別是在Material中添加了關鍵形狀。模板化了四個基本形狀：
figma
Keyline形狀

資料來源：如何繪製出視覺比例一致的產品圖標呢？
Gmail使用橫向矩形鍵線：
figma
Keyline形狀/figcaption>
資料來源：UI/UX：畫 icon 的心路歷程
figma
Keyline形狀

Icon｜Grid｜Keyline Shapes｜Figma檔案分享

  1. 圖標設計的關鍵線模板｜Keyline template for your icons
  2. Bondi Icons for macOS
  3. Icon Grid Structures
  4. BAndroid Material Icon Maker
  5. Material 3 Design Kit｜Google 開源設計系統的最新版本
  6. Material symbols｜Plugin
  7. Material Design｜Material 3 是 Google 開源設計系統的最新版本。使用 Material 3 設計和建構美觀、可用的產品。
  8. Apple Design Resources – iOS 17 and iPadOS 17

HomeWork｜課後作業

設計系統製作

  • Design System設計系統-Example
    • 請依據期中題目繼續往下延伸。
    • 依據上週情緒版完成後，繼續進行設計系統色彩樣式規範。
    • 依序完成文字樣式、按鈕等設定
    • 本作業為期末作業其中一部份，後續將陸續完成