<aside> ℹ️ Примерное время на прочтение: 15 минут. Не забывайте о полезных ссылках для самостоятельного изучения темы.
</aside>
Под понятием «экран» в продуктовом дизайне понимается фрейм, артборд или монтажная область в графических редакторах. Параметры и размеры экранов обусловлены устройствами, для которых разрабатывается интерфейс.
Готовые размеры фреймов в Figma
Существует три основных размера веб-интерфейсов: десктопный, планшетный и мобильный. Типовые размеры для них: десктопный — ширина 1440px, планшетный — 768px, мобильный — 375px.
Данные размеры обусловлены популярностью устройств с такими разрешениями экранов у пользователей. Однако, для каждого проекта необходимо выбирать именно те разрешения, которые требуются для вашей целевой аудитории. Например, какие-то сложные системы администрирования, скорее всего, не нуждаются в мобильной и планшетной версиях. А где-то можно не делать планшетную версию, если по статистике вашего продукта планшетных пользователей минимально или нет совсем.
При отсутствии дополнительных данных, можно брать стандартные значение (1440, 768, 375), чтобы охватить устройства большинства ваших пользователей. Это всё касается разработки дизайна продукта с нуля. Если же имеется UI-кит, то там все брекпоинты должны быть заложены и продуманы.
Чтобы создать новый фрейм в Figma, нужно либо просто нажать латинскую A или F на клавиатуре, либо выбрать соответствующую иконку в верхней панели программы.
Дизайн интерфейсов состоит из различных элементов, а сетка помогает их упорядочить. Использование сетки позволяет не вычислять каждое расстояние и размер в отдельности, а, заложив ключевые закономерности при её разработке единоразово, следовать им в работе и переиспользовать.
Например, сетка позволяет соблюсти правило теории близости (также вы можете найти это правило среди гештальт-принципов восприятия) и, в частности, правило внешнего и внутреннего, согласно которому внутренние расстояния должны быть меньше внешних.
Сетки связаны с экранами в зависимости от того, для какой ширины экрана она разрабатывается. Если это десктопное разрешение, то сетка может иметь, например, 12 колонок, планшетное – 8, а в мобильное – всего две. Однако само построение сеток заслуживает отдельного внимания.
Так же как и многое другое в продуктовом дизайне, сетки необходимо применять тогда, когда понятно её значение. О преимуществах применения сеток будет ниже. Соответственно, зная цель применения сетки в определённом проекте, можно понять какой именно она будет на каждом из разрешениях: ширина колонок, расстояния между ними и их количество, внешние отступы, а также поведение самой сетки при промежуточных разрешениях экрана.
1. Колонки. Это вертикальные разделы сетки. Чем больше колонок в сетке, тем выше её гибкость.