Первая конференция прошла ещё в 2022 году — тогда мы говорили о новом логотипе билайна, тексте как неотъемлемой части дизайна, навигации и цифровом пути. В этот раз своим опытом и драйвом поделились пятеро билайновцев и спикер из «Алисы». Мы решили, что их экспертиза будет ценна и интересна всем, кто развивается в дизайне.
Запись конференции появится на нашем YouTube-канале в ближайшее время, а пока посмотрите наш плейлист beeline döne, в котором мы собрали полезные выступления наших спикеров на тему дизайна.
Евгений Филатов, дизайн-директор B2C продуктов в билайне: «Наша конференция — живой продукт с бифидобактериями. Мы делаем её не для галочки, а по зову сердца. Большая часть спикеров — внутренние сотрудники, которые максимально заинтересованы в том, чтобы рассказать о своей работе и поделиться опытом. Для сторонних слушателей, помимо очевидных возможностей послушать опыт, есть и другой главный плюс: можно заглянуть в закулисье крупной компании и понять, как там может быть выстроена работа и какие люди работают».
Никита Чепрасов, вице-президент по развитию цифровых продаж и обcлуживания: «Дизайн на сегодняшний день — действительно очень важная отрасль. 10 лет назад дизайном увлекались технологичные компании и модные бренды, а крупные компании, без которых сейчас мы не можем представить свою жизнь, — нет. А потом огромные гиганты показали, что даже приложение банка может быть функциональным и красивым, с интересными эффектами и анимациями. Тогда большие корпорации начали обращать внимание, что должно быть не только удобно, но и красиво.
Сегодня в телеком тоже пришёл этот момент, — когда мы задумываемся не просто о том, чтобы у нас была услуга на витрине, а ещё и о том, чтобы она была сделана качественно, красиво и удобно. Нам больше недостаточно звёзд в экране; мы хотим своих персонажей — проектировать и рисовать их. Понимаем, что нам недостаточно, чтобы дизайнеры из раза в раз рисовали какие-то макеты — нам нужна дизайн-система».
Кто и о чём рассказал:
Костя Долгов, директор по развитию digital-поверхностей и обслуживанию продаж в билайне рассказал про опыт открытия Victoria's Secret, амбициозные вызовы и цели на старте, изменение модели продаж, гипотезы и их проверку, важность команды.
Влад Бродский, лид команды и дизайн-системы Nectar в билайне рассказал, как из хаоса рождается дизайн-система:«В своём выступлении я раскрываю подробности зарождения проекта дизайн-системы билайна Nectar. В 2021 году команда билайна провела большой редизайн, и если для клиента мы показали новый крутой опыт и красивую картинку, то под капотом нас ждал ряд решений, которые предстояло хорошенько переработать. Вместе с редизайном стремительно выросла и наша команда. Всё это в совокупности подталкивало нас к появлению новых процессов и наведению порядка в макетах и компонентах. В течение 2022 года мы сформировали команду, реализовали дизайн-токены, описали процессы работы с компонентами и начали измерять свою эффективность. К концу года мы вышли из стадии инициативы и получили статус полноценного проекта с финансированием, а у нашей дизайн-системы появилось своё имя — Nectar!»
Света Бренер, ведущий дизайнер дизайн-системы Nectar в билайне — о дизайн-системе внутривенно: «Рассказала о том, как и зачем появилась дизайн-система Nectar в билайне. Показала, как адаптировать культовую методологию под собственные нужды. Поделилась, на что опираться при написании документации к компонентам. Объяснила, как пользоваться большим количеством полезных функций Figma и как с помощью них ускорить и упростить работу».
Света поделилась бесплатным списком шорткатов, которых нет в гайдах Figma.
Настя Кащеева, дизайнер дизайн-системы Nectar в билайне — о доступных интерфейсах для всех (почти): «Команда дизайн-системы билайна Nectar в начале 2023 года начала путь в проработке доступности внутри компонентов. В моём докладе — о том, что такое доступность в интерфейсах и почему она важна для продукта любого масштаба, на какие гайдлайны ориентироваться и с чего начинать работу. Шаги по проработке доступности универсальны, подойдут как для небольшого веб-сайта, так и для крупного продукта. А ещё я рассказала о том, как связаны доступность и цвет, типографика, иконки, адаптивность, и немножко об ассистивных технологиях (фокусе и экранном дикторе)».
Алексей Белицкий, дизайнер продукта в «Алисе» — про анимации на умных колонках с «Алисой»: «В своей презентации я рассказал о создании анимаций для умных колонок. Анимации хороши тем, что добавляют «Алисе» индивидуальности и помогают создать вау-эффект от взаимодействия с колонкой. Если на «Станции» играет музыка, стоит таймер или «Алиса» сообщает, какая погода за окном, это сопровождается визуализацией.
В разработке анимаций участвует вся команда «Алисы». На этом этапе приветствуются любые идеи и комментарии. Когда команда запускала «Станцию Лайт», дизайнерам нужно было придумать, как при помощи трёх светодиодов сделать анимацию для голосовых ответов «Алисы», настроек «Станции» и музыки.
Перед запуском «Станции-2» задача была ещё сложнее. Нужно было понять, как несколькими лампочками показать падающий снег, дождь или тучу на верхней панели колонки. Для этого понадобилось изобрести свой дизайн-язык. В итоге на колонках есть анимации для будильника, уведомлений, подключения zigbee-устройств, музыкальных сценариев, звонков и прогноза погоды».
В рамках конференции также прошёл блиц для спикеров. Публикуем основные вопросы и ответы экспертов.
Токены — это стили?
Влад Бродский: Дизайн-токены — это различные переменные в коде и в дизайне, используя которые, можно гибко менять дизайн от продукта к продукту минимальными усилиями. Например, в проекте есть токен ключевого цвета, который красит элементы в основной цвет бренда: такой токен может использоваться в компонентах кнопок, разных переключателей и иконок. Запуская новое приложение на дизайн-системе, достаточно будет поменять значение этого токена, чтобы все элементы, использующие его, перекрасились автоматически. То же относится и к другим дизайн-токенам, например к типографике, теням, отступам между элементами, иконкам и т. д. В Figma можно использовать стили с названиями синхронными с переменными в коде.
Каким плагином для токенов вы пользуетесь?
Влад Бродский: Для этого у нас есть своё решение. В Figma мы храним токены в виде стилей и компонентов, а в Git заливаем с помощью своего плагина пул-реквестом, затем можем сами пройти review и залить в Nectar. Работа с токенами всегда идёт в связке с разработчика и дизайнерами. Нужно найти удобный формат работы. Это может быть как самописный плагин с автоматизацией, так и выгрузка json и ручная передача значений. На первом этапе мы запускали токены в формате передачи списка значений в формате json разработчикам, а они ручками заливали в файлик в Git, сейчас это автоматизировано.
Например, иконки в нашем проекте являются токенами, мы храним их в виде компонентов, они используются в макетах и могут быть модифицированы в рамках конкретного продукта. Например, в каком-то новом продукте графическое изображение иконки с именем «Профиль» может быть полностью изменено, и все компоненты, использующие её, сразу получат обновления без необходимости применять изменения в коде; достаточно будет в проекте заменить токен.
Как идет сбор статистики по используемости компонентов в Figma?
Влад Бродский: Для этого есть нативный инструмент в Figma. Он предоставляет возможность смотреть количество копий каждого компонента из библиотеки и их расположение. Также там есть графики, на которых можно следить за использованием библиотек в динамике.
Проводите ли вы модернизацию компонентов, когда в Figma выходят новые фичи?
Света Бренер: Мы против технического консерватизма, поэтому стараемся обновлять библиотеки, не отставая от Figma. Безусловно, к каждому компоненту подход индивидуальный: удалить версию кнопки с иконкой и засунуть иконку в обычную (на boolean property с дефолтным value: false) не станет проблемой. Однако для некоторых компонентов изменения могут быть критическими и вызвать конфликты в продуктах. В таких случаях мы семь раз думаем, насколько нужно это обновление, и, если действительно нужно, создаём новую версию как отдельную сущность
Как долго принимаются и согласовываются решения в вашей большой компании?
Света Бренер: Людей в нашей команде действительно много. Когда дизайн-система начала активно развиваться, и принимать решение коллективно становилось дольше и труднее. Именно поэтому внутри команды появился узкий круг ответственных лиц, которые теперь отвечают за дизайн-систему Nectar и развивают её как продукт.
А зачем в билайне несколько дизайн-систем, когда уже есть деление на базу и на продукт?
Света Бренер: Самым простым ответом было бы «так исторически сложилось». На самом же деле они отличаются, например, целевой спецификой: сдержанный B2B и дружелюбный B2C.
Влад Бродский: Дизайн-системы в билайне отличаются владельцами и некоторыми особенностями: в B2B-направлении, к примеру, больший упор делается на компоненты графиков, таблиц, а также более сдержанный стиль.
Как создаются шорткаты?
Света Бренер: В Figma уже существует огромное количество полезных шорткатов. Но их и правда можно создать (дальше инструкция для macOS): для этого нужно зайти в настройки компьютера –> клавиатуру –> сочетания клавиш приложений и указать точную формулировку команды (так, как она записана в программе). Например, я создала шорткат option + cmnd + M (Go to Main Component).
Подскажите, а что такое ветка в Figma?
Света Бренер: Это в буквальном смысле ответвление от основного файла. Основной файл и такая его копия могут развиваться параллельно, но независимо (как альтернативные реальности). Это позволяет выбирать и сравнивать: слить обновлённую ветку в основной файл или вовсе их заархивировать, оставив нетронутым первый.
Что такое булевые компоненты?
Света Бренер: Это одно из лучших изобретений Figma. Boolean property позволяет показывать и скрывать слои в компоненте. Как true/false, только его не нужно применять абсолютно ко всем вариантам, и это позволяет избавляться от конфликтов
Как решается вопрос с «детачем» компонентов?
Света Бренер: Обычно компоненты «детачат», чтобы внести изменения, которые не позволяют сделать его настройки. Чаще всего в нашей команде такие потребности выносятся на обсуждение, чтобы избежать «детачей», доработать компонент или найти другое решение. Но даже если этого не происходит, вопросы возникают у разработчиков (ведь у них в коде такого варианта нет), которые, в свою очередь, приходят обсуждать проблему к нам, а мы — к продуктовому дизайнеру. Так что мимо нас такие фокусы не пройдут :)
А у вас в билайне сайт и приложение инклюзивные?
Настя Кащеева: Мы внутри билайна ведём активную работу над повышением доступности: как в приложении, так и на веб-сайте. Например, экранный диктор и фокусировка доступны для нескольких основных страниц.
Стоит полагаться на контрастность в disable-объектах?
Настя Кащеева: Нет, состояние disabled не проверяется на контрастность, но я придерживаюсь мнения, что не стоит отходить далеко от коэффициента 3:1 даже для неактивных элементов: главное, чтобы пользователь визуально понял, что с полем нельзя взаимодействовать.
Речь идёт о контрасте текста к фону, он рассчитывается по формуле, заданной внутри гайдлайнов (в нашем случае — WCAG 2.1). Знать её необязательно, существует множество плагинов Figma, которые помогут с подсчётом (например, плагин Contrast).
В каких программах разрабатывается и как создаётся анимация для «Алисы»?
Лёша Белицкий: Все анимации мы делаем в After Effects. Анимациями занимается дизайнер продукта, который также делает и интерфейсы. Для светодиодов выгружаем проект в специальном формате, который затем помещаем на колонки и запускаем через командную строку.
Дизайн для анимаций мы делаем уже после создания прототипа устройства, но все анимации создаются до старта продаж. Изменения в анимации возможны, но основную массу анимаций мы стараемся сделать до старта продаж.
В «Яндекс.Музыке» следующий трек переключается справа налево, а на станции наоборот. Почему разный принцип?
Лёша Белицкий: Мы исследовали это в нашей UX-лаборатории. На станциях большинство пользователей ожидают, что трек переключится после свайпа слева направо. В телефонах паттерн другой. Там пользователи перелистывают треки справа налево.
Почему в последней версии колонки отсутствует представление часов?
Лёша Белицкий: Так пользователь может выбрать, какую колонку купить, с часами или без.
