Проектирование складных устройств: позы, размеры окон и жесты
Как создавать приложения для складных телефонов: макеты в сложенном и разложенном виде, положение столешницы и книги, классы размеров окон, непрерывность и жесты возле сгиба.
Главное
Создавайте складные макеты по доступному размеру окна, а не по модели устройства: классы размеров окон Android рассматривают ширину менее 600 dp как компактную, от 600 до 840 dp как среднюю и от 840 до 1200 dp как расширенную. Поддерживайте сложенное, открытое и полуоткрытое положение (на столе), сохраняйте место пользователя, когда устройство складывается или раскладывается, а также держите ключевой контент и сенсорные объекты подальше от сгиба.
Позы
В документации разработчика Android складные устройства описаны в нескольких положениях: в сложенном состоянии, в открытом положении, в открытом положении, повернутом в альбомную ориентацию, и в полуоткрытом положении, известном как столешница. Сгиб делит экран на две части: либо в виде гибкой области одного экрана, либо в качестве шарнира между двумя дисплеями, и может закрывать часть дисплея.
Проектирование по классам размеров окон
Вместо того, чтобы ориентироваться на конкретные устройства, Android группирует доступное пространство по классам размеров окон. Компактная ширина (менее 600 dp) охватывает почти все телефоны в портретной ориентации; средняя ширина (от 600 до 840 точек) охватывает большинство планшетов в книжной ориентации и многие большие развернутые внутренние дисплеи в книжной ориентации; расширенная ширина (от 840 до 1200 точек) охватывает большинство планшетов и больших развернутых дисплеев в альбомной ориентации. В больших и очень больших классах обучаются планшеты и настольные компьютеры большего размера.
Макеты, в которых используется сгиб
Общие шаблоны:
- В сложенном виде: обычное расположение телефона.
- Открытый плоский: макет со списком или две панели, каждая из которых находится на одной стороне сгиба.
- Tabletop: контент, например видео, в верхней половине, элементы управления в нижней половине.
- Никогда не размещайте кнопку, текстовую строку или лицо поперек сгиба.
Непрерывность
Когда кто-то разворачивает устройство во время выполнения задачи, приложение должно продолжать работу там, где оно было: та же позиция прокрутки, тот же черновик, то же воспроизведение. Рассматривайте свертывание и развертывание как изменение макета, а не перезапуск, и анимируйте переход, чтобы люди могли следить за перемещением контента.
Жесты и охват
Большие развернутые экраны изменяют досягаемость большого пальца: размещайте элементы управления по краям, где лежат руки, и избегайте смахивания по краю, которое конфликтует с системными жестами. Движение, основанное на физике, здесь тоже помогает: панели, которые скользят и фиксируются с помощью пружин, делают смену поз естественными, а не резкими.
Ключевые принципы
- Проектирование по размеру окна, а не по модели устройства
- Компактный < 600 dp, средний 600–840 dp, расширенный 840–1200 dp
- Поддержка сложенного, открытого и настольного положения.
- Держите контент и элементы управления в секрете
- Сохранять состояние и анимировать изменения позы
Частые вопросы
Источники
- Learn about foldables — Разработчики Android
- Use window size classes — Разработчики Android