Wytyczne dotyczące projektowania ustawień Androida

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

Uporządkuj 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 elementó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 konieczne 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 nie tylko. 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 spowoduje wyłączenie całej funkcji 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

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

Ikona i część nagłówka (App1) przewiną 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ć

Tytuł jest obowiązkowy. Powinieneś także pokazać podtekst, który podkreśla stan ustawienia. Używanie 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ą łatwo je przeglądać i porównywać.

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

Grupowanie i rozdzielanie

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 listy + 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 w suwaku jest opcjonalna.

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 używane na ekranie „Wyświetlacz”

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 menu rozwijane mogą być używane 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

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

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