Вложенные символы эскиза: как сделать их нестандартными?

изображение сделано ведущим дизайнером интерфейсов Mind Studios Арсентием

Дизайн - это не профессия - это образ мышления, жизни и дыхания. Раньше это было еще сложнее, чем сейчас - «до эры Sketch». Но несколько лет назад был выпущен Sketch, который заставил всех дизайнеров взять курс на «вектор» в своей работе. Что такого хорошего в Sketch? Что это за символы Sketch? А также то, как создавать собственные символы в Sketch - эти вопросы будут освещены в этой статье на основе опыта, который мы в Mind Studios получили.

Это кража.

Sketch был основан 7 лет назад, еще в далеком 2010 году, голландской компанией Bohemian Coding, но мы очень благодарны тем, кто создал этот остроумный инструмент. Первая слава и признание не заставили себя долго ждать (хотя в нем еще не было функций создания символов) - в 2012 году Sketch получил свою первую награду - Apple Design Award. С того времени и в течение 6 лет он продолжал развиваться с каждым предстоящим обновлением и плагином, а самая последняя версия 46.2 имеет множество улучшений (например, совместное использование файлов в Sketch Cloud, выравнивание текста и разделы справки с возможностью поиска, показывающие актуальные статьи из онлайн-документации приложения Sketch, а также обновленную библиотеку символов Sketch).

[Источник: Sketchapp]

На сегодняшний день количество довольных пользователей SketchApp превысило 500 тысяч. Почему дизайнеры придерживаются приложения Sketch? Сделав свой собственный опрос и прочитав дюжину обзоров Sketch-приложений, я извлек несколько фактов, подтверждаемых утверждением о лучших практиках:

• Sketch - это 100% векторный инструмент, который значительно упрощает адаптацию вашего дизайна к разным размерам экрана retina / non-retina.

• Дизайн, созданный в Sketch, является так называемым «дружественным к интерфейсу», что означает, что все свойства / объекты / символы в дизайне доступны в CSS.

• В Sketch есть удобный способ экспорта ресурсов с функцией «Экспортировать все» - в отличие от утомительного экспорта в Photoshop.

• Sketch предлагает широкий выбор модных плагинов, которые помогут вам интегрировать данные в ваш дизайн.

• Скетч позволяет создавать цветные символы и впоследствии редактировать их.

Наиболее близкие к Sketch слова, с которыми я имел удовольствие столкнуться, были «гибкий», «простой» и «приложение 3-в-1», которые доказывают, что огромная часть рынка уже занята этим приложением для iOS. .
Помимо классных плагинов, в нем также есть множество удобных инструментов и элементов, одним из которых являются символы - создание новых настраиваемых и возможность редактирования символов.

Символизм в эскизе.

Любой элемент навигации (значок, текстовое поле, виджеты и т. Д.) Является либо элементом управления, либо элементом взаимодействия. Более того, в Sketch каждый элемент можно настраивать гибко. И каждый элемент имеет символы переопределения эскиза, которые могут быть двух типов: родительский и дочерний; если все вложенные символы объединены, родительский символ наследует все особенности дочерних символов. Благодаря этой функции теперь вы можете создавать вложенные символы и пользовательские символы приложения Sketch (как в Material Design), компоненты интерфейса, например значки, символы кнопок.

Кнопка была бы отличным примером пользовательских символов Sketch, поскольку у нее есть ряд параметров, которые можно изменить одновременно - от стиля текста до состояния кнопки. Создавая вложенные символы, мы можем играть с кнопками, с их формами, цветами, состояниями (включено / выключено), в зависимости от потребностей, которые мы готовы выполнить. Создадим отдельный Sketch-файл из квадрата.

Если копнуть глубже, каждый символ представляет собой комбинацию еще нескольких вложенных символов, и, учитывая степень вложенных символов, вы можете увидеть параметры элемента. Например, текстовый символ может быть активным или выключенным, другого цвета и т. Д. С другими параметрами. Все это входит в общий термин структуры кнопок.

О дизайнерах-убийцах читайте здесь.

Камень за камнем.

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

Контейнер в кнопке - это символ с тремя параметрами: состоянием, формой и цветом. Это набор, полный состояний, форм и цветов кнопок; заливка кнопки (состояние и цвет), так что, вообще говоря, она формирует кнопку. Контейнер также невозможен без слоя маски, который обрамляет все эти элементы.

Маска формы кнопки - это векторная форма, и когда мы применяем маску для нашего элемента, создается другой контейнер с той же формой, цветом и состоянием, что и у первого.

Парадокс вложенности.

«Вложенные символы эскиза можно назвать спорным инструментом; они одновременно упрощают и усложняют жизнь вашего дизайнера ».

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

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

Однако когда вы научитесь создавать, структурировать и обновлять символ в Sketch, это облегчает вам жизнь. Создав гибкий элемент, вы можете быстро создавать и обновлять символы для каждого предстоящего проекта, избавляясь от необходимости вызывать страницу переопределений. Как говорится, время - золото, а использование настраиваемых вложенных символов определенно занимает меньше времени, чем создание каждого элемента с нуля!

Настраиваемые символы могут использоваться как для Интернета, так и для мобильных устройств, в зависимости от требований и вашего желания. Если продукт должен работать только на одной ОС, тогда ваша Sketch-символика может быть сосредоточена на некоторых конкретных типах; и поскольку мы концентрируемся на конкретном руководстве по стилю, то, следовательно, мы экономим много драгоценного времени.

Последнее слово

Вот оно, руководство по созданию вложенных символов Sketch. Несмотря на то, что это всего лишь приложение для MacOS, Sketch уже завоевал любовь многих людей по всему миру. Почему? Потому что он маневренный, простой и точный; он не нацелен на охват всей базы дизайнеров по всему миру, он нацелен на специалистов по UI / UX. Более того, с бонусами, которые он может предложить (вложенные символы, переопределения, формы и формы и т. Д.), Удобство работы с приложением значительно снижается. Однако уже готовится новое обновление (последнее было выпущено более месяца назад), чтобы сделать жизнь наших дизайнеров лучше и приятнее!

Авторы Влад Тызун и Элина Бессарабова.