Android Elevation and shadows Z軸高度與陰影

Android Material Design 中為了讓使用者更專注於某物件, 因此使用了3D空間的Z軸與陰影, 讓整體設計更具有立體感.

由上圖來看, 每個Menu與Sub-Menu之間有各自的高度與陰影, 使其畫面看起來具有立體感, 並且專注於最高層的Sub-Sub-Menu.

Android 官方對於不同物件之間規定不同的層級, 且對於Pressed和Normal狀態也有特殊規定.

Elevation (dp) Component
24 Dialog, Picker
16 Nav drawer, Right drawer, Modal bottom Sheet
12 Floating action button (FAB - pressed)
9 Sub menu (+1dp for each sub menu)
8 Bottom navigation bar, Menu, Card (when picked up), Raised button (pressed state)
6 Floating action button (FAB - resting elevation), Snackbar
4 App Bar
3 Refresh indicator, Quick entry / Search bar (scrolled state)
2 Card (resting elevation) , Raised button (resting elevation), Quick entry / Search bar (resting elevation)
1 Switch

App bar : 4dp

Raised button

Resting state: 2dp
Pressed state: 8dp

For desktop only, raised buttons can have an elevation of:
Resting state: 0dp
Pressed state: 2dp

Floating action button (FAB)

Resting state: 6dp
Pressed state: 12dp

Card

Resting state: 2dp
Pressed state: 8dp

On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.

Menus and sub menus

Menus: 8dp
Sub menus: 9dp (+1 dp for each sub menu)

Dialogs : 24dp

Nav Drawer & Right drawer : 16dp

Modal bottom sheet : 16dp

Refresh indicator : 3dp

Quick entry/Search bar

Resting state: 2dp
Scrolled state: 3dp

Snackbar : 6dp

Switch : 1dp

作者

Nick Lin

發表於

2016-05-25

更新於

2023-01-18

許可協議


評論