Сайдпейдж Sidepage

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

Когда использовать

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

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

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

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

Описание работы

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

Сайдпейдж с блокировкой страницы

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

Сайдпейдж без блокировки страницы

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

Содержание

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

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

Заголовок

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

Действия

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

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

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

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

Закрытие сайдпейджа

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

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

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

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

Прокрутка

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

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

Залипание

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

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

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

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

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

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

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

Наложение сайдпейджей

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

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

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

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

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

Наложение лайтбокса на сайдпейдж

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

Наложение сайдпейджа на лайтбокс

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

Фокус и работа с клавиатурой

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

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

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

Дизайн

Заголовок Segoe UI Normal 22 px

Терминальная плашка #E5E5E5

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