Android охватывает широкий спектр устройств, форм и размеров экранов, поэтому разработка под конкретные, идеально точные по пикселям, области блокировки не только неэффективна, но и может негативно сказаться на пользовательском опыте. Вместо этого проектируйте, создавайте и мыслите адаптивно. Недавно мы представили новые API, которые позволяют использовать некоторые знакомые концепции дизайна для создания адаптивных макетов.
Pawparazzi — это демонстрационное приложение, которое иллюстрирует эти концепции. Оно разработано и создано для того, чтобы показать преимущества адаптивного дизайна с использованием адаптивных API, таких как Grid и Flexbox.
Адаптивное мышление — это не только проектирование с учетом контрольных точек, но и создание контента в гибких контейнерах.
Всё расположено по сетке!
Наличие основы для структурирования контента способствует внедрению передовых методов дизайна и помогает определить, как контент должен адаптироваться. В Android используется базовая сетка из 8 элементов, к которой мы можем привязать весь контент на микроуровне.
Pawparazzi использует иерархическую сетку компоновки, а не равномерную модульную сетку или однонаправленную столбцовую сетку, что означает, что столбцы и строки, составляющие ее, определяются на основе иерархии контента.
Выбор типа сетки должен зависеть от содержимого. Начните с содержимого вашего приложения и подумайте о том, как оно сгруппировано. Это поможет определить общую структуру макета. Для получения дополнительной информации о работе с панелями ознакомьтесь с разделами «Сетки и модули» , «Структура контента» и «Начало работы над настольной версией» .
Для Pawparazzi главной целью было представить питомцев команды в различных ракурсах, начиная с общего обзора, подробной информации о питомце и заканчивая ранжированными питомцами. Это означало, что галерея питомцев занимала основную панель контента и большую часть сетки, за которой следовали элементы навигации и фильтрации. При наличии большего пространства галерея может расширяться, занимая больше строк, больше питомцев и одновременно отображая подробную информацию о них. Этот адаптивный принцип называется «показ», то есть отображение большего количества контента на больших макетах.
Анализ основной цели приложения и его содержимого помог определить, как и когда необходимо адаптировать сетку макета: какие размеры классов окон, расположение шарниров и ориентацию устройств следует использовать.
В основе сетки макета лежат подсетки, которые помогают создавать более гибкие структуры контента. Сами галереи представляют собой сетку. Для компактных размеров используется сетка с шагом 2 ячейки.
Сетки — это концепция двунаправленной компоновки, поэтому контент может располагаться как по горизонтали, так и по вертикали.
Это можно использовать для создания более интересных макетов или для более четкой визуальной иерархии, например, в случае с питомцем недели, где сетка используется для отображения питомцев, занимающих верхние строчки рейтинга. Сетка может быть 2x4, но первое место занимает 2 столбца и 2 строки.
Всё это достигается с помощью Grid API.
Изгибайте эти компоненты
В то время как сетка охватывает макро- и микроструктуру контента, Flexbox помогает компонентам, которые должны реагировать на свой контент. Он используется для однонаправленного контента, где диктуется только горизонтальное или вертикальное расположение. Например, фильтрующие элементы могут реагировать на свои метки, а область фильтрации может расширяться в зависимости от количества фильтров. Используйте функцию «Показать» на больших экранах, чтобы отобразить больше фильтров одновременно.
Тонкие запросы
Разрабатывая сетку макета и используя grid и flexbox, мы обеспечиваем адаптивный макет для различных экранов и даже учитываем уникальные формы, такие как складные устройства. Но как быть в разных пользовательских контекстах? Пользователи Android могут подключаться к дисплею или использовать мышь! MediaQuery позволяет нам принимать тонкие дизайнерские решения, чтобы учитывать потребности пользователей во всех контекстах.
В Pawparazzi это означало использование точных нажатий указателя, меньших целевых областей и более плотного контента.
Примеры адаптивного пользовательского интерфейса для Android
Ознакомьтесь с вдохновляющими, оптимизированными дизайнами для устройств с большими экранами. Просмотрите шаблоны UI/UX для популярных категорий приложений, включая медиа, творчество, игры и многое другое.
