This commit is contained in:
+29
-43
@@ -1,60 +1,46 @@
|
||||
# Design QA — 陪伴周记
|
||||
# 回忆时间轴设计 QA
|
||||
|
||||
- source visual truth path: `E:\Codex\story\platform\.design-evidence\selected-conversation-journal.png`
|
||||
- implementation screenshot path: `E:\Codex\story\platform\.design-evidence\implementation-home-final.png`
|
||||
- comparison image path: `E:\Codex\story\platform\.design-evidence\design-comparison-final.png`
|
||||
- responsive evidence: `E:\Codex\story\platform\.design-evidence\implementation-home-mobile.png`
|
||||
- viewport: desktop 1280 × 720 CSS px; mobile 390 × 844 CSS px
|
||||
- source pixels: 1488 × 1058
|
||||
- implementation pixels: 1265 × 720 for the desktop browser content capture; device scale factor 1
|
||||
- normalization: source was downsampled to 1265 px wide and cropped to the top 720 px; implementation remained at its native capture size. The two normalized images were placed in one 2530 × 720 comparison image.
|
||||
- state: authenticated family owner, one real seeded elder selected, completed-conversation data loaded, no dialog open
|
||||
- source visual truth: `E:\Codex\story\platform\.design-evidence\selected-conversation-timeline.png`
|
||||
- implementation screenshot: `E:\Codex\story\platform\.design-evidence\implementation-conversation-timeline-final.png`
|
||||
- normalized comparison: `selected-conversation-timeline-normalized.png` and `implementation-conversation-timeline-normalized.png`
|
||||
- browser viewport: 1265 × 712 CSS px, device scale factor 1
|
||||
- source pixels: 1487 × 1058; implementation full-page pixels: 1265 × 2150
|
||||
- density normalization: source was resized and implementation was top-cropped to 1265 × 900 for an equal-size comparison
|
||||
- state: authenticated owner, conversations route, one completed conversation selected, no custom model active
|
||||
|
||||
## Full-view comparison evidence
|
||||
|
||||
The final comparison shows the same information architecture and visual hierarchy as the selected direction: warm paper background, white header and navigation, family tabs, portrait-based elder selection, a seven-day conversation/mood journal, latest-chat summary, family-attention card, and recent activity. The implementation uses real seeded data, so the number of elders, dates, durations, summary availability, and account text intentionally differ from the concept image.
|
||||
|
||||
## Focused region evidence
|
||||
|
||||
- Home journal: weekly duration columns, highlighted current day, mood markers, topic chips, summary card, and the non-diagnostic mood disclaimer were inspected in the desktop comparison.
|
||||
- Avatar flow: `.design-evidence/avatar-upload-preview.png` records the file-picker result and generated WebP preview; the browser assertion confirmed a `data:image/webp` preview with no error.
|
||||
- Permission matrix: `.design-evidence/permission-matrix.png` records all 14 capabilities across four family roles, including the two separately granted recording permissions.
|
||||
- Mobile: `.design-evidence/implementation-home-mobile.png` records the 390 px layout; browser measurement confirmed no document-level horizontal overflow.
|
||||
The equal-size comparison preserves the source's main information architecture: fixed family navigation, family tab, timeline title, left conversation stream, central AI memory note, and right model status. The implementation intentionally uses live test data and a compact filter header instead of the mock's date navigator and grouped demo dates. This does not remove any core task.
|
||||
|
||||
## Required fidelity surfaces
|
||||
|
||||
- Fonts and typography: Chinese system sans-serif hierarchy matches the source's clear editorial treatment; headings, small metadata, labels, and long summary text remain readable and do not truncate important content.
|
||||
- Spacing and layout rhythm: sidebar/content proportions, family tabs, elder strip, two-column journal, lower cards, borders, and radii align with the source after two spacing corrections. Mobile cards stack without page overflow.
|
||||
- Colors and tokens: ivory paper, warm white cards, dusty blue interaction color, coral attention cue, muted green positive cue, and warm hairlines match the selected palette. No decorative gradient is used.
|
||||
- Image quality and asset fidelity: real supplied portrait assets are used with circular crops; uploaded avatars are center-cropped and resized to a 320 × 320 WebP. Ant Design icons supply all UI symbols.
|
||||
- Copy and content: customer-organization and platform-role jargon were removed from customer pages. “本次交流目标” became “长期陪伴方向”; pace help text states that the setting is sent to Doubao at the start of every new chat. Mood copy explicitly describes an inference from authorized summaries and not a health diagnosis.
|
||||
- Fonts and typography: Chinese system sans-serif fallbacks, headline/body weights, line heights, hierarchy, wrapping, and muted metadata are consistent and readable. No clipping or truncation affects core content.
|
||||
- Spacing and layout rhythm: the three-column frame, card padding, border radii, section gaps, selected state, and vertical rhythm follow the source. The narrower implementation viewport appropriately compresses the timeline and model columns.
|
||||
- Colors and tokens: warm neutral page background, white/cream cards, restrained green status color, peach story surface, borders, and shadows map to the selected direction with accessible contrast.
|
||||
- Image quality and assets: the selected live test record has no uploaded portrait, so the implementation uses the product's Ant Design icon system rather than inventing a decorative asset. No target logo or product image was replaced by CSS art or custom SVG.
|
||||
- Copy and content: all labels stand alone in the product context. The implementation adds clear privacy wording for story candidates and identifies the exact model/result version when available.
|
||||
- Interaction and accessibility: timeline items, full-chat action, story-review action, filters, family tabs, model management entry, and refresh controls are semantic buttons/controls. Disabled buttons use the required wait cursor. Form controls are labelled, and the selected/active/status states are not communicated by color alone.
|
||||
|
||||
Focused region comparison was not required: at 1265 × 900 both the source and implementation expose readable labels, typography, icon alignment, card spacing, selected states, and status treatments without zoom ambiguity.
|
||||
|
||||
## Comparison history
|
||||
|
||||
### Iteration 1 — blocked
|
||||
1. Earlier P2 — the implementation capture started below the family tab and page title because a legacy workspace rule hid the heading and the page retained scroll position. Fixed by adding section-specific workspace header overrides and recapturing a full-page state. Post-fix evidence shows the family tab, `回忆时间轴` title, status and refresh action above the three-column layout.
|
||||
2. Earlier P1 — continuous SSE backlog events triggered all workspace REST effects every two seconds, eventually showing a rate-limit alert and preventing a selected conversation from rendering. Fixed by debouncing authoritative event refreshes to a 15-second minimum and loading recent summaries sequentially. Post-fix browser evidence shows 19 records loaded, a selected completed conversation, generated summary content, and no rate-limit alert.
|
||||
3. Final comparison — no actionable P0, P1, or P2 mismatch remains. Live-data differences from the mock (no portrait, fewer generated-version comparisons, compact date filtering) are expected product-state differences and do not block the core journey.
|
||||
|
||||
- P1: the authenticated home still had excessive top padding and a nested workspace card, pushing the journal well below the selected composition.
|
||||
- P2: the 390 px layout expanded to 570 px because the seven-day grid contributed a fixed min-content width.
|
||||
- Fixes: removed customer-page/workspace padding with specificity above the legacy theme, tightened the family/elder strip, contained journal cards and the weekly grid, and corrected the mobile recent-activity grid.
|
||||
- Post-fix evidence: `.design-evidence/implementation-home-v2.png` and `.design-evidence/implementation-home-mobile.png`.
|
||||
## Findings
|
||||
|
||||
### Iteration 2 — passed
|
||||
No actionable P0/P1/P2 findings.
|
||||
|
||||
- Earlier findings are resolved: family tabs now begin directly below the header, the journal occupies the intended above-the-fold area, and mobile has no document-level horizontal overflow.
|
||||
- Real-data differences (one elder rather than four, seeded durations, pending summary) are expected product constraints and do not change the design grammar.
|
||||
- No actionable P0, P1, or P2 visual issue remains.
|
||||
P3 follow-up polish: add a dedicated generation-version comparison drawer once multiple production model outputs are available for the same conversation.
|
||||
|
||||
## Browser and interaction verification
|
||||
## Implementation checklist
|
||||
|
||||
- Tested every customer section at 1280 px: home, conversations, stories, subjects, messages, members, devices, sharing, privacy, billing, and profile.
|
||||
- Confirmed every section has no horizontal overflow and no visible “客户组织” copy.
|
||||
- Confirmed all disabled buttons report `cursor: wait`.
|
||||
- Opened the new-elder dialog, uploaded a real PNG through the browser file chooser, and confirmed the WebP preview.
|
||||
- Confirmed the profile renders 14 permission rows.
|
||||
- Confirmed the final home state has no visible request error and browser logs contain no error-level entry (only Vite reconnect/debug messages from the intentional test-server restart).
|
||||
|
||||
## Follow-up polish
|
||||
|
||||
- P3: when a family contains only one elder, the portrait row naturally has more empty horizontal space than the four-person concept. This is an accurate data state and can later be enriched with a compact “添加长者” affordance if desired.
|
||||
- [x] Three-column memory timeline implemented.
|
||||
- [x] Summary, keywords, story candidate and next-topic states implemented.
|
||||
- [x] Current model and generation provenance shown.
|
||||
- [x] Core interactions and empty/disabled states verified in the in-app browser.
|
||||
- [x] Rate-limit regression removed and browser console-visible page errors checked.
|
||||
|
||||
final result: passed
|
||||
|
||||
Reference in New Issue
Block a user