Размер экрана
Экран начинается с выбора размера фрейма. Здесь легко ошибиться, взяв «точный размер своего телефона» в пикселях матрицы — например 1170 на 2532. Макеты рисуют не в физических пикселях, а в логических точках: у того же телефона это 390 на 844. Экран с плотными пикселями просто рисует каждую точку двумя или тремя пикселями, и картинка остаётся той же, только чётче.
| устройство | ширина фрейма | зачем |
|---|---|---|
| телефон | 360–390 | основной экран большинства людей |
| планшет | 768–834 | реже, часто хватает растянутого телефона |
| ноутбук | 1280–1440 | главная ширина для сайтов |
| большой монитор | 1920 | проверить, что макет не разваливается |
Для сайта обычно рисуют две ширины: телефон и ноутбук. Приложение — только телефон, в одной ширине. Рисовать «под каждую модель» не нужно: 375 и 390 почти не отличаются, и хороший макет, о чём шестой урок, просто тянется между ними.
Высота фрейма — вопрос другой. На телефоне видимая часть экрана около 800 точек, но страница может быть длинной. Фрейм экрана растягивают вниз на всю длину содержимого: так видно страницу целиком. А первую видимую часть — то, что человек видит без прокрутки, — стоит отметить линией: именно там должно быть главное.
Главная ошибка новичка — начинать экран с мелочей: выбрать шрифт, нарисовать красивую кнопку, а потом понять, что всё это не помещается. Начинайте с рамки: размер фрейма, сетка, поля. Детали лягут в готовую структуру.
Колоночная сетка
Внутри фрейма экрана почти всегда лежит колоночная сетка — невидимые направляющие, по которым выравниваются блоки. Без неё каждый блок стоит «примерно тут», и глаз это чувствует, даже не понимая почему: края не совпадают, отступы гуляют.
Сетку задают три числа. Колонки: на ноутбуке обычно 12 — это число делится на 2, 3, 4 и 6, поэтому блоки можно ставить по два, три, четыре в ряд. На телефоне — 4. Поля — отступы от края экрана: на телефоне 16–20, на ноутбуке больше. Промежуток — расстояние между колонками: 16–32.
Ширину колонки считать не нужно: редактор делает это сам. Но понимать расчёт полезно: колонка = (ширина экрана − два поля − все промежутки) ÷ число колонок. На телефоне 360 с полями 16, промежутками 16 и четырьмя колонками получается (360 − 32 − 48) ÷ 4 = 70.
Блок в сетке занимает целое число колонок, от края одной до края другой. Карточка товара на ноутбуке — 3 колонки из 12, четыре в ряд; на телефоне — 4 из 4, во всю ширину. Промежуток между карточками при этом совпадает с промежутком сетки, и ряд выглядит ровным без всяких усилий.
Сетка — не тюрьма. Картинка на фоне может уходить за поля к самому краю экрана, декоративный элемент — выступать. Но текст, кнопки и карточки стоят по колонкам. Нарушение правила должно быть решением, а не случайностью.
Шаг 8
Кроме сетки у макета есть второй порядок — шаг размеров. Отступы, высоты кнопок, промежутки между блоками берут не какие угодно, а из одного ряда чисел. Самый распространённый — шаг 8: 8, 16, 24, 32, 48, 64. Для мелочей добавляют 4.
Зачем ограничивать себя? Во-первых, ритм: когда все расстояния кратны одному числу, глаз видит порядок, даже не замечая его. Во-вторых, скорость: вместо выбора из сотни значений — выбор из семи. Отступ «чуть больше» — это 24 вместо 16, а не 17, 18 или 19. В-третьих, согласованность: два дизайнера в одной команде получают одинаковые отступы, не договариваясь каждый раз.
Почему именно 8? Большинство размеров экранов делятся на 8, и при масштабировании на плотных экранах (×1,5, ×2, ×3) числа остаются целыми. Шаг 4 тоже встречается, особенно в плотных интерфейсах, — важно не число, а то, что он один на весь проект.
На практике шаг проверяется просто: если в макете где-то стоит отступ 15, 17 или 23 — это почти наверняка ошибка «на глаз», а не решение. Такие числа ломают ритм и вызывают вопрос у разработчика: это нарочно или случайно?
Шаг касается и высот: кнопка — 40 или 48, строка списка — 56, поле ввода — 48. Высота кнопки, кратная восьми, сама встанет в ритм с отступами вокруг неё.
Первый экран по сетке
Соберём первый экран, как это делается на деле. Задача: главная пекарни на телефоне — шапка, большой баннер, заголовок раздела и две карточки товаров в ряд.
| шаг | решение |
|---|---|
| фрейм | 360 по ширине, высота по содержимому |
| сетка | 4 колонки, поля 16, промежуток 16 |
| шапка | во всю ширину, высота 56 |
| баннер | 4 колонки, высота 200, отступ сверху 16 |
| заголовок | 4 колонки, отступ сверху 32 |
| карточки | по 2 колонки, промежуток 16 — как у сетки |
Посмотрите, сколько решений принято до того, как выбран хоть один цвет. Каждое опирается на сетку или шаг: высота шапки 56 кратна восьми, отступ перед заголовком 32 — вдвое больше, чем между баннером и шапкой, потому что заголовок начинает новый раздел. Большие отступы разделяют смысловые части, маленькие — связывают детали внутри одной части.
Это правило стоит запомнить отдельно: близкое — связано, далёкое — отдельно. Подпись под картинкой стоит в 8 от неё, а следующая карточка — в 16 или 24. Если расстояния одинаковые, глаз не понимает, к чему относится подпись. Этот принцип называют законом близости, и он работает сильнее рамок и линий.
Карточки по две колонки получают ширину автоматически: (360 − 32 − 16) ÷ 2 = 156. Считать это вручную не придётся, но если в макете у карточки ширина 160, а сетка даёт 156, — карточки поставлены мимо сетки.
Такой экран в черновике выглядит серо: прямоугольники вместо картинок, линии вместо текста. Это правильно. Структуру сначала проверяют без красоты — так называемым вайрфреймом, схемой экрана. Красоту добавляют, когда ясно, что всё помещается и путь пользователя понятен.