AUO Design System

Layout 佈局

佈局是系統化介面設計的起點，它決定了各個元件在介面上的排列方式，以及資訊的呈現結構。良好的佈局設計可以提升使用者體驗，使介面更易於理解和使用。在 AUO Design System 中，我們依開發不同屬性，提供多元的畫布尺寸，讓您與團隊進行靈活彈性的設計開發。

尺寸規範

應用程式/應用軟體 (Application)

  • 預設畫布尺寸： 1440 * 1024 px。
  • 佈局方式： 三欄式，左邊為導覽列，右邊分為使用者資訊列與工作區域。
  • 導覽列可收合 (依照專案需求而定)。

網站與網頁 (Website and Webpage)

  • 預設畫布尺寸： 1920 * 1080 px。
  • 佈局方式： 以上下佈局為主。
  • 重要資訊需放在 1440 px 寬度內。

行動應用程式與行動版網頁 (Mobile APP and Mobile Web)

  • 預設畫布尺寸： 375 * 812 px。

斷點 (Breakpoint)

斷點是指螢幕尺寸的臨界值，當螢幕尺寸達到斷點時，佈局會進行調整，以適應不同的螢幕尺寸。

  • 手機： 768px (不含) 以下
  • 平板：
    • 直向： 768px (含) 以上
    • 橫向： 1024px (含) 以上
  • 桌機：
    • 一般解析度： 1200px (含) 以上
    • 高解析度： 1400px (含) 以上
回頁首