На авито раздел куплю: Как подавать объявления на сайте «Авито», чтобы продать или купить?

Содержание

Как работает библиотека дизайн-системы Avito в Figma | Инна Летина | AvitoTech

Опубликовано в

Чтение: 11 мин.

23 марта 2021 г.

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

На самом базовом уровне дизайн-система представляет собой набор компонентов и стилей. Наши также включают руководства, потоки и шаблоны для дизайнеров и спецификации для разработчиков. Наша библиотека Figma поддерживается командой дизайн-системы. Его пользователи — наши дизайнеры и разработчики продуктов. Здесь мы собираемся объяснить, как работает библиотека.

Наша система проектирования в Figma состоит из шести разделов:

Введение для новых сотрудников.
Незавершенные файлы.
Стили.
Библиотеки компонентов.
Спецификация для разработчиков.
Руководство для дизайнеров.

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

Незавершенное производство хранит внутренние проекты и разработки команды дизайн-системы. Это текущие задачи, над которыми работает наша команда.

Рассмотрим подробнее другие разделы библиотеки.

Авито имеет несколько платформ: веб, мобильная версия сайта и мобильные приложения. Это самое общее деление. Для каждой платформы существуют отдельные стили.

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

Шрифты для текстов интерфейса имеют соответствующие названия, например, Заголовок или Тело, и примечание о размере и межстрочном интервале. Стили текста для Интернета и мобильных устройств немного отличаются: некоторые элементы меньше в первом случае и больше во втором. Мы сохраняем цвета как переход от светлого к темному. У них также есть имена, например, blue50 или blue700.

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

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

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

Компоненты похожи на кирпичи, из которых можно построить любую структуру. Например, верхние и нижние колонтитулы страниц, поисковые фильтры, баннеры, карты и боковые меню.

В общей библиотеке системы дизайна хранятся:

Компоненты для Интернета.
Компоненты для мобильных приложений.
Готовые к использованию иллюстрации.
Набор иконок.

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

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

Как выглядит всплывающий веб-компонентКак выглядит мобильная нижняя страница

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

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

С простыми новыми компонентами все более-менее понятно. У нас либо есть заказ на новый компонент от команды, либо мы видим потребности дизайнеров. О том, что потребность существует, мы узнаем из вопросов типа «есть ли у нас тот или иной компонент? вы когда-нибудь сталкивались с таким решением?».

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

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

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

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

Так выглядят экземпляры основного компонента элемента списка. Бесконечное количество экземпляров может быть создано с помощью одного мастер-компонента

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

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

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

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

Всего компонентов довольно много — вот только некоторые из них

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

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

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

Дизайнерам нужна библиотека в Figma, чтобы иметь общее представление о доступных компонентах и легко копировать и вставлять в свои макеты. Но чтобы макеты были реализованы, важно, чтобы каждый компонент существовал в коде для всех платформ и чтобы все команды разработчиков Avito могли легко получить к нему доступ. Разработчики дизайн-системы несут ответственность за кодовую реализацию существующих компонентов.

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

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

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

Вот фрагмент спецификации компонента элемента списка:

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

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

Разработчики готовят полноценную реализацию компонента, которую можно увидеть в специальном демонстрационном приложении. Это приложение, которое можно загрузить на iOS и Android для проверки функциональности компонента: размеров, расположения элементов, выделения и всего, что описано в спецификации.

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

Тестируем все решения как в светлой, так и в темной теме

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

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

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

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

Длинное и подробное руководство по нижнему листу состоит из семи разделов:

Какой нижний лист выбрать в зависимости от ситуации.
Высота нижнего листа.
Анимация.
Выбор нижнего колонтитула.
Отступы от края экрана и элементов навигации.
Как и когда использовать кнопки в компоненте.
Нельзя.

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

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

Над дизайн-системой работает не только команда дизайн-систем. Все разработчики и дизайнеры Avito вносят свой вклад в это дело. Разработчик из другого подразделения может добавить компонент кода, если ему или ей нужен этот компонент для достижения чего-либо. Дизайнер может доработать новый компонент и создать для него состояния. Затем нам нужно только внести незначительные коррективы, например, добавить настройки.

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

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

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

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

Дизайн-система не существует отдельно от продукта, это неотъемлемая часть продукта.

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

Дизайн-система Avito · Ади Хаммиуи · Стратегия продукта Дизайн продукта

Структура библиотеки дизайн-системы

Наша дизайн-система в Sketch состоит из шести разделов:

Введение для новых сотрудников.
Незавершенные файлы.
Стили.
Библиотеки компонентов.
Спецификация для разработчиков.
Руководство для дизайнеров.

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

На самом базовом уровне дизайн-система представляет собой набор компонентов и стилей. Наши также включают руководства, потоки и шаблоны для дизайнеров и спецификации для разработчиков. Наша библиотека Sketch поддерживается командой дизайн-системы. Его пользователи — наши дизайнеры и разработчики продуктов. Здесь мы собираемся объяснить, как работает библиотека

Доступность прежде всего

На самом базовом уровне дизайн-система представляет собой набор компонентов и стилей. Наши также включают руководства, потоки и шаблоны для дизайнеров и спецификации для разработчиков. Наша библиотека Sketch поддерживается командой дизайн-системы. Его пользователи — наши дизайнеры и разработчики продуктов. Здесь мы собираемся объяснить, как работает библиотека.

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

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

Стили

У Авито есть несколько платформ: веб, мобильная версия сайта и мобильные приложения. Это самое общее деление. Для каждой платформы существуют отдельные стили.

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

‍

Компоненты дизайн-системы

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

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

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

Руководство для дизайнеров

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

У нас есть рекомендации по использованию компонентов на разных платформах, иллюстрации, значки и рекомендации по мобильной версии веб-сайта.