快速開始Getting Started

認識 AUO 設計系統

AUO 設計系統是一套全面且靈活的設計系統,旨在幫助設計師和開發者更快速、高效地打造一致、美觀且易用的數位產品。它提供了一系列設計原則、規範、元件和工具,以確保 AUO 所有產品的使用者介面在視覺和互動上的一致性,同時提升品牌識別和使用者體驗。

核心價值

Consistency 一致的設計語言,打造無縫的使用者體驗

提供標準化的設計元素和規範,例如顏色、字體、間距、圖示和互動模式,確保所有友達數位產品的使用者介面呈現一致的視覺風格和使用者體驗,讓使用者在不同產品和平台之間都能享有流暢無縫的體驗。

Scalability 靈活擴展,滿足多元需求

提供可重複使用的元件和工具,例如按鈕、表單、導航、彈窗等,可以靈活地應用於各種不同的產品和平台,滿足多元的設計需求,並隨著產品的發展不斷擴展和進化。

Build Fast 加速開發流程,提升產品價值

透過 AUO 設計系統,協助您簡化設計和開發流程,快速建構高品質的使用者介面,縮短產品上市時間,並提升產品價值。 AUO 設計系統適用於所有參與友達數位產品設計和開發的人員,包括:

  • 設計師:UI 設計師、UX 設計師、視覺設計師、互動設計師等。
  • 開發者:前端開發者、後端開發者、軟體工程師等。
  • 產品經理:產品經理、專案經理、產品負責人等。
  • 行銷人員:行銷人員、品牌經理等。

誰適合使用設計系統

UIUX設計師

  • 加速設計流程,提升設計效率。
  • 確保設計一致性,打造高品質的使用者介面。
  • 提供豐富的設計資源,例如元件庫、設計規範、Figma 檔案等。

開發者

  • 提供標準化的元件和 Vue, React 程式碼,簡化開發流程。
  • 確保程式碼品質,提升產品的穩定性和可維護性。
  • 提供清晰的設計規範和使用說明文件。

產品經理

  • 更好地理解設計和開發流程。
  • 更有效地與設計師和開發者溝通。
  • 確保產品的使用者體驗和品牌一致性。

行銷人員

  • 更好地理解 AUO 的設計語言和品牌形象。
  • 更有效地傳達產品的價值和特色。

無論您是設計師、開發者、產品經理還是行銷人員,AUO 設計系統都能幫助您更好地完成工作,打造更優質的數位產品。

設計指引

您可以在 AUO 設計系統中,快速查找到實用的設計原則、規範和最佳實務,打造一致、美觀且易用的使用者介面。

基礎 (Foundation)

  • 設計原則 (Design Principles):提供清晰的設計原則,指導設計決策,確保所有設計都符合 AUO 的品牌價值和使用者體驗目標。
  • 設計規範 (Design Specifications):提供詳細的設計規範,例如顏色 (Color)、字體 (Typography)、間距 (Spacing)、圖示 (Icons)、佈局 (Layout) 等,確保所有設計元素都符合 AUO 的設計標準。

元件 (Components)

  • 元件庫 (Component Library):提供豐富的 UI 元件,例如按鈕 (Buttons)、輸入框 (Input Fields)、導航 (Navigation)、表格 (Tables) 等,可以快速搭建使用者介面,並確保介面的一致性。
  • Figma 檔案:提供完整的 Figma 檔案,方便設計師使用和自訂元件,並與開發者協作。

範本 (Templates)

  • 探索我們的設計範本,例如登入頁面、產品列表頁面等,產品團隊可以直接套用,加速產品開發流程。

React 與 Vue開發者可下載範本進行開發

AUO 設計系統提供提供 React 和 Vue 框架的開發資源,協助您加速開發流程,並確保程式碼品質,同時搭配使用 Storybook 來預覽和測試元件,並查閱 API 文件和程式碼範例,了解如何使用和客製化元件。

兩大前端框架與Storybook

您可依照您的團隊開發條件,下載對應的 AUO 設計系統開發資源,並在您的專案中使用。

  • React
  • Vue

與我們聯絡

如果您有任何關於 AUO Design System 的問題或建議,歡迎隨時與我們聯繫。

回頁首