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

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

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

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

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

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

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

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

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

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

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

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

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

=== User Story

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

=== Customer Journey Map

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

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

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

Диаграммы потоков: старт приложения и фоновая синхронизация (@fig-01), жизненный цикл vault (@fig-02), навигация с главного экрана (@fig-03).

#pz-fig("fig_01_start_sync.png", [Старт приложения и фоновая синхронизация (проект)], "fig-01")
#pz-fig("fig_02_vault_lifecycle.png", [Жизненный цикл vault и очередь синхронизации], "fig-02")
#pz-fig("fig_03_navigation_hub.png", [Навигация с главного экрана и SyncWorker], "fig-03")

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

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

#pz-fig("fig_05_local_vaults.jpg", [Список локальных vault], "fig-05")
#pz-fig("fig_06_encrypt_dialog.jpg", [Диалог включения шифрования], "fig-06")
#pz-fig("fig_07_open_close_dialog.jpg", [Диалог открытия и закрытия vault], "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")

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

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

== Вывод

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