5 апреля 2018

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

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

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

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

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

Я тоже так подумала и пошла разобраться, что же такое дизайн-система, и как ее сделать.
Дискляймер #1: по ходу исследований возникла серьезная путаница. Дизайн-системой в литературе (в т.ч. западной) называют все подряд, от набора интерфейсных блоков в Sketch до фреймворка.

Так что я была в полной уверенности, что делаю дизайн-систему, хотя по факту у меня получился бодрый и грамотный UI-кит (спасибо, коллеги подсказали), который прекрасно решает все мои задачи. Дальше так и буду его называть.

UI-кит в Sketch
Дискляймер #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
Любой файл Sketch, если в нем есть символы, можно использовать, как библиотеку. Чтобы подключить наш новый файл к проекту идем в Preferences – Library и жмем Add library.
Подключаем файл как библиотеку в Sketch
После этого, в меню Insert появляется пункт с названием нашего файла, откуда можно добавлять в проект символы.

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

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

Например, в символе иконки надо по смыслу назвать маскирующий векторный слой и сделать его экспортируемым.
Адекватно называем иконки и не забываем сделать их экспортируемыми
Тогда разработчик сможет скачать из Zeplinа ассеты сразу с правильным неймингом, не будет тратить время на переименовывание и ворчание.
Облегчаем жизнь программистам
Если в символе есть картинка, которую вы переопределяете, Zeplin ее может не подтянуть. Причем на рабочей области он покажет правильные картинки, а в панели ассетов дать для скачивания только дефолтную.
Zeplin не всегда понимает оверрайды, особенно, если внутри символов картинки
Лечится это так – добавляем слайс поверх символа и переименовываем его так, как хотим, чтобы назывался выгружаемый файл с картинкой. Вуаля!
Slices для борьбы с оверрайдами в Zeplin
Что еще нужно сделать
А теперь все это применяем к существующему проекту. Имхо лучше не ждать, пока система будет готова полностью, а заменять символы по мере готовности и сразу проверять, как макеты выгружаются в Zeplin или другой сервис, который вы используете.

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

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