lingniu-vehicle-ingest/vehicle-data-platform/docs/design/ui-ux-20260720/README.md

# Vehicle Platform UI/UX Direction

This iteration moves the vehicle platform toward Semi Design's open, responsive application style while preserving the product's existing information architecture and copy.

## Design principles

- Use true white and cool neutral surfaces with restrained blue accents.
- Prefer connected workspaces, hairline dividers, and open lists over nested floating cards.
- Keep desktop controls at a readable 14 px baseline and make mobile touch targets at least 44 px high.
- Preserve information density without shrinking primary labels or hiding core metrics.
- Give mobile its own interaction hierarchy instead of compressing the desktop layout.
- Provide visible keyboard focus, clear pressed states, short entrance motion, and reduced-motion support.

## Reference concepts

- `desktop-monitor-concept.png`: desktop shell, navigation, filters, metrics, and connected workspace direction.
- `mobile-vehicles-concept.png`: direct reference for the mobile vehicle search flow and list hierarchy.
- `mobile-track-concept.png`: map-first track query and playback direction.
- `mobile-history-concept.png`: open mobile query and evidence-empty-state direction.
- `mobile-mileage-concept.png`: connected scope, metric, toolbar, and matrix direction.
- `mobile-alerts-concept.png`: priority-first active event queue with open, evidence-rich rows.
- `mobile-access-concept.png`: source coverage directory with a connected three-protocol evidence strip.
- `mobile-operations-concept.png`: reconciliation queue with semantic priority rails and direct evidence actions.
- `mobile-users-concept.png`: customer authorization directory with visible readiness and grant counts.

The concepts were generated with the built-in Image Generation tool from the supplied Semi Design reference and the pre-change product screenshots. Their prompts used the full-page `ui-mockup` mode: true white and pale cool gray, restrained `#1268F3`, semantic warning/danger/success colors, 14 px controls, 12 px metadata, 11 px navigation, 20–21 px titles, 44 px minimum touch targets, one-pixel dividers, and no gradients, glow, stacked-card decoration, invented metrics, or new modules.

## Implementation mapping

| Reference characteristic | Implemented result |
| --- | --- |
| Open white/cool-gray canvas | Global shell and workspaces use neutral surfaces without decorative gradients or glow |
| Quiet sidebar with restrained selection | 228 px desktop navigation, compact icon wells, blue selection rail |
| Connected filter and metric rail | Desktop vehicle search, scope tabs, metrics, and directory share one continuous workspace |
| Mobile-first search hierarchy | Persistent 50 px search launcher, editable vehicle scope, three always-visible metrics |
| Open mobile list rows | 16 px vehicle identifier, status dot, protocol tags, timestamp, and row affordance |
| Stable mobile navigation | 72 px bottom navigation with icon-well active state and safe-area spacing |
| Responsive continuity | Verified at 1440 × 900 and 390 × 844 with zero horizontal overflow |
| Map-first track setup | Persistent 52 px vehicle/time launcher, open empty cue, and visible inactive playback model |
| Open history evidence state | One scope row, one result header, centered evidence prompt, and bottom-sheet query editor |
| Dense mileage exploration | Two connected summary metrics, compact 44 px tools, fixed plate/total columns, and horizontal date exploration |
| Priority-first alert triage | Open event rows with severity rails, trigger evidence, status, and a direct detail affordance |
| Connected access evidence | Vehicle identity, connection conclusion, and three protocol cells remain visible in one scan path |
| Reconciliation action queue | SLA metrics, scope feedback, semantic issue rows, and evidence/action entry stay in one working surface |
| Understandable account governance | Customer identity, menu count, vehicle grants, readiness, and authorization detail form a clear directory |

## Fidelity and QA ledger

- Color and surface system: matched.
- Container hierarchy: matched; desktop uses a continuous working surface and mobile removes nested panels.
- Typography: matched for primary hierarchy. Mobile metadata is intentionally 11 px at 390 px width to keep plate, status, and timestamp readable without wrapping.
- Spacing and sizing: desktop sidebar 228 px, table rows 60 px; mobile side inset 14 px, search target 50 px, list rows about 87 px, bottom navigation 72 px.
- Responsive behavior: matched at both target viewports with no horizontal overflow.
- Core mobile workflow: search sheet opens, accepts a vehicle query, shows matching candidates, applies the scope, and updates the launcher summary.
- Accessibility and motion: focus-visible outlines, pressed states, short page arrival motion, and `prefers-reduced-motion` handling are included.
- P1 query workflows: track, history, and mileage workbench launchers open and close correctly with stable dialog labels and visible state changes.
- P1 mobile sizing: track launcher 52 px, inactive playback dock 133 px, history empty surface ends exactly at the bottom navigation, mileage summary is 89 px, and mobile result tools/pagination are 44 px.
- P1 rendered evidence: `mobile-track-implemented.png`, `mobile-history-implemented.png`, and `mobile-mileage-implemented.png`.
- P2/P3 rendered evidence: paired mobile concepts and implementations for alerts, access, operations, and users, plus 1440 × 900 implemented screenshots for all four governance routes.
- P2/P3 mobile interaction: each open row launches its evidence or authorization detail at full viewport width without horizontal overflow.
- Final cross-route audit: all nine routes passed at 1440 × 900 and 390 × 844; no mobile target remained below the 44 px two-dimensional baseline.
- Final automated verification: 73 test files / 377 tests passed, `git diff --check` passed, and the production artifact gate returned `web_build_gate=ok`.
- Known upstream warning: Semi UI still emits its existing React StrictMode `findDOMNode` deprecation warning; no runtime exception or route failure was observed.

The desktop concept is used as the system-level shell reference. Each mobile concept maps directly to its implemented route and is retained beside the browser QA screenshot for future comparison.