Брейкпоинт или контрольная точка — это диапазон заранее определенных размеров экрана, которые имеют требования к макету. В конкретном брейкпоинте сетку макета, как и сами его элементы, можно настроить в соответствии с требованиями или ориентацией экрана (альбомная или портретная).
Содержание статьи
Система брейкпоинтов
Дизайн-система предоставляет брейкпоинты и структуру сеток для каждого устройства и его ориентации. В целом.ю макеты по колонкам делятся на 4, 8 и 12 колонок.
У каждого брейкпоинта определено количество колонок, а также рекомендуемые поля и межколонники.
Порядок колонок в таблице выше
- Breakpoint Range (dp) — колонка с диапазоном значений брейкпоинта.
- Портретная ориентация
- Альбомная ориентация
- Размер
- Количество колонок
- Поля и межколонники
Пример 4й строчки из таблицы: На устройствах, у которых диапазон значений по ширине от 480dp до 599dp у которого 4 колонки, а поля и межколонник 16dp.
iOS брейкпоинты при использовании Material Design
Далее ниже таблица, в которой указано количество колонок, а также значения для полей и межколонников, которые применяются для брейкпоинтов для устройств на iOS
Резиновая сетка
У резиновых сеток колонки масштабируются вместе с контентом. Макет при таком типе может использовать брейкпоинты для значительного изменения контента (логично, ведь он тянется).
Фиксированая сетка
У фиксированых сеток колонки фиксированного размера и резиновыми полями, чтобы контент был неизменен от брейкпоинта к брейкпоинту. Макет можно поменять в любом брейкпоинте, если того требует задача, контекст и т.д.
Макет любого приложения состоит из нескольких блоков или областей интерфейса. Например, сайдбар (боковая навигация), область контента и верхней панели приложения (шапки приложения). Каждая из областей может содержать какие-то действия, контент или служить навигацией. Интерфейс должен быть консистентным от устройства к устройству и от брейкпоинта к брейкпоинту.
Чтобы повысить степень удобство использования (юзабилити), элементы интерфейса для десктопа должны быть консистентны с мобильным устройством. Кардинальных изменений не должно быть.
Постоянные области интерфейса
Фиксированные или постоянные области в интерфейсе — это области, которые закреплены и расположены за пределами сетки. Например боквая панель навигации ниже на картинке находится за пределами сетки. Такие области нельзя свернуть/закрыть. Пример ниже.
Отключаемые постоянные области интерфейса
Помимо этого такие области могут присутствовать на экране по какому-то действию или оставаться видимыми до тех пор, пока опять же по какому-то действию их не убрать. В общем, их можно включать или выключать, показывать по нажатию или прятать, а когда они появляются, они могут поджимать контент и сетку.
Когда такая область появляется на экране, то кроме сжатия контента и сетки это никак не влияет на другие элементы на экране. Пример ниже.
Временные области интерфейса
Такие области появляются временно, и когда они появляются, они не влияют на адаптивную сетку. Когда они видны, их можно скрыть, нажав на интерактивный элемент в этой области или за ее пределами.
Когда такая область появляется, тогда другие элементы экрана перестают быть интерактивными до закрытия. Пример ниже.
Вайрфреймы — это набросок интерфейса без детализации, который является отправной точкой, чтобыв в последствии дополнить его деталями исходя из потребностей продукта.
Смотрите последние обновления на странице what’s new
Загрузка...
