Projektowanie adaptacyjne to tworzenie układów, które dostosowują się do określonych punktów przerwania i urządzeń.
Aby skutecznie wdrażać układy adaptacyjne:
Najpierw określ zmiany układu na podstawie szerokości okna urządzenia, a potem dostosuj wysokość. Obsługuj różne rozmiary ekranu.
Android wykorzystuje koncepcje projektowania elastycznego podobne do tych stosowanych w tworzeniu stron internetowych. Używa elastycznych siatek i obrazów, aby tworzyć układy, które skutecznie reagują na kontekst.
Pozwól układom reagować na różne rozmiary za pomocą metod adaptacyjnych: zmiany układu, ujawniania i zmiany prezentacji.
Nie blokuj aplikacji w orientacji pionowej. Powoduje to wyświetlanie czarnych pasów, gdy rozmiar aplikacji jest zmieniany.
Nie
Wskazówki dotyczące projektowania układów adaptacyjnych do większych rozmiarów ekranu znajdziesz w przewodniku dla programistów Obsługa różnych rozmiarów ekranu w Compose oraz na stronie M3 Stosowanie układu. Możesz też zajrzeć do kanonicznej galerii Androida na dużych ekranach, aby znaleźć inspirację i dowiedzieć się, jak wdrożyć układy na dużych ekranach.
Projektuj adaptacyjnie
Projektując aplikację, domyślnie stosuj projektowanie adaptacyjne. Rynek urządzeń mobilnych z Androidem stale się rozwija, więc nie możesz myśleć o urządzeniach mobilnych tylko jako o telefonach. Powinny one obejmować wszystko, od telefonów, przez urządzenia składane i tablety, po wszystko, co się między nimi znajduje.
Niektóre funkcje i przypadki użycia mogą nie mieć sensu na każdym rozmiarze ekranu lub w każdym formacie. Projektowanie adaptacyjne daje użytkownikom większą swobodę w zakresie ergonomii, użyteczności i jakości aplikacji.
Metody i jakość
Możesz zacząć od zaprojektowania kluczowych ekranów (przekazujących najważniejsze koncepcje lub informacje o aplikacji) z rozmiarami klas jako punktami przerwania, które będą wytycznymi dla reszty aplikacji. Te najważniejsze elementy mogą podkreślać zróżnicowane cechy adaptacyjne i formatu. Możesz też zaprojektować treści tak, aby były elastyczne na poziomie podstawowym, określając, jak należy ograniczać, rozszerzać lub zmieniać układ treści.
W tym przykładzie nawigacja i treści zmieniają układ, dopasowują się i skalują, aby zapewnić lepszą ergonomię nawigacji. Siatka układu rozszerza się z orientacji pionowej do układu wielokolumnowego. Adres na pasku aplikacji i filtry zmieniają układ i dopasowują się do siatki układu.
Tak
Nie
Tak
Tak
Nie
Upewnij się, że pola i przyciski nie są rozciągnięte.
Myśl w kategoriach kontenerów i paneli.
Użyj koncepcji kontenerów w postaci paneli, aby grupować treści w układach adaptacyjnych. Na przykład użyty przykład to ekran szczegółów, czyli jeden panel, który można wyświetlić w układzie lista-szczegóły.
W przypadku rozmiarów kompaktowych należy stosować układ z jednym panelem.
W przypadku rozmiarów średnich można używać układów z 1–2 panelami.
W przypadku rozmiarów dużych i bardzo dużych można używać układów z wieloma panelami.
Używaj kontenerów wewnętrznych i wizualnych, aby grupować elementy. Panele mogą się przesuwać, ukrywać, rozszerzać, ograniczać lub wyskakiwać. Myślenie w kategoriach paneli ułatwia projektowanie na wszystkich urządzeniach mobilnych.
Chociaż panele nie są niezbędne na dużych ekranach, nadal warto myśleć o treściach w kategoriach grup kontenerów, aby zapewnić elastyczność.
Pozwól elementom przesuwać się i zmieniać kolejność, skupiając się na tym, jak elementy dostosowują się do siatki. Rozważ zmianę pionową elementów i połącz ją z ograniczeniami i zmianami prezentacji.
Zwróć uwagę na skalę i ilość wyświetlanych treści.
Mała siatka filmów na telefonie staje się ciasna i przytłaczająca na tablecie. Aktualizuj skalę elementu interfejsu na podstawie rozmiaru ekranu, gęstości i danych wejściowych.
Aplikacja wysokiej jakości powinna spełniać wymagania dotyczące jakości aplikacji podstawowej i jakości na dużych ekranach na poziomie zróżnicowanym.
Więcej informacji o układach znajdziesz na stronie Material Design 3 (M3) Omówienie układu page.
Wykorzystaj unikalne rozmiary formatów.
Nie zapominaj też o mniejszych rozmiarach ekranu i różnych formatach obrazu, ponieważ telefony z Androidem mają różne rozmiary, a urządzenia składane mogą mieć mały ekran zewnętrzny, na którym można wyświetlać aplikację.
W przypadku układów opartych na sterowaniu, takich jak odtwarzacze multimediów, pozwól na zmianę układu elementów sterujących i ujawnianie treści.
Aby ułatwić użytkownikom dostosowanie, użyj elementu kotwicy, np. dużego przycisku odtwarzania, aby dostosować treść wokół niego, a grafika główna stanie się tłem na ekranie zewnętrznym.
Poza klasami rozmiarów
Chociaż rozmiar okna jest powszechnym czynnikiem w projektowaniu adaptacyjnym, aplikacja musi być też gotowa na to, że użytkownicy będą podłączać monitory i urządzenia wejściowe, oglądać treści z różnych odległości i zmieniać położenie urządzenia. Możesz sprawdzać te
zmiany za pomocą interfejsu API mediaQuery, który umożliwia dodawanie niuansów podczas projektowania sposobu, w jaki aplikacja dostosowuje określone elementy interfejsu do konkretnych przypadków użycia.
Dostosuj projekt aplikacji na poziomie komponentu lub panelu, zamiast projektować całe ekrany dla każdego rozmiaru, danych wejściowych, formatu i położenia.
Więcej informacji o interakcji z danymi wejściowymi znajdziesz w przewodnikach dotyczących interakcji w przypadku komputerów.
Zapoznaj się z przykładowym studium przypadku Pawparrazzi, które zostało opracowane i zaprojektowane przy użyciu najnowszych adaptacyjnych interfejsów API i wskazówek dotyczących projektowania.
