Как символы и общие стили ускоряют процесс 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 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Сравнение пяти инструментов для прототипирования приложений с поддержкой sketch
Подробнее

Сравнение пяти инструментов для прототипирования приложений с поддержкой sketch

Я заново создал онбординг пользователей IF от IFTTT в пяти высокоуровневых инструментах для прототипирования приложений, чтобы понять разницу между ними. Это были Proto.io,Pixate, Framer, Origami от Facebook и Form от RelativeWave. Часть 2
Подробнее

Быстрое прототипирование с использованием символов и шаблонов Sketch

Мы выросли, теперь разработка в Sketch для iOS стала удобнее. Приложение существенно изменилось, теперь у нас есть символы, новый экспорт и даже некоторые функции редактирования растровой графики. Наше сообщество существенно расширилось — очень много компаний и продуктов поддерживают Sketch.

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

Total
0
Share