Макет — не картинка
Макет интерфейса похож на картинку только издали. Картинка — это пиксели: цветные точки, которые можно перекрасить, но не переставить. Макет — это набор объектов: прямоугольники, тексты, иконки, у каждого из которых есть размер, положение, цвет и имя. Их можно двигать, менять и копировать по отдельности, и именно поэтому макет можно передать в работу, а картинку — только показать.
Все эти объекты разложены по уровням, как вещи в шкафу. Самый крупный уровень — файл: один проект, например «сайт пекарни» или «приложение доставки». Файл делится на страницы — это крупные разделы: черновики, готовые экраны, библиотека деталей. На странице лежат фреймы — экраны и блоки. А внутри фреймов — слои: всё, из чего экран состоит.
Важная особенность: фрейм может лежать внутри фрейма, и так сколько угодно раз. Экран — фрейм. Шапка на нём — фрейм. Меню в шапке — фрейм. Пункт меню — снова фрейм, внутри которого текст. Эта вложенность и есть устройство интерфейса: вёрстка на сайте устроена так же, блоки внутри блоков.
Поэтому хороший макет читается как план здания. Открыв его, человек сразу видит: вот экраны, вот из каких блоков они сложены, вот детали каждого блока. Плохой макет — это куча слоёв «Rectangle 47» и «Group 12», в которой без автора не разберётся никто, включая самого автора через месяц.
Фрейм и группа
Новичок обычно собирает экран из групп: выделил кнопку и текст, объединил, готово. Это работает, пока ничего не меняется. Группа только связывает слои, чтобы их было удобно двигать вместе, — своего размера у неё нет, он равен сумме того, что внутри. Поменяли текст — группа молча стала другой ширины.
Фрейм устроен иначе. У него есть собственный размер, который не зависит от содержимого, собственный фон, скругление и обводка. Фрейм умеет обрезать то, что вылезло за его края, — как окно, в которое видно только часть сцены. И главное: только фрейм умеет раскладывать содержимое по правилам — сеткой и автоматическими отступами. Этому посвящены пятый и шестой уроки.
Отсюда простое правило: всё, что в будущей вёрстке станет блоком, — экран, карточка, кнопка, строка списка, — собирается фреймом. Группа остаётся для мелочей: связать иконку из нескольких фигур или временно сложить слои, чтобы перенести в другое место.
Экран верхнего уровня — это тоже фрейм, и у него есть заранее заданные размеры устройств: телефон, планшет, ноутбук. Выбрав размер, вы получаете рамку, в которой и будете собирать экран. Какие размеры брать и почему — тема второго урока.
Проверить себя легко: выделите блок и посмотрите, что это. Если карточка товара — группа, при первой же правке она начнёт разваливаться: фон не вырастет вслед за текстом, тень останется на старом месте, а кнопка съедет. Превратить группу во фрейм можно одной командой, и лучше сделать это сразу.
Слои: порядок и имена
Слои лежат друг над другом, как листы бумаги на столе. В панели слоёв это видно списком: что выше в списке — то выше на экране. Текст должен быть над фоном карточки, иначе фон его закроет. Когда что-то «пропало», чаще всего оно просто оказалось под другим слоем.
| в списке слоёв | на экране |
|---|---|
| Текст «Купить» | сверху, виден |
| Фон кнопки | под текстом |
| Тень | под фоном |
| Фон карточки | в самом низу |
Второе, что делает слой понятным, — имя. По умолчанию редактор называет слои по типу фигуры: «Rectangle 12», «Frame 48», «Group 3». Через час работы таких слоёв сотни, и найти нужный можно только щёлкая наугад. Слой с именем «Кнопка / Купить» или «Карточка товара» находится поиском за секунду.
Называть все слои не нужно: декоративная линия может остаться «Line». Но всё, что будет блоком в вёрстке, и всё, что вы будете искать, — называется. Хорошее имя говорит, что это, а не как оно выглядит: «Цена», а не «Текст жирный 24»; «Предупреждение», а не «Красный прямоугольник». Цвет и размер поменяются, а смысл останется.
Имена работают и на передаче в разработку. Разработчик видит дерево слоёв, и если там «Шапка → Логотип, Меню, Корзина», ему ясно, какие блоки делать. Если там «Frame 48 → Group 3, Group 4», каждый блок придётся угадывать.
Порядок в файле
Когда в файле один экран, порядок не нужен. Когда их двадцать, да ещё в трёх вариантах, без порядка файл превращается в свалку, где готовый экран лежит рядом с черновиком позапрошлой недели. Порядок в файле держится на страницах.
| страница | что на ней |
|---|---|
| Обложка | название, статус, ссылки — то, что видно в списке файлов |
| Черновики | поиски и варианты — можно всё |
| Готово | согласованные экраны — только то, что идёт в работу |
| Компоненты | кнопки, поля, карточки — детали, из которых собраны экраны |
Главное разделение — черновики и готовое. Разработчик и заказчик должны смотреть только на страницу «Готово» и быть уверены, что всё на ней актуально. Черновики нужны дизайнеру: там можно пробовать, ломать и держать десять вариантов кнопки. Если их смешать, кто-нибудь однажды сверстает отвергнутый вариант.
Фреймы на странице тоже стоит раскладывать осмысленно: по порядку пути пользователя — слева направо, как читают. Главная, каталог, карточка товара, корзина, оплата. Над рядом — подпись, что это за сценарий. Тогда человек, открывший страницу, видит путь целиком, а не мозаику.
У файла есть история версий: редактор сохраняет её сам. Но полезно отмечать важные моменты вручную — «Согласовано с заказчиком 12 марта». Если через месяц спросят, какой был вариант, вы найдёте его за минуту, а не будете вспоминать.