UI 使用者介面的設計系統(Design System)是什麼?

Image for post
Image for post
本篇原文刊載於 Riven 個人網站:https://riven.design/2818

科普設計系統(Design System)

Image for post
Image for post

設計系統的意義與用途

設計系統是用來定義整個產品的規格書,裡面包含設計原則規範、可重複使用的 UI 物件,以及可規模化的開發元件等等。

Image for post
Image for post

為什麼需要設計系統

  1. 公司規模變大、市場逐漸成熟,對產品品質標準提高
  2. 產品跨多平台裝置(Web/iOS/Android/macOS/Windows/Apple TV/..)
  3. 團隊需多人或跨部門協作,且長期來看就算有人離職、休假也要能夠運作

有設計系統會有哪些好處

  1. 持續維持產品一致性
  2. 建立和諧的使用者體驗
  3. 讓 UI 介面俱備共同設計語彙
  4. 專注於解決設計難題
  5. 加速產品開發效率

科技公司設計系統精選案例

Image for post
Image for post

Google Material Design

2014 年發表的 Google Material Design,重新定義了 Google 的設計語言,更精確地來說,是重新「整合」 — — 畢竟谷歌公司的產品世界觀愈趨龐大,需要有一套嚴謹的標準來確立未來的設計與開發方向。

Image for post
Image for post

Human Interface Guidelines

這是一份 Apple 製作給 Developer 開發者閱覽的規格文件,適用於 macOS, iOS, watchOS, tvOS 等系統,裡面除了有軟體規範以外,還有許多介面設計上的適用原則。

Image for post
Image for post

Adobe Spectrum

這是 Adobe 官方釋出的計系統,裡面有豐富的資源可以運用,像是專門給 Adobe Xd 的 Plugin(用這個可以輕鬆做出 Adobe 軟體感的介面),以及相關 UI Kits 套件、字體與 icon 等等。

Image for post
Image for post

前鋪後記

Image for post
Image for post

Written by

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store