Паттерн Интернет-Банк

Является адаптацией мобильного приложения для использования на настольных устройствах. При проектировании веб-версии сохранены основные принципы мобильной архитектуры: структура экранов, логика навигации, расположение ключевых элементов и пользовательские сценарии. Это обеспечивает единообразный пользовательский опыт независимо от платформы.

Взаимодействие

Для повышения удобства работы на компьютере реализованы дополнительные сценарии взаимодействия, характерные для Desktop устройств. Интерфейс учитывает управление мышью и клавиатурой, поддержку состояний hover и focus, изменение размеров окна браузера, а также особенности работы на больших экранах.

Шаблон "Интернет-банка"

https://www.loom.com/share/bb28b6deed6341eab47f4102125e2986

Общие правила

Веб интернет-банка состоит из трех основных областей:

• Левая навигационная панель (Sidebar) — 316 px


• Основная область контента — 558 px


• Правая рекламная область (Banner) — 316 px


Все три области выравниваются по центру страницы и образуют единую рабочую область

При ширине окна браузера 1440 px 
и более отображаются все три области

Поведение при ширине экрана менее 1440 px

• При уменьшении ширины окна до 1280 px
и меньше правая рекламная область скрывается


• На странице остается навигационная панель 
и основная область контента

• Ширина оставшихся областей не изменяется. Это позволяет сохранить привычную структуру интерфейса и избежать перерасчета размеров основных компонентов

Поведение при ширине экрана более 1440 px

• При увеличении ширины окна браузера рабочая область не растягивается


• Размеры рабочей области остаются фиксированными

• Дополнительное пространство распределяется по краям страницы за счет увеличения ширины фоновой области


• Контент всегда остается визуально центрированным относительно окна браузера

Поведение Navigation Bar

Компонент Navigation Bar имеет специальный вариант для веб-версии страницы. В компонентах он указывается свойством (Props) is Web = True. Теперь у компонента Navigation Bar будет версия под Web с увеличенной высотой, для компенсации отступа под плавное округление компонента.

https://www.loom.com/embed/d604402e1a6e499e9120a586798732d9

Внутри: — новая структура компонента — параметры is Web = True — как прокинуть свойство is Web из брекпоинтов Astra Fintech UI для авто переключения в шаблоне Template Internet Bank

Фиксированный навигационная панель

• Навигационная панель фиксируется у верхней границы окна и остается доступным на протяжении всего сценария


• Баннерная зона также фиксируется у верхней границы окна


• Прокручивается только основная рабочая область контента


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

Интерфейс учитывает

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


• Bottom Sheet дополнен привычными для Desktop способами закрытия: кнопкой закрытия, клавишей Esc и, при необходимости, закрытием по клику вне области компонента


• Для компонентов используются состояния hover и focus, отсутствующие в мобильной версии


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

Навигационные стрелки

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

Особенности

• Стрелки отображаются только при наличии скрытого контента.


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


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


• Если дальнейшая прокрутка в выбранном направлении невозможна, соответствующая стрелка скрывается

Важно

• Элементы навигационных стрелок располагаются внутри границ контейнера 
(по 8 пх с каждого края) и не выходят за его пределы, чтобы не нарушать структуру макета и не перекрывать соседние компоненты


• В интернет-банке используются два типа стрелок, выбор размера зависит от визуальной значимости карусели и роли элемента на странице

Правило выбора размера

Размер навигационных стрелок определяется уровнем элемента в иерархии интерфейса.


• Большие стрелки используются для прокрутки основного содержимого виджета.


• Маленькие стрелки используются для прокрутки вложенного содержимого внутри этого виджета.


Большая стрелка

• Размер навигационной стрелки Medium

• Используются для навигации в основных горизонтальных каруселях, которые являются самостоятельными блоками страницы, например: виджет сторис, курс валют
и металлов


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

Маленькая стрелка

• Размер навигационной стрелки Small

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


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

Bottom Sheet

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

Интерфейс учитывает

• В веб версии интернет-банка Bottom Sheet сохраняет принципы взаимодействия мобильного приложения, но дополнительно адаптирован под особенности Desktop. Помимо привычного открытия снизу экрана, компонент поддерживает взаимодействие с помощью мыши и клавиатуры, дополнительные способы закрытия и состояния, характерные для веб-интерфейсов.


• Поддерживаются следующие способы закрытия компонента:


• кнопка действия «Закрыть», «Отмена», «Готово» итд

• клавиша Esc;

• клик вне области Bottom Sheet (пустоту)


• Компонент поддерживает состояния Hover и Focus для интерактивных элементов, а также полноценную навигацию с клавиатуры.

Общие правила

• Bottom Sheet открывается поверх текущей страницы и блокирует взаимодействие с фоновым содержимым


• После открытия фоновая область затемняется


• При открытом Bottom Sheet прокручивается только его содержимое. Фоновая страница остается неподвижной


• Пользователь всегда должен иметь понятный способ закрыть Bottom Sheet, за исключением сценариев, где закрытие временно запрещено (например, во время выполнения критической операции)


• Одновременно на экране допускается только один открытый Bottom Sheet. Не рекомендуется открывать Bottom Sheet поверх другого Bottom Sheet.

Сканирование

В мобильном приложении функции сканирования (QR-кодов, документов, реквизитов итд) являются естественным способом взаимодействия благодаря наличию встроенной камеры устройства.
 В веб-версии, данные сценарии не реализуются. Несмотря на техническую возможность получения доступа к веб-камере браузера, такой способ взаимодействия не соответствует привычным сценариям использования ПК
 При проектировании веб интерфейса предпочтение отдается действиям, характерным для работы на компьютере: загрузке файлов, копированию данных, ручному вводу

Причины отказа от сканирования

• Большинство пользователей взаимодействуют с интернет-банком с помощью компьютера, не имеющего постоянно доступной камеры


• Предоставление доступа к веб-камере требует дополнительного разрешения браузера, что усложняет путь


• Использование камеры через браузер не является привычным сценарием для большинства пользователей


• Аналогичные задачи быстрее и удобнее решаются другими способами

Важно

При адаптации мобильных сценариев для Веба не следует переносить элементы интерфейса, использование которых напрямую зависит от аппаратных возможностей мобильного устройства (например, камеры, датчики NFC), если для Веб существуют более привычные и эффективные способы выполнения той же задачи.