Android działa na wielu urządzeniach o różnych kształtach i rozmiarach ekranu, dlatego projektowanie pod kątem konkretnych, idealnie dopasowanych układów jest nie tylko nieskuteczne, ale też może negatywnie wpłynąć na wygodę użytkowników. Zamiast tego projektuj, twórz i myśl adaptacyjnie. Niedawno wprowadziliśmy nowe interfejsy API, które wykorzystują znane koncepcje projektowe, aby ułatwić tworzenie układów adaptacyjnych.
Pawparazzi to przykładowa aplikacja, która prezentuje te koncepcje. Została zaprojektowana i stworzona tak, aby podkreślić adaptacyjny design z wykorzystaniem adaptacyjnych interfejsów API, takich jak Grid i Flexbox.
Myślenie adaptacyjne to nie tylko projektowanie z uwzględnieniem punktów przerwania, ale też myślenie o treściach w elastycznych kontenerach.
Wszystko jest siatką!
Podstawa do strukturyzowania treści pomaga w dobrych praktykach projektowych i może ułatwić podjęcie decyzji o tym, jak treści powinny się dostosowywać. Android ma bazową siatkę 8 dp, do której możemy wyrównać wszystkie treści na poziomie mikro.
Pawparazzi używa hierarchicznej siatki układu, a nie równomiernej siatki modułowej ani jednokierunkowej siatki kolumnowej. Oznacza to, że kolumny i wiersze, które ją tworzą, są określane na podstawie hierarchii treści.
Decyzja o typie siatki powinna zależeć od treści. Zacznij od treści aplikacji i zastanów się, jak są one pogrupowane. Pomoże to określić ogólną strukturę układu. Więcej informacji o myśleniu w kategoriach paneli znajdziesz w artykułach Siatki i jednostki, Struktura treści i Pierwsze kroki na komputerze.
W przypadku Pawparazzi głównym celem było wyświetlanie zwierząt zespołu na różne sposoby, zaczynając od przeglądu zwierząt, szczegółów zwierząt, a następnie zwierząt posortowanych według rankingu. Oznaczało to, że galeria zwierząt zajmie główny panel treści i większą część siatki, a następnie elementy nawigacji i filtry. Gdy jest więcej miejsca, galeria może rozszerzyć się na więcej wierszy, więcej zwierząt i jednocześnie wyświetlać szczegóły zwierząt. Ta zasada adaptacyjna to ujawnianie, czyli wyświetlanie większej ilości treści w większych układach.
Przyjrzenie się głównemu celowi aplikacji i treściom pomogło określić, jak i kiedy siatka układu będzie musiała się dostosować: do jakich rozmiarów okien, umiejscowienia zawiasu i orientacji urządzenia.
Z siatki układu podsiatki pomagają tworzyć bardziej elastyczne struktury treści. Same galerie są siatką. W przypadku kompaktowych rozmiarów używana jest siatka 2-kolumnowa.
Siatki to koncepcja układu dwukierunkowego, dzięki czemu treści mogą przepływać zarówno w poziomie, jak i w pionie.
Można jej używać do tworzenia ciekawszych układów lub bardziej przejrzystej hierarchii wizualnej, np. w przypadku zwierzęcia tygodnia, gdzie siatka służy do przekazywania informacji o zwierzętach z najwyższymi ocenami. Siatka może mieć wymiary 2x4, ale górne miejsce zajmuje 2 kolumny i wiersze.
Wszystko to jest możliwe dzięki interfejsowi Grid API.
Elastyczne komponenty
Siatka obejmuje strukturę treści na poziomie makro i mikro, a Flexbox pomaga w przypadku komponentów, które muszą reagować na swoje treści. Jest on używany w przypadku treści jednokierunkowych, gdzie określony jest tylko kierunek poziomy lub pionowy. Na przykład filtry mogą reagować na swoje etykiety, a obszar filtrów może się rozszerzać w zależności od liczby filtrów. Użyj opcji Ujawnij na większych ekranach, aby wyświetlać więcej filtrów naraz.
Zapytania z niuansami
Dzięki zaprojektowaniu siatki układu i użyciu siatki oraz Flexbox możemy tworzyć układy adaptacyjne na wielu ekranach, a nawet obsługiwać unikalne formy, takie jak urządzenia składane. Ale co z różnymi kontekstami użytkowników? Użytkownicy Androida mogą podłączyć się do wyświetlacza lub podłączyć mysz. MediaQuery pozwala nam podejmować przemyślane decyzje projektowe, aby uwzględnić użytkowników we wszystkich kontekstach.
W Pawparazzi oznaczało to wykorzystanie precyzyjnych danych wejściowych wskaźnika, z mniejszymi obszarami docelowymi i gęstszymi treściami.
Przykłady adaptacyjnego interfejsu Androida
Poznaj inspirujące, zoptymalizowane projekty na urządzenia z dużym ekranem. Przeglądaj szablony interfejsu/UX dla popularnych kategorii aplikacji, w tym multimediów, kreatywności, gier i innych.
