Рекомендации по проектированию интерфейсов под планшет

• Рекомендации по проектированию интерфейсов под планшет
• Поведение компонентов ОС Аврора в интерфейсах для планшета
  • Pickers
  • Страницы и диалоги
  • Клавиатура
  • Индикаторы прогресса
  • Элементы управления
  • Меню
  • Обложки
  • Уведомления
  • Виды и контейнеры

Рекомендации по проектированию интерфейсов под планшет

Для удобства пользователя необходимо учесть все возможные форматы экранов, на которых будет работать приложение, такие как портретный или ландшафтный режимы телефона, портретный или ландшафтный режимы планшета.

ОС Аврора способна определить тип используемого устройства и автоматически адаптировать приложение под нужный размер, либо активировать специально разработанный макет под заданные параметры экрана.

Для некоторых компонентов ОС Аврора есть специально созданные варианты, применяемые в той или иной ориентации или с тем или иным типом устройства.

Не стоит привязывать приложение к определенной ориентации или соотношению сторон. При проектировании важно проработать интерфейс как для ландшафтной, так и для портретной ориентаций.

При проектировании интерфейса для ОС Аврора под планшет важно не просто растягивать контент приложения по размерам экрана, а использовать всё доступное на экране пространство с максимальной пользой и с учётом потребностей пользователя (соблюдая отступы от края экрана).

Блоки, расположенные с применением вертикальной прокрутки, зачастую следует увеличить, чтобы можно было показать больше контента. Нужно следить за тем, чтобы содержимое внутри контейнера не было чрезмерно растянуто или искажено. Если пространство настолько велико, что нельзя найти подходящее место даже после использования всего контента, следует расширить поля макета, чтобы содержимое оставалось по центру или с левого края, а отдельные представления имели естественные размеры и интервалы между ними.

Не стоит растягивать большой текстовый блок на весь экран, следует ограничить длину текстовых строк. Наличие правильного количества символов в каждой строке (около 60 символов на строку) является ключом к удобочитаемости текста. Длинные вертикальные списки в некоторых случаях возможно переформатировать в более удобный вид GridView.

Если макет имеет центр композиции (главный элемент, на котором должно быть сфокусировано внимание пользователя, например изображение или видео), следует расширить его, чтобы удержать внимание пользователя. Другие вспомогательные элементы могут быть переставлены вокруг главного элемента или под ним.

Проектируя интерфейс под планшет, необходимо придерживаться общих правил по размерам, отступам и выравниванию. Для планшетов применяется увеличенный размер отступа Theme.horizontalPageMargin для правого и левого краев страницы. Принцип близости и схожести в данном случае также важно учитывать.

То, что часто приходится скрывать в интерфейсах мобильных телефонов из-за ограниченного пространства, зачастую полезно продемонстрировать в интерфейсе планшетной версии приложения. При наличии свободного места следует открывать и показывать по умолчанию контент, который в мобильной версии доступен только с помощью дополнительных действий пользователя, таких как касание, прокрутка или жесты.

В планшетных интерфейсах особенно удобно использовать различные панели с контролами, индикаторами или списками типа Drawer, DockedPanel (находится за пределами экрана, но всегда доступен для вызова).

Важно помнить, что с увеличением размера экрана меняется способ работы с интерфейсом и положение рук пользователя, так как некоторые элементы, привычно доступные к касанию большими пальцами на мобильном телефоне, будут недоступны тому же жесту на планшете.

Поведение компонентов ОС Аврора в интерфейсах для планшета

Pickers

• DatePicker имеет расширенный вид для планшета — к общей календарной сетке добавляется нумерация недель.
• TimePicker не масштабируется и выравнивается по центру экрана.
• ColorPicker распределяет количество цветовых образцов по ширине экрана, при этом не меняя их размер.

Страницы и диалоги

• Header, Dialog и SectionHeader всегда растянуты на всю ширину контейнера Page.

Клавиатура

• Для каждого типа устройства система сама назначает соответствующий вид клавиатуры.

Индикаторы прогресса

• ProgressBar растягивается в соответствии с шириной контейнера.
• Progress circle и BusyIndicator, с меткой или без, не масштабируются и всегда располагаются по центру вертикальной оси контейнера.

Элементы управления

• ButtonLayout растягивается по ширине контейнера, размеры содержащихся в нём кнопок увеличиваются пропорционально.
• TextSwitch, IconButton, IconTextSwitch, Combobox, ExpandingSection и Slider привязаны к размеру контейнера, в котором находятся.
• RemorseItem в виде всплывающего окна остается прежней ширины, что и на смартфоне, привязываясь к левому краю экрана.

Меню

• Контекстное меню растягивается на всю ширину контейнера или же соответствует ширине элемента, вызвавшим его (ComboBox, ListItem).
• PullDownMenu и PushUpMenu имеют фиксированную ширину и всегда располагаются по центру вертикальной оси экрана.

Обложки

• Обложки в портретном режиме планшета отображаются в виде сетки 3 х 3 и более. В ландшафтном режиме — 5х2 и более.

Уведомления

• Всплывающие уведомления на планшетах — того же размера, что и на смартфоне, и привязаны к верхнему краю экрана.
• Поведение Toasts на планшете аналогично поведению их на смартфоне — они привязаны к центру вертикальной оси.

Виды и контейнеры

• GridView может менять свои параметры в зависимости от размеров экрана.
• DockedPanel растягивается в соответствии с размером того края экрана, к которому крепится Drawer также, как и DockedPanel тянется за размером той стороны, к которой прикреплён.