Как создать руководство по стилю эскиза, библиотеку и набор пользовательского интерфейса

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

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

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

Создание руководства по стилю эскиза

«Руководство по стилю — это всеобъемлющий «живой документ», в котором отслеживаются все повторяющиеся элементы проекта, от правил брендинга до количества скосов для кнопок призыва к действию», — говорится в UXPin. Руководство по стилю может включать в себя что угодно, от простых визуальных элементов до словаря и утвержденных изображений. В этом руководстве рассматриваются организация, цвета, значки, шрифты, стили текста и активы.

Шаг первый: организация

1. Создайте основную папку для хранения файлов эскизов, плагинов и других необходимых ресурсов, таких как шрифты и иконография. (Плагины будут обсуждаться в конце руководства.)
2. Запустите новый файл Sketch и назовите его «Библиотека имени клиента ». Например, если ваш клиент — Toptal, ваш файл должен называться «Toptal Library».

Шаг второй: цвета

Если цвета уже выбраны, следующим шагом будет преобразование цветов в символы.

1. Для этого сделайте квадраты одинакового размера и соответственно измените их цвета. Нажмите «Создать символ» и сохраните эти элементы, используя систему маркировки color/ @color-name . Color/@pink , color/@background-gray или color/@FFFFF являются примерами правильных меток. Соглашения об именах важны для организации руководства по стилю, поэтому формат для всего должен быть установлен и соблюдаться с самого начала.
2. После завершения добавьте их на страницу руководства по стилю.
3. Сохраните образец цвета в разделе документов вашей цветовой палитры.

Полезные сочетания клавиш: R — прямоугольник, T — текст, alt — измерение расстояния.

Шаг третий: иконки

Превращение значков в динамические символы позволяет легко изменить их цвет на любой из цветов, сохраненных на втором шаге выше. Это означает, что после того, как значок помещен в дизайн, цвет можно изменить с помощью простого раскрывающегося меню, называемого «переопределением», с помощью «Инспектора» справа от холста.

1. Сохраните значок как символ (если возможно, придерживайтесь .svg для типа актива).
2. Перейдите на страницу символов, найдите значок и замаскируйте его цветом по умолчанию из ранее сохраненных цветов. Для этого наложите цветной символ поверх значка и нажмите «Маска» на панели инструментов (или щелкните правой кнопкой мыши и выберите «Маска» во всплывающем меню).
3. После того, как значок замаскирован, удалите заливку, сняв флажок в разделе «Заливки» в Инспекторе.
4. Организуйте значки на странице руководства по стилю. В этом же разделе полезно указать цвет для активных и неактивных значков, а также любые другие важные характеристики цвета.

Шаг четвертый: стили текста

После того, как шрифты выбраны, пришло время указать стили текста: H1, H2, H3, H4, H5, основной текст, ссылки, заголовки, метки и т. д. Хорошим справочником по веб-типографике является этот пост в блоге Typecast.

1. Выберите размер, толщину, символ и межстрочный интервал для необходимого количества стилей.
2. Напишите слово («Введите что-нибудь» автоматически появляется, когда вы нажимаете T, текстовый инструмент) и отформатируйте его, чтобы отразить выбранные детали стиля.
3. Нажмите «Создать новый стиль текста».
4. Организуйте стили текста на странице руководства по стилю.

Шаг пятый: активы

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

Вот некоторые рекомендуемые активы для работы:

Кнопки

1. Сделайте эти динамические символы, как и значки, замаскировав кнопку цветом по умолчанию и удалив заливку.
2. Чтобы текст всегда был в центре, растяните текстовое поле по ширине так, чтобы оно совпадало с шириной кнопки, и отцентрируйте текст.
3. Чтобы обеспечить согласованность, обязательно используйте сохраненные стили текста.
4. Сохраните эти элементы как символы, используя систему именования кнопка/ название кнопки .
5. Используйте функцию переопределения, чтобы изменить метки и цвета.

Панели поиска

1. Примените ограничения изменения размера к полю поиска, а также к значкам и тексту, используемому в самом поле.
2. Не забывайте о применении стилей текста и цветов, ранее сохраненных в цветовой палитре документа.
3. Сохраните этот элемент как символ, используя поиск в качестве заголовка, или, если у вас разные типы поиска, придерживайтесь системы маркировки, такой как поиск/стандартный и поиск/без значка .

Радиокнопки и флажки

1. Можно иметь символ внутри символа, и хороший способ проверить это — создать интеллектуальные активы переключателей и флажков.
2. Во-первых, сделайте сам актив кнопки. Сохраните этот элемент как символ, используя метки checkbox/selected и checkbox/deselected в качестве примера маркировки.
3. Теперь создайте ввод. Добавьте текст-заполнитель рядом с символом флажка, а затем преобразуйте весь актив в символ. Поскольку теперь это ввод, рекомендуется сохранить актив как таковой, поэтому хорошей меткой будет input/checkbox/selected и input/checkbox/deselected .

Шаг шестой: используйте руководство по стилю!

Выполнение всей этой работы по созданию руководства по стилю полезно только в том случае, если это действительно делает проект более плавным. После создания всех ресурсов пришло время применить библиотеку к разрабатываемому документу. В Sketch перейдите в «Настройки -> Добавить библиотеку…» и добавьте документ библиотеки.

После добавления библиотеки в файл дизайна проекта вы можете получить доступ к библиотеке и ее символам в разделе символов. Вы заметите библиотеку дизайна пользовательского интерфейса iOS, которая поставляется со Sketch в качестве опции библиотеки, а также библиотеку, которая была недавно импортирована.

Если вы хотите обновить символ, дважды щелкните сам символ, и должен появиться документ вашей библиотеки. После внесения изменений вернитесь к дизайн-документу и нажмите кнопку «Обновить» в правом верхнем углу.

Бонус: импорт/экспорт стилей текста

Стили текста не сохраняются в библиотеке, но плагин Shared Text Styles для Sketch решает эту проблему. После загрузки плагина перейдите к документу библиотеки, а затем в меню: «Плагины -> Общие стили текста -> Экспорт…». Сохраните этот файл в той же папке, что и документ библиотеки. Затем в своем дизайн-документе снова перейдите в меню: «Плагины -> Общие стили текста -> Импорт стилей текста…» и импортируйте только что сохраненный файл. Появятся стили текста.

Бонус: импорт/экспорт цветовых палитр

Подобно стилям текста, цвета документа не сохраняются в библиотеке Sketch, но плагин Sketch Palettes решает эту проблему. Как и выше, экспортируйте палитру с помощью «Плагины -> Палитра эскиза -> Цвета документа -> Сохранить палитру» и импортируйте ее с помощью «Плагины -> Палитра эскиза -> Цвета документа -> Загрузить палитру». Не забудьте сохранить его в той же папке, что и другие документы вашей библиотеки.

Бонус: шрифты

Craft от InVision — это набор плагинов, которые выводят программное обеспечение Sketch на новый уровень. Craft позволяет заменять изображения стоковыми фотографиями, создавать прототипы и синхронизировать их с InVision, создавать библиотеки и многое другое. Если Craft загружен, нажмите «cmd-shift-c» в документе, и будет создана таблица стилей. Шрифты будут перечислены здесь.

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

Дальнейшее чтение в блоге Toptal Design:

• Зачем стартапам нужен Styleguide
• Вещи, которые вы могли не знать о типографике в Sketch
• Окончательный список из 50 лучших плагинов для эскизов
• Adobe XD против Sketch — какой UX-инструмент вам подходит?
• Как создать эффективную структуру дизайна (включает бесплатную структуру пользовательского интерфейса Sketch)