Status

Обновлено 30.05.2022

Status

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

Статусные экраны делятся на два типа:

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

Отличие ЕФС-workflow от экрана-конструктора

ЕФС-workflow — шторка динамическая, высота шторы может меняться в зависимости от настроек.

Конструктор (ЕРИБ / любой другой бэк) — шторка фиксированная, заголовочная секция максимально зажата.

Детальный экран в уведомленияхuvedomleniyah)

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

Для iOS: SBOL Design Department → NOVA SBOL Libraries → 00・iOS・UI Templates → Status Для Android: SBOL Design Department → NOVA SBOL Libraries → 00・Android・UI Templates → Status

Шапка

Шапка (или заголовочная секция) — это блок с самой важной информацией. Шапка состоит из AppBar, статусного блока и действий.

Шапка: AppBar

В AppBar пишется статус операции.

Результирующий экран — имеет внизу кнопку «Вернуться на главный», в AppBar нет стрелки назад.

Детальный экран — без кнопки внизу. Вместо нее в AppBar есть стрелка назад, ведущая обратно в «Историю».

Шапка: Статусный блок

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

Избегайте избыточной детализации в описании статуса, достаточно одного позитивного посыла «Операция выполнена», всё остальное старайтесь оптимизировать. Технические ограничения Title — 2 строки, Subtitle — 3 строки.

Придерживайтесь варианта, в котором статус и подробности «схлопнуты» в один текст. Текст в статусном блоке не может состоять из сложной структуры, например, из суммы, статуса и подробностей одновременно.

Заголовок в аппбаре пишется в том случае, если ваша операция финансовая. Если операция не финансовая, наличие заголовка в аппбаре опционально.

Оптимизация текста

Оптимизация структуры

Статус и подробности схлопнуты в один текст

У переводов и POS-операций (покупка товаров и услуг) в AppBar указывается имя клиента или название компании. Разводы от иконки окрашиваются в основной цвет картинки. В коде это происходит автоматически: алгоритм выбирает средний цвет картинки и подставляет цвет с прозрачностью с фоновые разводы.

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

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

Шапка: Действия

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

Цвет иконок — зелёный. В карточках используем только линейные иконки. Текст и иконки перекрашивать нельзя.

Если действие состоит из 2-х слов, то второе переносится на новую строку. Если слов 3, переносить короткие слова. Предлоги и союзы надо убирать на новую строку.

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

Если действие всего одно, кнопка остается в своей стандартной вёрстке.

Прогрузка первичных источников данных закрывается спиннером. Для подгрузки вторичных источников данных используются шиммеры (если бэк ЕРИБ, ЕФС REST или любой другой, кроме ЕФС-workflow).

Шторка

На ЕФС-workflow вы можете сами выбрать, сколько ячеек показывать в шторке (можно больше одной, не считая «подробности», но не больше трёх, они не поместятся на экран). Пример: для сценария «Перевод» - сверху всегда отображается ресурсныя ячейка, т.к. она являются ключевым реквизитом.

Результирующий — важен статус операции. На результирующем экране штора поднимается на минимально возможную высоту, так происходит из-за ограничений. Она показывает ключевую информацию по действию. Если пользователь захочет, он может «вытянуть» ее.

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

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

Поднятие шторки на экране

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

Баннер

Над заголовком «Подробности» может располагаться баннер:

баннер ошибки,
рекламный — команды не влияют на его появление.

Нулевая секция

Перед заголовком «Подробности» может идти секция со справочной информацией или описание дальнейших действий. Блок может использоваться без каких-либо дополнительных деталей.

Если вам нужно использовать несколько нулевых секций, их можно оформить или разметкой, или через line divider.

Ячейки

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

Важные действия

Это действия с самым высоким приоритетом. По завершению операции на экране появляется кнопка «Вернуться на главный». Если операция не выполнилась, мы показываем кнопку «Повторить» и дополнительную кнопку «Вернуться на главный».

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