#import "common.typ": pz-fig, pz-table

= Проектирование пользовательского интерфейса мобильного приложения

== Подготовка проекта и аналитика

=== Анализ конкурентов и определение сильных и слабых сторон

По результатам сравнения аналогов (табл. @tbl-analog) для Wallenc выделены сильные стороны: единый UI для списков storage (в LocalVault и удалённых vault), явное отображение состояния шифрования storage, диалоги подтверждения деструктивных операций. Слабые стороны конкурентов (привязка к экосистеме, узкая предметная область) учтены при проектировании навигации.

=== Ограничения и допущения проектирования UI

Полевые интервью пользователей не проводились; сценарии восстановлены по аналогам и отчётам этапов практики. Допущение: пользователь понимает риск потери ключа шифрования.

== Исследования пользовательских сценариев

=== Потребности и барьеры пользователя

Потребности: хранить файлы в «сейфе» без доверия к облаку; синхронизировать между устройствами. Барьеры: сложность OAuth, страх потери пароля, неочевидность состояния «storage открыт» (разблокирован).

=== Полезные сценарии из аналогов

Заимствованы: список хранилищ с индикацией статуса (Cryptomator, Bitwarden); локальная защита папки (Secure Folder); пошаговый мастер шифрования.

== Проектирование пользовательских потоков

=== User Story

#pz-table(
  [User Story Wallenc],
  3,
  table.header([ID], [Формулировка], [Критерий приёмки]),
  [US-1], [Создаю storage для файлов в локальном vault на устройстве], [Storage в списке (рис. 5)],
  [US-2], [Включаю шифрование storage паролем], [Статус encrypted, тест T-8],
  [US-3], [Открываю зашифрованный storage ключом], [Доступ к контенту, тест T-9],
  [US-4], [Подключаю Яндекс и удалённый vault], [OAuth OK, тест T-10],
  [US-5], [Вижу прогресс фоновых задач], [Экран задач, тест T-11],
  [US-6], [Храню TOTP и текстовые секреты в storage], [`TwoFaTotpTest`, UI IT],
) <tbl-userstory>

=== Customer Journey Map

CJM сценария «защитить и открыть storage» представлен на рисунке @fig-22.

#pz-fig("fig_22_cjm_vault.png", [Customer Journey Map: защита и открытие storage], "fig-22")

=== Пользовательский сценарий

Диаграммы потоков: старт приложения и фоновая синхронизация (@fig-01), жизненный цикл storage (@fig-02), навигация Main: LocalVault / удалённые vault → storage (@fig-03).

#pz-fig("fig_01_start_sync.png", [Старт приложения и фоновая синхронизация], "fig-01")
#pz-fig("fig_02_vault_lifecycle.png", [Жизненный цикл storage и журнал синхронизации], "fig-02")
#pz-fig("fig_03_navigation_hub.png", [Навигация Main: список storage, VaultBrowser, StorageHome], "fig-03")

== Проработка прототипа и особенности дизайна

Интерфейс реализован на Jetpack Compose @compose-docs. Экраны локальных и удалённых vault, диалоги шифрования, OAuth, а также разделы текстовых секретов и 2FA внутри storage показаны на рис. @fig-05–@fig-10 и @fig-33–@fig-34 (подробно — приложение В и руководство пользователя в приложении Б).

#pz-fig("fig_05_local_vaults.jpg", [Список storage в локальном vault (экран «локальные vault»)], "fig-05")
#pz-fig("fig_06_encrypt_dialog.jpg", [Диалог включения шифрования], "fig-06")
#pz-fig("fig_07_open_close_dialog.jpg", [Диалог открытия и закрытия storage], "fig-07")
#pz-fig("fig_08_rename_delete_dialog.jpg", [Диалог переименования и удаления], "fig-08")
#pz-fig("fig_09_remote_vaults.jpg", [Экран удалённых vault], "fig-09")
#pz-fig("fig_10_yandex_oauth.jpg", [Добавление удалённого vault, OAuth Яндекс], "fig-10")
#pz-fig("fig_33_storage_secrets_2fa.jpg", [Экран storage: разделы «Секреты» и «2FA»], "fig-33")
#pz-fig("fig_34_2fa_single_token.jpg", [Экран 2FA: список с одним TOTP-токеном], "fig-34")

== Требования к эргономике и доступности

Интерфейс должен отображать состояние каждого storage без перехода в технические экраны: признаки «зашифровано», «открыто» (`IUnlockManager.openedStorages`), «выполняется операция» (`isBusy`). Диалоги деструктивных действий (удаление storage, отключение шифрования) требуют явного подтверждения. Тексты сообщений об ошибках OAuth и неверном ключе формулируются нейтрально, без раскрытия внутренних путей и имён файлов.

== Вывод

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