Когда продукт растёт, хаос в интерфейсах появляется почти незаметно. Одинаковые сценарии начинают решаться по-разному, команда тратит всё больше времени на повторяющиеся вопросы, а пользователи сталкиваются с непредсказуемым опытом. Удержать продукт от такого распада помогают понятные гайды и стандарты проектирования, которые фиксируют общие правила и собирают работу команды в единую систему.
Что вас ждёт сегодня
В качестве вступления
В книгах Толкина Кольцо Всевластия было символом единого замысла и порядка, который должен был связать разрозненные части мира. Но если взглянуть на этот образ иначе, можно провести интересную параллель с продуктовым дизайном. Представьте, что «кольцо всевластия» — это не инструмент контроля, а свод правил дизайна. Этот «артефакт» тоже объединяет, но делает это по-другому, через ясность и предсказуемость. И главное, он не ограничивает творчество, а, наоборот, освобождает от рутины. Сколько времени уходит на то, чтобы каждый раз заново решать, какую кнопку использовать или каким должен быть отступ? С чёткими правилами такие вопросы отпадают, и остаётся больше сил на действительно творческие задачи.
Меня зовут Владимир Фрадков, я руковожу группой дизайна «Стандарты и развитие» в личном кабинете продавца Ozon. В этой статье я хочу поговорить о том, как упорядоченность и системность помогают в дизайне и почему единый документ с правилами может стать тем самым «кольцом всевластия» для вашего продукта.
Моя группа занимается тем, что формирует гайдлайны, правила и паттерны для большой команды продуктовых дизайнеров. Наша работа позволяет решить сразу две задачи:
Избавляет коллег от необходимости «изобретать велосипед» — не нужно каждый раз заново придумывать базовые решения.
Обеспечивает консистентность большого и разнородного продукта — чтобы всё выглядело и работало как единое целое.
Консистентность — это когда все элементы продукта внутренне согласованы между собой и соответствуют установленным правилам. Когда пользователь переходит из одного раздела в другой, он не чувствует разрыва: внутренние механики, поведение элементов и их взаимодействие друг с другом — всё узнаваемо и предсказуемо.
Что такое стандарт в продуктовом дизайне
Стандарт — это документ, который вводит правила на использование компонента или паттерна для продуктовых дизайнеров. Часто его путают с технической спецификацией по компоненту.
В чём разница между технической документацией и гайдом по использованию
Техническая документация предназначена для разработчиков — это «паспорт» компонента. В ней зафиксированы точные размеры, все возможные состояния, варианты поведения и прочая важная для разработки информация.
Гайд по использованию — практическое руководство для дизайнеров по тому, как проектировать интерфейс с использованием данного компонента.
Что происходит, если их не разграничить?
Получаются «гибридные» документы, которые не решают задачи ни одной из сторон: либо они слишком краткие и не хватает технических деталей для реализации, либо перегруженные из‑за чего их сложно воспринимать и использовать. Именно поэтому мы в Ozon разделили зоны ответственности и создали две отдельные группы. Одна занимается разработкой компонентов и написанием технической документации для разработчиков. А вторая (та, в которой работаю я) разрабатывает стандарты проектирования интерфейсов.
Чем занимается моя команда
Мы фокусируемся именно на гайдах для дизайнеров. Их ключевая особенность — избирательность: в них нет информации, которая важна только разработчикам (например, токенов цветов или точных настроек шрифта). Всё это уже «зашито» в компонент, и для дизайнера такие детали не имеют практической ценности.
Что действительно важно для дизайнера
В гайде мы даём именно те сведения, которые помогают принимать решения в процессе работы:
в каких ситуациях применять этот элемент, а когда лучше выбрать альтернативу;
как компонент взаимодействует с другими элементами системы;
какие ограничения существуют при использовании;
реальные кейсы, где компонент решает конкретные задачи.
Цель такого документа — ответить на все вопросы, которые могут возникнуть у дизайнера при работе над задачей.
Что ещё должны охватывать стандарты
Важно понимать, что наша работа не ограничивается только компонентами дизайн‑системы. Не менее значимы общие паттерны, которые регулярно встречаются при проектировании. В стандарты необходимо включать рекомендации по таким аспектам как:
построение лейаута — как грамотно организовать пространство, распределить блоки, соблюсти визуальную иерархию;
работа с метафорами — как использовать знакомые пользователю образы и аналогии, чтобы сделать интерфейс интуитивно понятным;
базовые принципы проектирования — правила, которые затрагивают не отдельный компонент, а целый комплекс элементов или даже сквозные сценарии взаимодействия.
Зачем нужны стандарты
Стандарты для команды — это практический инструмент, который помогает в работе каждый день. Этот инструмент должен решать сразу несколько задач. Разберём каждую.
1. Создание единого пользовательского опыта
Представьте, что в одном разделе продукта фильтрация таблицы настраивается через отдельный элемент управления над таблицей, а в другом — через шапку столбцов.
Что чувствует пользователь? Скорее всего, он будет растерян и раздражён из-за того, что не понимает, как сделать то же самое, что он только что делал в другом разделе. В худшем случае он просто откажется от действия из-за того, что не понимает, как работает функция. Такая несогласованность понижает уровень доверия пользователей к продукту.
Часто такие ситуации увеличивают количество обращений в службу поддержки и требуют дополнительного ресурса компании. Стандарты устраняют этот хаос. Когда одинаковые задачи решаются одинаково, пользователю не нужно заново разбираться, как что‑то сделать, — он просто выполняет привычное действие. Его опыт становится плавным, предсказуемым, комфортным и не требует лишней когнитивной нагрузки.
2. Гарантия качества в повторяющихся сценариях
Стандарт — это не только про единообразие решений. Это ещё и про качество этих решений, чтобы каждый элемент работал максимально интуитивно. Почему это критично?
Чем проще интерфейс, тем шире аудитория, которая сможет им пользоваться.
Чем предсказуемее поведение элементов, тем выше доверие к продукту.
В больших командах стандарты становятся «страховкой» от плохих решений. Даже если над задачей работает начинающий дизайнер, качество решения не просядет, потому что есть чёткий ориентир.
3. Экономия времени на проектирование
Допустим, наша команда уже глубоко проработала сценарий работы с таблицами и закрепила его в виде стандарта. Сделав это, мы сэкономили время дизайнеру. Ему не нужно заново придумывать, как будут работать базовые функции, например фильтрация или сортировка, не надо проводить дополнительные исследования, так как решение уже проверено. Можно сразу перейти к уникальным задачам, которые действительно требуют творчества. На уровне компании это означает, что фичи быстрее выводятся на рынок из-за более продуктивной работы команды.
4. Обучение и развитие команды
Мы в нашей группе взяли себе за правило, чтобы каждый гайд включал в себя ссылки на источники, на основе которых формировались рекомендации. Мы это делаем для того, чтобы повысить доверие к материалу, и как бонус это даёт возможность углубиться в тему, если дизайнер хочет изучить вопрос подробнее.
Что это даёт бизнесу?
Если свести всё к двум ключевым выгодам:
Рост качества продукта. Консистентность, интуитивность и надёжность повышают ценность продукта на рынке.
Снижение затрат. Меньше времени на рутину — больше на инновации; меньше ошибок — меньше доработок.
В итоге стандарты — это фундамент, на котором строится эффективный, удобный и конкурентоспособный продукт.
Как создавать стандарты: подробное руководство
Я уже писал выше, что работа над стандартами — это не просто составление формальных документов. Это создание практических инструментов, которые ежедневно помогают дизайнерам принимать верные решения. В этой части статьи я расскажу о том, как мы подходим к работе над этими задачами. Давайте разберём процесс пошагово — с объяснением «почему именно так».
Шаг 1. Продумываем структуру всего гайдлайна
Главная цель — создать не «толстую книгу правил», а быстрого помощника, к которому дизайнер обратится в момент необходимости и в котором мгновенно найдёт ответ.
Оптимальный подход — структурировать материалы по компонентам дизайн‑системы. В работе дизайнер чаще всего ищет ответы на вопросы по определённому элементу и хочет быстро понять, подходит ли этот компонент для его задачи.
Важный нюанс: начните гайд с чёткого указания, в каких ситуациях компонент уместен. Если дизайнер ошибся с выбором, перенаправьте его к нужному документу. Обязательно делайте кросс‑ссылки между документами — это сильно упрощает поиск нужной информации.
Про то, как мы пишем гайды, я более подробно расскажу немного позже.
Помимо гайдов по компонентам, нужны документы верхнего уровня, про них я уже упоминал ранее: принципы лейаута, работа с метафорами, базовые паттерны проектирования. Таких материалов будет меньше, но они критически важны, так как не все правила можно уложить в материалы по отдельным компонентам.
Шаг 2. Выбираем темы для стандартизации
У нас в команде есть довольно простое правило: мы стандартизируем то, что повторяется в интерфейсе два раза и более, и чем чаще, тем выше приоритет у задачи. Есть несколько методов, как определить приоритетные темы:
Метод 1. Ручной аудит интерфейса
Пройдитесь по всем разделам продукта и фиксируйте, где используются одинаковые механики, а также какие решения выглядят несогласованно.
Метод 2. Сбор макетов от команды
Попросите дизайнеров прислать примеры использования интересующего компонента. Так вы получите «живые» кейсы, а не гипотетические сценарии и к тому же сможете увидеть, где команда испытывает сложности. У нас в Ozon есть практика под говорящим названием «Сбор фактуры». Смысл её в том, что мы приходим на общий синк команды и просим накидать макеты из продуктовых задач на интересующую нас тему в заранее созданный файл. Это один из самых эффективных способов найти корнер-кейсы из продукта.
Метод 3. Анализ через Figma Library Analytics
Это внутренняя функциональность Figma, и она может показать:
сколько раз использован компонент;
в каких файлах он встречается;
какие вариации созданы.
Всё это объективные данные для приоритизации тем.
Главная проблема Figma Library Analytics в том, что если компонент раздетатчили, то он автоматически перестаёт попадать в статистику. Так что нужно активно популяризовать внутри команды запрет на детатч.
Шаг 3. Собираем аналитику: что читать, смотреть и учитывать, прежде чем писать гайд
Самая распространённая ошибка на этом этапе — сесть за документ сразу после выбора темы. В итоге получается «набросок из головы»: правила есть, но они не опираются ни на реальные сценарии, ни на поведение пользователей, ни на опыт рынка. Чтобы не попасть в эту ловушку, собираем «досье» будущего гайда. Ниже — четыре источника, без которых не обойтись, и приёмы, как вытягивать из них полезные сведения.
1. Текущие решения в продукте
Проще и эффективнее развивать то, что уже прижилось у пользователя. Резкие «разрывы шаблона» повышают риск ошибок и отторжения у бывалых пользователей вашего продукта.
После «Шага 2» у вас уже должен был сформироваться пул продуктовых решений; ваша задача не записать «как красиво», а зафиксировать контекст: на каком экране, после какого действия, в связке с какими элементами используется компонент.
2. UX-исследования вашего продукта
Если для текущих продуктовых решений проводились исследования — это может стать очень важным источником данных. На такие данные обязательно стоит опираться при написании гайда.
Что искать:
Цитаты и видеоролики из интервью, где пользователи комментируют конкретную механику («я не заметил кнопку», «я ожидала, что фильтр сохранится»).
Метрики после А/В-тестов: конверсия, NPS, время до целевого действия.
Результаты юзабилити-тестов: где люди кликали несколько раз, где бросали сценарий.
Как использовать в гайде:«В тестировании 72% пользователей не замечали текстовую ссылку „Показать ещё“. При смене её на кнопку Primary-Small процент доскроллов до нижнего блока вырос на 27%. Поэтому в длинных списках рекомендуем использовать именно кнопку».
3. Референсы от глобальных игроков
Почему не Dribbble и Behance? Эти очень популярные среди дизайнеров площадки показывают «красиво», но не «как работает у миллиардов». Нам важны массовые привычки, которые формируют крупнейшие игроки рынка: Apple, Google, Microsoft, Amazon, Meta и т. п.
Где брать:
Официальные документации вроде iOS Human Interface Guidelines / Material Design.
Публичные отчёты исследовательских команд BigTech (Medium-статьи, конференции, YouTube-ролики).
Статьи от Nielsen Norman Group.
Собственные записи: когда пользуетесь сторонним продуктом, делайте скриншот и заметку «удобно/неудобно».
После изучения таких референсов сопоставьте свою механику с «большим» паттерном. Если решения совпадают — смело ссылайтесь: «Сделано как у Google: пользователь так привык». Если решение отличается — обоснуйте почему; возможно, иное решение есть у других крупных референтов или же есть внутреннее исследование, которое противоречит глобальным паттернам именно в вашем продукте.
4. Собственный опыт команды
Как бы банально это ни звучало, но стандарты должны писать специалисты очень высокого уровня квалификации. Высокий уровень — это не «мне кажется» и не «у нас так исторически сложилось». Это способность за минуту выдать цепочку:
Пользователь привык к X → у нас метрика падает на Y → технически можем только Z → значит принимаем такое-то решение.
При этом, если по какому-то конкретному вопросу внутри команды нет такого уровня экспертности, не стесняйтесь пригласить коллегу, который больше погружён в контекст проблемы, на пару часов критики. Дешевле получить «живые» аргументы сразу, чем потом тушить пожары на проде.
Шаг 4. Примерная структура гайда
В процессе работы над стандартами наша команда разработала ориентировочную структуру хорошего гайда.
Подчёркиваю, структура именно ориентировочная. Каждый элемент интерфейса и описывающий его документ уникальны — невозможно подогнать всё под единый шаблон. Однако можно выделить универсальные верхнеуровневые разделы, которые подойдут для большинства гайдов.
Таким образом мы ещё сильнее упрощаем восприятие гайда: изучив один гайд, дизайнер легко разбирается в остальных — благодаря единой структуре.
1. Секция «Основное»
Цель секции — помочь мгновенно определить, о чём документ и стоит ли искать в нём нужную информацию. Она включает:
краткое описание элемента, паттерна;
оглавление со ссылками на ключевые блоки (не более 5–6 пунктов) — для быстрой навигации;
информацию об ответственном за гайд, к которому можно обратиться за уточнением деталей.
2. Секция «Шаблоны»
Нужна для ещё большего упрощения использования стандартизированных решений. Шаблон можно просто скопировать к себе в макеты и минимально донастроить. Содержит:
готовые шаблоны, максимально приближённые к реальным кейсам;
преднастроенные варианты компонента (без избыточной комбинаторики);
примеры взаимодействия компонента с другими элементами интерфейса.
3. Секция «Когда использовать»
Перечисляет реальные примеры применения элемента. Помогает дизайнеру быстро проверить, соответствует ли его задача описанному решению.
4. Секция «Что запрещено»
Описывает пограничные кейсы, где элемент не применяется. Дополнительно даёт ссылки на гайды, покрывающие альтернативные сценарии, чтобы пользователь не оставался с вопросом «куда идти дальше?».
5. Секция «Рекомендации»
Самая объёмная и гибкая часть. Здесь:
детально разбираются примеры из секции «Когда использовать»;
описываются корнер‑кейсы;
приводятся нюансы применения элемента.
Количество подразделов варьируется от одного до десяти и более — в зависимости от сложности темы. Сама секция может разбиваться на подтемы; например, если описывается компонент с вложенностью, то секцию можно разбить на описание родителя и описание дочерних элементов.
6. Секция «Редполитика» (опционально)
Актуально для элементов с текстовым контентом. Содержит правила работы с текстами в рамках конкретного компонента.
7. Секция «Лучшие практики» (опционально)
Носит образовательный характер. Здесь автор делится:
личным опытом;
неочевидными инсайтами;
экспертными наблюдениями, полученными в ходе анализа.
8. Секция «Доказательная база»
Тут собраны ссылки на источники, референсы, а также исследования, лёгшие в основу гайда.
Это повышает доверие к материалу и расширяет кругозор читателя.
Важно: предложенная структура — не догма. Она может и должна адаптироваться под конкретные задачи. Однако как стартовая точка она экономит время и задаёт чёткие ориентиры для создания качественных гайдов.
Шаг 5. Пишем гайд: 10 принципов эффективной документации
Также в процессе работы над стандартами я сформулировал ряд принципов создания эффективного гайдлайна. В настоящее время эти принципы официально закреплены в нашей группе. Благодаря такому подходу каждый документ получается тщательно проработанным и максимально удобным для читателей.
1. Создавайте «инструмент», а не «книгу»
Гайдлайны — это инструмент дизайнера, их сканируют в поисках решения конкретной задачи. Соблюдайте принципы:
максимальная лаконичность текста;
визуальная подача ключевой информации;
чёткая структура с подзаголовками и списками.
2. Соблюдайте баланс в терминологии
Используйте профессиональные термины, но избегайте избыточного жаргона. Принципы:
объясняйте узкоспециализированные понятия при первом упоминании;
заменяйте сложные термины простыми аналогами, если это не искажает смысл;
сохраняйте единообразие терминологии во всём документе.
3. Фокусируйтесь на реальных кейсах
Вместо описания «идеального» сценария разбирайте:
ситуации переполнения контента;
корнер‑кейсы из продукта;
ограничения по техническим или бизнес‑требованиям и т. д.
4. Используйте ссылки вместо дублирования
Не копируйте правила из смежных гайдов — дайте ссылку на исходный документ, это упрощает поддержку актуальности, исключает разночтения и сокращает объём текста
5. Закрывайте все вопросы дизайнера
К моменту завершения работы над гайдом каждый потенциальный вопрос о применении компонента или паттерна должен иметь чёткий ответ в документе. Представьте себя на месте дизайнера, который впервые сталкивается с задачей.
6. Доверяйте профессионализму коллег
Дизайнеры владеют базовыми инструментами. Описание настроек компонента избыточно: дизайнеры смогут и сами изучить настройки компонента через интерфейс. Не перегружайте гайд демонстрацией очевидных параметров — сосредоточьтесь на сути.
7. Акцентируйте нетривиальные настройки
В разделе про свойства описывайте только нестандартные параметры, которые не являются общеупотребительными. Например: не нужно в каждом компоненте описывать, что такое Hover, — это стандартное состояние, которое всем понятно.
8. Учитывайте взаимодействие с другими элементами
Опишите, как компонент взаимодействует с соседними элементами интерфейса. Приведите примеры корректного и некорректного соседства, чтобы избежать конфликтов в макетах.
9. Тестируйте восприятие «свежим взглядом»
На этапе финальной вычитки попробуйте абстрагироваться от контекста создания или попросите пару коллег изучить материал и дать комментарии. Оцените:
насколько интуитивно понятна структура;
легко ли найти нужную информацию;
нет ли избыточных или неясных формулировок.
10. Обеспечьте прозрачность обновлений
При внесении изменений фиксируйте дату обновления и указывайте, что именно было изменено. Для упрощения также можно добавить ссылку на конкретный раздел с правками.
Шаг 6. Визуальное оформление: как сделать гайд наглядным и понятным
Текст без визуала — как рецепт без фото готового блюда: формально всё верно, но не вдохновляет и плохо запоминается. Чтобы превратить сухой документ в живой инструмент, обязательно нужны понятные примеры. Правила из хорошего гайда можно примерно понять и не читая текст, а только разглядывая картинки.
Цветные статусы для примеров
Чтобы дизайнер мгновенно «схватывал» суть, используйте цветовую маркировку примеров:
Нейтральный. Просто иллюстрация без оценки.
Хорошо (зелёный). Рекомендованный вариант для оптимального использования элемента, удачные сочетания с другими элементами и т. п.
Осторожно (жёлтый, оранжевый). Допустимо, но с оговорками. Например: «Можно использовать на тёмном фоне, но проверьте контрастность».
Плохо (красный). Строгий запрет. Здесь мы явно показываем, что делать нельзя ни при каких обстоятельствах.
Почему это работает? Глаза цепляются за цвет, а мозг мгновенно считывает: «Это можно, нельзя, нужно проверить».
Инструменты фокусировки: где смотреть и что замечать
Задача — не дать дизайнеру утонуть в деталях. Используйте приёмы, которые направляют взгляд:
Выделение ключевых зон — например, обведите яркой рамкой область, где важно обратить внимание (например, зону клика или отступы).
Показ сценариев в динамике.
Если компонент меняется (например, при наведении или загрузке), покажите последовательность состояний, тайминги анимаций, триггеры, поведение курсора.
Дополнительно можно сделать видео такого поведения. Именно дополнительно, а не вместо, так как возникают сложности с фокусом на конкретных шагах. Например, на видео можно упустить, как себя вёл курсор, и тогда придётся его пересматривать и тратить время.
Визуализация отступов и размеров
В тексте воспринимать информацию о размерах и отступах неудобно, визуализация гораздо проще передаёт подобную информацию
Используйте скелетоны
В нашей практике часто возникали вопросы не по теме гайда, так как устаревал второстепенный контент в примере и поддержка актуальности требовала большого ресурса. Чтобы избавиться от этой проблемы, мы стали активнее пользоваться скелетонами в гайдах.
Скелетон — это схематичное изображение компонента или экрана без визуальных деталей.
Зачем нужны?
Упрощают обновление гайда. Если вы измените внешний вид компонентов, пример останется актуальным.
Снимают когнитивную нагрузку. Дизайнер видит только структуру: где что расположено, как элементы связаны и как в эту структуру встроен описываемый компонент.
Баланс текста и визуала
Правило «1 : 1»: на один абзац текста должно быть хотя бы одно визуальное сопровождение, так гораздо легче воспринимается контент. Как бонус, при таком подходе вы автоматически получите больше примеров и проще будет добиться того, чтобы большая часть правил из гайда была понятна без детального прочтения текста. Правило не строгое — конечно, есть ситуации, когда пример под текст не подобрать либо до примера требуется более развёрнутое описание, но нужно стараться его придерживаться в большинстве ситуаций.
Чек‑лист для самопроверки визуала
Перед публикацией гайда задайте себе вопросы:
Понятно ли с первого взгляда? Закройте текст и посмотрите на картинки. Можно ли без слов понять, что показано?
Не перегружены ли примеры деталями? Если глаз «спотыкается», упростите изображение.
Есть ли связь между текстом и картинкой? Каждая иллюстрация должна отвечать на вопрос из текста или дополнять его.
Важно: Сохраняйте исходники визуалов в отдельном файле — это упростит обновления.
Помните, визуальное оформление — не «украшательство», а ключевой инструмент коммуникации. Грамотно подобранные примеры экономят время дизайнера и делают гайд более простым в использовании.
Стандарт не должен мешать творчеству
Я начал эту статью с того, что стандарты должны освобождать ресурсы дизайнера для создания новых креативных решений там, где это действительно необходимо. И при работе над стандартом можно слишком увлечься правилами и уйти в «тёмную сторону» излишней регламентации, когда хочется описать каждую мелочь и создать жёсткие рамки использования того или иного компонента.
Для того чтобы этого избежать, нужно стараться приглушить внутри себя голос продуктового дизайнера, который решает конкретную задачу, и подняться как бы немного над продуктом и мыслить чуть более абстрактно, оставляя гибкость. Именно для таких гибких рекомендаций мы используем жёлтый пример с пометкой «Осторожно» — чтобы дизайнер в процессе решения задачи как бы немного замедлился у этого примера и подумал: «А правда ли мне здесь нужно сделать именно так?».
Чтобы не ограничивать креативность, в команде Ozon также есть правило, что если что-то не зарегламентировано в стандарте, то решение по такому кейсу принимает сам продуктовый дизайнер. Таким образом, ко всему прочему этот подход позволяет копить продуктовую фактуру для более взвешенных и проработанных решений при дальнейшем развитии стандартов.
Заключение
Навести порядок в большом продукте невозможно одним усилием воли, но это можно сделать последовательно, через общие правила, понятные ориентиры и решения, которым доверяет вся команда. И возможно, в этом и есть главная ценность стандартов. Они не подменяют собой дизайн, а создают условия, в которых хороший дизайн становится не случайностью, а системой. В мире, где интерфейсы множатся, команды растут, а требования меняются, именно стандартизация становится тем самым «кольцом», которое:
связывает разрозненные элементы продукта в единую систему;
задаёт правила, понятные каждому участнику процесса;
экономит ресурсы, избавляя от необходимости заново изобретать решения;
обеспечивает консистентность, благодаря которой пользователь чувствует себя уверенно и комфортно.
Если переосмыслить саму идею легендарного кольца, то стандартизация в продуктовом дизайне вовсе не про контроль и ограничения. Напротив, она даёт свободу творчества в рамках продуманной системы, соединяет форму и функцию и выстраивает единый язык продукта.
