Создавая более спокойный Reverie: от чата ко всему продукту

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

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

Мы начали с чата, потому что именно там многие проводят в Reverie больше всего времени. Это также было лучшим местом для проверки главного вопроса редизайна: каким должен быть интерфейс, если ему нужно оставаться комфортным на протяжении всей беседы, а не просто производить сильное первое впечатление?

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

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

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

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

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

Мы изменили Reverie не для того, чтобы лишить его характера. Мы хотели, чтобы этот характер рождался из самого опыта.

Легче, но не холоднее

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

Новая система спокойнее, но остаётся тёплой.

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

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

Типографика для долгого чтения

Одно из важнейших изменений одновременно является одним из наименее заметных: мы усилили типографическую иерархию.

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

Принцип прост:

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

Хорошая типографика не требует внимания. Она помогает его удерживать.

Один язык компонентов во всём продукте

Это не смена оформления каждой страницы по отдельности. Мы перестроили общий язык компонентов, лежащий в основе продукта.

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

радиуса углов
контраста рамок
цвета поверхностей
высоты и теней
обозначения фокуса
состояний наведения и нажатия
насыщенности текста
отступов
семантических цветов

Эта последовательность важнее любого отдельного визуального решения. Когда одно и то же действие везде выглядит и работает одинаково, на понимание интерфейса уходит меньше сил. Опасное действие выглядит опасным. Выбранная опция — выбранной. Плавающая поверхность отделяется от страницы под ней. Главное действие легко найти, даже если не каждая кнопка пытается быть главной.

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

Самое сложное — найти исключения

Обновление компонента кнопки не обновляет автоматически все кнопки.

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

Именно такие исключения часто делают редизайн непоследовательным.

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

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

Меньше украшений, понятнее взаимодействие

Мы убрали многие эффекты, которые выглядели интерактивными, но не добавляли полезной информации.

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

При этом реальные состояния взаимодействия стали понятнее:

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

Сокращение декора освободило место для улучшения обратной связи. Интерфейс меньше двигается, но больше сообщает.

Доступность — часть визуальной системы

Дизайн-система неполна, если описывает компоненты только при работе с мышью.

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

Эти изменения намеренно ненавязчивы. Доступность не должна ощущаться отдельным режимом поверх продукта. Она должна присутствовать по умолчанию.

Лучшая основа для будущего

Главный результат этой работы — не конкретный оттенок, радиус или тень. Теперь у продукта меньше конкурирующих ответов на один и тот же дизайнерский вопрос.

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

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

Что, как мы надеемся, вы заметите

В идеале — не слишком многое сразу.

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

Персонажи остаются выразительными. Истории сохраняют атмосферу. Моменты, достойные праздника, всё так же могут быть яркими.

Просто интерфейс теперь лучше знает, когда говорить, а когда стать достаточно тихим, чтобы всё остальное имело значение.

Новая дизайн-система теперь охватывает весь Reverie. Если что-то стало заметно лучше — или всё ещё кажется неуместным — расскажите нам об этом в сообществе Discord.