Дизайн Саша Море
4 536

Sketch-библиотека для работы

Дизайнер и проектировщик в «СКБ Контур» Александр Храмцов дал подробную инструкцию по работе с открытой библиотекой компании.

В закладки

Большинство готовых и доступных в интернете UI-китов слишком просты и не подходят для серьёзной работы. Мы создали свою библиотеку контролов, удобную и полезную для 40 дизайнеров «Контура», работающих над интерфейсами 30 продуктов.

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

Дизайн-система

Для начала пара слов о целях, которые преследует наша библиотека:

  • Распространять дизайн-систему. У нас есть общий визуальный стиль, и мы хотим, чтобы он проникал во все продукты «Контура».
  • Тратить меньше времени дизайнера на рисование и больше на проектирование пользовательских сценариев.
  • Синхронизировать инструменты дизайнера с библиотекой компонентов для разработчиков. Чтобы разговаривать на одном языке и способствовать расширению дизайн-системы «Контура».

Кстати, библиотека разработчиков «React UI» выложена на Github, а принципы работы каждого контрола описаны в «Контур.Гайдах».

Что мы сделали

Во-первых, мы завели общую папку «Ресурсы» и сложили туда все исходники: контролы, шаблоны, иконки, шрифты, цвета.

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

В-третьих, мы сделали подключаемую в Sketch библиотеку, содержащую все необходимые контролы и их состояния для проектирования сервисов «Контура». Вот об этом мы расскажем подробнее.

Библиотека символов

Дизайнер интерфейсов в «Контуре» помимо внешнего вида продумывает сценарии и рисует детализированные прототипы. Для этого ему нужны не только все доступные контролы, но и все их состояния, с которыми может столкнуться пользователь.

Основная проблема общих библиотек — как только дизайнеру в ней чего-то не хватает, он начинает рисовать свою библиотеку.

В наших «Контур.Гайдах» сейчас более 30 разновидностей контролов, и почти каждый из них имеет от трёх до семи различных состояний. Количество комбинаций огромно, и чтобы не усложнять библиотеку, мы используем вложенность.

Вложенность

Первый уровень вложенности — «Контрол». Здесь мы добиваемся простого и обозримого списка: кнопка, поле ввода, чекбокс, тултип и так далее — все базовые контролы.

Второй уровень — «Состояние». Например, обычное поле ввода кроме дефолтного имеет состояния: в фокусе, заблокированное, с критичной валидацией или предупреждением. Выпадающие списки могут содержать список пунктов, с иконками, с группами. И так далее.

Третий уровень — «Контент». Например, все кнопки выглядят одинаково, но могут содержать внутри текст, текст с иконкой, текст с иконкой и стрелкой справа.

Как это выглядит в библиотеке

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

Так реализуется вложенность: Контрол → Состояние → Контент

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

Как это выглядит в работе

1. Дизайнер выбирает контрол из библиотеки. Это первый уровень вложенности и мы сделали его лаконичным.

2. На панели оверрайдов выбирает состояние контрола. Это второй уровень вложенности.

3. Выбирает содержимое контрола. Это третий уровень вложенности:

4. Контрол готов, остаётся ввести тексты в зависимости от контента: иконку, текст, вотермарк.

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

Размеры и отступы

Все символы в библиотеке настроены, чтобы правильно масштабироваться при изменении размеров. Здесь есть несколько важных нюансов:

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

Типс энд трикс

Если вы давно работаете в Sketch, некоторые из этих трюков вам уже знакомы:

  • Символы в библиотеке можно групировать с помощью слеша / в названии. Если назвать символ Поле ввода / Малое, то в выпадающем меню библиотеки символ «Малое» окажется в группе «Поле ввода».
  • В библиотеку попадают все символы в файле. А значит все состояния, все контенты и все запчасти, используемые в виде символов, попадут в общий список. Мы прячем все эти лишние «запчасти» в последний пункт библиотеки, добавляя ⌘ / в начало имени.
  • Чтобы на панели оверрайдов предлагались только определенные символы, задайте им уникальный размер. Например, у нас для полей ввода установлена ширина 210px, а для выпадающих списков — 220px. Используйте один уникальный размер для всех взаимозаменяемых символов.
  • Есть лайфхак, чтобы выравнивать по центру не только текст, но и текст с иконкой.
  • Последовательность параметров на панели оверрайдов определяется порядком слоев. Если вы не хотите, чтобы слой редактировался, просто заблокируйте его замочком.

Как попробовать нашу библиотеку

Для удобства мы загрузили файл библиотеки «Контур UI» на Sketch.cloud. По ссылке вы можете скачать файл или сразу подключить как облачную библиотеку в свой Sketch. В этом случае вы будете получать обновления, когда мы что-то добавим или исправим в библиотеке.

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

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

Кастомизация

Если вы готовы попробовать нашу библиотеку со своим дизайном, вам придётся скачать её. Откройте файл на странице «Стили». Здесь на одном артборде собраны все состояния контролов, даже те, которых нет в библиотеке: например, состояние при наведении. Мы сделали их, чтобы передать разработчикам все необходимые цвета и стили наших контролов.

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

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

#дизайн

{ "author_name": "Саша Море", "author_type": "editor", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 15, "likes": 40, "favorites": 43, "is_advertisement": false, "subsite_label": "design", "id": 38877, "is_wide": true, "is_ugc": false, "date": "Tue, 29 May 2018 09:15:33 +0300" }
{ "id": 38877, "author_id": 81289, "diff_limit": 1000, "urls": {"diff":"\/comments\/38877\/get","add":"\/comments\/38877\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/38877"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

15 комментариев 15 комм.

Популярные

По порядку

Написать комментарий...
6

Отличный материал для вэбов, спасибо, было бы отлично выкатить подобное для Android-/iOS -пацанов

Ответить
4

Похоже на Jan Losert https://dribbble.com/shots/3828684-Nested-Symbols-Styleguides-Freebie . Но все же спасибо что заморочились + в карму.

Ответить
2

Google theme editor?
Спасибо за статью.

Ответить
2

Это сопоставимо с тем, как Тесла когда-то бесплатно расширила свои наработки по электромобилям. Очень круто.

Ответить
2

Жирный плюс в вашу Карму! Спасибо!

Ответить
1

Интересное решение с уровнями вложенности. Есть пара вопросов:

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

— На скринах, кажется, какая-то старая версия скетча. Не создает ли проблем большая вложенность на новой версии (которая после 49)?

Ответить
2

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

— Нет, все работает без проблем.

Ответить
1

Выпадашки)) хехе) Спасибо вам!
А есть материал про верстку/бэк? Про адаптацию вот этого вот всего
Кстати, пользуюсь Эльбой и Диадок. Оч круто!)

Ответить
0

Выпадашка – это еще нормально. Один из моих клиентов называл это "выкидышем"

Ответить
1

Подписан на ваш канал-ченджлог в ТГ, читал Контур.Гайды. Спасибо, что поделились, классная работа.

Ответить
0

Запилите кто-нибудь под reactjs библиотеку, а там и react-native

Ответить
0

Спасибо! Проглядел

Ответить

Комментарий удален

–1

о кнопки из 2010ого подвезли

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления