В условиях, когда необходимо одновременно разрабатывать, управлять и расширять несколько продуктовых линеек, практический дизайнер сталкивается с структурными проблемами, требующими решения. Мы углубленно расширяем концепции трех основных моделей архитектуры бренда (House of Brands, Branded House, Hybrid) и детально определяем практические связи между контекстом бизнеса и созданием дизайнерской инфраструктуры.
1. Реальные проблемы дизайнеров в мультпродуктовой среде и необходимость архитектуры бренда
С ростом компании и развитием бизнеса переход с единой продуктовой системы на мультпродуктовую среду, где одновременно управляется несколько продуктов, неизбежен. Как дизайнер, когда продукт единственный, разумно сосредоточиться только на одном экране и фиксированных брендовых руководствах, что снижает необходимость решения проблем структурной фрагментации интерфейса или общих объединений. Однако, когда новые услуги запускаются одна за другой или расширяется бизнес-домен, перед дизайнером возникают совершенно новые вопросы, которые невозможно легко решить с помощью существующей единой системы.
Первый вопрос, с которым сталкивается дизайнер, - это диапазон визуальной идентичности. "Насколько логотип и структура символа нового продукта должны быть схожи с основным брендом? Или они должны быть полностью новыми для отличия на рынке?" Это основные вопросы, поднимаемые в процессе. Далее следует переход к вопросу практического управления активами. "Должны ли все продукты полностью разделять корпоративную цветовую систему, масштаб типографики и фонтовые активы? Или необходимо определить независимые токены в соответствии с предпочтениями целевой аудитории отдельных доменов?" Это конкретные проблемы, требующие обсуждения.
Более того, в аспекте производительности разработки и использования активов на уровне компонентов возникает еще большая путаница. "Могут ли ключевые UI-компоненты, такие как кнопки, поля ввода, модальные окна и диалоговые таблицы, быть взяты из единой общедоступной библиотеки, не нарушая бизнес-контекст?" Необходима техническая и визуальная проверка. Если на эти ряды вопросов реагировать без четкого верхнего стандарта, применяя импровизацию, то с короткой точки зрения может быть возможен быстрый запуск, но с долгосрочной точки зрения, по мере роста масштаба продукта, общая визуальная система и согласованность пользовательского опыта могут разрушиться как песчаный замок. В результате пользователь, хотя и пользуется сервисом той же компании, сталкивается со значительной путаницей и когнитивной усталостью, задаваясь вопросом: "Это действительно сервис одной и той же марки?"
Архитектура бренда - это структурное решение, предотвращающее такие риски фрагментации и устанавливающее направление дизайнерской системы на основе прочного и систематического каркаса. Архитектура бренда - это не просто вопрос визуального стиля "как блестяще выглядеть снаружи". Ключ состоит в том, чтобы четко определить органические отношения и иерархию между верхним брендом (материнской компанией) и нижними брендами (отдельными услугами и продуктами). Если до создания дизайнерской системы четко установить степень объединения и независимости между брендами, это будет естественным и ясным способом для конкретных дизайнерских решений, таких как извлечение цветовых вариаций, глобальное применение типографии, разрешение переменных свойств компонент. Таким образом, архитектура бренда для практического дизайнера в мультпродуктовой среде становится не просто теорией брендинга, а самым мощным компасом, контролирующим повседневный канвас Figma и библиотеку компонентов.
2. Три основных модели архитектуры бренда и степень их объединения с дизайнерской системой
При анализе брендовых активов множества мультипродктовых компаний по всему миру можно увидеть, что они разделяются на три крупных паттерна в зависимости от способов связи визуального языка и форм работы. Рекомендуем глубже исследовать бизнес-ситуацию нашей организации и к какому модели принадлежит текущая линейка продуктов, или в каком направлении она собирается расширяться.
① House of Brands (Дом Брендов): максимальная независимость и специализация отдельных доменов
Модель House of Brands предполагает, что каждый продукт представляет собой совершенно независимый бренд, обладающий уникальным положением на рынке. Главной особенностью является то, что визуальный язык или тень материнской компании почти не отражаются в интерфейсе, с которым сталкиваются конечные потребители. Примеры являются интуитивно понятными и глобальными, например, P&G (Procter & Gamble). Когда обычные потребители сталкиваются с продуктами, они сначала не осознают идентичность компании P&G, а скорее непосредственно потребляют сильную идентичность каждого отдельного продуктового бренда, например, "Febreze", "Gillette", "Oral-B", "Downy", которые фактически являются полностью независимыми.
С точки зрения дизайнера в мультпродуктовой среде, применяющей эту структуру, акцент делается на 'максимизации выразительности и оптимизации домена'. Продукты, принадлежащие к House of Brands, полностью различаются по целевой аудитории, характеру домена и конкурентной среде. Таким образом, интерфейс или графический стиль освежителя воздуха Febreze не должны иметь никакой связи с упаковкой и руководством интернет-магазина бренда бритв Gillette. Поэтому дизайнер, работающий в этой модели, совершенно не нужно пытаться принудительно делиться или объединять единую систему дизайна, действующую в компании.
Наоборот, правильно будет сосредоточиться на создании визуальной системы, брендовых цветов, графиков типографики, стилей компонентов, которые полностью соответствуют психологическому контексту пользователей и бизнес-целям каждой продуктовой группы. Это этап, где необходимо устранить принудительность общей библиотеки компонентов и сосредоточиться на проектировании визуального влияния, позволяющего каждому отдельному бренду выглядеть наиболее привлекательным и гибким на рынке.
② Branded House (Брендированный дом): высокая степень согласованности и общие мастер-активы
Модель Branded House находится точно на противоположном конце по сравнению с ранее упомянутой House of Brands. Все отдельные продукты и субуслуги объединены под одним мощным "мастер-брендом (Master Brand)" и полностью делят единую визуальную язык и философию бренда. Наиболее точный и интуитивный пример - это Apple. Линейки оборудования, такие как 'iPhone', 'iPad', 'Mac', 'Apple Watch', а также интерфейсы программного обеспечения, такие как iOS, macOS, iPadOS, всё это совершенно единогласно разделяют высокую степень согласованности в визуальном языке и философии под огромным зонтом Apple.
Дизайнеру в среде, применяющей эту структуру, в первую очередь необходимо придерживаться 'согласованности и управления централизованной системой'. В модели Branded House пользователи должны чувствовать, что при использовании iPhone, переходе к Mac и взаимодействии с Apple Watch они находятся под абсолютно одинаковыми правилами: тип шрифта, мелкие пропорции межбуквенного и межстрочного интервала, округленность углов (Corner Radius), качество взаимодействия при возникновении всплывающих окон, и скорость - всё должно настраиваться под одни и те же стандарты. Так как необходимо предоставление органичного опыта с размытыми границами между продуктами.
Таким образом, дизайнеры должны избегать фрагментированных индивидуальных работ и сосредоточиться на аккуратном создании одной единственной огромной дизайн-системы, а затем строго поддерживать и обслуживать ее. Требуется очень тщательная разработка компонентных руководств Figma и глобальной системы токенов, чтобы, даже при добавлении новых услуг или функций, визуальные правила существующего мастер-бренда не отклонялись ни на 1 пиксель, что требует высокой способности к системному дизайну.
③ Гибридная модель (Endorsed / Hybrid): реальное компромиссное решение стратегической гибкости и доверия
Гибридная модель обеспечивает уникальную идентичность и функциональную индивидуальность отдельных суббрендов, одновременно частично комбинируя визуальные активы или доверие материнской компании. Это форма, которая хитро использует только преимущества между полной независимостью (House of Brands) и полной интеграцией (Branded House), и на практике является самым распространенным компромиссным решением в многопродуктовой среде многих ИТ-технологических компаний и стартапов, с которыми мы сталкиваемся в работе.
Например, когда компания, добившаяся сильного успеха в определенной области, активно использует эту модель при расширении бизнеса в совершенно разные вертикальные области, такие как финансы, мобильность, шопинг и мессенджеры. Каждая услуга должна иметь свою уникальную UX/UI-структуру и цветовую тему, отражающую ее профессионализм как финансового приложения или блеск как шопинг-приложения. Однако, чтобы одновременно дать пользователю чувство доверия к одной фамилийной марке, необходимо частично видоизменить основную структуру символа материнской компании или сопоставить уникальный ключевой цвет (Key Color) как элемент акцента на всем интерфейсе, а также регулировать каркас, используя общую глобальную систему шрифтов.
Дизайнер в гибридной среде должен продемонстрировать 'совершенный баланс между общим каркасом и индивидуальными вариациями'. Если принуждать к абсолютной согласованности, это снизит бизнес-привлекательность отдельных услуг, и наоборот, слишком высокая степень свободы вызовет фрагментацию бренда. Поэтому крайне важно утонченно спроектировать токен-карту и гибкую абстракцию компонентов, чтобы четко определить, что будет объединено в общие токены компании (Primitive/Semantic Tokens) и где будет действовать переменная индивидуальности отдельного продукта.
3. Мультипродуктовый дизайн в зависимости от характера бизнеса (B2B против B2C)
Если вы четко представили структурную модель архитектуры бренда, дизайнер должен пойти на шаг дальше и полностью изменить свое ощущение проектирования экранов в зависимости от того, предназначены ли продукты для B2B (Business-to-Business) или B2C (Business-to-Consumer). Эти две среды демонстрируют принципиальные различия в психологическом контексте потребления продуктов и способах их использования, поскольку пользователи действуют по-разному в зависимости от бизнес-контекста.
Во-первых, отличается склонность используемой модели архитектуры бренда и диапазон визуального контроля. Мультипродукты в среде B2B обычно должны продемонстрировать высокий уровень доверия и стабильной масштабируемости в качестве корпоративных решений. Уровень завершенности продукта напрямую связан с производительностью труда клиента. Поэтому в B2B среде предпочтительно использовать модель 'Branded House', при этом главный бренд должен быть в центре внимания, а структура макета всего экрана, плотность компонентов и правила цветового отображения должны быть контролируемыми на очень тщательном и строгом уровне. С другой стороны, в B2C среде, где необходимо быстро усваивать быстро меняющиеся рыночные тренды и оперативно реагировать на эмоциональные потребности различных пользователей, часто используются модели 'гибридного' или 'House of Brands'. Визуальный контроль становится относительно более свободным, позволяя каждой услуге проявлять свою визуальную индивидуальность в соответствии с целевыми сегментами пользователей.
Во-вторых, существует явное различие в фундаментальной ценности и целях, связанных со строительством и эксплуатацией дизайнерской системы. Главная цель многопродуктовой системы дизайна B2B заключается в максимизации производительности разработки и дизайна, а также в 'снижении затрат на обучение' пользователей. Большинство B2B продуктов обрабатывают огромные таблицы данных, высокоплотные панели инструментов и сложные формы настройки (Form). Пользователи не используют этот продукт ради удовольствия, а для 'выполнения задач'. Таким образом, дизайнер должен максимизировать структурную согласованность компонентов, чтобы пользователи могли инстинктивно понимать, как управлять, не проходя какое-либо обучение, когда они сталкиваются с новым экраном решения, избавляя от когнитивного трения. В отличие от этого, основная цель дизайнерской системы B2C заключается в мощном узнаваемости бренда и дифференциации эмоционального опыта, который моментально привлекает внимание пользователей. Основная задача состоит в том, чтобы тщательно совершенствовать качество микровзаимодействий, графических мотивов и цветовых игр, чтобы пользователи могли получить визуальное удовольствие и гладкое эмоциональное взаимодействие в процессе использования услуги.
В-третьих, психологический и физический контекст переключения экрана пользователя полностью различен. В B2B среде рабочий оператор обычно имеет на одном экране несколько независимых специализированных решений, между которыми он переключается в реальном времени. Если кнопки и плотность строк таблицы двух продуктов имеют различия в расположении и визуальных эффектах состояния фокуса, пользователи будут испытывать мельчайшие когнитивные потрясения, что значительно снизит эффективность работы. Именно поэтому дизайнеры B2B должны проектировать такое правило, чтобы пользователи не чувствовали разницу между работой в одном большом едином программе и переключением вкладок. Однако в среде B2C пользователи действуют совершенно иначе. Утром они запускают приложение для заказа свежих продуктов, а вечером включают приложение для стриминга музыки или контента, чтобы расслабиться после работы. Поскольку время, пространственный контекст и цели потребления этих двух услуг полностью различны, пользователи воспринимают разницу в темах дизайна и тонах интерфейсов как разные привлекательные особенности, а не как фрагментацию.
4. Три ключевых принципа для практикующего дизайнера при построении многопродуктовой системы дизайна
Если вы идеально понимаете теоретическую структуру и бизнес-контекст, то теперь вам нужно вернуться к экрану практикующего дизайнера, который теперь должен справиться с множеством продуктовых линеек, открыв сложную холст Figma. Я представляю три ключевых практических гида, которые обязательно нужно реализовать, чтобы дизайн-активы не перепутались и функционировали в устойчивой инфраструктуре.
-
Четко разделите глобальные ключевые активы (Core Assets) и активно изменяемые доменные активы (Variable Assets).
Самая смертельная ошибка в многопродуктовой среде заключается в чрезмерном стремлении унифицировать все элементы в системе дизайна одним правилом. Если вы попытаетесь все унифицировать, это приведет к тому, что уникальные бизнес-требования определенной группы продуктов не будут учтены, и сама система станет узким местом, которое будет отвергнуто на практике. Умный дизайнер разделяет активы системы на твердые ключевые активы и гибкие изменяемые активы. Например, пропорция использования логотипа компании, формула межстрочного расстояния (line-height), глобальная система макетов сеток — это области, базирующиеся на фундаменте бренда, которые должны быть объединены в общие ключевые активы компании, которые никто не может изменять произвольно. С другой стороны, точки, которые должны изменяться в зависимости от настроения определенной области, такие как ключевой цвет, уникальные иллюстрации, плотность таблиц для диалогов, следует оставить в качестве области 'переменных активов', которые можно гибко переключать в зависимости от группы продуктов, используя переменные (Variables) Figma и функции тем.
-
Повышайте уровень абстракции компонентов дизайна до следующего уровня, создавая мастер-шаблон.
При проектировании компонентов кода в библиотеках Figma или на стороне разработки следует избегать узкого и конкретного определения формата, такого как "кнопка квадратного синего цвета, предназначенная исключительно для нашего сервиса A". Создание компонентов таким образом приводит к неэфективности, когда при добавлении продуктов B и C каждый раз необходимо создавать новую кнопку с тем же структурным названием, что в свою очередь разрушает дизайн-систему. Вместо этого необходимо проектировать "структурные мастер-кнопки", которые могут свободно принимать цветовые токены темы извне в зависимости от ситуации и контекста, а также иметь возможность изменять внутренний текст, плотность отступов и наличие иконок слева и справа в зависимости от значений свойств (Props). Такие компоненты с повышенным уровнем абстракции становятся мощным инструментом, позволяющим максимизировать структурную переиспользуемость, даже при увеличении бизнес-доменов, поскольку они делят лишь один исходный компонент.
-
Инвестируйте ресурсы в документацию (Документация) и управление историей безжалостно.
Когда количество продуктов начинает увеличиваться, затраты на коммуникацию между командами дизайнеров, разработчиков и планировщиков взлетают экспоненциально. Дизайн многопродуктового продукта, не поддерживаемый документацией, со временем, даже если он хорошо продуман, неизбежно распадается на фрагменты. Следует тщательно документировать в компонентных описаниях файлов Figma или на корпоративной вики-странице такие моменты, как "почему в сервисе A не используется мастер-компонент общей библиотеки, а применяется такая модифицированная компоновка" и "каковы границы визуального токена, обработанного в конкретном домене" — фон и правила использования (Do & Don't). Документация — это не просто запись, а надежная коммуникационная инфраструктура, которая позволяет всем членам команды поддерживать один и тот же ритм в сложной среде многопродуктов.
5. Заключение: Проницательность гибкой системы дизайнеров, ведущих изменения в бизнесе
То, что мы обязательно должны помнить, это то, что современный бизнес всегда подобен живому существу. Брендовая архитектурная модель, которую мы определили как идеально подходящую нашей структуре сегодня, может быть подвержена изменениям и потрясениям завтра из-за резкого слияния или поглощения компаний, корпоративного поворота, или новых стратегий выхода на глобальный рынок. На самом деле многие глобальные технологические компании из Силиконовой долины начинали как полностью унифицированные брендированные дома для снижения начальных затрат, а затем трансформировались в гибридные структуры по мере расширения бизнес-области, и после того, как объемы определенных услуг стали гигантскими, они полностью отделялись как дом брендов, вновь испытывая структурные изменения.
Я надеюсь, что мы сможем объективно и четко оценить бизнес-ситуацию, с которой сталкивается наш продуктовый ассортимент, и контекст пользователей, и будем строить систему с макроцелью в соответствии с комбинированными и гибкими характеристиками дизайн-системы, соответствующими скорости и траектории этого бизнеса.
khg