Ui sketch kit: Sketch App Sources — New free design resources

Делаем руководство по стилю, библиотеку и UI-кит в Sketch

Дизайн

05 марта 2019

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

2 770 просмотров

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

Руководство по стилю — это исчерпывающий живой документ, который отслеживает все повторяющиеся элементы проекта от правил брендинга до степени скругления кнопок.

Источник

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

1. Создайте главную папку для файлов, плагинов и других необходимых ресурсов, таких как шрифты и иконки (плагины обсудим в конце).
2. Создайте новый файл Sketch и назовите его именем клиента — например, «Schüco Library».

Если цвета уже есть, нужно преобразовать их в символы.

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

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

Сохраните образец в разделе документов вашей цветовой палитры

Превратив иконки в динамические символы, вы сможете легко менять их цвет на любой из палитры (смотрите предыдущий шаг). Это значит, что вы можете изменить цвет иконки, когда она уже находится в макете. Для этого вам понадобится выпадающее меню Overrides в инспекторе в правой панели.

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

Сохраните иконку как символ

Создайте маску из цветового символа

При необходимости измените цвет иконки с помощью выпадающего меню Overrides

После того, как вы выбрали шрифты, нужно указать стили текста: h2, h3, h4, h5, H5, тело, ссылки, подписи, метки и так далее.

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

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

Вот некоторые предлагаемые ассеты для работы.

Кнопки

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

Поля поиска

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

Радиобаттоны и чекбоксы

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

Все затраченные вами усилия окажутся не напрасными, если благодаря стайл-гайду проект будет идти более гладко. Как только вы создадите все ассеты, примените библиотеку к документам проекта. В Sketch перейдите в «Настройки → Добавить библиотеку…» и добавьте документ библиотеки.

После того, как вы добавите библиотеку в файл проекта, вы можете получить доступ к ней и ее символам в соответствующем разделе.

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

Если вы хотите обновить символ, дважды кликните по нему — появится документ библиотеки. После того, как внесете изменения, вернитесь к документу проекта и нажмите кнопку обновления в правом верхнем углу.

В правом верхнем углу Sketch появится «Доступное обновление библиотеки»

Когда обновления библиотеки будут доступны, отобразятся измененные символы. Чтобы подтвердить изменения, нажмите «Обновить символы».

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

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

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

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

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

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

2 770 просмотров

Подпишись

Мы отправляем полезные материалы, которые помогут вам в работе

что это за набор элементов пользовательского интерфейса

На чтение 7 мин Опубликовано 22 февраля, 2022

UI Kit — это набор готовых элементов для дизайна интерфейса: шрифтов, иконок, форм и других элементов сайта или приложения. Аббревиатура расшифровывается как User Interface Kit и переводится на русский как «набор для пользовательского интерфейса». 

Содержание

1. Кто и где использует UI Kit
2. Для чего нужен UI Kit
3. Чем UI Kits отличаются от гайдлайнов и дизайн-систем
4. Какие элементы входят в UI Kit
5. Где можно взять UI Kit

Кто и где использует UI Kit

Обычно UI Kit используют UX/UI-дизайнеры при разработке графических интерфейсов. Существуют наборы для сайтов и веб-приложений, десктопных программ, приложений под iOS или Android. Они учитывают особенности платформы, ее стилистику и способ использования. Крупные компании могут разрабатывать собственные наборы в рамках создания корпоративного стиля.

Во время работы дизайнер берет элементы из файла UI Kit, изменяет в соответствии с задачей и использует в макете. Наборы могут использовать команды специалистов при совместной работе над проектом.  Дизайнер может саз создать UI Kit с нуля или скачать готовый вариант.

Файлы обычно имеют форматы популярных графических редакторов: Figma, Adobe Photoshop, Sketch и пр. 

Travel UI Kit от дизайнера Татьяны Рубцовой. Источник

Для чего нужен UI Kit

• Для унификации. UI Kit позволяет создать интерфейс в едином стиле. Все компоненты выглядят одинаково.

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

UI Kit для онлайн-школы от дизайнера Тони Емельянова. Источник

• Для юзабилити. UI Kit способствует правильной логике переключения между элементами и работы с сайтом. Компоненты продуманы так, чтобы пользователь не сталкивался с нелогичным поведением интерфейса. Они интуитивно понятны и адаптированы под платформу, для которой создается дизайн.

• Для согласованности. Существует понятие дизайн-системы. Это общая экосистема проекта, в которой собраны все дизайнерские решения. UI Kit — один из ее ключевых компонентов. Он позволяет команде работать согласованно. Все регламентируется готовыми наборами.

UI Kit для лендинга курсов по художественной истории от дизайнера Александры Евграфовой. Источник

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

• Для облегчения работы в команде. UI Kits особенно важны, когда над проектом работают несколько дизайнеров, разработчиков. Любой специалист из команды сможет самостоятельно найти и выгрузить из файла требуемый  элемент. 

Чем UI Kits отличаются от гайдлайнов и дизайн-систем

• UI/UX guideline, или гайдлайн — это документ, который содержит основные концепции дизайна. В нем указаны требования к интерфейсу, размещению компонентов, правила взаимодействия и сочетания элементов, акценты, которые нужно расставить. Это подробное текстовое руководство, которое помогает решить, каким будет интерфейс, а не набор элементов, в отличие от UI Kit. Гайдлайны часто связаны с соответствующими им наборами.

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

Какие элементы входят в UI Kit

UI Kit — основа компонентного дизайна. Так называется подход, при котором дизайнер сначала создает отдельные элементы, а потом собирает из них интерфейс. 

• Цвета и шрифты. Добавление в набор основных цветов, которые используются в дизайне, помогает сделать интерфейс гармоничнее. Элементы не будут смотреться чужеродно.

Цвета в UI Kit. Источник

Шрифты добавляются по той же причине, что и цвета.

Шрифты в UI Kit. Источник

• Поля для ввода. Например, это поле для поиска или авторизации. Обычно поля — компоненты форм, но в наборе их могут размещать и отдельно. У текстовых полей может быть до семи-восьми вариантов отображения: обычный, при наведении и нажатии, в момент ввода, после ввода, при ошибке и другие.

Поля для ввода в UI Kit. Источник

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

Кнопки в UI Kit есть всегда. Это один из основных элементов. Источник

Ссылки могут отображаться не только текстом. К ним добавляются стрелки и другие графические элементы.

• Формы. Например, форма регистрации или комментирования, подписки на рассылку или обратной связи. Удобство заполнения и дизайн влияют на конверсию. 

Пример формы. Источник

• Иконки. Графические элементы необходимы для создания управляющих и информационных компонентов. Например, кликабельное изображение «Корзины» в интернет-магазинах либо яркий кружок, который говорит о новых уведомлениях.

Иконки в UI Kit. Источник

В большом UI Kit может быть отдельный набор иконок для разных целей.  

• Элементы навигации, хедеры и футеры. Содержат типовые элементы либо выглядят шаблонно. Например, футеры содержат список контактов и вспомогательный блок навигации.

Хедер и другие элементы страниц в UI Kit. Источник

Выпадающие меню, всплывающие окна, поле поиска и другие компоненты обычно шаблонные и простые. В UI Kit включают набор элементов навигации для мобильных и десктопных версий. Это верхние и боковые панели, сэндвич-панели и прочие компоненты. 

• Виджеты. Это интерактивные блоки, которые отображают часто обновляемую информацию. Например, погоду, курс валют и пр. Простые виджеты могут быть в наборах, особенно в тематических — созданных специально для определенной сферы. Например, в личном кабинете обучающего или развивающего сервиса может быть виджет с прогрессом, взятый из UI Kit для EdTech.

Виджеты в UI Kit. Источник

• Элементы для e-commerce. Это элементы каталогов, карточек товаров, фильтры, блоки с популярными или просмотренными товарами и пр.  

Элементы для e-commerce. Источник

• Другие графические элементы. Это поп-апы, инфографика, диаграммы и другие шаблонные графические компоненты.

Пример разных графических элементов. Источник

Где можно взять UI Kit

Скачать готовый

Для работы с небольшим сайтом можно скачать наборы, созданные другими дизайнерами. Большинство китов — платные. Также существуют бесплатные варианты, но их используют очень часто.

UI Kit для iOS/Android

• Figma iOS Design Kit
• iOS 14 GUI 
• Craftwork Silvercell 2 iOS UI Kit
• UI 8 Estudio Mobile App UI Kit 
• Craftwork Nord Finance App iOS UI Kit

UI Kit для Android

• Material Baseline Design Kit от Material Design для Figma 
• UI 8 Prop Finder iOS Premium App 
• Craftwork Replica Android UI Kit
• MATERIAL DESIGN KIT 
• Android Nougat Free GUI 

UI Kit для сайтов

• Landing Page Kit
• Evergreen Design System for the Web
• Material-UI for Figma 
• UI 8 Hygge — eCommerce Web UI Kit 
• UI 8 Pacific Web UI Pack дя XD и Figma 
• Craftwork Singleton Web UI Kit

UI Kit для веб-приложений

• Lo-fi Wireframe Kit для Figma
• Square Dashboard UI Kit
• Open Source Dashboards UI Kit

Также можно воспользоваться площадками Creative Market, Freebiesbug и другими.

Часто UI Kits создают большие компании. Киты адаптированы под конкретные задачи: разработку под iOS в фирменном стиле Apple, создание сайтов в определенных тематиках и так далее. Они доступны на официальных сайтах. 

Создать самостоятельно

Дизайнер может самостоятельно создать несколько десятков элементов в едином стиле, учесть их юзабилити и взаимодействие. Специалисты самостоятельно разрабатывают UI Kit, если:

• это их собственный уникальный проект;
• собираются продать UI Kit как отдельный продукт;
• работают в компаниях, имеющих корпоративный стиль.

ИСКРА —
неделя знакомства
с дизайн-профессиями

бесплатно

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

разжечь искру

Бесплатный набор пользовательского интерфейса для набросков: создание быстрых вайрфреймов

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

Узнайте, как эскизный каркас может сэкономить ваше время и воплотить в жизнь ваш UX-дизайн с помощью нового набора пользовательского интерфейса для эскизов от Justinmind каркасы высокой точности! Комплект пользовательского интерфейса Justinmind Sketching включает более 100 готовых компонентов, которые можно перетаскивать.

Получите набор Sketching UI и создайте каркас Sketching прямо сейчас!

Скачать бесплатно

Наш комплект делает определение пользовательских интерфейсов успешным с самого начала. Давайте посмотрим, как вы можете внедрить набор Sketching UI в свой процесс проектирования в сочетании с нашим бесплатным инструментом каркасного моделирования.

• Что влечет за собой создание каркаса эскиза?
• Что входит в комплект пользовательского интерфейса для эскизов Justinmind?
• Начало работы с набором пользовательского интерфейса для эскизов
• Создание каркаса эскиза с помощью набора пользовательского интерфейса для эскизов Justinmind
• Преимущества использования набора пользовательского интерфейса для эскизов Justinmind
• Создание эскизов пользовательского интерфейса для улучшения совместной работы

Что влечет за собой создание каркаса Sketching?

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

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

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

Приобретите набор каркасов Sketching, чтобы создавать потрясающие эскизы!

Скачать бесплатно

Что входит в набор пользовательского интерфейса для эскизов Justinmind?

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

Когда вы загрузите и установите набор пользовательского интерфейса для эскизов Justinmind, вам станут доступны все перечисленные ниже виджеты. На панели виджетов в Justinmind есть 8 категорий пользовательского интерфейса:

• Базовый
• Контейнеры
• Кнопки
• Макет
• Формы
• iOS
• СМИ
• Графика

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

В библиотеку виджетов входят предварительно созданные окна браузера, шаблоны для iPad и iPhone, идеально подходящие для создания Эскизы пользовательского интерфейса , которые выполняются быстро и без суеты.

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

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

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

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

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

Начало работы с комплектом пользовательского интерфейса Sketching

Приступаем к работе в цифровом формате Рисовать каркасы в Justinmind легко и быстро. Все, что вам нужно сделать, это выполнить следующие простые шаги:

1. Загрузите средство создания прототипов Justinmind
2. Откройте Justinmind и запустите новый веб-прототип или прототип мобильного устройства
3. В левой части экрана вы найдете панель виджетов.
4. Начните перетаскивать виджеты из категории Sketching!

Создание каркаса скетча с помощью набора пользовательского интерфейса для эскизов Justinmind

Теперь давайте представим, что вам поручили создать и разработать мобильное приложение для авиакомпаний. В каждой категории набора Sketching UI есть отдельные виджеты, которые вы можете использовать для заполнения своего приложения для авиакомпаний.

Например, в категории «Основные» вы найдете элементарные виджеты «Заголовок», «Изображения», «Хлебные крошки», «Кнопки» и «Прокрутка». Их можно использовать для создания набросков фреймворка для вашего мобильного приложения, а затем на более позднем этапе.

Каждый из этих элементов из комплекта пользовательского интерфейса можно перетаскивать на холст для создания простых эскизов. Компоненты рудиментарны, но все еще интерактивны, и вы по-прежнему можете в полной мере использовать другие виджеты и элементы Justinmind.

Первый набросок экрана приложения авиакомпании должен позволять пользователям выбирать пункт назначения и дату рейса.

Перетащите на холст текстовое поле, два переключателя, два раскрывающихся меню, два календаря, два переключателя и кнопку. В совокупности эти элементы составят первый экран приложения авиакомпании. Это действительно настолько просто.

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

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

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

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

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

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

Преимущества использования комплекта пользовательского интерфейса Sketching от Justinmind

Часто бывает так, что существует два типа UX-дизайнеров. Те, кто рисует, и те, кто нет. Одна из причин, по которой UX-дизайнеры предпочитают сразу же садиться за компьютер и заниматься дизайном, заключается в том, что это более эффективный способ работы. У цифровых эскизов есть и другие преимущества:

• Быстрее — выиграйте драгоценное время, делая все в одном приложении
• Очиститель — никаких грязных чернильных пятен, никаких каракулей, просто чистые наброски от начала до конца
• Более интерактивный — набор Sketching UI содержит интерактивные элементы для большей реалистичности
• Более точный — создание эскизов в Justinmind позволяет использовать точные интервалы и размеры.

Мобильное приложение или веб-сайт, созданные с помощью набора Sketching UI, убедит клиентов лучше, чем грубый набросок, сделанный карандашом.

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

Создание эскизов в Justinmind означает, что вы можете вносить большие и малые изменения, просто перемещая

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

Создание эскизов пользовательского интерфейса для лучшей совместной работы

Приглашение ключевых заинтересованных сторон и не-дизайнеров на ранние этапы процесса прототипирования и проектирования — отличный способ избежать возможных переделок и с самого начала обеспечить всем единое мнение.

При использовании комплекта каркасов Sketching стоит попросить других принять участие. Поскольку интерфейс Justinmind интуитивно понятен — все, что нужно — это быстрое перетаскивание — сотрудничество заинтересованных сторон на начальном этапе эскиза означает, что все идеи могут быть рассмотрены, а участие может стимулировать взаимодействие. И вам не нужно быть опытным дизайнером UX — вам просто нужен онлайн-каркас.

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

Заключение

С более чем 100 компонентами в наборе Sketching UI от Justinmind UX-дизайнеры и не-дизайнеры имеют возможность создавать незабываемые веб- и мобильные приложения с самого начала процесса проектирования.

Эскиз — отличный способ визуализировать и провести мозговой штурм, чтобы найти несколько решений сложных дизайнерских задач. При повторении набросков идей не требуется никаких обязательств, и каждый может это сделать. Скачайте Sketching UI kit прямо сейчас!

ПРОТОТИП · СООБЩЕНИЕ · ПОДТВЕРЖДЕНИЕ

УНИВЕРСАЛЬНЫЙ ИНСТРУМЕНТ ПРОТОТИПИРОВАНИЯ ДЛЯ ВЕБ И МОБИЛЬНЫХ ПРИЛОЖЕНИЙ

Скачать бесплатно

Джозеф Даунс

Штатный копирайтер UX, гурман и любитель классических автомобилей

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

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

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

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

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

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

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

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

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

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

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

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

Третий шаг: значки

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

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

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

После того, как шрифты выбраны, пришло время указать стили текста: h2, h3, h4, h5, H5, основной текст, ссылки, заголовки, метки и т. д. Хорошим справочником по веб-типографике является этот сообщение в блоге Typecast.

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

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

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

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

Кнопки

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

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

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

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

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

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

Выполнение всей этой работы по созданию руководства по стилю полезно только в том случае, если это действительно делает проект более плавным. После того, как все ресурсы созданы, пришло время применить библиотеку к разрабатываемому документу. В 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)

Понимание основ

• Как создать фирменный стиль?

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

• Что значит быть живым документом?

  Живой документ является итеративным и постоянно редактируется и обновляется как с формальным процессом внесения изменений, так и без него.

• Что такое руководство по стилю брендинга?

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

• Почему важно иметь руководство по стилю?

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

Местонахождение: Нью-Йорк, штат Нью-Йорк, США

Участник с 30 марта 2017 г.

Об авторе

Иветт имеет опыт работы в полиграфии, веб-дизайне, брендинге и UX-дизайне.