W tym dokumencie przedstawiono zasady i wytyczne dla każdego, kto projektuje ustawienia platformy Android, podstawowe ustawienia GMS (Ustawienia Google) lub programistów projektujących ustawienia aplikacji na Androida.
Zasady projektowania
Zapewnij dobry przegląd
Użytkownicy powinni móc spojrzeć na ekrany ustawień i zrozumieć wszystkie poszczególne ustawienia i ich wartości.
Rysunek 1. Ustawienia i ich aktualne wartości są prezentowane na ekranie głównym
Organizuj przedmioty intuicyjnie
Umieść często używane ustawienia w górnej części ekranu. Ogranicz liczbę ustawień na jednym ekranie. Pokazywanie więcej niż 10-15 przedmiotów może być przytłaczające. Twórz intuicyjne menu, przenosząc niektóre ustawienia na osobny ekran.
Rysunek 2. Typowe ustawienia znajdują się u góry ekranu
Spraw, aby ustawienia były łatwe do znalezienia
W niektórych przypadkach pomocne może być zduplikowanie indywidualnego ustawienia na dwóch różnych ekranach. Różne sytuacje mogą skłonić użytkowników do zmiany ustawienia, więc umieszczenie go w wielu miejscach pomoże użytkownikom znaleźć ten element.
W przypadku zduplikowanych ustawień utwórz osobny ekran dla ustawienia i miej punkty wejścia z różnych miejsc.
 |  |
Rysunek 3 i 4. „Domyślny dźwięk powiadomienia” pojawia się na ekranach „Powiadomienie” i „Dźwięk”
Użyj jasnego tytułu i statusu
Tytuły ustawień powinny być krótkie i znaczące. Unikaj używania niejasnych tytułów, takich jak „Ustawienia ogólne”. Poniżej tytułu pokaż stan, aby wyróżnić wartość ustawienia. Pokaż konkretne szczegóły zamiast tylko opisywać tytuł.
Tytuły powinny:
- Umieść najważniejszy tekst na etykiecie jako pierwszy.
- Sformułuj negatywne słowa, takie jak „nie” lub „nigdy”, na neutralne terminy, takie jak „blokuj”.
- Używaj bezosobowych etykiet, takich jak „Powiadomienia”, zamiast „Powiadom mnie”. Wyjątek: jeśli odniesienie się do użytkownika jest niezbędne do zrozumienia ustawienia, użyj drugiej osoby („ty”), a nie pierwszej osoby („ja”).
W tytułach należy unikać:
- Terminy ogólne, takie jak ustawianie, zmienianie, edytowanie, modyfikowanie, zarządzanie, używanie, wybieranie lub wybieranie.
- Powtarzające się słowa z dzielnika sekcji lub tytułu podekranu.
- Żargon techniczny.
Typy stron
Lista ustawień
To najczęstszy typ ekranu. Pozwala na umieszczenie wielu ustawień razem. Listy ustawień mogą być mieszanką elementów sterujących, takich jak przełączniki, menu i suwaki.
Jeśli w jednej kategorii jest wiele ustawień, można je zgrupować. Zobacz Grupowanie i dzielniki , aby uzyskać więcej informacji.
Rysunek 5. Przykładowa lista ustawień
Widok listy
Widok listy służy do wyświetlania listy elementów, takich jak aplikacje, konta, urządzenia i inne. Do ekranu można dodać elementy sterujące do filtrowania lub sortowania.
Rysunek 6. Przykład widoku listy
Ekran jednostki
Ekran jednostki służy do prezentowania ustawień odrębnego elementu, takiego jak aplikacja, konto, urządzenie, sieć Wi-Fi itp.
Wizualnie jednostka jest pokazana u góry z ikoną, tytułem i podtytułem. Wszystkie ustawienia na tym ekranie muszą być powiązane z tą jednostką.
Rysunek 7. Przykład ekranu Entity używanego w informacjach o aplikacji
Rysunek 8. Przykład ekranu Entity używanego w Storage
Ustawienie główne
Ustawienie główne najlepiej sprawdza się, gdy można włączyć lub wyłączyć całą funkcję, taką jak Wi-Fi lub Bluetooth. Korzystając z przełącznika u góry ekranu, użytkownik może łatwo kontrolować tę funkcję. Użycie ustawienia głównego do wyłączenia tej funkcji powoduje wyłączenie wszystkich innych powiązanych ustawień.
Jeśli funkcja wymaga dłuższego opisu tekstowego, można użyć ustawienia głównego, ponieważ ten typ ekranu pozwala na dłuższy tekst stopki.
Jeśli ustawienie musi zostać zduplikowane lub połączone z wielu ekranów, użyj ustawienia głównego. Ponieważ ustawienie główne to oddzielny ekran, unikniesz umieszczania wielu przełączników w różnych miejscach dla tego samego ustawienia.
Rysunek 9. Przykład ustawienia głównego używanego na ekranie powiadomień aplikacji; wyłączenie przełącznika głównego wyłącza całą funkcję tej aplikacji
Rysunek 10. Przykład ustawienia głównego używanego na ekranie powiadomień aplikacji z wyłączonym przełącznikiem głównym
Ekran wyboru przycisku radiowego
Ten ekran jest używany, gdy użytkownik musi dokonać wyboru ustawienia. Przyciski radiowe mogą być wyświetlane w oknie dialogowym lub na osobnym ekranie. Przyciski radiowe nie powinny być używane obok suwaków, menu lub przełączników.
Ekran przycisku radiowego może zawierać obraz na górze i tekst stopki na dole. Poszczególne przyciski opcji mogą mieć podtekst wraz z tytułem.
Rysunek 11. Przyciski radiowe nie powinny być używane na liście ustawień
Rysunek 12. Jak prawidłowo używać przycisków radiowych w ustawieniach
składniki
nagłówek
Począwszy od systemu Android 8.0, pasek narzędzi akcji przedstawia wyszukiwanie i pomoc wraz z innymi powiązanymi akcjami. Nie zaleca się korzystania z przepełnionych menu, ponieważ użytkownicy mogą nie wykryć działań ukrytych w tych menu.
Dla pasków narzędzi bez akcji specyficznych dla ekranu. Pokaż działania wyszukiwania i pomocy.
Rysunek 13. Pasek narzędzi z akcjami wyszukiwania i pomocy
Dla pasków narzędzi z jedną akcją : zaprezentuj akcję przed wyszukiwaniem.
Rysunek 14. Pasek narzędzi z jedną akcją przed akcjami wyszukiwania i pomocy
W przypadku pasków narzędzi z więcej niż 1 akcją : rozważ umieszczenie podstawowej akcji przed wyszukiwaniem, jednocześnie umieszczając akcje zaawansowane w rozszerzonym menu.
Jeśli wszystkie działania są zaawansowane lub przydatne tylko dla małej grupy użytkowników, rozważ umieszczenie wszystkich działań w rozszerzonym menu.
Rysunek 15. Pasek narzędzi z rozszerzonym menu dla działań
Nagłówek jednostki
Nagłówek jednostki może pokazywać tylko nagłówek lub nagłówek z podtekstem (dopuszcza się wiele wierszy podtekstu). Poniższa czynność jest opcjonalna. Możesz mieć maksymalnie dwie akcje.
Rysunek 16. Nagłówek jednostki
Część ikony i nagłówka (App1) przewinie się pod nagłówkiem (Informacje o aplikacji).
Rysunek 17. Tytuł informacji o aplikacji jest częścią paska narzędzi, podczas gdy reszta ekranu będzie się pod nim przewijać
Link do menu
Tytuł jest obowiązkowy. Powinieneś również pokazać podtekst, który podkreśla stan ustawienia. Korzystanie z ikony jest opcjonalne.
Staraj się, aby tekst tytułu był zwięzły. Jeśli tytuły są długie, mogą być kontynuowane w następnym wierszu zamiast być obcinane. Nie włączaj menu ani czynności 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, podtekstem i oddzielnym celem trafienia po prawej stronie
Inne elementy dotykowe powinny używać koloru motywu.
Rysunek 21. Przykład menu docelowego z dwoma dotknięciami
Link do menu z ikoną, tytułem, podtekstem i statystyką/numerem/ikoną alertu
Wartości liczbowe, takie jak procent i czas, można wyświetlić po prawej stronie wraz z podtekstem, a wykres słupkowy można wyświetlić poniżej.
Zwykle wartości liczbowe są prezentowane po prawej stronie, dzięki czemu użytkownicy mogą je łatwo przeglądać i porównywać.
Rysunek 22. Przykład menu z ikoną, tytułem, statystyką i wykresem
Grupowanie i dzielniki
Jeśli ekran ma wiele ustawień, można je pogrupować i oddzielić separatorem. W przeciwieństwie do starszych wersji Androida dzielniki są teraz używane do grupowania ustawień w grupie, zamiast oddzielania poszczególnych ustawień.
Jeśli ustawienia w grupie są ze sobą ściśle powiązane, możesz dodać nagłówek grupy. Jeśli używasz nagłówka grupy, zawsze powinieneś dołączyć separator.
Rysunek 23. Ustawienia zgrupowane z rozdzielaczami
Przełącznik
Przełącz z ikoną, tytułem i podtekstem
Rysunek 24. Przełącznik z ikoną, tytułem i podtekstem
Przełącz z tytułem i podtekstem
Rysunek 25. Przełącznik z tytułem i podtekstem
Przełącz tylko z tytułem
Tytułom może towarzyszyć ikona po lewej stronie.
Rysunek 26. Przełącznik tylko z tytułem
Pozycja na liście + przełącznik
Możesz połączyć element listy z przełącznikiem. Stuknięcie w lewą stronę pionowej linii działa jak łącze i przenosi użytkownika do następnego ekranu. Prawa strona zachowuje się jak standardowy włącznik.
W przypadku pozycji listy po lewej stronie tytuł jest obowiązkowy. Ikona i podtekst są opcjonalne.
Rysunek 27. Element listy i przełącznik
Suwak
Ikona jest opcjonalna w suwaku.
Rysunek 28. Suwak
Przycisk ekranowy
Akcje pozytywne mają kolor motywu, a akcje negatywne są szare. Pozytywne działania mogą obejmować otwarcie aplikacji, instalowanie aplikacji, dodanie nowego elementu itp. Negatywne działania obejmują wyczyszczenie danych, odinstalowanie aplikacji, usunięcie elementów itp.
Rysunek 29. Szare przyciski „Odinstaluj” i „Wymuś zatrzymanie”
Rysunek 30. Niebieski przycisk „Włącz teraz”
Progresywne ujawnianie (zaawansowane)
Ustawienia, które nie są często używane, powinny być ukryte. Użyj opcji „Zaawansowane” tylko wtedy, gdy do ukrycia są co najmniej 3 przedmioty.
Tutaj podtekst pokazuje tytuły ukrytych ustawień. Podtekst powinien mieć tylko jedną linię. Dodatkowy tekst jest obcinany wielokropkiem.
Rysunek 31. Zaawansowane funkcje używane na ekranie „Wyświetlacz”
Rozwijane menu
Dostępne są rozwijane menu, ale najlepiej byłoby zamiast tego użyć okna dialogowego lub ekranu wyboru przycisku radiowego. Jest to zalecane w celu uproszczenia ustawień, ponieważ obecnie istnieją trzy różne wzory do pojedynczego wyboru.
W razie potrzeby można użyć menu rozwijanych w przypadkach, gdy ustawienie ma proste opcje.
Rysunek 32. Rozwijane menu
Pole wyboru
Jeśli to możliwe, używaj przełączników nad polami wyboru.
Można użyć pól wyboru:
- W przypadku negatywnych działań, takich jak ograniczanie aplikacji lub blokowanie usługi.
- Aby uniknąć zbyt wielu przełączników na ekranie.
Rysunek 33. Pola wyboru służą do zmniejszania liczby przełączników na tym ekranie
Spinki do mankietów
Używanie linków w ustawieniach nie jest zalecane. Używaj linków tylko tam, gdzie jest to absolutnie konieczne. Łącza powinny mieć akcentujący kolor bez podkreślenia.
Rysunek 34. Link używany w ustawieniach
Stopka
Tekst stopki może służyć do dodawania treści objaśniających. Stopka powinna zawsze mieć przegrodę u góry. Stopka jest pokazana na dole ekranu. W razie potrzeby stopki mogą zawierać linki.
Rysunek 35. Tekst w stopce
Wzory
Dane
Dane krytyczne mogą być wyświetlane na wykresie, takim jak wykres słupkowy lub kołowy. Te dane mogą być pokazane w nagłówku encji. Przykładami są mobilne dane i pamięć masowa.
Inne mniej krytyczne dane można prezentować za pomocą zwykłego widoku listy.
Rysunek 36. Przykład pokazujący przechowywanie
Rysunek 37. Przykład pokazujący sieć
Edukacja użytkownika
Niektóre funkcje mogą wymagać wyjaśnienia lub edukacji użytkownika. Możesz użyć animacji lub obrazu wraz z tekstem. Animację lub obraz należy prezentować u góry ekranu, natomiast tekst w stopce można wykorzystać do dodania wyjaśnienia.
Rysunek 38. Ustawienie za pomocą animacji i tekstu w stopce
Formularze
Jeśli formularz ma jedno pole wejściowe, użyj normalnego okna dialogowego. Zapewnia to łatwy sposób wprowadzania przez użytkowników pojedynczych danych wejściowych.
Jeśli jednak formularz zawiera kilka pól, rozważ użycie pełnoekranowego okna dialogowego . Zapewnia to więcej miejsca na ekranie, aby ułożyć pola w wyraźny wzór.
Rysunek 39. Formularz z normalnym oknem dialogowym
Wyniki wyszukiwania
Wyniki wyszukiwania zawierają tytuł, podtekst (jeśli jest dostępny) oraz lokalizację menu nawigacyjnego ustawienia.
Rysunek 40. Wynik wyszukiwania