Анализ UI-китов VK (часть 1)

Автор: Саша Окунев

Всегда интересно, как те проблемы, с которыми сталкиваешься в повседневной работе с дизайн-системой, решают команды в других компаниях. В этом посте рассмотрим, чем хвастается в своём Figma Community команда Вконтакте.

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

Что можно найти:

Всего на figma.com/@vk мы видим 7 библиотек и один плагин. Как и все либы в Комьюнити, их можно дублировать в своё фигма-пространство, публиковать в нём локально, исследовать или даже переиспользовать выложенные компоненты в своих проектах.

• VKUI Base Library — центральная либа, в которой содержатся 1800 иконок во всевозможных размерах, а также токены цветов для светлой и тёмной темы интерфейса. 🛠 🌈 🔤
• VKUI Color Palette — Несемантическая палитра для автогенерируемого файла palette.json. Он используется в приложении VK для iOS и Android. Предполагаю, что из неё дизанйеры берут цвета для семантической, которая находится в файле VK Base Library. 🌈
• Web Color Palette – Несемантическая палитра для веба. Нужна, пока цвета на вебе и в мобилках отличаются. В будущем планируют сделать единую палитру и тянуть цвета из Base. 🌈
• VKUI Web Library — либа с компонентами для сайта vk.com. Стили типографики на базе SF, а также минимальный набор из 24 типов компонентов. 🌍 🔤 💠
• VKUI iOS Library — яблочная либа. Стили типографики на базе того же SF, а также их версии для поддержки Dynamic Type для слабовидящих. 25 типов компонентов. 🍏 🔤 💠
• VKUI Android Library — вёдерная либа. Стили типографики на базе Roboto и 25 компонентов. 🤖 🔤 💠
• VK App for iPad — файл с примерами дизайна приложения для iPad. Ключевые экраны, когда какие компоненты использовать, где всплывают уведомления, как работает свайп для удаления в списках и всякое такое. Можно подсмотреть паттернов. 🍏 📘
• Плагин VKUI Toolkit — содержит единственную команду Prepare Icons, которая позволяет контурные версии иконок готовить к проду, конвертируя их в залитые для последующей публикации в VKUI Base Library. 🛠

Легенда:

🌈 палитры

🛠 иконки

🔤 типографика

💠 компоненты

🌍 веб

🍏 Apple

🤖 Android

📘 гайды

Связи в библиотеках

Иконки

Само исполнение иконок вполне на хорошем уровне. Любопытно, что иконки и токены собраны в одном файле, я считаю это архитектурной ошибкой. В перспективе это помешает интегрировать эту библиотеку в другие сервисы, поскольку у них могут быть свои палитры. Если какой-нибудь Delivery Club захочет оставить свою айдентику, он не сможет использовать библиотеку VK Base, потому что будут мешать ненужные токены цветов VK. Поэтому библиотеку иконок нужно отделять от библиотеки токенов.

Также бросилось в глаза огромное количество размеров: 12, 16, 20, 24, 28, 32, 36, 48, 56. Это решение я считаю неудачным. Такое обилие форматов приводит к тому, что одна и та же иконка теоретически может встретиться в 9 размерах. В Озоне количество размеров стремится к минимуму: 16, 24, 32, 72.

Палитры

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

Веб-версия использует семантическую палитру вперемешку с несемантической, что не круто. Многие компоненты имеют отвязанные стили. Оба подхода нормальны, поскольку поддержка тёмной темы на вебе не столь критична, как на мобильных. Напомню, что Apple может удалить приложение из App Store, если у него не будет поддержки тёмной темы. Но в идеальном мире и у веба тоже должна быть поддержка ночного режима и нужно использовать семантику.

Для переключения тем в макете дизайнеры VK используют плагин Appearance, который позволяет переключать нужную тему в один клик.

Стили типографики

Тут всё круто. Типографические системы хранятся в трёх местах и разделены по платформам: Web, iOS и Android. Уважение гайдам, все дела.

На вебе используется системный эпловский шрифт San Francisco, который доступен только на маках. Все остальным сайт открывается на Roboto.

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

Любопытно, что в iOS-библиотеке есть поддержка Dynamic Type: пользователи с плохим зрением могут регулировать размер шрифта, а дизайнеры могут тестировать, как будет вести себя интерфейс на любых значениях.

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

Конец первой части. Про сами компоненты библиотек поговорим в следующей.

Открыть канал

Я веду /designer — телеграм-канал о продуктовом дизайне и проектировании.