設計語言

提示：此條目的主題不是視覺化程式設計語言。

設計語言(英語：Design Language)或設計語言系統（英語：Design Language System, DLS），是一種系統化和明確規範的語言，應用於數位產品、用戶界面設計、工業設計中。^[1]

簡介

設計語言的基本構成元素：字體、顏色、圖形、柵格設計。

設計語言統一不同的表達方式、偏好、風格、品牌精神、信念和設計原則。

對於用戶而言，設計語言可以讓產品在任何平台的體驗保持連貫性，統一項目的視覺形象，提升品牌產品的圖標、標題、宣傳物品等，尤其消費者對品牌的認知以及識別度。

對於團隊管理而言，設計師透過跟代碼複用的軟體組件，有助不同的開發者之間的協作溝通，注於並投入更多精力到探討問題本質實現價值創新，而非重複的基礎工作，提升集體協作效率，對產品生命週期控制及進行迭代，減少設計債務（Design Debt）。

核心元素

一個完整的設計語言系統通常包含以下幾個核心元素：

設計原則（Design Principles）

指導整個系統的核心理念，例如「簡潔」、「一致性」、「可用性優先」。

視覺風格（Visual Style）

• 色彩系統（Color Palette）
• 字體與排版（Typography）
• 圖示與圖形風格（Iconography & Illustration）
• 空間與間距（Spacing & Layout）
• 元件庫（Component Library）
• 可重複使用的 UI 元件，如按鈕、輸入框、卡片、對話框等，通常會搭配程式碼實作（如 React/Vue 元件）。

模式與範例（Patterns & Templates）

常見的使用者互動流程設計，例如登入流程、表單驗證、錯誤提示等。

語調與文案風格（Tone & Voice Guidelines）

定義品牌在文字上的表達方式，確保文案風格一致。

無障礙設計（Accessibility Guidelines）

確保產品對所有使用者（包括視障、聽障等）都能友善使用。 網絡應用程式通常參考Web內容無障礙指南。

設計工具與資源（Design Tokens & Assets）

包括 Sketch/Figma 檔案、設計令牌 design token（如色碼、字體大小的變數）^[2]、開發者文件等。

迭代機制（Iteration Mechanism）

通過用戶體驗反饋和 A/B測試最優化系統。

版本控制（Version Control）

• 語義化軟體版本號（如 v1.2.0）。

• 變更日誌（Changelog）記錄破壞性更新。

著名例子

數位產品

• 谷歌公司質感設計（Material Design, Material You, Material 3 Expressive）
• 蘋果公司Appearance Manager（英語：Appearance Manager） 、Brushed metal（英語：Brushed metal (interface)） 、Aqua、扁平化設計（Flat Design）、Liquid Glass（英語：Liquid Glass）
• 微軟Windows Aero、Metro UI(後稱Modern UI)、流暢設計體系(Fluent Design System)
• 螞蟻集團Ant Design^[3]
• 愛彼迎Airbnb
• IBM Carbon Design System（英語：Carbon Design System）

工業設計

• BMW
• 法拉利汽車

參見

• 用戶界面
• 人機學
• 人機互動
• 互動設計
• 用戶體驗
• 以用戶為中心的設計
• 界面外觀