В предыдущих статьях я показал вам, как создавать в Sketch основы вашей системы дизайна, включая создание базовых элементов, таких как цвет и типографику, а потом базовых символов, таких как иконки и текст, которые затем могут быть задействованы в бесчисленное множество других символов, когда вы продвигаетесь вперед. В этой части я хочу показать вам, как я создал финальные базовые символы моей системы дизайна, и я дам вам некоторое представление о создании кнопок состояний и ввода. Они обеспечивают большой процент последующих символов, которые вы создаете внутри дизайн-системы, поэтому полезно, как можно раньше добавить их в систему. Обратите внимание: как я уже упоминал в предыдущей статье, я не буду показывать вам, как создавать сотни символов. Я просто расскажу вам о некоторых ключевых элементах. Давайте приступим ...
Состояния кнопок
Для состояний кнопки я нарисовал прямоугольник (R) примерно 190x50px (это просто размеры, которые я выбрал, вы можете выбирать свои). А затем дал ему цвет заливки #E9E9E9 (вы также можете просто скопировать шестнадцатеричное значение светло-серого, созданного в первой части. Все зависит от вас). Затем я создал новый общий стиль и обозначил его состояние кнопки / отключено (Button State/Disabled). Я переименовал Layer на Base, а затем преобразовал его в символ с надписью State / Button / Disabled. Затем я повторил аналогичный процесс для состояний кнопки Hover и Normal (создание новой формы, нового общего стиля, а затем нового символа), но выбрал белый цвет заливки для состояний Hover и Normal. Состояние Hover – белый цвет с непрозрачностью 25% и Normal – белым с 0% непрозрачности. Теперь у меня были состояния кнопки, и я мог приступить к созданию компонентов кнопки, которые мы рассмотрим в заключительной части серии.
Совет: При создании переопределений символов, если вы хотите, чтобы определенный набор символов отображался в списке «Переопределение» (т.е. Disabled, Hover, Normal), они должны быть одинакового размера. Разница в один пиксель, и они просто не будут отображаться в раскрывающемся списке «Переопределение». Не круто. Так что будьте внимательны к пикселям!
Форма кнопки (Заливка)
Для первого символа формы кнопки (заливка) я нарисовал прямоугольник (R) 120x40px, а затем переименовал Layer в Base. Затем я соединил символ цвета и символ состояния, которые я создал ранее. Я выбрал основной цвет и символы нормального состояния (Color/Primary и State/Button/Normal). Изменил размер обоих элементов на размер базового слоя, а затем выровнял их. Наконец, я создал маску на базовом слое, сократил имена слоев (т.е. цвета и состояния), а затем преобразовал все выбранные слои, в символ с меткой Shape / Fill / Radius – 0px. Затем я выполнил ту же процедуру для формы кнопки (заливка) с радиусом 4px и радиусом 100px, соответствующим образом отрегулировав слой формы. У меня теперь была форма символа, которую я мог бы просто переопределить через Инспектор, как своим состоянием, так и цветом.
Форма кнопки (граница)
Теперь символы формы кнопки (граница) заняли немного больше времени (не так просто, как установить общий стиль границы) и потребовали немного подстройки. Позвольте мне показать вам метод, который (в итоге) подошел мне… Во-первых, я создал прямоугольник (R), такого же размера, что и символы формы кнопки (заливка); 120x40px. Затем я продублировал этот слой (CMD + D) и выровнял его поверх другого. При выборе верхнего слоя я уменьшил его размер до 118x38px, а затем переместил его на 1px вниз и 1px влево, пока у меня не получилось что-то вроде этого... Затем я выбрал оба слоя формы и использовал вычитание (Subtract), а затем переименовал слой Combined Shape в Base. Затем я вставил Color / Primary и символы State / Button / Normal соответствующим образом изменив их размеры, поместил их поверх слоев формы, а затем создал маску из слоя Base. Наконец, я выбрал все слои и символы и преобразовал в новый символ с меткой Shape / Border / Radius – 0px. Затем я выполнил ту же процедуру для формы кнопки (граница) с радиусом 4px и радиусом 100px, соответствующим образом отрегулировав слой формы.
Состояния форм ввода
С состояниями форм ввода я следовал несколько иной процедуре, чем с символами формы кнопки (заливка и граница), хотя они оба придерживались довольно сходной структуры. Я считаю, что стили формы ввода должны следовать более структурированному пути и вы не должны слишком сильно отходить от базы при работе с цветами для ввода. При создании состояний входа придерживайтесь определенных цветов (основной, по умолчанию, ошибка, успех), тогда, как кнопки позволяют себе немного больше свободы с цветами. Вот почему я создал символы для формы кнопки и состояния ввода несколько иначе. Позвольте мне показать вам, что я имею в виду... Начиная с состояний ввода по умолчанию, я создал прямоугольник (R) 180x50px и применил ранее созданный общий стиль границы / светло-серый цвет. Затем я преобразовал его в символ State / Input / Default / Radius – 0px. Затем, следуя аналогичным шагам, я создал символы с тем же общим стилем, но с радиусом 4px и 100px. Затем, взял другие общие стили границы, которые я создал ранее (т. е. основной, серый, ошибка, успех), создал символы ввода для следующих состояний ...
State/Input/Active/Radius (0, 4pxи100px)
State/Input/Disabled/Radius(0, 4pxи 100px) Я использовал серый цвет заливки с непрозрачностью40% ,азатемсоздалмаскусослоемграницы
State/Input/Error/Radius (0, 4pxи100px)
State/Input/Success/Radius (0, 4pxи100px)
В 4-й и заключительной части этой мини-серии я покажу вам, как скомпоновать различные символы (иконки, текстовые символы, формы состояний и ввода) для создания некоторых полнофункциональных компонентов. Да, да!
Топ коментарі (0)