Wskazówki dotyczące projektowania ustawień Androida

Ten dokument przedstawia zasady i wytyczne dla każdego, kto opracowuje ustawienia platformy Androida, podstawowe ustawienia GMS (Ustawienia Google) lub dla programistów projektujących ustawienia aplikacji na Androida.

Zasady projektu

Dobre omówienie

Użytkownicy powinni mieć możliwość spojrzenia na ekrany ustawień i poznania wszystkich ustawień oraz ich wartości.

Rysunek 1. Ustawienia i ich bieżące wartości są widoczne na ekranie najwyższego poziomu

Intuicyjne porządkowanie elementów

Umieść często używane ustawienia u góry ekranu. Ogranicz liczbę ustawień na jednym ekranie. Wyświetlenie więcej niż 10–15 elementów może być przytłaczające. Twórz intuicyjne menu, przenosząc niektóre ustawienia na oddzielny ekran.

Rysunek 2. Najczęściej używane ustawienia znajdują się u góry ekranu

Ułatw dostęp do ustawień

W niektórych przypadkach warto powielić pojedyncze ustawienie na 2 różnych ekranach. Użytkownicy mogą zmienić to ustawienie w różnych sytuacjach, więc jeśli określisz je w kilku miejscach, łatwiej będzie im je znaleźć.

W przypadku zduplikowania ustawień utwórz oddzielny ekran dla ustawienia i uwzględnij punkty wejścia z różnych miejsc.

Rys. 3 i 4. Na ekranach „Powiadomienie” i „Dźwięk” wyświetla się „Domyślny dźwięk powiadomienia”.

Użyj jasnego tytułu i stanu

Tytuły ustawień powinny być krótkie i treściwe. Unikaj niejasnych tytułów, np. „Ustawienia ogólne”. Pod tytułem podaj stan, aby podkreślić wartość ustawienia. Pokaż konkretne szczegóły, zamiast tylko opisać tytuł.

Jak powinien wyglądać dobry tytuł:

  • Najważniejszy tekst etykiety umieść na początku listy.
  • Przeformułuj wykluczające słowa, takie jak „nie” czy „nigdy”, na wyrażenia neutralne, np. „blokuj”.
  • Zamiast „Powiadom mnie” używaj etykiet bezosobowych, takich jak „Powiadomienia”. Wyjątek: jeśli do zrozumienia ustawienia jest konieczne powołanie się na użytkownika, używaj drugiej osoby („Ty”), a nie pierwszej osoby („I”).

W nazwach nie powinno się:

  • Terminy ogólne, np. ustaw, zmień, edytuj, modyfikuj, zarządzaj, używaj, wybierz lub wybierz.
  • Powtarzanie słów z separatora sekcji lub tytułu podrzędnego ekranu.
  • Żargon techniczny.

Typy stron

Lista ustawień

To najczęstszy typ ekranu. Umożliwia to połączenie wielu ustawień w jednym miejscu. Listy ustawień mogą zawierać różne elementy sterujące, np. przełączniki, menu i suwaki.

Jeśli w jednej kategorii jest wiele ustawień, można je zgrupować. Więcej informacji znajdziesz na stronie Grupowanie i separatory.

Rysunek 5. Przykład listy ustawień

Widok listy

Widok listy służy do wyświetlania listy takich elementów jak aplikacje, konta, urządzenia i inne elementy. Do ekranu można dodać elementy sterujące filtrowaniem i sortowaniem.

Rysunek 6. Przykład widoku listy

Ekran elementu

Ekran elementu służy do przedstawiania ustawień odrębnego elementu, np. aplikacji, konta, urządzenia, sieci Wi-Fi itp.

Element jest u góry widoczny z ikoną, tytułem i podtytułem. Wszystkie ustawienia na tym ekranie muszą być z nim związane.

Rysunek 7. Przykład ekranu elementu użytego w Informacjach o aplikacji

Rysunek 8. Przykład ekranu encji używanego w miejscu na dane

Główne ustawienie

Ustawienie główne działa najlepiej, gdy można włączyć lub wyłączyć całą funkcję, np. Wi-Fi lub Bluetooth. Użytkownik może sterować tą funkcją za pomocą przełącznika u góry ekranu. Użycie ustawienia głównego do wyłączenia tej funkcji spowoduje wyłączenie wszystkich innych powiązanych ustawień.

Jeśli funkcja wymaga dłuższego opisu tekstowego, możesz użyć ustawienia głównego, ponieważ ten typ ekranu umożliwia użycie dłuższego tekstu stopki.

Jeśli musisz powielić ustawienie lub połączyć je z wielu ekranów, użyj ustawienia głównego. Ustawienie główne to oddzielny ekran, dzięki czemu unikniesz używania kilku przełączników w różnych miejscach dla tego samego ustawienia.

Rysunek 9. Przykład głównego ustawienia na ekranie powiadomień aplikacji. Wyłączenie głównego przełącznika powoduje wyłączenie całej funkcji w tej aplikacji.

Rysunek 10. Przykład głównego ustawienia na ekranie Powiadomienia aplikacji z wyłączonym głównym przełącznikiem

Ekran wyboru opcji

Jest on używany, gdy użytkownik musi wybrać ustawienie. Przyciski opcji mogą być wyświetlane w oknie lub na osobnym ekranie. Przycisków nie należy używać obok suwaków, menu ani przełączników.

Ekran opcji może zawierać obraz u góry i tekst stopki na dole. Poszczególne przyciski mogą zawierać podtekst wraz z tytułem.

Rysunek 11. Przyciski opcji nie powinny być używane na liście ustawień

Rysunek 12. Oto jak korzystać z opcji w ustawieniach

Komponenty

Począwszy od Androida 8.0, pasek narzędzi działań zawiera wyszukiwanie i pomoc oraz inne powiązane działania. Odradzamy korzystanie z rozszerzonych menu, ponieważ użytkownicy mogą nie zauważyć, że są w nich ukryte działania.

Dotyczy to pasków narzędzi, które nie wymagają wykonywania działań związanych z konkretnymi ekranami. Pokaż opcje wyszukiwania i pomocy.

Rysunek 13. Pasek narzędzi z opcjami wyszukiwania i pomocy

paski narzędzi z 1 działaniem: zaprezentuj działanie przed wyszukiwaniem.

Rysunek 14. Pasek narzędzi z jednym działaniem przed wyszukiwaniem i pomocą

paski narzędzi z większą liczbą działań: przed wyszukiwaniem warto umieścić podstawowe działanie, a w rozszerzonym menu – działania zaawansowane.

Jeśli wszystkie działania są zaawansowane lub przydatne tylko dla niewielkiej grupy użytkowników, rozważ umieszczenie ich w rozszerzonym menu.

Rysunek 15. Pasek narzędzi z rozszerzonym menu czynności

Nagłówek jednostki

Nagłówek jednostki może zawierać tylko nagłówek lub nagłówek z podtekstem (podtekst może mieć wiele wierszy). Ta czynność jest opcjonalna. Możesz mieć maksymalnie 2 działania.

Rysunek 16. Nagłówek jednostki

Ikona i nagłówek (Aplikacja 1) będą przewijać się pod nagłówkiem (Informacje o aplikacji).

Rysunek 17. Tytuł z informacjami o aplikacji jest częścią paska narzędzi, a reszta ekranu będzie przewijać się pod nim

Tytuł jest wymagany. Trzeba też dodać tekst podkreślający stan ustawienia. Używanie ikony jest opcjonalne.

Tytuł tytułu powinien być zwięzły. Jeśli tytuły są długie, mogą być kontynuowane w następnym wierszu, zamiast zostać przycięte. Nie włączaj menu ani działań po długim naciśnięciu.

Przykłady:

Rysunek 18. Link do menu z ikoną, tytułem i podtekstem

Rysunek 19. Link do menu z tytułem i podtekstem

Rysunek 20. Link do menu tylko z tytułem

Link do menu z ikoną, tytułem, tekstem i oddzielnym celem działania po prawej stronie

Inne elementy dotykowe powinny mieć kolor motywu.

Rysunek 21. Przykład menu elementu docelowego dwukrotnym kliknięciem

Link do menu z ikoną, tytułem, tekstem i statystykami/liczbą/ikoną alertu

Wartości liczbowe, takie jak procent i czas, mogą być wyświetlane po prawej stronie wraz z podtekstem, a poniżej – wykres słupkowy.

Wartości liczbowe są zwykle wyświetlane po prawej stronie, aby użytkownicy mogli je łatwo porównać.

Rysunek 22. Przykład menu z ikoną, tytułem, statystykami i wykresem

Grupowanie i separatory

Jeśli ekran zawiera wiele ustawień, można je zgrupować i oddzielić za pomocą separatora. W przeciwieństwie do starszych wersji Androida separatory są teraz używane do grupowania ustawień w grupie, a nie do rozdzielania poszczególnych ustawień.

Jeśli ustawienia w grupie są ściśle powiązane, możesz dodać nagłówek grupy. Jeśli używasz nagłówka grupy, musisz zawsze stosować separator.

Rysunek 23. Ustawienia pogrupowane z separatorami

Przełącz

Przełącz za pomocą ikony, tytułu i podtekstu

Rysunek 24. Przełącz za pomocą ikony, tytułu i podtekstu

Przełącz za pomocą tytułu i podpisu

Rysunek 25. Przełącz tytuł i podtekst

Przełącz tylko na tytuł

Tytułom może towarzyszyć ikona po lewej stronie.

Rysunek 26. Przełącz tylko na tytuł

Element listy i przełącznik

Możesz połączyć element listy za pomocą przełącznika. Kliknięcie po lewej stronie pionowej linii działa jak link i przenosi użytkownika na następny ekran. Prawa strona wygląda jak standardowy przełącznik.

W przypadku elementu listy znajdującego się po lewej stronie wymagany jest tytuł. Ikona i podtekst są opcjonalne.

Rysunek 27. Element listy i przełącznik

Suwak

Ikona na suwaku jest opcjonalna.

Rysunek 28. Suwak

Przycisk ekranowy

Działania pozytywne wykorzystują kolor motywu, a działania negatywne – szare. Pozytywne działania mogą obejmować otwarcie aplikacji, zainstalowanie jej, dodanie nowego elementu itp. Działania negatywne to m.in. czyszczenie danych, odinstalowanie aplikacji lub jej usunięcie.

Rysunek 29. Szare przyciski „Odinstaluj” i „Wymuś zatrzymanie”

Rysunek 30. Niebieski przycisk „Włącz teraz”

Stopniowe ujawnianie informacji (zaawansowane)

Rzadko używane ustawienia powinny być ukryte. „Zaawansowane” używaj tylko, gdy do ukrycia są co najmniej 3 elementy.

Ten podtekst zawiera tytuły ukrytych ustawień. Podpis powinien zawierać tylko 1 wiersz. Dodatkowy tekst jest obcinany wielokropkiem.

Rysunek 31. Zaawansowane używane na ekranie „Wyświetlacz”

Dostępne są menu, ale najlepiej, gdyby był używany ekran wyboru okna lub opcji. Zalecamy to, ponieważ pozwala to uprościć ustawienia, ponieważ można wybrać 3 różne wzorce.

W razie potrzeby możesz użyć menu, jeśli ustawienie zawiera proste opcje.

Rysunek 32. Menu

Pole wyboru

W miarę możliwości używaj przełączników, aby przełączać się między polami wyboru.

Możesz użyć pól wyboru:

  • Działania negatywne, takie jak ograniczanie dostępu do aplikacji lub blokowanie usługi.
  • Aby uniknąć używania zbyt wielu przełączników na ekranie.

Rysunek 33. Pola wyboru pozwalają zmniejszyć liczbę przełączników na tym ekranie

Nie zalecamy używania linków w ustawieniach. Używaj linków tylko wtedy, gdy jest to konieczne. Linki powinny mieć kolor uzupełniający bez podkreślenia.

Rysunek 34. Link używany w ustawieniach

W stopce można dodać wyjaśnienia. Stopka powinna zawsze mieć u góry separator. Stopka wyświetla się na dole ekranu. Stopki mogą w razie potrzeby zawierać linki.

Rysunek 35. Tekst stopki

Wzory

Dane

Kluczowe dane można pokazać na wykresie, np. na wykresie słupkowym lub kołowym. Dane te mogą być wyświetlane w nagłówku jednostki. Może to być na przykład mobilna transmisja danych i miejsce na dane.

Inne, mniej istotne dane, można przedstawić w zwykłym widoku listy.

Rysunek 36. Przykład przedstawiający Miejsce na dane

Rysunek 37. Przykład sieci

Informacje dla użytkowników

Niektóre funkcje mogą wymagać wyjaśnienia lub dodatkowych informacji. Możesz dodać do tekstu animację lub grafikę. Animacja lub obraz powinny znajdować się na górze ekranu, a tekst w stopce może służyć jako wyjaśnienie.

Rysunek 38. Ustawienie wykorzystujące animację i tekst stopki

Formularze

Jeśli formularz ma jedno pole do wprowadzania danych, użyj zwykłego okna. Dzięki temu użytkownicy mogą w prosty sposób wprowadzać pojedyncze dane wejściowe.

Jeśli formularz składa się z kilku pól, rozważ użycie pełnoekranowego okna dialogowego. W ten sposób uzyskasz więcej miejsca na ekranie, aby uporządkować pola według wyraźnego wzorca.

Rysunek 39. Formularz ze zwykłym oknem dialogowym

Wyniki wyszukiwania

Wyniki wyszukiwania zawierają tytuł, tekst (jeśli jest dostępny) oraz lokalizację menu nawigacyjnego ustawienia.

Rysunek 40. Wynik wyszukiwania