UXPUB

UXPUB - спільнота з 3,596 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Часть 3. Как создать дизайн-систему в Sketch
Редакція
Редакція

Опубліковано • Оновлено

Часть 3. Как создать дизайн-систему в Sketch

Создание символов формы и состояний

В предыдущих статьях я показал вам, как создавать в Sketch основы вашей системы дизайна, включая создание базовых элементов, таких как цвет и типографику, а потом базовых символов, таких как иконки и текст, которые затем могут быть задействованы в бесчисленное множество других символов, когда вы продвигаетесь вперед. В этой части я хочу показать вам, как я создал финальные базовые символы моей системы дизайна, и я дам вам некоторое представление о создании кнопок состояний и ввода. Они обеспечивают большой процент последующих символов, которые вы создаете внутри дизайн-системы, поэтому полезно, как можно раньше добавить их в систему. Обратите внимание: как я уже упоминал в предыдущей статье, я не буду показывать вам, как создавать сотни символов. Я просто расскажу вам о некоторых ключевых элементах. Давайте приступим ...

Состояния кнопок

Состояния кнопок sketch -1 Для состояний кнопки я нарисовал прямоугольник (R) примерно 190x50px (это просто размеры, которые я выбрал, вы можете выбирать свои). А затем дал ему цвет заливки #E9E9E9 (вы также можете просто скопировать шестнадцатеричное значение светло-серого, созданного в первой части. Все зависит от вас). Состояния кнопок sketch -2 Затем я создал новый общий стиль и обозначил его состояние кнопки / отключено (Button State/Disabled). Состояния кнопок sketch -3 Я переименовал Layer на Base, а затем преобразовал его в символ с надписью State / Button / Disabled. Состояния кнопок sketch -4 Затем я повторил аналогичный процесс для состояний кнопки Hover и Normal (создание новой формы, нового общего стиля, а затем нового символа), но выбрал белый цвет заливки для состояний Hover и Normal. Состояние Hover – белый цвет с непрозрачностью 25% и Normal – белым с 0% непрозрачности. Состояния кнопок sketch -5 Состояния кнопок sketch -6 Теперь у меня были состояния кнопки, и я мог приступить к созданию компонентов кнопки, которые мы рассмотрим в заключительной части серии.

Совет: При создании переопределений символов, если вы хотите, чтобы определенный набор символов отображался в списке «Переопределение» (т.е. Disabled, Hover, Normal), они должны быть одинакового размера. Разница в один пиксель, и они просто не будут отображаться в раскрывающемся списке «Переопределение». Не круто. Так что будьте внимательны к пикселям!

Форма кнопки (Заливка)

Форма кнопки (Заливка) - 1 Для первого символа формы кнопки (заливка) я нарисовал прямоугольник (R) 120x40px, а затем переименовал Layer в Base. Затем я соединил символ цвета и символ состояния, которые я создал ранее. Я выбрал основной цвет и символы нормального состояния (Color/Primary и State/Button/Normal). Изменил размер обоих элементов на размер базового слоя, а затем выровнял их. Наконец, я создал маску на базовом слое, сократил имена слоев (т.е. цвета и состояния), а затем преобразовал все выбранные слои, в символ с меткой Shape / Fill / Radius – 0px. Форма кнопки (Заливка) - 7 Затем я выполнил ту же процедуру для формы кнопки (заливка) с радиусом 4px и радиусом 100px, соответствующим образом отрегулировав слой формы. Форма кнопки (Заливка) - 8 У меня теперь была форма символа, которую я мог бы просто переопределить через Инспектор, как своим состоянием, так и цветом. Форма кнопки (Заливка) - 9

Форма кнопки (граница)

Форма кнопки (граница) - 1 Теперь символы формы кнопки (граница) заняли немного больше времени (не так просто, как установить общий стиль границы) и потребовали немного подстройки. Позвольте мне показать вам метод, который (в итоге) подошел мне… Во-первых, я создал прямоугольник (R), такого же размера, что и символы формы кнопки (заливка); 120x40px. Затем я продублировал этот слой (CMD + D) и выровнял его поверх другого. При выборе верхнего слоя я уменьшил его размер до 118x38px, а затем переместил его на 1px вниз и 1px влево, пока у меня не получилось что-то вроде этого... Форма кнопки (граница) - 2 Затем я выбрал оба слоя формы и использовал вычитание (Subtract), а затем переименовал слой Combined Shape в Base. Затем я вставил Color / Primary и символы State / Button / Normal соответствующим образом изменив их размеры, поместил их поверх слоев формы, а затем создал маску из слоя Base. Наконец, я выбрал все слои и символы и преобразовал в новый символ с меткой Shape / Border / Radius – 0px. Форма кнопки (граница) - 3 Затем я выполнил ту же процедуру для формы кнопки (граница) с радиусом 4px и радиусом 100px, соответствующим образом отрегулировав слой формы.

Состояния форм ввода

Состояния форм ввода sketch - 1 С состояниями форм ввода я следовал несколько иной процедуре, чем с символами формы кнопки (заливка и граница), хотя они оба придерживались довольно сходной структуры. Я считаю, что стили формы ввода должны следовать более структурированному пути и вы не должны слишком сильно отходить от базы при работе с цветами для ввода. При создании состояний входа придерживайтесь определенных цветов (основной, по умолчанию, ошибка, успех), тогда, как кнопки позволяют себе немного больше свободы с цветами. Вот почему я создал символы для формы кнопки и состояния ввода несколько иначе. Позвольте мне показать вам, что я имею в виду... Начиная с состояний ввода по умолчанию, я создал прямоугольник (R) 180x50px и применил ранее созданный общий стиль границы / светло-серый цвет. Состояния форм ввода sketch - 2 Затем я преобразовал его в символ State / Input / Default / Radius – 0px. Состояния форм ввода sketch - 3 Затем, следуя аналогичным шагам, я создал символы с тем же общим стилем, но с радиусом 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)

Состояния форм ввода sketch - 4

В 4-й и заключительной части этой мини-серии я покажу вам, как скомпоновать различные символы (иконки, текстовые символы, формы состояний и ввода) для создания некоторых полнофункциональных компонентов. Да, да!

http://ux.pub/kak-sozdat-dizajn-sistemu-v-sketch-chast-1/ http://ux.pub/kak-sozdat-dizajn-sistemu-v-sketch-chast-2/ http://ux.pub/kak-sozdat-dizajn-sistemu-v-sketch-chast-4/ Не хотите создавать дизайн-систему сами? Вы можете приобрести копию Cabana прямо здесь. Спасибо за прочтение статьи. Автор статьи: Марк – дизайнер, автор, отец и любитель фильмов (хороших) серии Звездные войны (кроме Эпизода 8: «Последние Джедаи»).


Перевод статьи Marc Andrew

Обговорення (0)