189 lines
17 KiB
Markdown
189 lines
17 KiB
Markdown
# UX/UI-аудит Windows-клиента
|
||
|
||
Дата: 2026-07-08
|
||
|
||
## Область аудита
|
||
|
||
Проверен текущий React UI `apps/windows-client` для Vite/Tauri как компактная Windows-утилита управления proxy-маршрутизацией приложений. Аудит выполнялся в browser-preview на `http://127.0.0.1:5174/`, поэтому нативные Tauri-команды были недоступны, а интерфейс показывал preview/runtime-ошибки. Все выводы ниже привязаны к скриншотам, снятым в этом прогоне.
|
||
|
||
## Цель пользователя
|
||
|
||
Главная задача пользователя - быстро управлять службами и понять:
|
||
|
||
- какие компоненты установлены;
|
||
- какие службы запущены, остановлены или отсутствуют;
|
||
- какое действие доступно прямо сейчас: установить, удалить, запустить, остановить, обновить, добавить или применить;
|
||
- что сейчас маршрутизируется;
|
||
- через какую цепочку компонентов идет трафик;
|
||
- готовы ли ProxiFyre и опциональный Local sing-box;
|
||
- можно ли безопасно применить изменения;
|
||
- что делать дальше, если что-то сломано.
|
||
|
||
Цель по доступности: интерфейс должен быть управляемым с клавиатуры, с понятными статусами, читаемым восстановлением после ошибок, предсказуемыми focus states и устойчивой адаптацией к узким размерам Windows-окна.
|
||
|
||
## Доказательства
|
||
|
||
1. `01-summary-desktop.png` - панель "Сводка", desktop-ширина. Состояние: смешанное. Главный статус виден, но примененное состояние еще "загружается", а рядом уже показан бейдж "Совпадает".
|
||
2. `02-proxifyre-desktop.png` - панель ProxiFyre, desktop-ширина. Состояние: в целом рабочее. Состав компонента и список приложений компактны, но главное действие apply доступно даже при отсутствующих prerequisites.
|
||
3. `03-proxy-desktop.png` - панель "VPN / Прокси", desktop-ширина. Состояние: рабочее. Настройка маршрута понятна, но route path выглядит как вторичный текст, а apply-action выглядит валидным до того, как маршрут может успешно примениться.
|
||
4. `04-proxy-validation-desktop.png` - невалидный proxy input. Состояние: хорошая база. Inline-валидация находится рядом с полем и отключает действие проверки.
|
||
5. `05-summary-narrow.png` - панель "Сводка", узкая ширина. Состояние: напряженное. Контент перестраивается, но нижний log dock и длинные сообщения обрезают важную информацию.
|
||
6. `06-proxifyre-narrow.png` - панель ProxiFyre, узкая ширина. Состояние: напряженное. Контролы складываются неплохо, но setup chips переполняются по горизонтали, а нижний dock конкурирует с основной задачей.
|
||
|
||
## Доменное направление
|
||
|
||
Ключевые понятия домена: цепочка маршрута, здоровье компонентов, локальный runtime, внешний endpoint, выбранные приложения, сгенерированный конфиг, граница apply/restart, диагностика.
|
||
|
||
Цветовой мир: темная Windows-оболочка, терминальный черный, зеленый для driver/service ready, amber для предупреждений, красный для блокеров/firewall, синий для links/actions, slate для config-файлов.
|
||
|
||
Сигнатурный элемент, который стоит усилить: `Service Control Row` - повторяемая строка компонента, где слева состояние службы, в центре человекочитаемый статус, справа одно главное действие и меню дополнительных действий. Route-chain readout тоже нужен, но как объяснение эффекта этих служб: `Apps -> ProxiFyre -> target -> VPN/server`.
|
||
|
||
Дефолты, которые стоит отбрасывать:
|
||
|
||
- generic dashboard cards -> service-control utility;
|
||
- большая зеленая apply-кнопка всегда видна -> apply gated by readiness + inline blockers;
|
||
- raw logs как главный error surface -> сначала человеческое recovery-сообщение, raw details вторым уровнем.
|
||
- разрозненные кнопки и анимации -> shared component base с едиными variants/states/motion tokens.
|
||
|
||
## Сильные стороны
|
||
|
||
- Приложение уже ощущается как компактная desktop-утилита, а не как сайт. Фиксированный header, tabs, плотные панели и темная системная палитра подходят задаче.
|
||
- Продуктовая модель сильная: ProxiFyre и Local sing-box разделены, sing-box не сделан обязательным.
|
||
- Inline-валидация SOCKS5-поля расположена рядом с полем и отключает "Проверить", когда формат неверный.
|
||
- Зона добавления приложения использует иконки с доступными labels и tooltip, поэтому плотный workflow остается сканируемым.
|
||
- Для основных анимаций есть `prefers-reduced-motion`.
|
||
- UI использует настоящие `button` и tab roles, а не click-only divs. Это хорошая база для доступности.
|
||
|
||
## UX-риски
|
||
|
||
1. Apply выглядит доступным, когда маршрут еще не actionable.
|
||
- Доказательства: `02-proxifyre-desktop.png`, `03-proxy-desktop.png`.
|
||
- ProxiFyre отсутствует и список приложений пуст, но "Обновить конфиг" / "Обновить маршрут" ярко-зеленые. Это провоцирует failed action вместо направленного setup.
|
||
|
||
2. Главная цепочка маршрута не является визуальным фокусом.
|
||
- Доказательства: `01-summary-desktop.png`, `03-proxy-desktop.png`.
|
||
- Самая важная mental model - путь трафика, но сейчас он показан plain text в таблице или вторичном блоке. Пользователь вынужден читать фрагменты статуса вместо того, чтобы сразу увидеть цепочку.
|
||
|
||
3. В "Сводке" есть противоречивое состояние.
|
||
- Доказательство: `01-summary-desktop.png`.
|
||
- "Состояние загружается" показано рядом с "Совпадает", а система одновременно говорит "Не настроено". Это может создать ощущение, что действий не требуется.
|
||
|
||
4. Preview/native command failures слишком сырые.
|
||
- Доказательства: все скриншоты.
|
||
- Dock показывает `Cannot read properties of undefined (reading 'invoke')`. Для разработчика это полезно, но как первичный пользовательский error surface это шум.
|
||
|
||
5. Bottom log dock конфликтует с узкой компоновкой.
|
||
- Доказательства: `05-summary-narrow.png`, `06-proxifyre-narrow.png`.
|
||
- Важные сообщения обрезаются до "Компонен..." и "Cannot read prop..."; dock постоянно занимает вертикальное место в и так коротком окне.
|
||
|
||
6. ProxiFyre setup chips плохо перестраиваются.
|
||
- Доказательство: `06-proxifyre-narrow.png`.
|
||
- Горизонтальная chip-лента скрывает третий dependency и ухудшает диагностическую ясность.
|
||
|
||
7. Терминология немного смешана.
|
||
- Доказательства: `01-summary-desktop.png`, `03-proxy-desktop.png`.
|
||
- `config`, `TCP check`, `VPN сервер`, `Local sing-box`, `ProxiFyre` - все эти термины допустимы, но нужен единый принцип: сначала пользовательский русский, технический идентификатор вторым уровнем.
|
||
|
||
8. Компонентная база пока не выражена как система.
|
||
- Доказательства: `02-proxifyre-desktop.png`, `03-proxy-desktop.png`, `06-proxifyre-narrow.png`.
|
||
- Кнопки "Обновить", "Установить", "Открыть", "Проверить", add-icon buttons и service actions выглядят близко, но пока не читаются как строгая система variants. Из-за этого сложно гарантировать одинаковые hover/loading/disabled/focus states и одинаковую motion-модель.
|
||
|
||
## Риски доступности
|
||
|
||
- Tablist использует `role="tab"`, но не видно поддержки ожидаемого arrow-key behavior и roving tab index. Пользователю с клавиатурой, вероятно, придется проходить все tabs через Tab вместо Left/Right.
|
||
- Focus visibility есть через browser defaults, но визуально она тяжелая и не согласована со стилем приложения. Нужен отдельный `:focus-visible` token для buttons, tabs, inputs и icon controls.
|
||
- Status dots сильно полагаются на цвет. Стоит дублировать состояние видимым текстом или `aria-label`/screen-reader text там, где текст рядом не объясняет статус.
|
||
- Footer использует `aria-live`, но повторяющиеся raw runtime errors могут быть шумными для assistive tech. Сначала стоит объявлять короткий статус, а подробный error text держать за "Посмотреть".
|
||
- На узкой ширине truncation может скрывать actionable-часть сообщений и button labels.
|
||
- Скриншоты не доказывают полный keyboard order, screen-reader output или contrast ratios. Для этого нужен интерактивный accessibility pass.
|
||
|
||
## План улучшений
|
||
|
||
### P0 - Сделать service-control flow заслуживающим доверия
|
||
|
||
1. Ввести shared component base:
|
||
- `Button` с variants: `primary`, `neutral`, `add`, `danger`, `icon`;
|
||
- `Tabs` с единым keyboard behavior и animation contract;
|
||
- `ServiceControlRow` для ProxiFyre, Local sing-box и будущих служб;
|
||
- `StatusPill`, `Field`, `ActionMenu`, `LogDock`;
|
||
- единые states: default, hover, active, focus-visible, disabled, loading.
|
||
|
||
2. Нормализовать motion tokens:
|
||
- button press: 100-140ms;
|
||
- tab switch: 180-240ms, только `opacity` + `transform`;
|
||
- popover/menu: 150-180ms;
|
||
- service operation: видимый loading state, чтобы интерфейс не ощущался зависшим;
|
||
- не использовать `transition: all`.
|
||
|
||
3. Заменить raw preview/native invocation failures на дружелюбное состояние:
|
||
- "Desktop-команды недоступны в browser preview. Запусти через Tauri для управления службами."
|
||
- Raw error оставить только в деталях лога.
|
||
|
||
4. Заблокировать primary apply actions до готовности:
|
||
- disabled + explanation, когда список приложений пуст;
|
||
- disabled + explanation, когда ProxiFyre отсутствует;
|
||
- disabled + explanation, когда выбран local route без установленного/запущенного sing-box или выбранного сервера;
|
||
- "Открыть конфиг" оставить вторичным действием, не равным apply по весу.
|
||
|
||
5. Исправить язык summary-state:
|
||
- использовать взаимоисключающие состояния: "Проверяю", "Не готово", "Готово к применению", "Применено", "Есть черновик";
|
||
- не показывать "Совпадает", пока saved/applied state реально не загружен.
|
||
|
||
### P1 - Пересобрать главную mental model
|
||
|
||
6. Вынести route-chain component как объясняющий элемент:
|
||
- узел `Apps` с количеством;
|
||
- узел `ProxiFyre` со статусом installed/running;
|
||
- узел `Target`: external SOCKS5 или Local sing-box;
|
||
- узел `Server`, когда активен local sing-box;
|
||
- каждый сломанный узел показывает одно следующее действие.
|
||
|
||
7. Переработать "Сводку" в command center:
|
||
- сверху: route-chain и readiness системы;
|
||
- посередине: applied vs draft diff, только если есть отличие;
|
||
- снизу: максимум два next actions;
|
||
- длинные config paths и подробный состав компонентов убрать из первого взгляда.
|
||
|
||
8. Разделить "настроить маршрут" и "применить маршрут":
|
||
- Proxy panel отвечает за endpoint choice и connection check;
|
||
- ProxiFyre panel отвечает за app selection и service readiness;
|
||
- Summary подтверждает объединенный маршрут и применяет только при готовности.
|
||
|
||
### P2 - Усилить responsive и component craft
|
||
|
||
7. Превратить setup chips в wrapping checklist на узких ширинах.
|
||
|
||
8. Сделать log dock адаптивным:
|
||
- desktop: persistent compact dock подходит;
|
||
- narrow: collapsed toast/details sheet вместо постоянного full-width footer.
|
||
|
||
9. Определить design tokens:
|
||
- surfaces: canvas, panel, inset, elevated;
|
||
- text: primary, secondary, muted, disabled;
|
||
- status: ready, warning, blocked, checking;
|
||
- focus ring и border intensities.
|
||
|
||
10. Стандартизировать copy:
|
||
- последовательно использовать "конфиг" или "конфигурация";
|
||
- заменить "TCP check" на "TCP-проверка";
|
||
- `Local sing-box` оставить техническим именем компонента, но в user-facing headings связывать с "локальный прокси".
|
||
|
||
### P3 - Verification pass
|
||
|
||
11. Добавить focused interaction QA:
|
||
- keyboard tab order;
|
||
- arrow-key tab navigation;
|
||
- focus return из menus/popovers;
|
||
- disabled-action explanations;
|
||
- empty, loading, error, missing-component, ready и unapplied-change states.
|
||
|
||
12. Добавить responsive visual snapshots:
|
||
- 1280x720 desktop;
|
||
- 800x600 compact desktop;
|
||
- 420x720 narrow window;
|
||
- длинные proxy/server names и длинные Windows paths.
|
||
|
||
## Рекомендуемый первый redesign slice
|
||
|
||
Сначала стоит сделать shared UI foundation: `Button`, `Tabs`, `ServiceControlRow`, `StatusPill`, `Field`, `ActionMenu`, `LogDock` и motion tokens. После этого собрать ProxiFyre и Local sing-box через один `ServiceControlRow`, а route-chain использовать как объясняющий компонент в "Сводке" и "VPN / Прокси". Такой порядок сначала стабилизирует поведение кнопок/табы/анимации, затем улучшит ориентацию и recovery без переписывания всего UI.
|