fbpx
Как символы и общие стили ускоряют процесс UI-дизайна в Sketch

Как символы и общие стили ускоряют процесс UI-дизайна в Sketch

В этом уроке на примере дизайна мобильной корзины покупок попрактикуетесь использовать две очень важные возможности Sketch – символы (Symbols) и общие стили (Shared styles).

 

символы и общие стили - финальный продукт

 

Символы Sketch

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

Чтобы создать символ из выделенных объектов, нажмите Create Symbol (Создать символ):

 

create

 

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

 

header

 

Вы увидите фон, статусную строку, метку заголовка и иконки. Все эти элементы показаны здесь в подпапках символа header-bar:

 

layerrs

 

Полоса загрузки не будет включена в символ, так как ее состояние изменяется на каждом скрине.

 

progress-bar

 

Также нужно активировать опцию Exclude Text Value from Symbols (исключить текстовое значение из символов) для каждого текстового слоя внутри вашего символа. Этим способом вы можете редактировать текст для каждого из дублированных символов индивидуально.

 

exludetextvalue

 

Общие стили в Sketch

Функция Shared styles также проста в использовании, как и символы. Полезно менять внешний вид разных элементов, в разных символах и объектах, в один клик. Давайте еще раз посмотрим на шапку и строку загрузки. Я изменил фон строки загрузки, но теперь она не очень хорошо смотрится вместе с фоном шапки.

 

sharedstyle

 

Чтобы избежать необходимости вносить изменения в каждую полосу загрузки вручную, вы можете задать для них всех общий стиль. Тут мы применяем стиль header-bg, который я заранее подготовил, нажав на Create New Shared Style (Создать новый общий стиль), когда был выделен фон шапки:

sharedstyle2

 

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

 

sharedstyle3

 

Заключение

С этими двумя инструментами в своем арсенале ваш следующий проект по дизайну интерфейса в Sketch займет гораздо меньше времени!

Жду ваши вопросы и комментарии.

 

Перевод статьи webdesign.tutsplus.com автора Arnaud Schlupp.

1 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Интервью с Томом Крча, Adobe XD
Подробнее

Интервью с Томом Крча, Adobe XD

Несколько недель назад Adobe презентовал первый публичный превью продукта, который сейчас называют Adobe XD, их главная новинка для UX/UI-дизайна и прототипирования. На этом этапе мне показалось очень уместным взять интервью у Тома Крча, ключевого представителя команды создателей Adobe XD, который стоял у самых истоков его развития, еще до того, как проект начал называться Project Comet.
40 фактов о психологии цвета
Подробнее

40 фактов о психологии цвета

Психология цвета, в 90% случаев становясь главным аргументом, подталкивающим к покупке. Цвета, будучи одним из центральных маркетинговых инструментов, способны развивать положительное или отрицательное отношение к брендам

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share