Пора в отпуск
6000 миль
за оформление карты
Подробнее
(function(w, d, promoUrl, loc) { var modal, box, closeModalBtn, isModalAnimation, body, html, scrollBarWidth, promoButton; var teaser = d.querySelector('.tinkoff-all-airlines'); if (!teaser) return false; initModal(); preloadImages(['https://leonardo.osnova.io/2755fcfd-f5aa-3496-f0b8-2066ac91e9fa/', 'https://leonardo.osnova.io/0006b8c0-6e01-4b3f-6765-45d1606a2c48/', 'https://leonardo.osnova.io/da12942b-f4f3-2560-40b3-a1c930f4b330/']).then(function() { setTimeout(function() { analyticsEvents(); teaser.classList.add('is-init'); teaser.addEventListener('click', openModal); onDestroy(); }, 100); }); function onDestroy() { var moduleAjaxify = window.Air && window.Air.get('module.ajaxify'); if (moduleAjaxify && moduleAjaxify.on) { moduleAjaxify.on('Before page changed', function() { window.removeEventListener('scroll', scrollHandler); hideModal(); if (teaser) { teaser.removeEventListener('click', openModal); } if (box) { box.removeEventListener('click', stopPropagation); } if (closeModalBtn) { closeModalBtn.removeEventListener('click', closeModalStop); } if (promoButton) { promoButton.removeEventListener('click', clickPromo); } if (modal) { modal.removeEventListener('click', closeModal); modal.remove(); } }); } }; function initModal() { body = d.querySelector('body'); html = d.documentElement; modal = d.querySelector('.tinkoff-all-airlines-promo'); box = d.querySelector('[data-tinkoff-all-airlines-box]'); closeModalBtn = d.querySelector('[data-tinkoff-all-airlines-close]'); isModalAnimation = false; scrollBarWidth = getScrollbarWidth(); box.addEventListener('click', stopPropagation); modal.addEventListener('click', closeModal); closeModalBtn.addEventListener('click', closeModalStop); promoButton = d.querySelector('.tinkoff-all-airlines-promo__button'); if (promoButton) { promoButton.setAttribute('href', promoUrl); promoButton.addEventListener('click', clickPromo); } body.appendChild(modal); }; function clickPromo() { sendEvent('Promo button'); }; function stopPropagation(e) { e.stopPropagation(); }; function closeModalStop(e) { e.preventDefault(); e.stopPropagation(); closeModal(); }; function openModal() { if (isModalAnimation) return false; isModalAnimation = true; sendEvent('Popup', 'Open'); body.style.overflow = 'hidden'; html.style.marginRight = scrollBarWidth + 'px'; modal.classList.remove('is-hidden'); setTimeout(function() { modal.classList.add('is-show'); setTimeout(function() { isModalAnimation = false; }, 300); }, 0); }; function closeModal() { if (isModalAnimation) return false; isModalAnimation = true; hideModal(); sendEvent('Popup', 'Close'); }; function hideModal() { modal.classList.remove('is-show'); setTimeout(function() { modal.classList.add('is-hidden'); body.style.overflow = 'auto'; html.style.marginRight = '0px'; isModalAnimation = false; }, 300); }; function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; function preloadImages(urls) { return Promise.all(urls.map(function(url) { return new Promise(function(resolve) { var image = new Image(); image.onload = resolve; image.src = url; }); })); }; function sendEvent(label, state) { state = state ? state : 'Click'; var value = 'Tinkoff All Airlines 650 (' + loc + ') — ' + label + ' — ' + state; console.log(value); if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function getScrollbarWidth() { var outer = d.createElement('div'); outer.style.visibility = 'hidden'; outer.style.overflow = 'scroll'; outer.style.msOverflowStyle = 'scrollbar'; d.body.appendChild(outer); var inner = d.createElement('div'); outer.appendChild(inner); var scrollbarWidth = (outer.offsetWidth - inner.offsetWidth); outer.parentNode.removeChild(outer); return scrollbarWidth; }; function analyticsEvents() { sendEvent('Teaser', 'init'); window.addEventListener('scroll', scrollHandler); scrollHandler(); }; function scrollHandler() { if (isScrolledIntoView(teaser)) { sendEvent('Teaser', 'Show'); window.removeEventListener('scroll', scrollHandler); } }; function isScrolledIntoView(el) { var rect = el.getBoundingClientRect(); var elemTop = rect.top; var elemBottom = rect.bottom; var isVisible = (elemTop >= 0) && (elemBottom <= w.innerHeight); return isVisible; }; }(window, document, 'https://www.tinkoff.ru/cards/credit-cards/all-airlines/promo/form/black-friday/?utm_source=vc0920_cc&utm_medium=ntv.fix&utm_campaign=allairlines.vcbf', 'entry-head'));
Офтоп
ADN Agency
12 585

Что такое дизайн-системы и где они применяются

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

В закладки

Что такое дизайн-система

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

Корни

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

Пользователь то и дело находил что-то новое, удивлялся: «вау, как они хитро замаскировали меню!». Владельцы заводов показывали сайты друг другу за кружкой пива, восторженно тыкая пальцем на крутящийся и сверкающий flash-логотип. Сайты предваряли специальные странички, на которых пользователю рассказывали, как всем этим пользоваться. Такого понятия, как юзабили, в принципе не существовало — его и не могло быть при том уровне интернет-грамотности.

Со временем произошли три логичные вещи:

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

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

Первой осмысленной попыткой масштабной веб-унификации можно назвать Material Design от Google. Над идеей начали работать в 2011 году, а в 2014 представили готовую дизайн-систему.

Зачем нужна дизайн-система

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

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

Сегодня

Явление вызывает интерес у дизайн-сообщества: появляются сайты-агрегаторы с лучшими примерами дизайн-систем. Самые известные из зарубежных — styleguides.io и designerlynx.co.

Самый популярный агрегатор в России, Design Systems Club, появился в конце прошлого года. Инициатива принадлежит Андрею Сундиеву и Юрию Ветрову из Mail.Ru Group. Они собрали на сайте статьи, презентации и выступления, посвященные дизайн-системам, а также живые библиотеки компонентов.

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

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

Альфа-Банк

Новая дизайн-система Альфа-Банка на библиотеке React появилась в октябре 2017 года.

Дизайн-система в Альфа-Банке — не прихоть дизайнеров и не потакание модным тенденциям. Мы создали и развиваем инструмент разработки банковских продуктов, который преследует определённые цели.

В принципах расписана методология, единство UX во всех продуктах, а также UI — для iOS и Android. И обозначена приоритетность мобильного интерфейса.

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

Принципы веб-разработки для Альфа-Банка.

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

Стиль: цвета.

На сайте можно посмотреть примеры использования компонентов с кодом, а полная версия для фронтенд-разработчиков находится в репозиториях GitHub.

Примеры и код поля формы.

Сценарии основных действий: ввод паролей, верстка сумм, названия и номера счетов, номера телефонов.

Паттерны ввода паролей для разных устройств.

Инструкция есть для разработчиков и дизайнеров. Причем для последних — весьма лаконичная.

В качестве основного рабочего инструмента дизайнеры Альфа-Банка используют разработчиков :-)

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

Дизайнеру важно находить общий язык с разработчиками.

Инструкция для разработчиков и дизайнеров Альфа-Банка.

Альфа-Банк показал хороший пример брендированной дизайн-системы, в ней отражена философия компании и ее фирменный стиль. Но существует отдельный вид дизайн-систем, который заслуживает особого внимания.

Дизайн-системы государственных сайтов

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

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

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

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

Дизайн государственных систем России

История наших дизайн-систем началась в 2016 году. Тогда AIC, Лаборатория Артема Геллера и СТМ с одной стороны и Минкомсвязь с Институтом Развития Интернета с другой решили унифицировать государственные сайты.

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

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

Следить за развитием дизайна государственных систем можно в блоге команды и на Фейсбуке.

Итого: что входит в дизайн-систему

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

Проектная разработка

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

А именно — ощутимо экономят время.

Так с одной стороны внутренние руководства упрощают жизнь дизайнеров, а с другой оставляют свободу для маневра, которой порой не хватает при использовании дизайн-систем. Это когда очень хочется красивостей и вау. А еще можно говорить клиентам, что «у нас есть свой стандарт качества».

Мы попробовали пойти немного дальше — упрощаем процессы сборки гайдов для каждого из проектов, используя наборы компонентов, описанных на уровне дизайна и верстки. Вот, например, один из компонентов для работы с формами. Он позволяет формировать стили, аналогичные уже описанным в коде. Тем самым ускоряется процесс сборки и повышается качество выпускаемых продуктов. Число рутинных операций меньше, стандартизации больше.

Алексей Шепелин
арт-директор ADN Digital Studio

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

Из негативных последствий — если воспринимать дизайн-систему как «не обсуждается, это приказ!», есть вероятность скатиться в перерисовывание одних и тех же шаблонов. Поэтому относиться к продукту всё равно нужно творчески, идея первичнее любого метода. Ну и дизайн-система — это всё-таки не стальной негнущийся рельс, а живой организм, который постоянно усложняется и дополняется.

{ "author_name": "ADN Agency", "author_type": "self", "tags": [], "comments": 1, "likes": 4, "favorites": 40, "is_advertisement": false, "subsite_label": "flood", "id": 36947, "is_wide": false, "is_ugc": true, "date": "Tue, 24 Apr 2018 13:37:49 +0300", "is_special": false }
Финансы
Венчурные инвестиции в ближайшем будущем
Замедление экономики вполне закономерно заставляет финансистов быть осторожнее, особенно в части рисковых…
Объявление на vc.ru
0
1 комментарий
Популярные
По порядку

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

0

Хорошая статья. Спасибо за информацию :)

Ответить

Комментарии

null