Мануал. Как перейти от «наколбасим по-быстренькому» к грамотному UI-киту

Когда я еще писала от руки, замечала, что если хочу написать красивый текст, то первые строки выходят ровными и стройными с прямыми буквами, а под конец страницы – уже сильный наклон, строки сползают вниз, а половина слов просто не дописана.

Ровно то же самое происходит у меня с дизайн-макетом. Первые символы и стили четкие с правильным неймингом, но чем дальше, тем больше появляется накиданных на экран элементов без названий (просто, чтобы проверить, как смотрится), которые потом остаются там навсегда.

В итоге, элементы множатся, отступы ползут, текстовые стили частенько игнорируются. Даже на таком молодом проекте как Speekify уже заметен разнобой и избыточность.

– Ну так сделай дизайн-систему! – скажете вы.

Я тоже так подумала и пошла разобраться, что же такое дизайн-система, и как ее сделать.

Дискляймер #2: если вам чуждо чувство порядка, и вы – стихийный творческий человек, забудьте обо всем, что только что прочитали. Закройте статью и идите творить прекрасное. Серьезно. Очень важно получать удовольствие от того, как ровно встают рядом однотипные элементы и как элегантно формируется система нейминга символов и стилей.

Суть UI-кита – создать однотипные базовые элементы, собрать из них более сложные символы, из них еще более сложные и так далее, пока не получатся интерфейсные блоки.

Фишка в том, что cоздавая элементы таким способом мы получаем возможность переопределять их составные части, получая при этом огромное количество вариаций без замусоривания страницы с символами.

Например, создаем базовые элементы:

– Цвет (red, green, blue…);
– Текст;
– Иконка (delete, edit, save…);
– Состояние (normal, hover, disabled)

…и собираем из них кнопку.

В итоге, на странице символов у нас всего 3 цветовых символа, один символ текста, 3 иконки, 3 состояния и всего ОДНА кнопка. Из этого мы можем собрать 27 вариантов кнопок и это без учета разных надписей.

А теперь самое колдунство – добавляем в проект новый цвет, создаем соответствующий символ и – бац! – получаем возможность создавать кнопки этого цвета с любыми иконками/текстом или состоянием НИЧЕГО БОЛЬШЕ НЕ ДЕЛАЯ. Просто в панельке Overrides появляется еще один цвет.

Но и это еще не все. После того, как мы добавили новый цвет, он по волшебству становится доступен для всех грамотно созданных элементов: иконок, блоков и др.

Чтобы сделать символ иконки, цвет которой можно переопределить, надо в структуре иконки использовать символ «Цвет», к которому применить векторную иконку как маску. В итоге имеем всего один символ иконки, и может назначать ей любой цвет в зависимости от того, где она используется.

Я ориентировалась на описание дизайн-системы Cabana в 1 2 3 4 5-и частях, автор – Marc Andrew.

Важно не халявить при создании базовых элементов. Честно сделать все текстовые стили, символы цветов и шейпов. Это самая трудозатратная часть работы, но потом дело пойдет быстро.

А если все аккуратно назвать и выровнять, то вас будет распирать от эстетического удовольствия :)

Пересказывать не буду – инструкция подробная, правда на английском. Остановлюсь на неявных моментах, которые пришлось додумывать или переделывать. Например, автор не учитывает (или умалчивает), что система может использоваться как библиотека, и Sketch макеты выгружаются в Zeplin.

Если вы знакомы с объектно-ориентированным программированием, то уже наверное заметили, что в системе используется аналог наследования, и именно он дает такую гибкость.

Если не знакомы – не переживайте, это просто термин. Важно то, что сложные символы строятся из более базовых, объект описывается один раз и по возможности переиспользуется.

Например, вместо того, чтобы собирать комбобокс с нуля и определять для него разные состояния, можно сказать, что комбобокс – это инпут со стрелкой. А для инпута у нас уже все состояния определены.

Marc Andrew сделал отличную четкую систему нейминга символов и стилей. Я ее стырила практически один-в-один. Обратите внимание, какое классное решение – назвать цвета не Red, Green, Blue а Primary, Secondary и Tertiary. Такую систему легче адаптировать к новому проекту, просто скопировав файл и заменив цвета – нейминг останется актуальным.

Все время забываю про эту штуку и огребаю, когда символы расползаются или искажаются. Для библиотеки это особенно важно не забывать потому, что символы универсальны и используются во многих местах. Нужно, чтобы они вели себя предсказуемо.

Чтобы один символ можно было подменить другим, их размеры должны совпадать. Например, если иконки одного размера, их легко заменять в дизайне.

Но важно учитывать и обратную сторону – разные по смыслу символы должны быть разного размера, чтобы в выпадалке для оверрайда выпадало только то, что нужно.

Я на это попалась и сделала символы shape, state и button одинакового размера, и ужаснулась, когда на меня вывалился огромный список оверрайдов. Пришлось переделывать.

Любой файл Sketch, если в нем есть символы, можно использовать, как библиотеку. Чтобы подключить наш новый файл к проекту идем в Preferences – Library и жмем Add library.

После этого, в меню Insert появляется пункт с названием нашего файла, откуда можно добавлять в проект символы.

Если внести изменения в файл библиотеки, Sketch сообщит об этом фиолетовым уведомлением в правом верхнем углу и предложит обновить символы. Только имейте ввиду, что он делает это с задержкой секунд в 10-15.

Определенные в файле-библиотеке стили текста и объектов не подсасываются в документ, который эту библиотеку использует. Можно расчитывать только на символы.

Поэтому на основе стилей текста я создала текстовые символы. Сразу учла, что они могут быть многострочными и настроила параметры масштабирования – прикрепила текст с левой, верхней и правой границе символа.

Чтобы прослыть хорошим дизайнером, надо заботиться о программистах :) А именно – делать так, чтобы они могли скачать из Zeplin'a (или чем они у вас пользуются) все ресурсы с человеческими названиями.

Например, в символе иконки надо по смыслу назвать маскирующий векторный слой и сделать его экспортируемым.

Тогда разработчик сможет скачать из Zeplinа ассеты сразу с правильным неймингом, не будет тратить время на переименовывание и ворчание.

Если в символе есть картинка, которую вы переопределяете, Zeplin ее может не подтянуть. Причем на рабочей области он покажет правильные картинки, а в панели ассетов дать для скачивания только дефолтную.

Лечится это так – добавляем слайс поверх символа и переименовываем его так, как хотим, чтобы назывался выгружаемый файл с картинкой. Вуаля!

А теперь все это применяем к существующему проекту. Имхо лучше не ждать, пока система будет готова полностью, а заменять символы по мере готовности и сразу проверять, как макеты выгружаются в Zeplin или другой сервис, который вы используете.

Что-нибудь обязательно вылезет в процессе – неподходящий нейминг, неправильные размеры или ограничения при выгрузке, и это будет проще исправить сразу, чем переделывать готовую систему.

Пока на этом все, если всплывут какие-то еще особенности – расскажу о них отдельно. Буду рада, если материал оказался вам полезен.