Юрий Ветров — Токены в дизайн-системах

Один из самых простых способов реализации дизайн-системы в коде — токены. Это набор базовых переменных визуального языка (цвета, шрифты, отступы и т.п.), который передаётся в любой компонентный фреймворк. Это позволяет проще управлять визуальным стилем продуктов и дешевле внедрять на практике.

Transcript

1. ТОКЕНЫ В ДИЗАЙН-СИСТЕМАХ Слои абстракции для дела ЮРИЙ ВЕТРОВ RAIFFEISEN BANK, EX-MAIL.RU GROUP
2. НИКОГДА НЕ ВВЯЗЫВАЙСЯ В ТЕРМИНОЛОГИЧЕСКИЕ СПОРЫ Говорил мой зав.кафедрой. Но, блин!
3. ТЕРМИН РАЗМЫЛИ К ЧЕРТЯМ Называют всё что угодно – от библиотеки стандартных элементов в Sketch и странички с нарезанными скриншотами до зрелой платформы, действительно работающей на базе распространяемых компонентов со вшитым дизайном. Главный источник правды это сам продукт и нужно озаботиться тем, чтобы как задумано работал именно он.
4. 1950Е-1960Е Система визуальной идентификации бренда из прошлого.
5. 2000Е UI Kit + гайдлайн в PDF или вики-системе.
6. 2010Е Компоненты в коде (хотя кто-то делал и раньше). Работать надо с основным материалом среды – кодом.
7. СТАРАЯ И НОВАЯ ШКОЛА Похожи на вид, кардинально различаются в использовании.
8. ДИЗАЙН ЧАСТО «ПЕРЕВИРАЕТСЯ» НА ПУТИ ИЗ МАКЕТОВ В РЕАЛИЗАЦИЮ Цепочка «гайдлайн → дизайн → вёрстка → реализация» – тупик, вечная ручная работа. Чтобы избавиться от кучи геморроя по внедрению, улучшению и поддержке продуктов, её нужно перевести в «гайдлайн = дизайн = вёрстка → реализация».
9. КАК ЭТО РАБОТАЕТ визуальный язык → UI Kit → макеты (ТЗ) ↓ ↓ компоненты → вёрстка → реализация (сборка из готовых кусков)
10. ПРЕДЫСТОРИЯ Начали в 2012 году
11. ПРОДУКТЫ СИЛЬНО ОТЛИЧАЮТСЯ
12. ЕСТЬ ДРУГИЕ БРЕНДЫ
13. НАЧАЛИ В 2012: МОБИЛЬНЫЙ ВЕБ
14. ДИЗАЙН-СИСТЕМА = UI KIT? НЕТ
15. 2012-2013: МОБИЛЬНЫЙ ВЕБ
16. 2014-2015: МЕДИАПРОЕКТЫ
17. 2014: ХАКАТОН И ИДЕОЛОГИЯ
18. 2015: ПЛАТФОРМЕННОЕ МЫШЛЕНИЕ Текущее видение целостной дизайн- системы мы описали в 2015 году и с тех пор постепенно реализуем его.
19. 2017: ТОКЕНЫ
20. 1 ВИЗУАЛЬНЫЙ ЯЗЫК Правила, по которым создаются продукты: design.mail.ru/paradigm/
21. 2 ЕДИНЫЕ КОМПОНЕНТЫ В КОДЕ Единственный источник правды. Дизайн «вшит» в них, сервисы получают и обновляют их из единого репозитория.
22. 3 ШАБЛОНЫ ДЛЯ ДИЗАЙНЕРОВ Быстро показать идею, высокоуровневые скетчи. В идеальной ситуации макеты не верстают, а собирают из единых компонентов.
23. ОСНОВНЫЕ ПРИНЦИПЫ
24. 1. МОДУЛЬНОСТЬ Позволяет сравнительно легко управлять большим количеством продуктов. Интерфейс строится по принципу слоёв абстракции: «переменные → базовые элементы интерфейса → компоненты для реализации конкретных задач → экраны продукта».
25. 2. ПАРАМЕТРИЧНОСТЬ Изменение конкретных параметров, из которых строятся элементы интерфейса, позволяет добиться масштабируемости на продукты разных типов. Для этого мы используем переменные и миксины.
26. 3. МИНИМУМ КОСТЫЛЕЙ Собирай элементы интерфейса из уже существующих переменных, а компоненты – из уже существующих элементов. Любые принимаемые нами решения должны вписываться в систему, жить по её правилам и потенциально быть готовыми к применению на любом из наших продуктов.
27. 4. 4DP Так называемый «супер-пиксель». Краеугольный камень системы, на нём строится вся система размерностей. Мы мыслим исключительно цифрами, кратными 4-м.
28. 5. АДАПТАЦИЯ Под мобильные (малые экраны) и сенсорные экраны (управление пальцем, нет мыши). Любые наши решения априори должны быть touch-friendly – это касается размеров элементов, действий по наведению и т.п. Исключения бывают для внутренних инструментов вроде нишевых интранет-сайтов. * *
29. ПРОБЛЕМА №1 Не всегда удаётся единый компонентный фреймворк
30. ТОКЕНЫ – ДЁШЕВО И СЕРДИТО Когда единый компонентный фреймворк не получается. Слой абстракции под компонентными фреймворками. PARADIGM PRODUCTIVITY МЕДИА B2B ПРОМО ПОЧТА НОВОСТИ MCS САЙТЫ ОБЛАКО КИНО BIZ ПИСЬМА КАЛЕНДАРЬ АВТО
31. КАК РАБОТАЮТ ТОКЕНЫ Config-файл, визуальный язык в переменных. Генерируется файл для СSS-препроцессоров, его подключает фреймворк.
32. ВЕБ И МОБИЛЬНЫЕ ВМЕСТЕ Из одного config-файла делаются версии для любых платформ.
33. ОСНОВА ВИЗУАЛЬНОГО ЯЗЫКА Играя с набором параметров, мы можем быстро получить любой элемент. Например, простую кнопку:
34. ТИПОГРАФИКА Все размеры и начертания мы храним в переменных. От проекта к проекту они могут меняться, но основные группы одни и те же.
35. СЕТКА И ОТСТУПЫ Каждый элемент дизайн-системы строится по модулям в 4dp (density independent pixels)
36. ГРАНИЦА И ФОН На помощь приходят чуть более сложные функции (mixin), и прозрачности.
37. HOVER @mixin stateHover ($colorBgSecondary) { background: mix($colorTrueBlack, $colorBgSecondary, 4%); }
38. ACTIVE @mixin stateActive ($colorBgSecondary) { background: mix($colorTrueBlack, $colorBgSecondary, 8%); }
39. ТЕНЬ Элемент приподнят над базовым уровнем (кнопки, карточки) – часть лейаута или дополнительная информация к основному контенту.
40. КНОПКА В СБОРЕ
41. АКЦЕНТНАЯ КНОПКА За счет изменения параметра отвечающего за фон, мы можем сделать из обычной кнопки – акцентную.
42. АКЦЕНТНАЯ КНОПКА
43. 1. СЕМАНТИКА Все переменные названы относительно задачи («цвет второстепенного фона»), а не просто визуального представления («светло-серый»). Это позволяет проще переопределять стиль – меняя значение, не нужно рефакторить вызов самих переменных. Правда, для расстояний и отступов это не сработает.
44. СЕМАНТИКА $colorText: '#333333’, $colorTextSecondary: '#999999’, $colorBg: '#ffffff’, $colorBgSecondary: '#f0f0f0’, $sizeBase: 4, $sizeGrid: 20, $paddingControlButton: 20, $marginIcon: 12, $fontH1: { fontSize: 24, lineHeight: 32, fontWeight: 700, marginBottom: 16, }, $fontParagraph: { fontSize: 15, lineHeight: 20, fontWeight: 400, marginBottom: 24, },
45. 2. МИНИМУМ ПЕРЕМЕННЫХ (~200) В них проще разобраться и легче выбрать правильную, меньше избыточности. В некоторых фреймворках их тысячи, но мы пытались найти баланс между гибкостью и предсказуемостью.
46. ЦВЕТА $colorText: #333333, $colorTextSecondary: #999999, $colorTextContrast: #FFFFFF, $colorBg: #FFFFFF, $colorBgSecondary: #F0F0F0, $colorBgContrast: #333333, $colorIcon: #333333, $colorIconSecondary: #C7C7C7, $colorIconContrast: #FFFFFF, $colorAccent: #005FF9, $colorAccentSecondary: #FF9E00, $colorLink: #005BD1, $colorLinkContrast: #FFFFFF, $colorLinkVisited: #528FDF, $colorSuccess: #28C75D, $colorError: #FF1100, $colorNotify: #FF9E00, $colorBgWarning: #FFFCE0, $colorRating: #FFD400, $colorTrueBlack: #000000, $colorTrueWhite: #FFFFFF, $colorState: #000000, $colorSocialVk: #4D75A2, $colorSocialOk: #EE8208,
47. ШРИФТЫ $fontBody: { fontSize: 15, lineHeight: 20, fontWeight: 400, marginBottom: 0, }, $fontH1: {}, $fontH2: {}, $fontH3: {}, $fontH4: {}, $fontParagraph: {}, $fontList: {}, $fontFootnote: {}, $fontLead: {}, $fontQuote: {}, $fontTableHeader: {}, $fontControl: {}, $fontControlLabel: {}, $fontTab: {}, $fontBadge: {},
48. ОТСТУПЫ /** РАЗМЕРЫ ЭЛЕМЕНТОВ */ $sizeControlHeight: 40, $sizeControlButtonWidthMin: 130, $sizeControlLabelWidth: 184, $sizeControlCheckHeight: 16, $sizePopupSmall: 420, /** ОТСТУПЫ ВНУТРИ ЭЛЕМЕНТОВ */ $paddingControlHorizontal: 12, $paddingControlVertical: 0, $paddingControlButton: 20, $paddingMenu: 8, $paddingTab: 0, /** ОТСТУПЫ МЕЖДУ ЭЛЕМЕНТАМИ */ $marginControl: 12, $marginFormLabelHorizontal: 16, $marginFormLabelVertical: 4, $marginIcon: 12, $marginChoice: 8, /** ИКОНКИ */ $sizeIconUI: 16, $sizeIconHeader: 20, /** ИЛЛЮСТРАЦИИ */ $sizeIllustrationS: 48,
49. ДЕКОР /** ГРАНИЦЫ ЭЛЕМЕНТОВ */ $sizeBorderWidth: 1, $sizeBorderWidthTab: 2, $sizeBorderWidthBar: 4, $sizeBorderWidthAccent: 8, $sizeBorderRadius: 2, /** ТОНИРОВАНИЕ ЭЛЕМЕНТОВ */ $toneValueX1: 0.04; $toneValueX2: 0.08; $toneValueBase: 0.48; $toneValueViewer: 0.88; $toneValueToolbar: 0.24; /** ТЕНИ */ $depth0:, $depth1, $depth2, $depth3: 0 16px 48px 0 rgba(0, 0, 0, 0.48), $depthInset,
50. 3. НАСЛЕДОВАНИЕ Чтобы уменьшить количество переменных и повысить управляемость, многие значения наследуются или считаются от единой шкалы: отступы, цвета, типографика, прозрачности. Шкала – это пространство возможных решений. Конкретная переменная – решение для конкретной ситуации.
51. ШКАЛА const sizeBase = 4; const x0 = 0; const x025 = sizeBase / 4; const x05 = sizeBase / 2; const x1 = sizeBase; const x2 = sizeBase * 2; const x3 = sizeBase * 3; const x4 = sizeBase * 4; const x5 = sizeBase * 5; const x6 = sizeBase * 6; const x8 = sizeBase * 8; const x10 = sizeBase * 10; const x12 = sizeBase * 12; const x15 = sizeBase * 15; const x20 = sizeBase * 20; const sizeGrid = 20;
52. РЕАЛЬНЫЕ СИТУАЦИИ get sizeControlHeight() { return this.x8; }, get sizeProgress() { return this.x1; }, get sizeProgressScroll() { return this.sizeProgress + this.sizeBase * 2; }, get sizeDotBullet() { return this.x1; }, get paddingControlHorizontal() { return this.x3; }, get paddingControlVertical() { return this.x0; }, get paddingMenu() { return this.x2; }, get paddingTag() { return this.x2; },
53. 4. АДАПТИВНОСТЬ Подход похож на media queries – есть несколько разрешений, для адаптивных переменных указываются разные значения для них. На старте делали простой вариант – отдельные файлы с токенами для каждого разрешения.
54. BREAKPOINTS thresholds: { touch: 320, tablet: 768, desktopS: 1024, desktopM: 1280, default: 1366, desktopL: 1680, }, fontH1: { default: { ...touch.fontSize6, fontWeight: 700, marginBottom: x4, }, tablet: { ...fontSize6, fontWeight: 700, marginBottom: x4, }, desktopS: { ...fontSize6, fontWeight: 700, marginBottom: x3, }, desktopM: { ...fontSize7, fontWeight: 700, marginBottom: x4, }, },
55. 5. ТЕМАТИЗАЦИЯ Для разных линеек продуктов свои темы оформления. Такая тема наследует базовую, но меняет значения некоторых переменных. Это пригодится при применении тёмной темы – видно, что для некоторых компаний это повод начать использовать токены.
56. НАСЛЕДОВАНИЕ В ТЕМАХ /** BASE */ $sizeBorderRadius: 2, $sizeControlHeight: 32, $fontH1: { default: { ...fontSize6, fontWeight: 700, marginBottom: x4, }, /** MEDIA */ $sizeBorderRadius: 4, $sizeControlHeight: 40, $fontH1: { default: { ...fontSize7, fontWeight: 700, marginBottom: x4, }, /** PROMO */ $sizeBorderRadius: 8, $sizeControlHeight: 48, $fontH1: { default: { ...fontSize8, fontWeight: 700, marginBottom: x5, },
57. ТЕМЫ ОФОРМЛЕНИЯ Управляя значениями переменных мы легко можем формировать элементы и для других проектов.
58. ПЕРЕКЛЮЧЕНИЕ ТЕМ В живом гайдлайне можно пощёлкать несколько из них.
59. ТЁМНАЯ ТЕМА ОФОРМЛЕНИЯ Для многих компаний стала толчком ко внедрению токенов.
60. ПРОБЛЕМА №2 Передаём только внешний вид
61. ПЕРЕДАЁМ ТОЛЬКО ВНЕШНИЙ ВИД Цельный компонент включает в себя как минимум внешний вид, логику поведения, структуру данных. Токены помогают только с первым – остальное всё равно нужно воссоздавать в альтернативных фреймворках.
62. 1 ТЕМЫ В КОДЕ
63. 2 ПИКТОГРАММЫ В КОДЕ
64. 3 СЕТКИ Кек :(
65. 4 ПОВЕДЕНИЕ
66. ВНЕДРЕНИЕ
67. 1. МОДЕЛЬНЫЕ ПРОДУКТЫ Выделили систему из их дизайна. Масштабируется уже проверенный на практике дизайн, оптимизированный с помощью аналитики и пользовательских исследований. Накануне и сразу после релиза проводится множество экспериментов и тестов, после которых дизайн много раз корректируется.
68. 1 МОДЕЛЬНЫЕ ПРОДУКТЫ
69. 2. ОПИСАНИЕ ВИЗУАЛЬНОГО ЯЗЫКА Черновик в Confluence. Помог зафиксировать решения перед тем, как они попадут в код и живой гайдлайн. Важно не задерживаться на этом этапе, это только черновик – он моментально устаревает и не решает задачу унификации на технологическом уровне.
70. 2 ВИЗУАЛЬНЫЙ ЯЗЫК
71. 3. UI KIT Простой способ зафиксировать решения и дёшево поэкспериментировать с ними.
72. 3 UI KIT
73. 4. ВЫДЕЛЕНИЕ ПЕРЕМЕННЫХ Постепенно идём по всем элементам интерфейса в UI Kit и описываем переменные, которые нужны для их вёрстки. Разбиваем переменные на категории (цвета, типографика, размеры и отступы, состояния, сетка, тени и глубина, границы и скругления, анимация). Предлагаем систему именования, холиварим. Рефакторим для оптимизации.
74. 5 ВЫДЕЛЕНИЕ ПЕРЕМЕННЫХ
75. 5. ТОКЕНЫ И ГЕНЕРАТОР Популярные форматы описания токенов – JSON, YAML, TypeScript (наш выбор). Определиться с форматами экспорта для генератора (CSS-in- JS, PostCSS, SASS, LESS и т.п.).
76. SALESFORCE THEO Есть готовые фреймворки и библиотеки, не нужно писать свой генератор.
77. 6. ПОДКЛЮЧАЕМ ТОКЕНЫ К КОМПОНЕНТНОМУ ФРЕЙМВОРКУ NPM-пакет с версионированием.
78. КОМПОНЕНТНЫЕ ФРЕЙМВОРКИ Они есть, но мы перестали биться за единый. Один из них считаем модельным, мотивируем использовать.
79. ТОКЕНЫ – ДЁШЕВО И СЕРДИТО Переход на них понятнее и быстрее. Его можно добиться постепенным рефакторингом.
80. ВЕРСИОНИРОВАНИЕ Дизайнеры сами могут выкатывать версии – сборщик проверяет, нет ли проблем.
81. ROADMAP План и текущий статус внедрения дизайн-системы в продуктах.
82. ПЛАН РАЗВИТИЯ
83. КОМАНДА Федеративная модель – дизайнеры и разработчики из разных продуктов выделяют 15-20% своего времени на поддержку дизайн-системы. Есть ключевой дизайнер и разработчик, которые ведут план работ.
84. ПРИМЕРЫ НА РЫНКЕ
85. МАЛО КТО ДЕЛАЕТ Странно, но примеров на рынке с токенами не так много. Хотя это самый простой и быстрый способ стартовать.
86. AWESOME DESIGN TOKENS Каталог дизайн-систем с использованием токенов.
87. СТАНДАРТ W3C? Рабочая группа пробует описать его и включить в инструменты дизайна.
88. СВЯЗКА С ИНСТРУМЕНТАМИ Компоненты в коде и символы/компоненты в Sketch/Figma не связаны, поддерживаются параллельно. Но попытки есть.
89. РАБОТАЕТ В ОБРАТНУЮ СТОРОНУ Команда GitHub экспортирует иконки из Figma в основной репозиторий продукта.
90. DESIGN SYSTEMS CLUB Каталог отечественных компонентных дизайн-систем, реализованных на технологическом уровне. http://designsystemsclub.ru/
91. ВЫВОДЫ
92. 1. ВЫШЕ СКОРОСТЬ СБОРКИ МАКЕТОВ И ПРОДУКТОВ Можно уделить больше внимания самому продукту, а не просто рисованию экранов – собирать новый интерфейс стало быстрее. Это удобно для пользователя – группа схожих продуктов работает одинаково понятно и привычно. А также хорошо для бренда – вся линейка сервисов выглядит целостной.
93. 2. ЛУЧШЕ КАЧЕСТВО ПРОДУКТОВ Контролировать большой пул проектов проще, когда они устроены одинаково. Вместо сотни отдельных проектов вы следите за парой гайдлайнов.
94. 3. КУМУЛЯТИВНЫЙ ЭФФЕКТ ОТ УДАЧНЫХ ПРОДУКТОВЫХ РЕШЕНИЙ Например, подняв глубину просмотра на одном из сервисов, легко применить эти улучшения на остальные.
95. 4. ПРОЩЕ ВЗАИМОДЕЙСТВИЕ С ДРУГИМИ КОМАНДАМИ Аутсорсеры делают более качественные проекты, другие продукты не изобретают велосипед.
96. Подключить токены к существующему коду быстрее, чем поменять фреймворк. Можно взять существующий фреймворк типа Theo, их хватает. Дизайнеры сами могут управлять файлом с токенами, что ускоряет цепочку обновлений. Инструменты дизайна не используют токены, но когда начнут – не придётся поддерживать компоненты в коде и дизайнерские шаблоны параллельно.
97. DESIGN.MAIL.RU/PARADIGM/
98. CREDITS: ДИЗАЙН ЕВГЕНИЙ БЕЛЯЕВ МАРИЯ БОБРОВА ЮРИЙ ВЕТРОВ АРТЁМ ГЛАДКОВ ГЕВОРГ ГЛЕЧЯН ПОЛИНА ГРИГОРЬЕВА ЕВГЕНИЙ ДОЛГОВ КОНСТАНТИН ЗУБАНОВ АЛЕКСЕЙ КАНДАУРОВ АЛЕКСАНДР КИРОВ ДМИТРИЙ ОСАДЧУК АЛЕКСЕЙ СЕРГЕЕВ ПАВЕЛ СКРИПКИН СВЕТЛАНА СОЛОВЬЁВА АНДРЕЙ СУНДИЕВ ЕВГЕНИЙ ФЕРУЛЁВ ВЯЧЕСЛАВ ЯШКОВ
99. CREDITS: РАЗРАБОТКА ИЛЬЯ БУРЛАК ДМИТРИЙ ДОРОФЕЕВ АНТОН ЕПРЕВ ВИКТОРИЯ КАМОЛДИНОВА КОНСТАНТИН ЛЕБЕДЕВ АРТЁМ МЕЗИН АЛЕКСЕЙ СУДИЛОВСКИЙ МАРИНА ТИТОВА СТАНИСЛАВ ТУГОВИКОВ АРТУР УДАЛОВ ЕГОР УТРОБИН
100. CREDITS: РАЗРАБОТКА АЛЕКСАНДР БЕКБУЛАТОВ ДМИТРИЙ БЕЛЯЕВ ВИТАЛИЙ ВАСИН ПАВЕЛ ВДОВЦЕВ КОСТЯ ВОРОЖЕЙКИН ЕВГЕНИЙ ИВАНОВ АНДРЕЙ КУСИМОВ СТАНИСЛАВ МИХАЛЬСКИЙ СЕРГЕЙ НОЖКИН АНТОН ПОЛЕЩУК БОРИС РЕБРОВ ПАВЕЛ РЫБИН АРСТАН ТОРЕГОЖИН МАКСИМ ТРУСОВ ПАВЕЛ ЩЕРБИНИН
101. P.S. Многие спрашивают, с какого размера компании имеет смысл начинать дизайн-систему. Токены помогают подстелить соломку даже если вы совсем маленькие, а потом, когда подрастёте – нарастить мышцы трушным компонентным фреймворком.
102. СПАСИБО! ЮРИЙ ВЕТРОВ jvetrau.com t.me/pdigest