Kształty

Kształty pozwalają podkreślić znaczenie niektórych elementów ekranu w stosunku do innych.

Krótkie wskazówki (TL;DR):

  • Stosuj bardziej zaokrąglone narożniki (wyższy promień narożników) w przypadku działań głównych i komponentów.
  • W przypadku elementów słabo charakterystycznych używaj kwadratowego, mniej zaokrąglonego narożnika (dolny promień narożnika).

Wartości promienia narożnika

Android dla samochodów udostępnia zestaw wartości promienia narożnika, które mają podkreślić znaczenie różnych elementów ekranu w stosunku do innych.

Wartości promienia narożnika
R0 R1 R2 R3 R4
0dp 4dp 8dp 16dp Pełne

Korzystanie z zaokrąglania do podkreślania

Zaokrąglone i kwadratowe kształty w Androidzie Automotive tworzą wizualną hierarchię, która przyciąga uwagę użytkownika na elementy o większym znaczeniu. Narożniki takich elementów mają bardziej zaokrąglone rogi, a ich promień jest większy. Narożniki tych elementów mają mniej zaokrąglone rogi oraz mniejszy promień narożników.

Przykłady wszystkich czterech poziomów promienia narożnika
Przykłady 4 poziomów promienia narożnika: od najniższego (0dp = kwadrat) do najwyższego (okrągły)

0dp – wartość bazowa

W przypadku elementów bazowych, które nie wymagają dodatkowego wyróżnienia, użyj rogów o wymiarach 0 dp (kwadratowych). Podstawowe struktury układu, takie jak paski narzędzi czy listy, powinny mieć narożniki 0dp. Obrazy powinny też mieć rogi 0 dp, chyba że są zamaskowane przez zaokrąglony kontener (np. karta) lub są w wybranym stanie.

Przykład narożnika kwadratowego
Okładki albumów w siatce po prawej stronie nie wymagają dodatkowego wyróżnienia względem siebie ani innych wyświetlanych elementów, więc mają rogi 0 dp (szczegóły znajdziesz po lewej)

8dp – mały nacisk

Domyślny promień narożników zaokrąglonych kształtów to 8 dp. Użyj tego kształtu do wskazywania elementów interaktywnych, które nie są wyróżnione, np. kart i kontenerów.

Przykład z niskim naciskiem 8 dp
Wyświetlana tutaj karta powiadomienia ma domyślny promień narożnika 8 dp (widoczny po lewej), dzięki czemu jest bardziej eksponowany niż przyciski poleceń na karcie (widoczne po prawej), które są ważniejsze

16dp – średni nacisk

W przypadku komponentów ze średnim wyróżnieniem, w tym elementów interaktywnych i rozwijanych, użyj promienia narożnika 16 dp.

Przykład średniego narożnika 16 dp
W tym przypadku promień narożnika o powierzchni 16 dp zapewnia średni wyróżnienie planszy dolnej, która jest tymczasowo ważniejsza niż treść aktualnie na ekranie.

Cyrkular – Duży nacisk

Okrągłe kształty mają większy wpływ na wygląd w porównaniu z kształtami prostokątnymi. Powinny one być zarezerwowane dla komponentów o dużej sile oddziaływania, takich jak FAB, układy scalone i widżety.

Przykład pełnego zaokrąglonego rogu z dużym wyróżnieniem
W pełni zaokrąglone narożniki i okrągłe kształty zapewniają maksymalny nacisk na przycisk typu FAB w lewym dolnym rogu, przyciski poleceń w prawym górnym rogu i przycisk PPP w lewym dolnym rogu.