形狀有助於強調部分畫面元素相對於其他元素的重要性。
指引總覽 (重點摘要):
- 針對主要動作和元件,使用更多圓角 (圓角半徑)
- 針對低強調元素,使用方角和圓角較少的圓角 (圓角半徑)
圓角半徑值
車輛專用 Android 提供一組圓角半徑值,旨在強調各種螢幕元素相對於其他畫面元素的重要性。
![圓角半徑值](https://developers.google.cn/cars/design/automotive-os/design-system/images/Radius_AR.png?authuser=0000&hl=zh-tw)
R0 | R1 | R2 | R3 | R4 |
---|---|---|---|---|
0dp | 4dp | 8 dp | 16dp | 完整 |
使用捨入法進行強調
Android Automotive 中的圓角和方角圖形可建立視覺階層,將使用者的注意力轉移到較強調的元素。較高強調元素的邊角較圓角,圓角半徑也較大。低強調元素的邊角較小,圓角半徑也較小。
![四個圓角半徑的所有範例](https://developers.google.cn/cars/design/automotive-os/design-system/images/corner-radius.png?authuser=0000&hl=zh-tw)
0dp - 基準
針對不需要額外強調的基準元素,請使用 0dp (正方形) 角。工具列或清單等基本版面配置結構應使用 0dp 的邊角。圖片的邊角也應為 0 dp,除非圖片經過圓角容器 (例如資訊卡) 遮蓋,或處於所選狀態。
![正方形角範例](https://developers.google.cn/cars/design/automotive-os/design-system/images/example-1.png?authuser=0000&hl=zh-tw)
8dp - 低強調
8dp 是圓角形狀的預設圓角半徑。請使用這個形狀來表示低強調的互動元素,例如資訊卡和容器。
![8dp 低強調效果示例](https://developers.google.cn/cars/design/automotive-os/design-system/images/example-2.png?authuser=0000&hl=zh-tw)
16dp - 中強調
如果是中等強調的元件 (包括互動式元素和可展開式元件),請採用 16dp 的圓角半徑。
![16dp 中角範例](https://developers.google.cn/cars/design/automotive-os/design-system/images/example-3.png?authuser=0000&hl=zh-tw)
圓形 - 高強調
圓形形狀對多數直線形狀的視覺效果較佳。應保留給 FAB、方塊和小工具等高度強調元件。
![高強調全圓角範例](https://developers.google.cn/cars/design/automotive-os/design-system/images/example-4.png?authuser=0000&hl=zh-tw)