Научитесь использовать правильные интервалы в интерфейсе
Сегодня поговорим об интервалах. Когда речь идёт о создании мобильных интерфейсов, каждый пиксель на счету. Особенно важно оставлять достаточно места для компонентов системы и уметь определять размер интервала между различными элементами интерфейса.
Ниже вы увидите схему формы регистрации, которая поможет лучше разобраться в материале статьи.
Строка состояния
Оставьте как минимум 44px для строки состояния. При проектировании отсчитывайте 44 пикселя от верхней границы фрейма и не размещайте в этой области ничего, кроме самой строки состояния.
Панель навигации
В зависимости от используемого контента эта часть обычно занимает около 56px. В моём примере я использовал 44px, чтобы создать область касания для кнопки «Назад» и добавил интервал, равный 8px, между ней и текстом ниже.
Текстовые контейнеры
Для текста я использовал шрифт размером 28px, а между заголовком и описанием сделал интервал, равный 8 px. Весь текстовый контейнер занимает около 80 px и располагается на расстоянии 96px от верхней границы фрейма.
Поля ввода
Чтобы между текстовым контейнером и полем ввода было достаточно свободного пространства, я добавил интервал, равный 24px. Размеры самого поля ввода равны 343x56px. Так с обеих сторон от поля ввода остаются отступы, размером около 16px.
Текст согласия с условиями регистрации и кнопка
Между текстом согласия с условиями регистрации и кнопкой я сделал интервал, равный 24px, чтобы было понятно, что они связаны между собой. Я также добавил интервал, равный 16px, между кнопкой и клавиатурой.
Клавиатура iOS
Для создания клавиатуры я использовал готовый компонент из iOS UI Kit. Помните, что необходимо изменить его размер, чтобы он соответствовал размеру фрейма, и оставить интервал, равный примерно 34px, для индикатора home в нижней части экрана.
Как научиться правильно использовать интервалы на практике
Лучший способ изучить, как работают интервалы — повторять дизайн других приложений, записать все возможные значения интервалов и самостоятельно проанализировать их. Сделайте скриншоты приложений на своем телефоне и перенести в Figma, чтобы затем перерисовать их.
