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

Что должен решать экран сверки
Экран сверки нужен для одного практического вопроса: когда два источника расходятся, какую версию мы будем признавать и использовать в работе?
Обычно сравнивают «источник» (банковская лента, платёжный процессор, POS, субведомость, складская система) и «учёт» (часто общий журнал). Экран — это не просто просмотр различий. Это место, где принимают и фиксируют решения.
Несоответствия происходят по банальным причинам, и в этом есть хорошая новость: UI может их предвидеть. Вы увидите различия из‑за задержек проводок, отсутствующих позиций, дублей, проблем с маппингом (неправильный счёт, клиент, валюта) и частичных совпадений, когда одна запись с одной стороны равна нескольким записям с другой.
Задача пользователя на хорошем экране сверки — перевести каждое исключение из состояния «непонятно» в «решено» без догадок. Эта работа обычно разбивается на несколько повторяемых шагов:
- Подтвердить, это та же транзакция или нет, используя достаточный контекст для быстрого решения
- Выбрать исход действия: сопоставить, разделить, объединить, списать или пометить как ожидающее
- Применить корректировку в нужной системе с указанием причины
- Оставить понятную заметку, чтобы следующий человек понимал, почему так сделали
Наибольший риск — не в неправильном сопоставлении, а в тихих изменениях. Если экран позволяет править значения без показа того, что изменилось, кто изменил и какие записи затронуты, вы теряете доверие и тратите время на аудитах.
Проектируйте экран так, чтобы каждое решение давало прослеживаемый результат: значения до/после, связанные исходные записи, отметка времени, пользователь и код причины. Если требуются согласования, UI должен явно показывать состояние «нуждается в согласовании», чтобы работа не терялась в серой зоне.
Если вы потом будете собирать это в инструменте вроде AppMaster, рассматривайте аудиторский след как полноценную модель данных, а не как побочную заметку. Ваш будущий месячный закрывающий период скажет вам спасибо.
Простая структура страницы, которая масштабируется
Экран сверки лучше работает, когда он ощущается как спокойный чеклист, даже если данные грязные. Самый простой путь — чёткая трёхчастная компоновка: Сводка сверху, Очередь работы слева (или по центру) и Детали справа.
Сводка отвечает на вопрос «мы близки к балансу?». Покажите итоги для каждой стороны (количество и сумма), затем дельту в обеих единицах. Люди должны одним взглядом понимать, отстают ли они на 3 позиции, на $124.18 или и то, и другое. Если возможно, добавьте небольшой тренд вроде «дельта улучшилась с последнего сохранения», чтобы рецензенты видели, что их работа сдвигает стрелку.
Очередь работы — место масштабирования. Держите поиск и фильтры всегда видимыми, чтобы пользователям не приходилось открывать лишние панели для базовой работы. Простого списка строк с индикатором статуса (New, In review, Corrected, Needs approval) часто достаточно.
Вот чистая структура, часто используемая на экранах сверки:
- Панель сводки: итоги слева, итоги справа, дельта по центру
- Управление временным окном: по умолчанию «Last 7 days» с быстрым расширением на 30/90/выборочный
- Всегда видимое поле поиска и ключевые фильтры (статус, диапазон сумм, источник)
- Список очереди с сортировкой и ярлыком «следующий элемент»
- Панель деталей со сравнением бок о бок и кнопками действий
По умолчанию показывайте наименьшее полезное временное окно. Например, начните с последних 7 дней, чтобы очередь была короткой и быстрой, и дайте пользователю расширить период одним кликом, когда потребуется полный месяц. Это уменьшает шум и помогает новым рецензентам обрести уверенность.
Если вы реализуете это в AppMaster, держите макет консистентным между вебом и мобильными: те же три зоны, просто в стеке на маленьких экранах, чтобы обучение и мышечная память переносились.
Как показывать несоответствия, чтобы люди могли быстро решать
Хороший вид несоответствия отвечает на три вопроса за секунды: что не так, насколько это серьёзно и что делать дальше. Если экран заставляет открывать три модальных окна только чтобы понять разницу, люди будут медлить, гадать или оставлять заметки «разобраться позже».
Начните с небольшого, последовательного набора типов несоответствий по всему продукту. Эта согласованность важнее идеальной формулировки, потому что рецензенты вырабатывают мышечную память. Большинство команд покрывает 90% случаев четырьмя метками: отсутствующая позиция, лишняя позиция, сумма не совпадает и дата не совпадает. Разместите тип в начале строки, чтобы люди не искали его.
Важность должна быть очевидной, но спокойной. Предпочитайте простые метки вроде «High», «Medium», «Low» (или «Блокирует закрытие», «Нужна проверка», «К сведению») с сдержанной цветовой подсветкой. Используйте цвет как подсказку, а не как единственный носитель информации. Ярко‑красный оставьте для случаев, которые действительно останавливают закрытие периода, а всё остальное держите нейтральным.
Рецензентам также нужен «почему», но без внутреннего жаргона. Покажите короткую строку причины, описывающую, что нашла система, например «Matched by reference, amount differs» или «No ledger entry found for bank transaction». Если задействованы правила, показывайте имя правила только если это помогает, и включайте ключевые различия полей в человеческом виде.
Держите видны как исходные, так и нормализованные значения. Нормализация (округление, конвертация валют, обрезка пробелов, изменение часовых поясов) — обычное дело, и сокрытие этих преобразований вызывает недоверие. Практичная раскладка — двухколоночное сравнение внутри каждой строки несоответствия:
- Источник A (raw): как импортировано (банк, процессор, файл)
- Источник B (raw): как импортировано (учёт, ERP, субведомость)
- Normalized: значения, использованные для сопоставления, с маленькой «i»-подсказкой, объясняющей трансформацию
- Delta: одно вычисленное отличие (например, "+$12.30" или "2 дня")
Если вы строите это в AppMaster, моделируйте тип несоответствия и уровень важности как enum в слое данных, чтобы списки, фильтры и панели деталей были последовательны по всему рабочему процессу.
Паттерны очереди для обзора больших объёмов
Когда объёмы высоки, очередь сверки должна вести себя больше как входящая почта, чем как отчёт. Люди должны понимать каждую строку за секунду, решать, что дальше, и продолжать работать, не теряя контекст.
Начните с колонок, которые отвечают «что это» прежде чем «что это значит». По возможности оставьте на первом экране только самое важное и выносите детали в боковую панель.
- Ссылка или ID (bank txn ID, journal ID)
- Дата и период
- Сумма и валюта
- Контрагент или счёт
- Статус (open, in review, waiting approval, resolved)
Сортировка должна соответствовать логике рецензентов. Хороший дефолт — «сначала по наибольшей дельте», потому что это быстро выводит на поверхность самый большой риск. Добавьте быстрые переключатели для «новые», «старейшие в ожидании» и «только что затронутые», чтобы передача задач была простой.
Сохранённые представления — то, что позволяет очереди масштабироваться по ролям. Аналитику может быть нужен вид «open + auto-match failed», согласующему — «только ожидает согласования», аудитору — «resolved в этом периоде с ручными правками». Делайте представления очевидными и называйте их простым языком, чтобы люди не вели свои таблицы.
Массовый выбор может очень экономить время, но только если есть предохранители. Ясно показывайте лимиты (например, максимум 50 элементов), какие поля будут изменены, и предупреждайте, когда действие необратимо. Простой шаг предварительного просмотра предотвращает массовые ошибки.
Индикаторы прогресса выравнивают команду. Показывайте счётчики по состоянию вверху и делайте их кликабельными фильтрами. Ещё лучше — показывайте владельца (unassigned vs assigned to me), чтобы работа не дублировалась.
Эти паттерны легко реализовать визуальными инструментами вроде AppMaster: таблица очереди, сохранённые фильтры по ролям и статусные чипы дают финансовым командам скорость без потери контроля.
Пошаговый рабочий процесс, уменьшающий доработки
Хороший поток сверки — это не про визуальные эффекты, а про то, чтобы люди не прыгали по экрану. Цель экрана сверки проста: провести рецензента от «что изменилось?» к «что мы с этим сделали?» не теряя контекста.
Начните с того, чтобы Шаг 1 был неизбежным: выберите период сверки и точные источники данных. Разместите эти контролы вверху страницы и сохраняйте видимыми после выбора (период, источник A, источник B, время последнего обновления). Большинство переделок происходит, когда кто‑то сверяет несоответствия по неправильной выгрузке.
Шаг 2 — 30‑секундный обзор. Покажите общую дельту, количество несопоставленных позиций и топ‑категории несоответствий (отсутствующая транзакция, разница в сумме, смещение по дате, дубли). Каждая категория должна быть кликабельной и фильтровать список задач.
Шаг 3 — где важна скорость: откройте элемент и сравните поля бок о бок. Выравнивайте ключевые поля (сумма, дата, ссылка, контрагент, валюта, счёт) и показывайте доказательства прямо там: строка импорта, запись учёта и любые вложенные документы. Не прячьте доказательства за лишними вкладками.
Шаг 4 — момент решения. UI должен предложить небольшой набор действий с понятными результатами:
- Match: связать две записи и заблокировать пару
- Split: распределить одну запись на несколько строк с контролем сумм
- Write-off: создать корректировочную проводку с обязательной причиной
- Escalate: назначить роль или человека с сроком выполнения
- Ignore: пометить как нереконсилируемое с обязательной заметкой
Шаг 5 — ответственность. Требуйте короткой заметки для всего, кроме чистого сопоставления, и запускайте согласование только по правилам (например, списания свыше порога или корректировки закрытой субведомости). Покажите, кто будет утверждать, прежде чем рецензент отправит, чтобы не было догадок.
Шаг 6 замыкает цикл. После отправки подтверждайте, что изменилось («Matched to Ledger #48321», «Adjustment drafted») и сразу показывайте аудиторскую запись: отметку времени, пользователя, действие, поля до/после и статус согласования. Рецензент не должен сомневаться, что его клик сработал.
Инструменты корректировки с предохранителями
Именно в корректировках проявляются ошибки и риск мошенничества, поэтому UI должен делать безопасные действия самыми простыми. Хорошее правило: позволяйте продвигать работу дальше без изменения балансов сначала, и требуйте большего намерения, когда баланс изменяется.
Начните с «безопасных» действий, которые не меняют сальдо. Они уменьшают бесконечные пересылки и делают решения видимыми:
- Связать записи (строка банка с записью учёта) без правки ни одной стороны
- Добавить аннотацию, объясняющую наблюдаемое и требуемое
- Запросить информацию у владельца (отсутствующий счёт, неверная ссылка, неясный контрагент)
- Пометить для проверки, если что‑то кажется подозрительным
- Отложить элемент с ясной причиной
Когда нужно создать корректировку, используйте направляемую форму вместо свободного текста. Форма не позволит забыть базовые поля и облегчит последующую проверку. Это также предотвращает «быстрые починки», которые породят проблемы на закрытии месяца.
Деструктивные действия держите за правами и подтверждением. Например, «Удалить корректировку» должно быть редким, ролевым и требовать причину. Предпочитайте создание новой записи вместо редактирования истории.
Валидация должна происходить до сохранения, и сообщение должно объяснять как исправить ошибку. Простой чеклист работает хорошо:
- Обязательные поля: код причины, сумма, дата проводки
- Балансовые проверки: корректировка приводит дельту в допустимые пределы
- Вложения при необходимости: скриншот, письмо поставщика, сообщение банка
- Политики: тип корректировки разрешён для этого счёта и периода
- Проверка дублей: аналогичная корректировка уже не существует для той же ссылки
Сделайте поведение отмены явным. Пользователь должен понимать, можно ли заново открыть элемент, отменить корректировку или создать противофиксацию. Например, рецензент связал не ту банковскую строку, затем понял, что совпадение принадлежит другому платёжному документу. Ясная «Отвязать» (с заметкой) безопаснее чем правка оригинальной транзакции и сохраняет историю того, что и почему делалось.
Аудиторский след и согласования без тормозов
Аудиторский след помогает только если быстро отвечает на вопросы: кто трогал этот элемент, что изменилось и зачем. Трюк — показывать его по требованию, но не мешать нормальному обзору.
Делайте действия читаемыми, а не просто хранимыми
Добавьте компактную шкалу времени в панели детализации элемента. Каждая запись должна показывать актёра, отметку времени, действие и краткое описание изменения. Держите формат читаемым и последовательным, чтобы рецензент мог мгновенно заметить последнее значимое событие (например «исправлена сумма» или «утверждено»).
Когда поле исправляют, храните и показывайте значение до и после. Показывайте их в строке временной шкалы (например: "Bank amount: 1,250.00 -> 1,205.00") и в истории изменения поля при открытии «Детали изменений». Это избегает распространённой ошибки, когда сохраняется только финальное значение.
Согласования, которые ощущаются частью процесса
Для рискованных действий (списание, ручная правка, принудительное сопоставление) требуйте причину. Используйте короткий выпадающий список плюс опциональную заметку, чтобы рецензент мог быстро двигаться, но оставить понятное объяснение.
Разделение ролей (maker‑checker) лучше реализовать через состояния, а не сообщения. Используйте простые состояния: Draft, Submitted, Needs info, Approved, Rejected, Escalated и показывайте текущее состояние рядом с заголовком элемента. Держите UI согласований компактным:
- Одно основное действие (Submit или Approve) в зависимости от роли
- Одно вторичное действие (Request info или Reject)
- Обязательная причина, когда это требуется политикой
- Назначение/очередь для эскалаций
- Ясная надпись «что будет дальше» (например: «Корректировка будет проведена после утверждения»)
Наконец, храните доказательства прикреплёнными к самому элементу сверки: файлы, ссылки на письма или чаты, внешние идентификаторы и заметки. Рецензент не должен рыться в других системах, чтобы обосновать решение. В AppMaster это удобно моделируется как запись «Reconciliation Item» с связанными «Evidence» и «Approval Events», так что UI остаётся простым, а данные — полными.
Краевые случаи, ломающие наивные дизайны
Большинство экранов сверки работают до тех пор, пока не приходит реальный набор данных. Точки отказа предсказуемы, поэтому полезно проектировать под них заранее.
Частичные совпадения — первая ловушка. Простая таблица один‑к‑одному рушится, когда один банковский перевод покрывает три счёта или пять расчётов по картам свёрнуты в одну проводку. Обращайтесь с такими случаями как с первоклассными объектами: позволяйте создавать сгруппированное совпадение с видимой суммой, индикатором нераспределённой суммы и ясной меткой группы (например: "3 items -> 1 posting"). Делайте группу раскрываемой, чтобы можно было подтвердить состав без потери сводки.
Дубли — вторая ловушка. Люди часто «фиксируют» дубли, сопоставляя не те элементы. Добавляйте мягкие подсказки «возможно дубликат» на основе суммы, окна по дате и контрагента, но делайте это безопасно: рецензент должен открыть сравнение, выбрать правильную запись и пометить другую как дубликат с причиной. Если предлагаете слияние, делайте его обратимым и всегда сохраняйте оригинальные ID.
Различия в валюте и округлениях — обычное дело и не должны выглядеть как ошибка. Показывайте точный расчёт (курс, комиссия, округление) и разрешайте настраиваемые допуски (по валюте, счёту или типу транзакции). UI должен отличать «в пределах допуска» от «требует действия», а не просто «matched/unmatched».
Поздние проводки могут путать закрытие периода. Когда элемент разрешается после закрытия, не переписывайте историю. Показывайте его как «resolved after close» с датой решения и требуйте заметку или согласование, если это меняет цифры закрытого периода.
Наконец, сбои и пропавшие фиды случаются. Добавьте статусы, которые упрощают повторный просмотр:
- «Feed delayed» с ожидаемым следующим запуском
- «Missing source record» с указанием, к кому обращаться
- «Manually verified» с рецензентом и отметкой времени
- «Needs re-import» с действием повторной попытки
Если вы строите это в AppMaster, моделируйте эти состояния в Data Designer и ограничивайте переходы через Business Process Editor, чтобы обработка крайних случаев оставалась последовательной и аудируемой.
Пример сценария: сверка банк vs книга в конце месяца
Конец месяца. Выписка банка показывает $248,930.12 активности за апрель, а внутренний учёт — $249,105.12. Экран сверки открывается со Сводкой, которая быстро отвечает на три вопроса: сколько элементов совпало, сколько не совпало и сколько денег осталось нерешённым.
На панели Сводки пользователь видит: 1,284 совпавших позиций, 3 несоответствия и нерешённую разницу $175.00. Маленький вызов показывает «2 элемента требуют действий», потому что одно несоответствие носит информационный характер.
Таблица несоответствий группирует проблемы по типу и делает следующий шаг очевидным:
- Банковская комиссия не учтена: $25.00 (Требуется действие)
- Дублированный платёж в учёте: $150.00 (Требуется действие)
- Задержка по времени: $0.00 разницы (Инфо, ожидает клиринга)
При клике по строке справа открываются Детали элемента. Для комиссии $25.00 Детали показывают банковскую строку (дата, описание, сумма) рядом с учётом (соответствующей записи не найдено) плюс короткое предложенное решение: «Создать расход: Банковские комиссии». Пользователь выбирает причину корректировки, добавляет заметку и прикрепляет строку выписки как доказательство.
Для дублированного платежа $150.00 Детали показывают две проводки в учёте, сопоставленные с одним банковским платёжом. Пользователь помечает одну проводку как дубликат, выбирает «Окторректировать проведение» и экран создаёт проект корректирующей записи. Поскольку это меняет книги, запись уходит на согласование: статус становится «Pending approval», и это несоответствие перестаёт считаться «Непроверенным».
Задержка по времени выглядит иначе. Банк показывает инициированный платёж 30 апреля, но он клирится 1 мая. Пользователь ставит состояние решения «Timing difference», указывает ожидаемую дату клиринга, и элемент переносится в «Открытые переносы» на следующий период.
Позже аудитор должен иметь возможность подтвердить без догадок:
- Кто проверял каждое несоответствие, кто это утвердил и когда
- Значения до и после для любых отредактированных или сторнированных проводок
- Код причины, заметки и доказательства, связанные со статусом решения
- Что апрель был закрыт только с утверждёнными корректировками, а переносы явно помечены
Быстрые проверки перед закрытием периода сверки
Закрытие периода — момент, когда мелкие недоработки превращаются в большие проблемы. Хороший чеклист перед закрытием должен быть видим на экране, его легко проверить и его тяжело пропустить по случайности.
Начните с итогов. Показывайте и количество, и сумму по каждому источнику за период и делайте очевидным, какая цифра вызывает расхождение (например, «3 позиции, $1,240.00» с каждой стороны). Если суммы сходятся, но не совпадает количество, явно укажите это, чтобы рецензенты не подумали, что всё готово.
Перед закрытием каждое исключение должно иметь финальный статус и понятную причину, которую сможет понять другой человек через несколько недель. «Resolved» недостаточно без объяснения типа «дублированный платёж сторнирован» или «разница по времени, закроется в следующем периоде». Это один из паттернов, который предотвращает повторную работу.
Используйте короткий пред‑закрывающий чеклист и блокируйте закрытие, если что‑то не выполнено:
- Итоги совпадают для периода (количества и суммы по источникам)
- Каждое исключение имеет финальный статус (resolved, accepted, deferred) и понятную причину
- Нет ожидающих согласований для элементов в периоде
- Проведена выборочная проверка: 5 resolved элементов имеют доказательства и ясные заметки
- Доступен снимок/экспорт, позволяющий воспроизвести состояние периода позже
Выборочная проверка проста, но мощна. Откройте пять случайных resolved элементов и проверьте три вещи: доказательства (строка выписки, квитанция, системный лог), действие корректировки (что изменилось) и заметку (почему это было корректно). Если что‑то пропущено, ваш интерфейс приучает людей к плохой привычке.
Наконец, делайте период воспроизводимым. Предлагайте «снимок», который замораживает ключевые итоги, статусы исключений, заметки и согласования. В AppMaster это может быть отдельная запись «Period Close», созданная Business Process, чтобы аудиторский вид позже совпадал с тем, что видели рецензенты при закрытии.
Следующие шаги: как превратить эти паттерны в рабочий экран
Начните с данных, а не с макета. Экран сверки становится грязным, когда система не может ясно объяснить, что такое запись и как она соотносится с другими. Определите небольшую модель, которую можно расширять: ваши исходные файлы/фиды, отдельные транзакции, группы совпадений, связывающие элементы, и корректировки, которые вы создаёте для устранения различий. Добавьте поля, нужные для проверки (сумма, валюта, даты, текст ссылки) и скучные, но критичные (статус, владелец, временные метки).
Далее защитите роли с самого начала. Большинству команд нужно как минимум три роли: аналитик, который может предлагать совпадения и корректировки; согласующий, который утверждает корректировки; и аудитор, который видит всё, но ничего не меняет. Если отложить права доступа, придётся переделывать базовые действия (редактировать, отменять, переоткрывать) при первой проверке контролей.
Затем прототипируйте три поверхности, которые двигают реальную работу:
- Очередь, показывающую, что требует внимания и почему (не сопоставлено, дисбаланс, ждёт согласования)
- Панель деталей, позволяющую быстро принимать решения (бок о бок, дельты, предложенные совпадения)
- Аудиторская лента, читающаяся как история (кто что сделал, когда и с какими значениями до/после)
Определяйте переходы статусов как правила, а не привычки. Например, группа не должна переходить в «Reconciled», пока оставшаяся разница не равна нулю (или не укладывается в допуск), пока не заполнены все обязательные поля и пока не завершены согласования. Всё же допускайте исключения, но требуйте код причины и комментарий, чтобы аудиторская история оставалась чистой.
Чтобы быстро собрать первую версию, используйте no‑code платформу вроде AppMaster: моделируйте базу данных в PostgreSQL‑поддерживаемом Data Designer, собирайте очередь и панели в веб‑UI билдёре и реализуйте правила рабочего процесса в визуальном Business Process Editor. Держите первую версию узкой (одна пара источников, несколько статусов), протестируйте на реальных случаях закрытия месяца и итеративно улучшайте по тем несоответствиям, которые реально встречаются в вашей команде.


