69 lines
6.4 KiB
Typst
69 lines
6.4 KiB
Typst
#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>
|
||
|
||
=== Пользовательский сценарий
|
||
|
||
Диаграммы потоков: старт приложения и фоновая синхронизация (@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 @smith-jetpack-compose @compose-docs. Экраны локального и удалённого vault, диалоги работы со storage, а также разделы текстовых секретов и 2FA показаны на рис. @fig-05–@fig-10 и @fig-33–@fig-34 (подробно – приложение В и руководство пользователя в приложении Б). Поток OAuth 2.0 для Яндекса – на рис. @fig-20 (гл. 1).
|
||
|
||
#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", [Меню storage: переименование и удаление], "fig-08")
|
||
#pz-fig("fig_09_remote_vaults.jpg", [Экран удалённых vault: подключённый аккаунт Яндекс], "fig-09")
|
||
#pz-fig("fig_10_yandex_oauth.jpg", [Диалог «Добавить хранилище»: выбор провайдера Яндекс], "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, отключение шифрования; см. @fig-08) требуют явного подтверждения. Тексты сообщений об ошибках OAuth и неверном ключе формулируются нейтрально, без раскрытия внутренних путей и имён файлов.
|
||
|
||
== Вывод
|
||
|
||
Спроектированы пользовательские потоки и экранная структура, согласованные с архитектурой и требованиями безопасности. Иллюстрации интерфейса приведены в приложении В.
|