Требования к дизайну виджетов расширений

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

Консистентный внешний вид — то, чего придерживаются дизайнеры YCLIENTS и то, что ожидается от сторонних разработчиков, которые хотят интегрироваться в продукт.

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

Расположение и размеры

Виджет встраивается в боковую панель журнала записи, которая выезжает справа.

• Ширина — 375 пикселей.
• Высота — ограничивается размером экрана.

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

Отступы

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

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

Подробное описание отступов можно найти здесь.

Типографика

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

Для единообразия стилей шрифта и размеров используйте правила типографики YCLIENTS.

Основной шрифт YCLIENTS — Inter. Он бесплатный и его можно найти в Figma.

Цвета и тени

Одним из основных инструментов управления вниманием пользователя является цвет. В YCLIENTS мы стараемся не использовать цвета для красоты, мы используем цвета, чтобы ненавязчиво помочь клиенту сделать то, что нужно — подчеркнуть важные моменты и помочь понять, что происходит на экране.

Не отвлекайте пользователя от основных действий ярким цветом элементов.

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

Если у вас есть свой акцентный цвет, который хорошо впишется в интерфейс YCLIENTS, то можете использовать его для кнопок, иконок.

Также вы можете дополнительно выделять элементы тенями, которые можно взять из нашей дизайн-системы.

Редполитика

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

Пустые состояния

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

Примеры заглушек:

• Status page — если продукт партнера недоступен.

В заглушках можно использовать:

• Примеры интерфейса, мокапы.
• Геометрические фигуры.
• 3D-иллюстрации/иконки.
• Инфографику.

Тробберы

Не хотелось бы их видеть в принципе в связи с тем, что виджет расширения должен работать быстро и обеспечивать наилучший пользовательский опыт 😎

Модерация

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

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

Чек-лист

Мы будем проверять макет на соответствие следующим требованиям:

⬜ Отступы:

• ⬜ Внешние отступы.
• ⬜ Отступы между элементами.

⬜ Типографика:

• ⬜ Шрифт.
• ⬜ Размер и стили текста.
• ⬜ Типографская иерархия.

⬜ Цвета и тени:

• ⬜ Цвет текста, фона, подложек, инпутов и других элементов.
• ⬜ Цвет акцентных элементов.

⬜ Редполитика:

• ⬜ Дата, время, числа и т. д.
• ⬜ Орфографические ошибки и пунктуация.

⬜ Пустые состояния.