Интерфейс приложения: схема и экраны

1. Общая схема переходов между экранами

Ниже представлена общая блок-схема приложения CONBAT RTA WIZARD, демонстрирующая основные экраны и переходы между ними (включая действия пользователя на каждом этапе):

flowchart TD
    login[Экран входа] --> pin[Экран PIN-кода]
    pin --> main[Главное меню]
    main --> settings[Настройки]
    main --> news[Новости]
    main --> support[Поддержка]
    main --> autoFiles[Файлы АВТО]
    main --> ibpFiles[Файлы ИБП]
    autoFiles --> scan[Сканирование QR]
    ibpFiles --> scan
    scan --> result[Результат теста]
    %% Возможности на экране результата:
    result -- "Сохранить и выйти (АВТО)" --> autoFiles
    result -- "Сохранить и выйти (ИБП)" --> ibpFiles
    result -- "Сохранить и сканировать еще / Повторить" --> scan

Рис.1: Общая схема экранов и переходов. Пользователь проходит авторизацию, устанавливает PIN-код, после чего попадает в главное меню. Из главного меню доступны переходы к настройкам приложения, разделу новостей и поддержки, а также к основным режимам работы – «АВТО» и «ИБП» (режимы тестирования аккумуляторов). Выбрав режим, пользователь переходит к списку файлов тестов данного режима. В списке файлов можно инициировать сканирование нового теста (переход на экран сканирования QR-кода). После сканирования данных отображается экран с результатами теста и кнопками сохранения. При сохранении результаты добавляются в список файлов, а при выборе повторного сканирования – запускается новый цикл сканирования.

2. Экран авторизации

Элементы интерфейса:

• Поля ввода учетных данных: Email и Пароль (для входа в аккаунт).
• Кнопка «Войти» для отправки введенных данных.
• Возможный логотип или название приложения вверху экрана (идентификация приложения).

flowchart TB
subgraph LoginScreen["Экран входа"]
    direction TB
    email["Поле ввода Email"]
    password["Поле ввода пароля"]
    loginBtn["Кнопка «Войти»"]
end

Описание: При запуске приложения отображается экран авторизации, где пользователь вводит свои учетные данные и нажимает «Войти» для входа в систему. Если данные введены верно, происходит переход к следующему шагу – настройке PIN-кода. В противном случае пользователю может быть показано сообщение об ошибке (не показано на схеме).

3. Экран установки PIN-кода

Элементы интерфейса:

• Поле ввода PIN-кода (цифровой код, например 4 цифры).
• Повторный ввод для подтверждения PIN (в целях проверки, при первичной установке).
• Подсказка или заголовок, например «Установите PIN-код для входа».
• Кнопка подтверждения «Готово» (активна после ввода PIN и его подтверждения).

flowchart TB
subgraph LoginScreen["Экран входа"]
    direction TB
    email["Поле ввода Email"]
    password["Поле ввода пароля"]
    loginBtn["Кнопка «Войти»"]
end

Описание: После успешной авторизации впервые приложение предлагает установить PIN-код для быстрой аутентификации в дальнейшем. Пользователь вводит PIN дважды для подтверждения и нажимает «Готово». При последующих запусках приложение может запрашивать введение этого PIN-кода вместо полного логина (экран ввода PIN аналогичен экрану установки, но без повторного ввода). После установки или ввода корректного PIN происходит переход в главное меню приложения.

4. Главное меню

Главное меню отображается после входа в приложение. Согласно документации, «главное меню состоит из: учетной записи (имя аккаунта), тарифа подписки, режима замера и меню настроек; раздела новостей и обновлений; раздела поддержки; режима тестирования „АВТО“; режима „ИБП“; и перехода в файловое хранилище выбранного режима». Ниже перечислены элементы интерфейса главного меню:

• Область аккаунта – отображает имя пользователя (учетная запись) и текущий тариф, а также содержит иконку настроек (переход к экрану настроек).
• Раздел «Новости и обновления» – кнопка/панель для просмотра последних новостей сервиса.
• Раздел «Поддержка» – кнопка/панель для помощи и связи с поддержкой.
• Кнопка «Режим АВТО» – переход к разделу тестирования стартерных АКБ (автомобильных батарей).
• Кнопка «Режим ИБП» – переход к разделу тестирования батарей ИБП (стационарных/тяговых).

flowchart TB
subgraph MainMenu["Главное меню"]
    direction TB
    account["Область аккаунта (имя, тариф, настройки)"]
    newsBtn["Новости и обновления"]
    supportBtn["Поддержка"]
    autoBtn["Режим «АВТО»"]
    ibpBtn["Режим «ИБП»"]
end

Описание: Главное меню предоставляет пользователю обзор и навигацию по основным функциям приложения. В верхней части отображается учетная информация пользователя и доступ к настройкам. Ниже располагаются кнопки для перехода в раздел новостей (например, отображение обновлений сервиса) и в раздел поддержки (помощь пользователям). Основная часть главного меню – это кнопки выбора режима тестирования: «АВТО» для работы со стартерными аккумуляторами и «ИБП» для работы с батареями бесперебойного питания. Выбор режима приводит пользователя к соответствующему списку файлов тестирования этого типа. (Примечание: сам переход к файловому хранилищу режима происходит при нажатии на кнопку режима, см. также разделы ниже.)

5. Экран настроек

Элементы интерфейса:

• Отображение имени аккаунта (пользователя) и активного тарифа подписки.
• Отображение версии приложения.
• Слайдер «Игнорировать номер АКБ при считывании QR» – переключатель настройки (вкл/выкл) для повторного сканирования одинаковых номеров (предотвращает дубли, по умолчанию активна проверка на дубликаты).
• Ссылка «Удаление отправленных файлов» – действие для очистки локальных данных уже отправленных в облако файлов.
• Дополнительные ссылки на информационные ресурсы (например, политика конфиденциальности, соглашение, о приложении).

flowchart TB
subgraph SettingsScreen["Экран настроек"]
    direction TB
    accountInfo["Имя аккаунта и тариф"]
    appVersion["Версия приложения"]
    ignoreToggle["Слайдер: Игнорировать номер АКБ (дубликаты)"]
    deleteLink["Ссылка: Удаление отправленных файлов"]
    infoLinks["Прочие ссылки (документация/ресурсы)"]
end

Описание: В разделе настроек пользователь может просмотреть информацию о своей учетной записи (имя, тарифный план) и текущую версию приложения. Здесь же находятся дополнительные настройки приложения. Например, переключатель «Игнорировать номер АКБ при считывании QR» позволяет повторно сканировать батарею с тем же номером (при отключении этой проверки приложение будет сканировать QR-коды с одинаковыми номерами, что по умолчанию запрещено во избежание дублирования данных). Ссылка «Удаление отправленных файлов» позволяет очистить из памяти устройства тестовые файлы, которые уже были отправлены в облако (освобождая место). Также в настройках могут находиться ссылки на пользовательские соглашения, политики или справочную информацию. Вернуться из этого раздела можно с помощью стандартной кнопки «Назад» (или жеста назад на устройстве).

6. Экран «Файлы АВТО» (список тестов режима АВТО)

Экран списка файлов в режиме АВТО отображает сохранённые результаты тестирования стартерных аккумуляторов. Согласно документации, окно файлов содержит: 1) список проведённых тестов (имя файла, PDF-протокол, размер файла и номер теста в облачном реестре, если загружен), 2) кнопку «Отправить» для загрузки результатов на сервер, 3) кнопку «Создать» для запуска нового сканирования. Ниже приведены основные элементы интерфейса данного экрана:

• Список файлов тестирования (АВТО) – перечень записей о тестах. Каждая запись включает:
• Название файла (дата или идентификатор теста).
• Иконку или ссылку PDF (для открытия протокола теста в формате PDF, доступно при наличии подписки).
• Размер файла данных.
• Номер в реестре Battery Wizard Online (если файл уже загружен в облако; если номер отсутствует, файл ещё не загружен).
• Кнопку «Отправить» для загрузки данного файла в облако (отображается для файлов, не загруженных в облако, в версии с подпиской).
• Кнопка «Создать» – для перехода к созданию новой записи (запуск сканирования нового теста).

flowchart TB
subgraph SettingsScreen["Экран настроек"]
    direction TB
    accountInfo["Имя аккаунта и тариф"]
    appVersion["Версия приложения"]
    ignoreToggle["Слайдер: Игнорировать номер АКБ (дубликаты)"]
    deleteLink["Ссылка: Удаление отправленных файлов"]
    infoLinks["Прочие ссылки (документация/ресурсы)"]
end

Описание: На экране «Файлы АВТО» пользователь видит список всех сохранённых тестов, проведённых в режиме «АВТО». Каждая строка списка представляет отдельный тест и содержит основную информацию: имя (или ID) теста, ссылку на PDF-протокол (если доступно), размер файла и статус загрузки (номер в облаке, либо отсутствие номера для незагруженных файлов). Неотправленные в облако файлы могут визуально выделяться (например, цветом) до тех пор, пока пользователь не нажмёт кнопку «Отправить» для этого файла. Кнопка «Отправить» рядом с записью отправляет данные теста на сервер Battery Wizard Online (данная функция активна только при наличии соответствующей подписки). Внизу или в плавающем меню отображается кнопка «Создать», при нажатии на которую пользователь переходит к экрану сканирования нового теста. Для переключения обратно к главному меню пользователь может использовать кнопку «Назад» на устройстве (или системную навигацию).

7. Экран «Файлы ИБП» (список тестов режима ИБП)

Экран списка файлов в режиме ИБП аналогичен режиму АВТО, но предназначен для стационарных/тяговых батарей (ИБП). Структура интерфейса практически совпадает с экраном «Файлы АВТО». Ниже перечислены элементы:

• Список файлов тестирования (ИБП) – список проведённых тестов в режиме ИБП. Каждая запись включает:
• Название файла теста.
• Иконку/ссылку PDF протокола (при наличии подписки).
• Размер файла.
• Номер теста в облачном реестре (если загружено в Battery Wizard Online).
• Кнопку «Отправить» для загрузки данного результата в облако (при наличии подписки).
• Кнопка «Создать» – для запуска нового сканирования (создания новой записи теста).

flowchart TB
subgraph IbpFilesScreen["Экран \"Файлы ИБП\""]
    direction TB
    fileEntry1["Запись теста 1"]
    fileEntry2["Запись теста 2"]
    fileEntry3["Запись теста 3"]
    createIbp["+ Создать новый тест"]
end

fileEntry1 --> pdfIcon1[PDF]
fileEntry1 --> fileSize1["Размер"]
fileEntry1 --> cloudId1["ID в облаке"]
fileEntry1 --> sendBtn1["Отправить"]

fileEntry2 --> pdfIcon2[PDF]
fileEntry2 --> fileSize2["Размер"]
fileEntry2 --> cloudId2["ID в облаке"]
fileEntry2 --> sendBtn2["Отправить"]

fileEntry3 --> pdfIcon3[PDF]
fileEntry3 --> fileSize3["Размер"]
fileEntry3 --> cloudId3["ID в облаке"]
fileEntry3 --> sendBtn3["Отправить"]

Описание: Экран «Файлы ИБП» предоставляет аналогичный функционал для режима тестирования ИБП. Пользователь видит список всех сохранённых результатов тестов для стационарных батарей. Формат и элементы каждой записи такие же, как в режиме АВТО: имя, PDF, размер, статус загрузки и кнопка отправки. Кнопка «Создать» позволяет добавить новый тест – при её нажатии открывается экран сканирования QR-кода для режима ИБП. Пользователь может вернуться в главное меню или переключиться на другой режим также через навигацию (например, кнопка «Назад» вернёт в главное меню, откуда можно выбрать другой режим).

8. Экран сканирования QR-кода

Элементы интерфейса:

• Видоискатель камеры – область, показывающая изображение с камеры для наведения на QR-код.
• Рамка/прицел для QR-кода – графическое обозначение области, которую нужно совместить с QR-кодом для сканирования.
• Текстовая подсказка, например: «Наведите камеру на QR-код, чтобы сканировать».
• Кнопка или иконка фонарика (Flash) – для подсветки, если сканирование происходит в темноте (опционально).
• Иконка «Галерея» – возможность выбрать фотографию QR-кода из галереи телефона (на случай, если QR-код сохранён как изображение).
• Кнопка «Отмена/Назад» – для прерывания сканирования и возврата к списку файлов (обычно системная кнопка назад на Android).

flowchart TB
subgraph ScanScreen["Экран сканирования"]
    direction TB
    cameraView[" Видоискатель камеры (навести на QR-код)"]
    hintText["Текст: Наведите камеру на QR-код"]
    galleryBtn["Иконка Галерея (выбрать фото QR)"]
    flashBtn["Иконка Фонарик (подсветка)"]
    cancelBtn["Отмена / Назад"]
end

Описание: На экране сканирования приложение активирует камеру устройства. Пользователь видит в реальном времени изображение через камеру и наводит её на QR-код, сгенерированный тестером CONBAT RTA545. В центре экрана может отображаться рамка или направляющие для правильного позиционирования QR-кода. Подсказка инструктирует пользователя навести камеру на код. При необходимости доступен фонарик для подсветки (нажатие на значок фонаря включит вспышку). Также, при затруднениях со сканированием напрямую, пользователь может нажать на значок «Галерея» и выбрать фотографию QR-кода из памяти устройства – приложение попытается распознать код с изображения. Если пользователь хочет отменить сканирование до получения результата, он может вернуться назад (через кнопку «Отмена» или системную кнопку назад). После успешного считывания QR-кода происходит переход к экрану отображения результатов теста.

9. Экран результата теста

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

Элементы интерфейса:

• Результаты измерения (список параметров): отображаются основные показатели считанного теста, включая:
• # – порядковый номер измерения (№ в памяти прибора).
• Type – тип протестированной батареи (например, WET, AGM и т.д.).
• U – напряжение аккумулятора.
• R – внутреннее сопротивление.
• SOC% – уровень заряда (State of Charge) в процентах.
• REF – эталонное значение / номинальная ёмкость и стандарт (например, номинал в А*ч или пусковой ток и стандарт, с которым сравнивается АКБ).
• CCA – ток холодной прокрутки (Cold Cranking Amps, для стартерных АКБ).
• SOH% – состояние здоровья батареи (State of Health) в процентах.
• Status – статус состояния аккумулятора (например: OK, CH, CR, RB, и др. для режима АВТО; для ИБП: OK, CR, WR, AT, FA).
• Кнопка «Сохранить и выйти» – сохранение результатов в память приложения и выход обратно к списку файлов (завершение процесса создания записи).
• Кнопка «Сохранить и сканировать следующий» – сохранение текущего результата и немедленный запуск нового сканирования следующего теста (возвращение на экран сканирования для считывания следующего QR-кода).
• Кнопка «Повторить» – не сохранять текущий результат и заново перейти к сканированию (например, если данные считались с ошибкой и требуется повторное считывание того же QR-кода).

flowchart TB
subgraph ResultScreen["Экран результата теста"]
    direction TB
    subgraph dataFields["Данные теста"]
        direction TB
        measNo["# (номер измерения)"]
        typeField["Тип АКБ"]
        volt["Напряжение (U)"]
        res["Внутр. сопротивление (R)"]
        soc["Уровень заряда (SOC%)"]
        ref["Номинал/стандарт (REF)"]
        cca["Пусковой ток (CCA)"]
        soh["Ресурс батареи (SOH%)"]
        status["Статус"]
    end
    saveExit["Кнопка: Сохранить и выйти"]
    saveNext["Кнопка: Сохранить и следующий"]
    retry["Кнопка: Повторить"]
end

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

• «Сохранить и выйти»: сохраняет полученные данные локально (добавляет новую запись в список файлов текущего режима) и возвращает пользователя обратно на экран списка файлов этого режима. Если пользователь нажал эту кнопку, в списке «Файлы АВТО» или «Файлы ИБП» появится новая запись теста.
• «Сохранить и сканировать следующий»: сохраняет результаты аналогично, но сразу же переходит к повторному запуску камеры для сканирования следующего теста. Это удобно, когда требуется последовательно провести несколько измерений подряд. Приложение вернёт пользователя на экран сканирования (новый QR-код можно сразу считывать, не выходя в меню файлов).
• «Повторить»: игнорирует (не сохраняет) текущие распознанные данные и вновь открывает камеру для повторного считывания. Пользователь выбирает этот вариант, если, например, сканирование прошло некорректно или были считаны неправильные данные, и нужно попытаться снова со свежим сканированием того же QR-кода.

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

10. Экран «Новости»

Элементы интерфейса:

• Список новостей/обновлений – список последних новостей сервиса или обновлений ПО. Каждая новость обычно включает: заголовок, дату и краткое описание.
• Возможность тапнуть по новости для подробного просмотра (если реализовано как переход на веб-страницу или всплывающее окно).
• (Опционально) Кнопка обновления – для обновления списка новостей вручную (например, иконка «обновить»).
• Стандартная навигация назад – для выхода обратно в главное меню.

flowchart TB
subgraph NewsScreen["Экран \"Новости\""]
    direction TB
    subgraph newsItem1["Новость 1"]
        direction TB
        newsTitle1["Заголовок новости 1"]
        newsDate1["Дата"]
        newsExcerpt1["Краткое описание..."]
    end
    subgraph newsItem2["Новость 2"]
        direction TB
        newsTitle2["Заголовок новости 2"]
        newsDate2["Дата"]
        newsExcerpt2["Краткое описание..."]
    end

end

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

11. Экран «Поддержка»

Элементы интерфейса:

• Контактная информация – например, электронная почта поддержки (Email), номер телефона горячей линии.
• Ссылки на мессенджеры – если предусмотрены (например, кнопка для перехода в WhatsApp с заранее подготовленным сообщением, согласно информации на сайте).
• Раздел FAQ – ссылка на часто задаваемые вопросы или встроенный список вопросов-ответов.
• Форма обратной связи – при необходимости: поля для ввода вопроса/сообщения и кнопка «Отправить обращение». (Либо кнопка, которая открывает почтовый клиент с шаблоном письма.)
• Стандартные элементы навигации (назад в меню).

flowchart TB
subgraph SupportScreen["Экран \"Поддержка\""]
    direction TB
    supportEmail["Email поддержки: bw@conbat.ru"]
    supportPhone["Телефон поддержки: +7 ..."]
    whatsappLink["Ссылка: WhatsApp чат"]
    faqLink["Ссылка: FAQ (Вопросы и ответы)"]
    feedbackForm["Форма обращения (вопрос пользователя)"]
    sendFeedbackBtn["Кнопка: Отправить сообщение"]
end

Описание: Экран «Поддержка» предоставляет пользователю способы получения помощи и дополнительной информации. Здесь может быть указана контактная информация службы поддержки (адрес электронной почты, телефонные номера, часы работы поддержки). Если поддержка осуществляется через мессенджеры (например, WhatsApp), может быть предоставлена прямая ссылка для начала чата. Раздел FAQ (часто задаваемые вопросы) может перенаправлять на веб-страницу или отображать список советов прямо в приложении. Кроме того, реализована форма обратной связи: пользователь может ввести свой вопрос или описание проблемы и отправить напрямую из приложения (либо по нажатию кнопки откроется почтовое приложение с шаблоном письма на адрес поддержки). Таким образом, экран «Поддержка» объединяет все доступные способы связи с разработчиками и получения справки. Возврат в главное меню осуществляется стандартным образом (кнопка «Назад»).

Примечание: Все вышеописанные интерфейсы разработаны с учётом удобства работы на планшетах Android. Элементы расположены таким образом, чтобы ими было удобно пользоваться на большом экране: крупные кнопки для основных действий, читаемые списки и текст, адаптивные компоненты. Код диаграмм выше написан в синтаксисе Mermaid и предназначен для вставки с помощью плагина MerPress в WordPress – это позволит визуализировать структуру интерфейсов прямо на странице (диаграммы отобразят экраны и их связь в соответствии с описанием). Все элементы, упомянутые в спецификации, отражены на диаграммах, что подтверждается документацией Battery Wizard/CONBAT RTA WIZARD.