Сайдпейдж SidePage

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

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

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

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

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

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

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

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

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

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

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

Чаще всего в сайдпейдже есть минимум два терминальных (закрывающих) действия:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

При залипании «шапки» размер шрифта заголовка уменьшается, крестик приподнимается. Заголовок пишем в одну строку, если что-то не влезло — обрезаем и ставим многоточие.

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

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

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

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

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

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

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

Неправильно

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

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

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

Заголовок набран Lab Grotesque K Regular 24px

Терминальная плашка отделена линией толщиной 1px и цветом  #E6E6E6

Когда «шапка» залипает, уменьшаем размер заголовка до 18 px. Кнопки без серой терминальной плашки тоже могут залипать. При прокрутке под ними появляется белая плашка.