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:
- Wypełniony przycisk
- Przycisk Outline
- Przycisk ikony
- Przycisk ikony konspektu
- Długi przycisk
- 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
- Kontener
- Tekst etykiety
- Ikona (opcjonalnie)
Stany
Wizualna reprezentacja stanu komponentu.
- Domyślne
- Zaznaczone
- 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
- Kontener
- Ikona
Stany
- Domyślne
- Zaznaczone
- 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
- Kontener
- Ikona wiodącej
- tytuł;
- Podtytuł
Stany
- Domyślne
- Zaznaczone
- 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
- Kontener
- Ikona wiodącej
- tytuł;
- Podtytuł
- Warstwa obrazu, na którą składają się:
- Siodła (nakładka stanowa)
- Gradient (na podstawie koloru powierzchni)
- Obraz
Stany
- Domyślne
- Zaznaczone
- 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ą.
- Kontener
- Ikona
- Tekst etykiety
- tytuł;
- Podtytuł
- 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.
Tak
Ostrzeżenie
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.
Tak
Nie wolno
Ostrzeżenie
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.
Tak
Ostrzeżenie
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
- Układ wierszy
- 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ń.
Tak
Nie wolno
Ostrzeżenie
