Wskazówki dotyczące projektowania ustawień Androida

Ten dokument zawiera zasady i wytyczne dla wszystkich, którzy projektują ustawienia platformy Android, podstawowe ustawienia GMS (ustawienia Google) lub ustawienia aplikacji na Androida.

Zasady projektowania

Udostępnij dobry przegląd

Użytkownicy powinni mieć możliwość szybkiego przejrzenia ekranów ustawień i zrozumienia wszystkich poszczególnych ustawień oraz ich wartości.

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

intuicyjne porządkowanie elementów,

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

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

Ułatwianie znajdowania ustawień

W niektórych przypadkach może być przydatne zduplikowanie ustawień na 2 ekranach. Użytkownicy mogą zmieniać ustawienia w różnych sytuacjach, dlatego umieszczenie ich w kilku miejscach ułatwi im ich znalezienie.

W przypadku duplikatów ustawień utwórz osobny ekran dla danego ustawienia i punkty wejścia z różnych miejsc.

Rysunki 3 i 4. „Domyślny dźwięk powiadomienia” jest widoczny na ekranach „Powiadomienie” i „Dźwięk”.

Użyj jasnego tytułu i stanu

Tytuły ustawień powinny być zwięzłe i zrozumiałe. Unikaj niejasnych tytułów, takich jak „Ustawienia ogólne”. Pod tytułem wyświetl stan, aby podkreślić wartość ustawienia. Podaj konkretne informacje, a nie tylko opis tytułu.

Jak powinien wyglądać dobry tytuł:

  • Najważniejszy tekst etykiety umieść na początku.
  • Zastąp słowa o negatywnym znaczeniu, takie jak „nie” czy „nigdy”, neutralnymi określeniami, np. „zablokuj”.
  • Zamiast „Powiadomienia” użyj bezosobowych etykiet, np. „Powiadomienia”. Wyjątek: jeśli odniesienie do użytkownika jest konieczne do zrozumienia ustawienia, użyj drugiej osoby („ty”) zamiast pierwszej osoby („ja”).

W tytułach nie należy umieszczać:

  • ogólne terminy, takie jak ustawić, zmienić, edytować, zmodyfikować, zarządzać, używać, wybierać lub wybierać;
  • powtarzanie słów z separatora sekcji lub tytułu podrzędnego ekranu;
  • Język techniczny.

Typy stron

Lista ustawień

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

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

Rysunek 5. Przykład listy ustawień

Widok listy

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

Rysunek 6. Przykład widoku listy

Ekran elementu

Ekran elementu służy do wyświetlania ustawień konkretnego elementu, np. aplikacji, konta, urządzenia, sieci Wi-Fi itp.

Podmiot jest wizualnie przedstawiany u góry wraz z ikoną, tytułem i podtytułem. Wszystkie ustawienia na tym ekranie muszą być powiązane z tym podmiotem.

Rysunek 7. Przykład ekranu „Element” używanego w sekcji Informacje o aplikacji

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

Ustawienie główne

Ustawienie główne najlepiej sprawdza się, gdy można włączyć lub wyłączyć całą funkcję, na przykład Wi-Fi lub Bluetooth. Użytkownik może włączać i wyłączać tę funkcję za pomocą przełącznika u góry ekranu. Wyłączenie tej funkcji w głównych ustawieniach powoduje wyłączenie wszystkich 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 wyświetlanie dłuższego tekstu stopki.

Jeśli ustawienie musi być powielane lub łączone z kilku ekranów, użyj ustawienia głównego. Główne ustawienie jest na osobnym ekranie, więc nie będziesz mieć kilku przełączników w różnych miejscach dotyczących tego samego ustawienia.

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

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

Ekran wyboru opcji

Ten ekran jest używany, gdy użytkownik musi dokonać wyboru w przypadku ustawienia. Przyciski opcji mogą być wyświetlane w oknie dialogowym lub na osobnym ekranie. Przycisków opcji nie należy używać razem z suwakami, menu ani przełącznikami.

Ekran z przyciskami opcji może zawierać obraz u góry i tekst stopki u dołu. Poszczególne przyciski opcji mogą mieć podtekst wraz z nazwą.

Rysunek 11. W liście ustawień nie należy używać przycisków wyboru

Rysunek 12. Właściwe korzystanie z opcji w ustawieniach

Komponenty

Od Androida 8.0 pasek narzędzi zawiera wyszukiwanie i pomoc, a także inne powiązane czynności. Nie zalecamy stosowania menu przewijanych, ponieważ użytkownicy mogą nie odkryć działań ukrytych w tych menu.

W przypadku pasków narzędzi bez działań związanych z poszczególnymi ekranami. Pokaż działania związane z wyszukiwaniem i pomocą.

Rysunek 13. Pasek narzędzi z wyszukiwaniem i pomocą

W przypadku pasków narzędzi z jednym działaniem: przed wyszukiwaniem wyświetl działanie.

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

W przypadku paska narzędzi z większą liczbą działań: rozważ umieszczenie głównego działania przed wyszukiwaniem, a działań zaawansowanych w menu przepełnienia.

Jeśli wszystkie działania są zaawansowane lub przydatne tylko dla niewielkiej grupy użytkowników, rozważ umieszczenie wszystkich działań w menu przepełnienia.

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

Nagłówek elementu

W nagłówku encji może się wyświetlać tylko nagłówek lub nagłówek z podtekstem (podtekst może zawierać wiele wierszy). Poniżej znajduje się działanie opcjonalne. Możesz umieścić maksymalnie 2 działania.

Rysunek 16. Nagłówek jednostki

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

Rysunek 17. Tytuł informacji o aplikacji jest częścią paska narzędzi, a pozostałości ekranu będą się przewijać pod nim

Tytuł jest wymagany. Musisz też wyświetlić tekst podrzędny, 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ć skracane. 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 dodatkowym tekstem

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

Rysunek 20. Link do menu z tylko tytułem

Link menu z ikoną, tytułem, podtekstem i oddzielnym celem docelowym po prawej stronie

Inne punkty dotykowe powinny używać koloru motywu.

Rysunek 21. Przykład menu docelowego dostępnego po 2 kliknięciach

Link do menu z ikoną, tytułem, podtytułem i ikoną statystyk, liczby lub alertu

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

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

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

Grupowanie i separatory

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

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

Rysunek 23. Ustawienia pogrupowane za pomocą separatorów

Przełącz

Przełączanie ikony, tytułu i dodatkowego tekstu

Rysunek 24. Przełącznik z ikoną, tytułem i tekstem

Przełączanie tytułu i podtytułu

Rysunek 25. Przełączanie tytułu i podtytułu

Przełączanie z tylko tytułem

Obok tytułów może znajdować się ikona po lewej stronie.

Rysunek 26. Przełączanie tylko tytułu

Element listy z przełącznikiem

Możesz połączyć element listy z przełącznikiem. Kliknięcie lewej strony pionowej linii działa jak link i przenosi użytkownika na następny ekran. Prawa strona działa jak standardowy przełącznik.

W przypadku elementu listy po lewej stronie tytuł jest wymagany. Ikona i dodatkowy tekst są opcjonalne.

Rysunek 27. Element listy i przełącznik

Suwak

Ikona jest opcjonalna na suwaku.

Rysunek 28. Suwak

Przycisk na ekranie

Pozytywne działania mają kolor motywu, a negatywne są szare. Do działań pozytywnych należy m.in. otwieranie aplikacji, instalowanie aplikacji i dodawanie nowych elementów. Do działań negatywnych należy m.in. czyszczenie danych, odinstalowywanie aplikacji i usuwanie elementów.

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

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

Stopniowe odkrywanie (zaawansowane)

Ustawienia, których nie używasz często, powinny być ukryte. Użyj opcji „Zaawansowane” tylko wtedy, gdy masz co najmniej 3 elementy do ukrycia.

W tym przypadku podtekst zawiera tytuły ukrytych ustawień. Tekst poboczny powinien zajmować tylko 1 wiersz. Dodatkowy tekst zostanie obcięty i zastąpiony wielokropkiem.

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

Dostępne są menu, ale najlepiej użyć okna dialogowego lub ekranu z opcjami wyboru. Zalecamy to, aby uprościć ustawienia, ponieważ istnieją 3 różne wzory dla pojedynczego wyboru.

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

Rysunek 32. Menu

Pole wyboru

W miarę możliwości używaj przełączników zamiast pól wyboru.

Pola wyboru można stosować:

  • W przypadku działań negatywnych, takich jak ograniczanie dostępu do aplikacji lub blokowanie usługi.
  • Aby uniknąć zbyt dużej liczby przełączników na ekranie.

Rysunek 33. Pola wyboru służą do zmniejszenia liczby przełączników na tym ekranie

Korzystanie z linków w ustawieniach nie jest zalecane. Używaj linków tylko wtedy, gdy jest to absolutnie konieczne. Linki powinny być podkreślone kolorem akcentu.

Rysunek 34. Link używany w ustawieniach

Tekst stopki może służyć do dodawania treści wyjaśniających. Stopka powinna mieć zawsze od góry linię dzielącą. Stopka znajduje się u dołu ekranu. W stopce można w razie potrzeby umieścić linki.

Rysunek 35. Tekst stopki

Wzory

Dane

Dane istotne można wyświetlać na wykresie, np. słupkowym lub kołowym. Te dane mogą być wyświetlane w nagłówku elementu. Przykłady to dane mobilne i pamięć.

Inne dane o mniejszym znaczeniu można wyświetlać w zwykłym widoku listy.

Rysunek 36. Przykład pokazujący miejsce na dane

Rysunek 37. Przykład pokazujący sieć

Informacje dla użytkowników

Niektóre funkcje mogą wymagać wyjaśnienia lub instrukcji. Możesz użyć animacji lub obrazu wraz z tekstem. Animacja lub obraz powinny być umieszczone u góry ekranu, a tekst w stopce może zawierać dodatkowe wyjaśnienia.

Rysunek 38. Ustawienie za pomocą animacji i tekstu stopki

Formularze

Jeśli formularz ma 1 pole wprowadzania, użyj zwykłego okna dialogowego. Dzięki temu użytkownicy mogą łatwo wpisać jeden element danych.

Jeśli jednak formularz zawiera kilka pól, rozważ użycie dialogu pełnoekranowego. Dzięki temu masz więcej miejsca na ekranie, aby uporządkować pola w jasnym schemacie.

Rysunek 39. Formularz z normalnym oknem

Wyniki wyszukiwania

Wyniki wyszukiwania zawierają tytuł, podtekst (jeśli jest dostępny) i ścieżkę do ustawienia.

Rysunek 40. Wynik wyszukiwania