Проектирование системы управления цифровыми активами Picvario
Picvario — это DAM-платформа для организаций с большим количеством цифровых материалов (фото, видео, аудио и другие), где требуется гибкая система управления мета-данными, распознование лиц и объектов, умный и быстрый поиск.
Время:
Декабрь 2021 — Май 2023
Сайт:
picvario.ru
Совместно с:
Smartex-it
Моя роль
Работа над продуктом была долгосрочной, с редизайном текущего функционала и проектированием новых сценариев / фич. Я в качестве дизайнера интерфейса совместно с арт-директором.
Лента активов
Это главная страница приложения, на которой пользователи могут просматривать и управлять своими цифровыми активами. Справа от ленты находится сайдбар для управления метаданными, где пользователи могут видеть список тегов, дату создания и другую мета-информацию.
Лента активов до / после
Мы полностью переосмыслили основной сайдбар справа. Основное изменение, это вынос разделов свернутых аккордеонами — в фиксированные иконки, теперь при скролле открытого раздела всегда есть возможность в любой момент переключаться на другой раздел.

Также я вынес заголовки свойств (title, UUID, Descriptions и т. д.) над их значениями, что позволило существенно уменьшить скролл.

Были изменения и в самой ленте:
— Сократили расстояния между плитками, дав больше места контенту
— Добавили новые разделы над плитками для быстрой фильтрации
— Внесли изменения в верстку внутри открытого медиа-актива и добавили новые действия с ним
Вид списка
Модальный режим / Содержание актива
Ресайз секций
Добавили полноэкранный режим для PDF-файлов
В полноэкранном режиме пользователи могут просматривать многостраничные документы и искать / навигировать по тексту внутри них.
PDF с поиском по тексту внутри документа и содержанием
JPG
Если открыть файл в браузере не получилось – показываем предложение скачать
Для видео-файлов добавили мета-разметку с привязкой к таймингам и объектам / персонам.
Разделы сайдбара
В правой части экрана сайдбар отвечает за управление выбранным активом: изменение метаданных, настройка связей с другими активами, версионность, комментирование и т. д.
Горячие клавиши
Хоткеи для мака полный список
В инпутах (поиск) и в тултипы добавлены комбинации горячих клавиш
Уведомления
Добавили модуль уведомлений для командной работы
Импорт актива
В Picvario есть несколько способов импортировать ваши цифровые активы в приложение. Вы можете загрузить файлы напрямую из приложения, импортировать их из облачных сервисов или использовать наш API для более автоматизированных процессов.

При загрузке актива вы можете задать метаданные, такие как теги, название, дата создания и описание. Вы также можете выбрать, к какой коллекции отнести актив.
Фильтрация активов
Агент MacOS для функционала check-in / check-out актива
Мы разработали функционал check-in/check-out актива с помощью агента MacOS, который позволяет пользователям работать с активами в автономном режиме, сохраняя все изменения локально. Агент MacOS синхронизирует изменения с Picvario, когда пользователь выгружает активы (автоматически или вручную).
Настройки (админка)
  • Настройка уведомлений и их типов
  • Настройка доступа и прав пользователей в приложении
  • Оплата
  • Хранилища
  • И т.д.
Конструктор сайта
Для каждого корпоративного клиента Picvario есть встроенная возможность за 5 минут сгенерировать простую страничку на основе контента из пространства пользователя. Это удобно для фотографов, стоков и других поставщиков контента.
1
Вид для пользователя
Вид для админа во время конструирования
Добавление нового блока
Организация файлов и компонентов в Figma
Структура и менеджмент файлов в Figma для проекта Picvario организованы следующим образом:
  • Каждый модуль системы (например, лента активов, полноэкранный режим, разделы сайдбара и т. д.) имеет свой отдельный файл, где хранятся все макеты и компоненты, связанные с этим модулем.
  • В каждом файле макета все элементы структурированы по секциям и подписаны комментариями, что облегчает навигацию и понимание структуры.
1
Каждый модуль в системе имеет свой отдельный файл
1
Адаптив и Auto layout
1
Каждый шаг подробно показан и подписан комментариями к макетам. Все структурировано по секциям.
1
Компоненты в Figma