Android помогает разрабатывать приложения, которые хорошо работают на устройствах самых разных размеров экрана и форм-факторов. Такая широкая совместимость позволяет создать единое приложение, которое можно широко распространять на все целевые устройства.
Однако, чтобы обеспечить пользователям наилучший возможный опыт на каждой конфигурации экрана, необходимо оптимизировать макеты и другие компоненты пользовательского интерфейса для разных размеров. В ChromeOS оптимизация пользовательского интерфейса позволяет в полной мере использовать дополнительное пространство экрана для предложения новых функций, представления нового контента или улучшения пользовательского опыта с целью повышения вовлеченности пользователей.
Макеты для больших экранов
Если вы разработали приложение для мобильных устройств и хотите улучшить его дизайн на ChromeOS и других устройствах с большими экранами, начните с небольших корректировок макета, шрифтов и интервалов. Для 7-дюймовых планшетов или игры с большим холстом этих корректировок может быть достаточно.
Для больших экранов вы можете переработать некоторые части пользовательского интерфейса, заменив «растянутый» интерфейс на эффективный многопанельный интерфейс, упростив навигацию и добавив дополнительный контент. Примеры того, как это может выглядеть, можно увидеть в разделе Material Design « Исследования Material Design». Например, посмотрите, как Reply адаптируется к разным размерам экрана.
Вот несколько предложений:
- Для больших экранов можно настроить пользовательский макет. Это можно сделать, используя наименьший размер экрана или минимально доступные ширину и высоту.
- Представьте, как ваш пользовательский интерфейс и макеты будут работать в среде с альбомной ориентацией, например, в ChromeOS. Адаптируйте свои макеты, чтобы они хорошо выглядели и работали в этих ориентациях в зависимости от размера окна, или укажите конкретные макеты для альбомной ориентации, используя квалификатор ресурса land. Подробнее о динамическом изменении размера окон и других аспектах для больших экранов можно узнать на странице управления окнами .
- Нижние панели навигации плохо масштабируются, когда ваше приложение растянуто на большую ширину. Подумайте о перемещении навигации в меню слева, где она будет более доступна и сможет отображать больше опций. Пример с ответом хорошо это иллюстрирует.
- Как минимум, настройте параметры, такие как размер шрифта, поля и интервалы, для больших экранов, чтобы улучшить использование пространства и читаемость контента. Учтите, как будет выглядеть контент, когда пользователи находятся немного дальше от устройства, например, на устройствах ChromeOS или в других настольных средах.
- Отрегулируйте расположение элементов управления пользовательского интерфейса таким образом, чтобы они были доступны пользователям при использовании мыши или планшета, например, расположив их по бокам и подальше от центра.
- Отступы элементов пользовательского интерфейса, как правило, должны быть больше на ChromeOS и других устройствах с большими экранами, чем на мобильных телефонах. Ваши поля и промежутки между элементами должны адаптироваться к разным размерам экрана.
- Добавьте достаточный отступ к текстовому содержимому, чтобы оно не выравнивалось непосредственно по краям экрана. Используйте отступ не менее 16dp вокруг содержимого, расположенного у краев экрана.
В частности, убедитесь, что ваши макеты не выглядят «растянутыми» на весь экран:
- Строки текста не должны быть чрезмерно длинными — оптимизируйте каждую строку максимум до 100 символов, наилучшие результаты достигаются при длине от 50 до 75 символов.
- Списки и меню не должны занимать всю ширину экрана.
- Используйте отступы для управления шириной элементов на экране или переключитесь на многопанельный пользовательский интерфейс для устройств с большими экранами (см. следующий раздел).
Воспользуйтесь преимуществами дополнительной площади экрана.
Устройства ChromeOS предоставляют вашему приложению значительно больше экранного пространства. При разработке пользовательского интерфейса вашего приложения для больших экранов, используйте это дополнительное пространство в полной мере.
В примерах Reply и Rally приложения используют разные подходы к увеличению размера экрана. Reply добавляет пространство для более лаконичного внешнего вида, в то время как Rally отображает больше данных, чтобы уменьшить прокрутку и нажатия.
Хорошим началом будет анализ того, что может быть скрыто от пользователя, и как это можно сделать видимым. Это может быть отображение дополнительной информации об элементе, отображение меню, которые могут быть скрыты за щелчком правой кнопки мыши или долгим нажатием, или демонстрация различных или более глубоких вариантов навигации теперь, когда у вас есть большая область навигации слева. Это значительные улучшения юзабилити, которые могут улучшить ваш UX и придать вашему приложению более привычный вид, без полной переработки существующего интерфейса.
Вот несколько рекомендаций для вашего приложения:
- Ваш бренд определяет направление, в котором следует двигаться, учитывая различные размеры экранов. Решение о том, чему отдать приоритет и что показывать пользователю, зависит от типов пользовательских сценариев и наиболее часто используемых функций. Для вдохновения ознакомьтесь с исследованиями Material Design и посмотрите, как каждый продукт по-разному реагирует на экраны больших размеров.
- Подумайте о том, как должен вести себя дизайн вашего приложения при использовании адаптивной сеточной системы , и как контент, навигация и параметры должны перемещаться по мере увеличения площади экрана.
- Определите, для каких размеров экрана вы будете использовать разные макеты, а затем предоставьте эти макеты в соответствующих категориях размеров окна (например, большой/очень большой) или минимальной ширины окна (например, sw600dp/sw720). Помните, что при переходе к этим макетам общий контекст, в котором находился пользователь, не должен меняться, и вы должны стараться сохранять все состояние пользователя при переходе между макетами (положение прокрутки, вводимый текст и т. д.).
Используйте ресурсы, разработанные для высокой плотности и больших экранов.
Чтобы ваше приложение выглядело наилучшим образом, предоставьте иконки и другие растровые изображения для каждого уровня плотности пикселей в диапазоне, обычно поддерживаемом ChromeOS. В частности, иконки для панели приложения, уведомлений и лаунчера следует разрабатывать в соответствии с рекомендациями по иконографии и предоставлять в векторном формате, чтобы они корректно масштабировались на разных экранах, на которых будет отображаться ваше приложение.
Для получения дополнительной информации о VectorDrawables и векторных ресурсах на Android ознакомьтесь с этой статьей в блоге Ника Бутчера .
Настройте размер шрифта и области касания.
Чтобы ваше приложение работало на ChromeOS и экранах с более высокой плотностью пикселей, настройте размеры шрифтов и области касания в пользовательском интерфейсе для всех целевых конфигураций экрана. Вы можете настроить размеры шрифтов с помощью атрибутов стиля или ресурсов размеров , а области касания — с помощью макетов и растровых изображений, как обсуждалось ранее.
Вот несколько моментов, которые следует учесть:
- На больших экранах и экранах с высокой плотностью пикселей текст не должен быть слишком крупным или слишком мелким. Убедитесь, что размеры подписей соответствуют размерам соответствующих элементов пользовательского интерфейса, и что в подписях, заголовках и других элементах нет некорректных переносов строк.
- Рекомендуемый размер области касания для элементов на экране составляет 48dp — в интерфейсе для больших экранов могут потребоваться некоторые корректировки. Подробнее о методах отступов можно узнать в разделе «Методы отступов», чтобы понять, как работают области касания и расстояние между элементами при изменении размера экрана. Эти рекомендации также соответствуют минимальным требованиям доступности .
- По возможности, для значков меньшего размера расширьте область касания до более чем 48dp, используя
TouchDelegate, или просто центрируйте значок внутри прозрачной кнопки.