Files
platforms/ui/design-qa.md

3.0 KiB
Raw Blame History

Design QA

final result: passed

Comparison target

  • User source: doc/用户端APP-产品设计/4.jpg
  • Delivery source: doc/服务端APP-配送端-产品设计/f777dcf4d618a0f9664d126b32f73682.jpg
  • Installation source: doc/服务端APP-安装端-产品设计/202c904481a03ff644a8ac0c0d1c9ae4.jpg
  • Inspection source: doc/服务端APP-安全检查端-产品设计/ff7edcd4f78721beb5f0953ab08c23c4.jpg
  • Implementation: local /ui mobile prototype at the matching app and role query states.
  • Reference pixels: 1344×2772. Each reference was proportionally normalized onto a 393×852 comparison canvas.
  • Implementation viewport: 393×852 CSS pixels at device scale factor 1, captured from the app-owned phone screen.
  • Device-frame, status-bar, home-indicator and Android system navigation differences were excluded because they are template-owned runtime chrome.

Pass 1

  • P2 — User valve hero used a dark navy surface while the source uses a light neutral control panel with a dominant red action. Fixed by changing the panel to a light neutral surface, enlarging the valve control and moving the automatic-close status into a light inset strip.
  • P1 — Pixel 10 could retain an open simulated keyboard after a device change during review. Fixed by dismissing the runtime keyboard whenever the selected device changes.
  • P3 — The original user screen centers the page title in a mini-program header; the implementation uses a native-app leading title and live iOS/Android status bar. Kept as a deliberate native-shell adaptation.

Pass 2

  • User valve screen: hierarchy, status density, red control emphasis, light panel, bottom navigation and safety feedback match the source direction.
  • Delivery screen: purple task shell, schedule context, user/address facts, prominent primary action and fixed four-tab navigation match the source.
  • Installation screen: purple workbench, time/shift state, urgent work item, task card and role-specific action match the source.
  • Inspection screen: green safety identity, task list, time/shift state and inspection action match the source.
  • iPhone and Pixel 10: no content overflow, fixed navigation obstruction, open keyboard, browser console error or missing primary action remained.
  • No actionable P0, P1 or P2 differences remained.

Interaction checks

  • Valve control: confirmation sheet → waiting for device receipt → confirmed open state.
  • User navigation: valve, shop, favorites, orders and profile tabs are reachable.
  • Service work: task list → task detail → next required step.
  • Role switch: delivery, installation/repair and inspection reload the role-specific workbench.
  • Evidence sheet: photo type selection and simulated capture close correctly.

Remaining P3 notes

  • Source screenshots contain mini-program chrome and older iconography; the prototype intentionally uses the protected native device runtime and a single Phosphor icon family.
  • Mock content is consolidated from multiple source screens, so exact task numbers and timestamps vary while layout, hierarchy and workflow remain aligned.