Интерфейс настольного компьютера изначально адаптивен, поддерживая различные размеры на подключенных дисплеях или внутри окон. Поддержка всего спектра устройств Android достигается за счет создания адаптивного пользовательского интерфейса. Адаптивные макеты необходимы для настольных компьютеров, позволяя пользователям беспрепятственно изменять размер окон приложений.
Чтобы подготовить ваше приложение к работе на настольных компьютерах, начните с адаптации пользовательского интерфейса, а затем перейдите к проектированию плотности и взаимодействия с полями ввода. Для получения дополнительной информации см. раздел «Адаптивные макеты» . Чтобы попрактиковаться в дизайн-лаборатории, см. раздел «Адаптивная дизайн-лаборатория» .
Думайте в панелях
Используйте панельный подход к компоновке, применяя группировку и размещение элементов. Контент можно организовать с помощью визуальных контейнеров или посредством неявной группировки с использованием пустого пространства. Эти панели обеспечивают гибкость, поскольку их можно расширять, ограничивать, скрывать, перемещать или отображать в виде всплывающих окон. Проектирование с использованием панелей упрощает процесс создания целостного пользовательского опыта на различных мобильных устройствах и может быть интегрировано с существующими сетками для оптимизации сложных выравниваний макета.
Делать
Шкала
Хотя большие экраны предоставляют больше места для контента, необходимо учитывать дополнительное пространство и эргономические факторы, такие как расстояние до экрана. Размер шрифта следует немного увеличить для удобства пользователей, которые могут находиться дальше или печатать на клавиатуре.
Элементы пользовательского интерфейса и текст масштабируются на расширенных и подключенных дисплеях и могут иметь разный масштаб в зависимости от разрешения экрана.
Используйте одну-две ступени увеличения в существующих шрифтовых шкалах или рассмотрите возможность внедрения специализированной шрифтовой шкалы, разработанной для настольных компьютеров и расширенных экранов. Для повышения качества редактирования вы можете внести необходимые корректировки в свои дизайны.
Изображение также масштабируется и растягивается на весь экран. Это позволяет пользователю рассмотреть растение подробнее, но при этом неэффективно используется пространство. Учитывайте это при структурировании элементов пользовательского интерфейса.
Содержимое и элементы пользовательского интерфейса
Теперь, когда контент сгруппирован и масштабирован, некоторые элементы пользовательского интерфейса также могут изменяться или обновляться, чтобы лучше соответствовать контрольным точкам.
В каждом блоке контента решите, как и каким образом он будет адаптироваться. Посмотрите на сам контент. Если строка списка превращается в карточку, теряет ли контент эффективность взаимодействия и удобство просмотра? Компоненты могут вести себя по-разному на разных контрольных точках. Вы можете адаптировать их ширину или видимость, или даже заменять компоненты.
Определите максимальную ширину для каждого элемента пользовательского интерфейса и текста в пределах панели. Элементы пользовательского интерфейса не должны растягиваться на всю ширину или искажаться. Установите максимальные отступы и поля внутри панелей. Текст должен быть удобным для чтения, ограничивая длину строк. Ограничьте короткие тексты примерно 60 символами, в то время как длинные тексты могут быть длиннее.
Делать
Используйте плавное постепенное раскрытие информации. Может ли дополнительный контент появляться при увеличении размера окна? Подумайте, повышает ли дополнительный контент производительность при меньшем количестве кликов или создает путаницу.
Содержимое каждой панели может изменять свою компоновку в зависимости от контента, перестраиваясь в разные столбцы и структуры сетки. Например, вертикальная сетка с каруселью может превратиться в сетку типа «кирпичная кладка» с каруселью элементов. Учитывайте вертикальное изменение элементов и сочетайте его с ограничениями и изменениями в представлении. В зависимости от потребления контента, вам может не понадобиться перемещать компоненты таким образом.
Для максимальной читаемости и производительности рекомендуется предоставить пользователю возможность настраивать макет по своему усмотрению.
Навигация
После адаптации контента и элементов пользовательского интерфейса определите, как панели контента будут взаимодействовать друг с другом и с иерархией навигации. Вместо того чтобы переходить к подробной информации касанием, вы можете использовать дополнительное пространство экрана для отображения подробной и вспомогательной информации рядом друг с другом.
- Если используется панель навигации, нижнюю панель следует заменить боковой панелью навигации для повышения эргономики. Не следует растягивать нижнюю панель навигации.
- Для дополнительной навигации, например, вкладок, рекомендуется установить для них максимальную ширину, чтобы их было легче и удобнее точно перемещаться.
- Панели приложений также можно прикрепить к соответствующим панелям контента, но при этом следует избегать нарушения иерархии навигации.
Плотность
В зависимости от точности ввода и размера экрана, в настольной версии сайта может изменяться как плотность взаимодействия, так и визуальная составляющая.
- Вы можете увеличить плотность визуальных элементов, таких как табличные данные, не перегружая пользователя по сравнению с компактным макетом для телефонов. Рассматривайте плотность контента как необязательную и всегда допускайте масштабирование текста в рамках макета, не устанавливайте жестко заданные размеры шрифта.
- Компоненты должны иметь более точную цель для клика. Встроенные цели для клика вокруг компонентов могут приводить к ошибочным кликам.
Входные данные
Дополнительные входные данные означают дополнительные модели взаимодействия для ваших пользователей.
Когда пользователь использует мышь и клавиатуру, ваше приложение должно учитывать состояние наведения курсора и фокусировку.
- Добавьте состояния наведения курсора для ввода с помощью указателя, например, мыши или стилуса.
- Отслеживайте состояния фокуса элементов при навигации пользователей с помощью клавиши Tab для обеспечения доступности.
- Учитывайте состояния курсора, поскольку курсор также может помочь передать пользователю информацию о взаимодействии и состоянии приложения.
Добавление новых штатов может повысить эффективность.
- Функциональность контекстного меню при щелчке правой кнопкой мыши может включать в себя возможность быстрого доступа к функциям.
- Всплывающие подсказки при наведении курсора могут помочь пользователям в процессе адаптации.
- Клавиатурные сочетания помогают опытным пользователям повысить производительность.
