Разработка единой дизайн-системы для приложений на всех платформах — опыт Airbnb

Вслед кулисами новой дизайн-системы

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

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

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

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

На (кой нам нужны дизайн-системы

Команда Airbnb пережила много взлётов по (по грибы) последние годы. Сейчас наш факультет дизайна выполняет десятки функций и состоит с разных команд. Стало очевидно, яко нам необходимо найти более комплексный подход, чтобы эффективно объединять наши деятельность на пути к общей цели. Ты да я выявили эти проблемы внутри компании, что ни говорите я уверен, что эти симптомы присущи всей индустрии разработки программного обеспечения.

Очень мало ограничений

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

Уймища дизайнеров и заинтересованных лиц

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

Диверсификация платформ

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

Программное выдача во времени

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

Приступая к работе

На работы над этими проблемами и быстрого принятия решений ты да я собрали небольшую группу дизайнеров и разработчиков. Пишущий эти строки вычистили наши календари, сняли студию один шаг от главного офиса Airbnb и посвятили себя созданию и разработке Системы проектирование-языка (DLS).

Цель, которую мы поставили, — произведение качественного и понятного дизайн-языка. Наши макеты должны вестись унифицированы для каждой платформы возле помощи определённых компонентов. Для альфа и омега мы решили направить максимум усилий бери создание нашей системы для нативных платформ (iOS и Android).

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

• Унификация. Отдельный элемент является частью большего и принуждён вписываться в общую концепцию. Не должно быть быть изолированных элементов.
• Универсальность. Airbnb пользуются изумительный всём мире. Соответственно, наш оптический язык должен быть доступным и привлекающим первый план.
• Каноничность. Мы очень серьёзно подходим к вопросу дизайна и функциональности. Наша деловая должна говорить сама за себя.
• Интерактивность. Наша вещь вдыхает жизнь в наши продукты и позволяет валандаться с пользователями на понятном языке.

Закладывая основу

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

Опус компонентов

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

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

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

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

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

Сборка библиотеки

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

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

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

Ниже вас увидите наше решение, созданное к планшетов.

Все компоненты построены присутствие помощи нашего собственного фреймворка, тот или иной содержит эти стили, элементы и адаптивность интересах других устройств.

Извлеченные уроки

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

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

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

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

Мораль

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

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

Надо надеяться, что при помощи этой системы ты да я сможем уделить больше внимания UX и новым концепциям в будущем.

Источник