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.