AUO Design System

概述

在介面設計中，陰影效果是一種用於營造深度感和層次感的視覺效果，它可以使元素看起來像是漂浮在介面上方，更具立體感和真實感。陰影效果通常由光源方向、陰影顏色、陰影模糊度和陰影偏移量等參數控制。

使用時機

陰影效果常用於以下情境：

• 卡片 (Cards)：使用陰影效果來區分分區背景。
• 按鈕 (Buttons)：使用陰影效果使其看起來更具立體感，並提供焦點回饋。
• 對話框 (Dialogs/Modal)：使用陰影效果使其看起來像是漂浮在介面上方。
• 其他：當介面元件/元素需要反映出主次關係或強調互動行為時，也可考慮套用陰影效果。

尺寸規範

AUO Design System 使用陰影效果營造 UI 元素的深度感和層次感。陰影效果的層級範圍為 1 至 5，應視寬高、陰影模糊程度設計，表示元素被點擊或選擇的狀態。所有元件皆會在此系統設計，詳情請見各元件設計指南。

明亮模式效果參數

黑暗模式效果參數

套用多個陰影效果

當介面中同時使用兩個以上不同的陰影效果時，請遵循以下原則：

• 層級區分：將重要資訊的元件層級提高，也就是使用較深的陰影效果，使其在視覺上更突出，例如彈窗應比背景卡片的陰影更深。
• 避免混淆：透過不同的陰影層級，幫助使用者區分不同群組的資訊，避免視覺混淆。