Комнаты различались по назначению, но обложка показывала только тип
В DocSpace комнаты — пространства для совместной работы с файлами. Роли определяют, что каждый участник может делать внутри комнаты.
Раньше пользователь мог загрузить собственную картинку. Без неё отображалась стандартная заглушка с иконкой типа комнаты. У комнат одного типа не было индивидуальной обложки, пока пользователь не находил и не загружал изображение.
Задача появилась из запросов пользователей и предложений по развитию продукта. Одна из целей — дать комнатам визуальные различия. Я предложил автоматически создавать обложку из названия и добавить настройку цвета и символа прямо в сценарий создания комнаты.
Достаточно ввести название, чтобы появилась обложка
Когда пользователь вводит название комнаты, из него формируется буквенное обозначение, а фон получает случайный цвет из палитры. Обложка сразу появляется рядом с полем названия.
Так у комнаты есть индивидуальное оформление даже без загруженного изображения. Пользователь видит его до создания комнаты и может оставить предложенный вариант или перейти к настройке.
Цвет и иконку можно выбрать под назначение комнаты
В редакторе пользователь может изменить цвет фона или заменить буквы тематической иконкой. Это позволяет обозначать назначение комнат и использовать собственную систему визуальных различий: например, выделять цветом или символом связанные пространства.
Я нарисовал набор иконок и подготовил состояния их выбора. Изменения сразу отображаются в предпросмотре, поэтому сочетание цвета и символа можно оценить до применения. Чтобы вернуться к буквенной обложке, достаточно снять выбор иконки.
Помимо готовой палитры, можно задать один собственный цвет. Он сохраняется в редакторе и отмечается карандашом: пользователь может выбрать его снова или изменить.
Собственное изображение — ещё один вариант обложки
Для загрузки картинки я предусмотрел выбор файла с устройства и перетаскивание в панель. После загрузки открывается кадрирование: пользователь выбирает нужный фрагмент и применяет его к комнате.
Настройка доступна и после создания комнаты — через панель редактирования и панель информации. Изображение можно заменить или удалить. После удаления комната возвращается к буквенной обложке со случайным цветом.
Правила охватывают размеры, контраст и разные экраны
Обложка отображается в трёх размерах: 32, 64 и 96 пикселей. Я описал правила масштабирования символов с сохранением пропорций, чтобы выбранная иконка одинаково использовалась в разных частях интерфейса.
Цвет букв и иконок пользователь не выбирает. Он определяется автоматически по фону: на светлом фоне используется чёрный символ, на тёмном — белый. Я описал эту логику для разработки, чтобы читаемость не зависела от выбранного пользователем цвета.
Я подготовил макеты для светлой и тёмной тем, десктопа, планшета и телефона. В мобильном варианте редактор работает как панель, а области выбора иконок увеличены для нажатия пальцем. При прокрутке предпросмотр остаётся закреплённым — выбранная обложка остаётся видна во время настройки.
32 px64 px96 pxРешение выпущено в полном объёме
Все предусмотренные сценарии реализованы и выпущены: автоматическая обложка, выбор цвета и иконки, загрузка, перетаскивание, кадрирование и последующее редактирование.
Я сопровождал реализацию и вместе с разработчиками дорабатывал решение по результатам проверок на тестовых порталах. Загрузку и кадрирование изображения также проработал для фотографии профиля пользователя.
В результате пользователь может придать комнате собственное оформление без готовой картинки. Автоматический вариант появляется при вводе названия, а более подробная настройка доступна при создании комнаты и после него.
