Сайдпейдж SidePage

Сайдпейдж — это модальная боковая панель, которая выезжает от края экрана и занимает всю высоту страницы.

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

Преимущества сайдпейджа перед модальным окном:

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

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

Сайдпейдж не может заменить полноценную страницу, потому что ограничен по ширине.

Сайдпейдж выезжает от края страницы и занимает всю высоту окна. Есть два вида сайдпейджей: с блокировкой основной страницы и без.

Основная страница затемняется. Так фокус внимания перемещается на сайдпейдж и понятно, что действия на основной странице недоступны.

Все действия и элементы на основной странице остаются активными. Выделяется элемент, который вызвал сайдпейдж.

Сайдпейдж состоит из:

• Шапки — заголовка и крестика,
• Контента,
• Подвала — терминальной зоны с кнопками. Это необязательный элемент сайдпейджа.

Заголовок должен быть кратким (1 — 3 слова) и являться названием процесса или объекта.

Неправильно

Правильно

Чаще всего в сайдпейдже есть минимум два действия:

1. Целевое действие — сохраняет проделанную работу или подтверждает вызванную ранее команду.
2. Действие отмены или закрытия — закрывает сайдпейдж, не выполняя целевое действие.

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

Виджет поддержки не должен наезжать на кнопки в сайдпейдже. Допускается 2 варианта: кнопки подряд или правая кнопка с отступом — дизайнер сам решает, какой вариант использовать в зависимости от действий.

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

В правом верхнем углу сайдпейджа расположен крестик для закрытия — делает то же самое, что действие отмены или закрытия.

Также сайдпейдж закрывается по нажатию клавиши Esc на клавиатуре.

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

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

Не делайте сайдпейджи исчезающими по таймауту.

Сайдпейдж «прилеплен» к краю страницы и занимает всю высоту, ширина не меняется при ресайзе окна.

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

• Сайдпейдж с блокировкой страницы может перекрывать бо́льшую часть страницы. Рекомендуемая ширина — 800 px.
• Сайдпейдж без блокировки страницы не должен закрывать значимую часть страницы, чтобы можно было выбирать другие элементы списка или таблицы. Рекомендуемая ширина такого сайдпейджа в сервисах Контура — 500 px.

В сайдпейджах с блокировкой страницы скроллится только контент сайдпейджа.

Без блокировки страницы скроллятся и сайдпейдж, и страница. Скроллится только та область, над которой находится курсор.

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

Какие части должны залипать, остаётся на усмотрение дизайнера.

Подробнее — в гайде «Залипающие элементы».

Из сайдпейджа можно вызвать другой сайдпейдж.

Используйте наложение, если из вызванного сайдпейджа нужно вернуться к родительскому. При открытии родительский сайдпейдж сдвигается на 16 px влево, новый накладывается поверх.

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

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

Не делайте большую вложенность — чем меньше, тем лучше.

Наложения модального окна на сайдпейдж лучше избегать.

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

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

Неправильно

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

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

Клавиша Esc закрывает сайдпейдж.