Rekomendacje dotyczące projektu

Android pomaga tworzyć aplikacje, które działają dobrze na urządzeniach o różnych rozmiarach ekranu i formatach. Ta szeroka zgodność pomaga zaprojektować jedną aplikację, którą możesz rozpowszechniać na wszystkich docelowych urządzeniach.

Aby jednak zapewnić użytkownikom jak najlepsze wrażenia na każdej konfiguracji ekranu, musisz zoptymalizować układy i inne komponenty interfejsu pod kątem różnych rozmiarów. Optymalizacja interfejsu na ChromeOS pozwala w pełni wykorzystać dodatkową przestrzeń ekranu, aby oferować nowe funkcje, prezentować nowe treści lub zwiększać zaangażowanie użytkowników.

Układy na większe ekrany

Jeśli Twoja aplikacja została opracowana z myślą o telefonach i chcesz ulepszyć jej wygląd na ChromeOS i innych urządzeniach z dużym ekranem, zacznij od wprowadzenia drobnych zmian w układach, czcionkach i odstępach. W przypadku 7-calowych tabletów lub gier z dużym obszarem roboczym te ustawienia mogą być wystarczające.

W przypadku większych wyświetlaczy możesz przeprojektować części interfejsu, aby zastąpić „rozciągnięty” interfejs wydajnym interfejsem wielopanelowym, prostszą nawigacją i dodatkowymi treściami. Przykłady tego, jak to może wyglądać, znajdziesz w Material Studies zespołu Material Design. Sprawdź na przykład, jak Odpowiedz dostosowuje się do różnych rozmiarów ekranu.

Oto kilka sugestii:

• Zapewnij niestandardowe układy na większych ekranach. Możesz to zrobić, używając najkrótszego wymiaru ekranu lub minimalnej dostępnej szerokości i wysokości.
• Zastanów się, jak Twoje interfejsy i układy działają w środowisku zorientowanym na tryb poziomy, takim jak ChromeOS. Dostosuj układy, aby dobrze wyglądały i działały w tych orientacjach w zależności od rozmiaru okna, lub udostępnij konkretne układy w orientacji poziomej, używając kwalifikatora zasobu land. Więcej informacji o dynamicznej zmianie rozmiaru okna i innych kwestiach dotyczących dużych ekranów znajdziesz na stronie zarządzania oknami.
• Dolne paski nawigacyjne nie skalują się dobrze, gdy aplikacja jest rozciągnięta na całą szerokość ekranu. Rozważ przeniesienie nawigacji do menu po lewej stronie, gdzie będzie bardziej dostępna i będzie można wyświetlać więcej opcji. Dobrze ilustruje to przykład odpowiedzi.
• Dostosuj co najmniej wymiary, takie jak rozmiary czcionek, marginesy i odstępy, w przypadku większych ekranów, aby lepiej wykorzystać przestrzeń i zwiększyć czytelność treści. Zastanów się, jak elementy mogą wyglądać, gdy użytkownicy są nieco dalej od urządzenia, np. urządzenia z ChromeOS lub innych środowisk komputerowych.
• Dostosuj położenie elementów sterujących interfejsu, aby były dostępne dla użytkowników korzystających z myszy lub trzymających tablet, np. po bokach i z dala od środka.
• Odstępy elementów interfejsu powinny być zwykle większe na urządzeniach z ChromeOS i innych urządzeniach z dużym ekranem niż na telefonach. Marginesy i odstępy powinny się dostosowywać do różnych rozmiarów ekranu.
• Odpowiednio wypełnij treści tekstowe, aby nie były wyrównane bezpośrednio do krawędzi ekranu. Używaj minimalnego dopełnienia 16 dp wokół treści znajdujących się w pobliżu krawędzi ekranu.

Zadbaj w szczególności o to, aby układy nie były „rozciągnięte” na ekranie:

• Linie tekstu nie powinny być zbyt długie – optymalna długość to maksymalnie 100 znaków na wiersz, a najlepsze wyniki uzyskuje się przy 50–75 znakach.
• Listy i menu nie powinny zajmować całej szerokości ekranu.
• Używaj dopełnienia, aby zarządzać szerokością elementów na ekranie, lub przełącz się na interfejs wielopanelowy na urządzeniach z większym ekranem (patrz następna sekcja).

Wykorzystaj dodatkową przestrzeń na ekranie

Urządzenia z ChromeOS zapewniają aplikacji znacznie więcej miejsca na ekranie. Projektując interfejs aplikacji na większe ekrany, w pełni wykorzystaj dodatkową przestrzeń.

W przypadku aplikacji Reply i Rally widać różne podejścia do wykorzystania większego ekranu. Odpowiedź zapewnia więcej miejsca, co sprawia, że widok jest bardziej przejrzysty, a Rally wyświetla więcej danych, dzięki czemu nie trzeba tak często przewijać i klikać.

Na początek warto przyjrzeć się elementom, które mogą być ukryte przed użytkownikiem, i zastanowić się, jak je uwidocznić. Może to być wyświetlanie większej ilości informacji o elemencie, udostępnianie menu, które mogą być ukryte za kliknięciem prawym przyciskiem myszy lub długim naciśnięciem, albo wyświetlanie innych lub bardziej szczegółowych opcji nawigacji, ponieważ masz teraz większy obszar nawigacji po lewej stronie. To duże ułatwienia, które mogą poprawić wygodę użytkowników i sprawić, że aplikacja będzie bardziej przypominać wersję na komputery, bez konieczności całkowitego przeprojektowania obecnego interfejsu.

Oto kilka rekomendacji dotyczących Twojej aplikacji:

• Twoja marka określa kierunek, w którym powinieneś podążać, gdy myślisz o różnych rozmiarach ekranu. Decyzja o tym, co ma być priorytetem i co należy pokazać użytkownikowi, zależy od rodzaju ścieżek użytkownika i najczęściej używanych funkcji. Aby znaleźć inspirację, zapoznaj się z badaniami materiałów i zobacz, jak każdy produkt inaczej reaguje na większy ekran.
• Zastanów się, jak powinna działać aplikacja, korzystając z elastycznego systemu siatki, oraz jak powinny się przesuwać treści, nawigacja i opcje, gdy zwiększa się dostępna przestrzeń na ekranie.
• Określ, dla których rozmiarów ekranu chcesz używać innego układu, a następnie podaj różne układy w odpowiednich przedziałach rozmiarów okien (np. duże/bardzo duże) lub minimalnych szerokościach okien (np. sw600dp/sw720). Pamiętaj, że gdy przejdziesz do tych układów, ogólny kontekst, w którym znajdował się użytkownik, nie powinien się zmienić. Podczas przechodzenia między układami staraj się zachować wszystkie stany użytkownika (pozycję przewijania, pisany tekst itp.).

Używanie komponentów zaprojektowanych pod kątem ekranów o większej gęstości i większych rozmiarach

Aby aplikacja wyglądała jak najlepiej, udostępnij ikony i inne zasoby bitmapowe dla każdej gęstości z zakresu powszechnie obsługiwanego przez ChromeOS. W szczególności ikony na pasku aplikacji, w powiadomieniach i w programie uruchamiającym powinny być zaprojektowane zgodnie z wytycznymi dotyczącymi ikon i dostarczone w formatach wektorowych, aby można je było bez problemu skalować na różnych ekranach, na których będzie wyświetlana aplikacja.

Więcej informacji o elementach VectorDrawable i zasobach wektorowych na Androidzie znajdziesz w tym poście na blogu autorstwa Nicka Butchera.

Dostosowywanie rozmiarów czcionek i elementów dotykowych

Aby aplikacja była użyteczna w ChromeOS i na ekranach o większej gęstości, dostosuj rozmiary czcionek i obszary dotyku w interfejsie użytkownika do wszystkich konfiguracji ekranu, na których chcesz wyświetlać aplikację. Rozmiary czcionek możesz dostosowywać za pomocą atrybutów z możliwością stylizacji lub zasobów wymiarów, a obszary dotyku – za pomocą układów i rysowalnych bitmap, jak wspomnieliśmy wcześniej.

Oto kilka kwestii, które warto wziąć pod uwagę:

• Tekst nie powinien być zbyt duży ani zbyt mały na większych ekranach o większej gęstości pikseli. Sprawdź, czy etykiety mają odpowiedni rozmiar w stosunku do elementów interfejsu, do których się odnoszą, oraz czy nie zawierają nieprawidłowych podziałów wierszy.
• Zalecany rozmiar docelowego obszaru dotykowego dla elementów na ekranie to 48 dp. W przypadku interfejsu na większym ekranie może być konieczne wprowadzenie pewnych zmian. Więcej informacji o metodach odstępów znajdziesz w artykule o docelowych elementach dotykowych i odstępach między elementami przy zmianie rozmiaru ekranu. Te rekomendacje są też zgodne z minimalnymi wytycznymi dotyczącymi ułatwień dostępu.
• W przypadku mniejszych ikon, jeśli to możliwe, powiększ obszar klikalny do ponad 48 dp, używając TouchDelegate lub po prostu wyśrodkowując ikonę w przezroczystym przycisku.