Przyciski

Przyciski ułatwiają użytkownikom inicjowanie działań lub przepływ informacji. Wybieraj spośród różnych typów przycisków dla podkreślenia.

Materiały

Typ	Link	Stan
Design	Źródło projektu (Figma)	Dostępna
Implementacja	Jetpack Compose	Dostępna

W skrócie

• Wybierz typ przycisku na podstawie wagi działania. Im ważniejsze jest działanie, tym większy nacisk na przycisk.
• Przyciski powinny mieć wyraźne etykiety wskazujące działania, jakie wykonują.
• Rozłóż przyciski logicznie na ekranie w miejscach, w których użytkownicy prawdopodobnie ich zauważą.
• Nie nadużywaj przycisków. Zbyt wiele przycisków na ekranie zakłóca hierarchię wizualną.

Warianty

Jest 6 rodzajów przycisków:

1. Wypełniony przycisk
2. Przycisk Outline
3. Przycisk ikony
4. Przycisk ikony konspektu
5. Długi przycisk
6. Przycisk graficzny

Wybierz typ przycisku na podstawie wagi działania. Im ważniejsze działanie, tym większy nacisk na przycisk.

Przycisk Wypełnienie i kontur

Wypełnione przyciski mają największy wpływ na wygląd aplikacji i należy ich używać w przypadku ważnych, końcowych działań, takich jak Zapisz, Dołącz teraz, Potwierdź lub Pobierz.

Przyciski z konturem to przyciski ze średnim natężeniem. Zawierają działania, które są ważne, ale nie są głównym działaniem aplikacji. Przyciski z konturem dobrze współpracują z wypełnionymi przyciskami, wskazując działanie alternatywne.

Anatomia

1. Kontener
2. Tekst etykiety
3. Ikona (opcjonalnie)

Stany

Wizualna reprezentacja stanu komponentu.

1. Domyślne
2. Zaznaczone
3. Naciśnięty

Specyfikacja

Przycisk ikony i konspektu

Używaj przycisków z ikonami do wyświetlania działań w kompaktowym układzie. Przyciski ikon mogą reprezentować działania otwierające, np. otwarcie rozszerzonego menu lub wyszukiwanie, albo działania binarne, które można włączać i wyłączać, np. dodać do ulubionych lub dodać do zakładek. Służą też do odtwarzania i wstrzymywania multimediów.

Przyciski ikon mogą mieć 3 rozmiary: mały, średni i duży.

Anatomia

1. Kontener
2. Ikona

Stany

1. Domyślne
2. Zaznaczone
3. Naciśnięty

Stany to reprezentacje wizualne używane do informowania o stanie komponentu lub elementu interaktywnego.

Dane techniczne

Przycisk szerokiego ekranu

Szerokie przyciski służą do lepszego eksponowania elementów niż zwykłe przyciski. Zawierają ważne działania. Przyciski reprezentujące powiązane opcje są pogrupowane. Grupa powinna znajdować się na tym samym obszarze.

Anatomia

1. Kontener
2. Ikona wiodącej
3. tytuł;
4. Podtytuł

Stany

1. Domyślne
2. Zaznaczone
3. Naciśnięty

Stany to reprezentacje wizualne używane do informowania o stanie komponentu lub elementu interaktywnego.

Specyfikacja

Przycisk graficzny

Przyciski graficzne są zwykle używane do wyświetlania miniatur treści dostępnych na następnym poziomie nawigacji. Zazwyczaj są one pogrupowane wraz z działaniami, które mają wspólny obszar.

Anatomia

1. Kontener
2. Ikona wiodącej
3. tytuł;
4. Podtytuł
5. Warstwa obrazu, na którą składają się:
   1. Siodła (nakładka stanowa)
   2. Gradient (na podstawie koloru powierzchni)
   3. Obraz

Stany

1. Domyślne
2. Zaznaczone
3. Naciśnięty

Stany to reprezentacje wizualne używane do informowania o stanie komponentu lub elementu interaktywnego.

Dane techniczne

Wykorzystanie

Przyciski służą zwykle do sygnalizowania działań, które użytkownik może wykonać. Często można je znaleźć w takich elementach interfejsu jak okna modalne, formularze, karty i paski narzędzi.

Przyciski to tylko 1 opcja do reprezentowania działań w interfejsie. Nie nadużywaj ich. Zbyt wiele przycisków na ekranie zakłóca hierarchię wizualną.

1. Kontener
2. Ikona
3. Tekst etykiety
4. tytuł;
5. Podtytuł
6. Obraz

Kontener

Przyciski wyświetlają kontener wokół treści. Kontener skaluje się 1,1-krotnie przy ostrości, zachowując wewnętrzne dopełnienie. Oto kilka uwag o kontenerach:

• Ustaw szerokość kontenera na podstawie treści ze spójnym dopełnieniem.
• Ustaw względną pozycję kontenera względem siatki układu elastycznego.
• W przypadku wypełnionych przycisków użyj kontenerów w jednolitym kolorze.
• Używaj koloru konturu i wypełnienia w przypadku konturowych przycisków. Po zaznaczeniu kontener otrzyma kolor wypełnienia i kontur.
• W przypadku przycisków szerokich i graficznych szerokość kontenera jest ustawiana zgodnie z siatką układu.
• Rozmiar, położenie i wyrównanie kontenera mogą się zmieniać w miarę skalowania jego kontenera nadrzędnego.

Kontenery przycisków z tekstem i ikonami mają całkowicie zaokrąglone rogi. Kontenery przycisków szerokich i graficznych mają zaokrąglone kontenery o wartości 12 dp.

Ikona

Ikony przedstawiają działanie przycisku i przyciągają uwagę. Należy je umieścić po stronie przycisku. Ikony są zawsze wyśrodkowane w pionie w kontenerze.

Tekst etykiety

Tekst etykiety to najważniejszy element przycisku. Opisuje działanie, które następuje po kliknięciu przycisku przez użytkownika.

W tekście etykiety przycisku używaj wielkich liter, stosując wielkie litery w pierwszym słowie i w rzeczownikach własnych. Unikaj zawijania tekstu. Aby zapewnić maksymalną czytelność, tekst etykiety powinien znajdować się w jednym wierszu.

Obraz

Przyciski graficzne zawsze mają nakładkę gradientową i rysy na obrazie w tle. Nakładka gradientowa jest ustawiana zgodnie z kolorem kontenera. Kryminał zmienia się w zależności od stanu.

Grupy przycisków

Przyciski pojawiają się razem w wierszu lub kolumnie, aby zachować spójną nawigację między działaniami. W sekcjach poniżej opisujemy, co należy wziąć pod uwagę.

Poinformuj hierarchię

Każdy ekran powinien mieć 1 główne działanie reprezentowane przez dobrze widoczny, zwykle szeroki przycisk. Przycisk powinien być dobrze widoczny i zrozumiały. Inne przyciski powinny być mniej widoczne i nie powinny odwracać użytkowników od głównego działania.

Pierwszy przycisk w grupie działa jako działanie główne, ponieważ najpierw jest na nim zaznaczone.

Zachowaj układ liniowy

1. Układ wierszy
2. Układ kolumn

Logiczne wykorzystywanie wariantów

W układzie kolumnowym należy zachować wersje z jednym przyciskiem. W układzie wiersza różne warianty można łączyć w grupę przycisków, ale logika ich działania powinna być jasna. Przyciski z wypełnieniem i konspektem można stosować w tej samej grupie, ale należy zadbać o jasną hierarchię działań.