emoon-portal/prototype/adjutant-mobile/design-qa.md

Design QA — 医梦患者智能服务门户 P0

Comparison target

• Source visual truth:
  • qa/reference-services-normalized.png
  • qa/reference-composer-normalized.png
• Implementation:
  • qa/implementation-services.png
  • qa/implementation-composer.png
• Combined comparison evidence:
  • qa/comparison-services.png
  • qa/comparison-composer.png
• Browser viewport: 1280 × 720
• Mobile Web content viewport: 428 × 720 CSS px
• Density: browser screenshot at 1×
• Source pixels:
  • Service reference: 849 × 1888, normalized to 324 × 702
  • Composer reference: 1178 × 289, normalized to 428 × 105
• Implementation pixels:
  • Service catalog: 428 × 720
  • Composer region: 428 × 190
• State:
  • Service catalog: 门诊服务 / 诊前
  • Conversation: 智能分诊挂号 / 医生补槽

The references describe component structure and interaction density rather than the same hospital content. Native status bars and provider logos were therefore excluded from fidelity requirements; the P0 target is explicitly a mobile Web portal.

Full-view comparison

• The service page keeps the reference hierarchy: search, first-level horizontal directory, second-level stage chips, then vertically stacked agent cards.
• The implementation uses hospital-facing categories from the supplied Excel and preserves the current医梦 color system rather than copying the reference app's branding.
• Enabled and disabled services are visually distinct without changing the page skeleton.
• No device bezel, native status bar, native home indicator, or simulated native keyboard is present in the final mobile Web view.

Focused-region comparison

• The composer comparison verifies the required three-part control: voice on the left, text in the center, and camera/send on the right.
• A single clickable “推荐回答” row is placed directly above the composer, matching the requested patient guidance pattern.
• The focused comparison was required because the input controls and suggestion affordance are too small to judge reliably in the full service-page view.

Required fidelity surfaces

• Typography: clear title/body/helper hierarchy; compact Chinese mobile-web sizes remain readable; no problematic wrapping in the compared states.
• Spacing and layout: stable 18 px page margins, pill-shaped search and composer, consistent card rhythm, and persistent bottom controls without overlap.
• Colors and tokens: existing医梦 purple/cyan semantic tokens retained; disabled services use neutral opacity and enabled P0 services use distinct semantic colors.
• Image and icon quality: standard icon-library vectors are used for portal capabilities. External provider logos from the reference were intentionally not copied because the cards represent医梦 platform capabilities, not third-party organizations.
• Copy and content: service names follow the supplied Excel; only the three P0 services are labeled “P0 已开通”; default answers use realistic patient language.

Comparison history

Pass 1

• [P2] Native runtime residue remained visible as a home indicator and mobile cursor.
  • Fix: hid runtime-only status, home-indicator, cursor, device frame, device picker, and keyboard elements in the app-owned Web presentation stylesheet.
• [P2] The first conversation composer did not yet mirror the reference's voice/text/photo hierarchy.
  • Fix: rebuilt it as a rounded Web composer and added a separate default-answer row above it.

Pass 2

• Revised captures show no remaining native chrome.
• Service navigation, disabled state, P0 entry state, and the conversation recommendation control are visually clear.
• No actionable P0, P1, or P2 findings remain.

Interaction checks

• Opened 服务 and switched 门诊服务 from 诊前 to 诊中.
• Confirmed only 智能分诊挂号、中医舌诊、检验检查报告解读 are enabled.
• Confirmed disabled agents cannot be clicked.
• Used the recommended answer to move registration from initial request to doctor follow-up and Mock slot selection.
• Used the recommended answers to complete report upload/analysis and reach the structured report result.
• Used the recommended answers to complete tongue questions, image upload, MCP processing, and the综合结果.
• Browser console warnings/errors checked: none.
• Runtime integrity, production build, and Sites packaging tests all passed.

Follow-up polish

• [P3] After real hospital branding is confirmed, replace the generic hospital mark with the hospital-provided logo asset.

final result: passed