wangxuming/WanderQ-Web2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成首页 V1 并新增旅行杂志版 V2

Browse Source
This commit is contained in:
1
2026-08-13 00:11:17 +08:00
parent 1759117f06
commit 85b41ecb2a
3 changed files with 527 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
design-qa.md
View File

@@ -1,57 +1,35 @@
# Homepage Three-Screen Prototype — Design QA
# Homepage version design QA
- Source visual truth: `docs/homepage-prototype-qa/source-direction.jpg` plus the two supplied Douyin design references (bold business matrix and three-screen narrative funnel).
- Implementation: `http://127.0.0.1:5173/`
- Browser-rendered evidence:
- `docs/homepage-prototype-qa/implementation-hero.png`
- `docs/homepage-prototype-qa/implementation-themes.png`
- `docs/homepage-prototype-qa/implementation-story.png`
- `docs/homepage-prototype-qa/implementation-mobile.png`
- Desktop viewport: 1440 × 1000 CSS px; screenshot 1440 × 872 px after app browser chrome, density 1×.
- Mobile viewport: 390 × 844 CSS px; screenshot 390 × 838 px after app browser chrome, density 1×.
- Source pixels: 2358 × 891. The source is directional rather than a 1:1 frame; comparison normalized by composition, hierarchy, density, palette, imagery, and narrative rhythm rather than pixel position.
- State: default English homepage; hero slide 1; desktop and mobile initial view; second and third screens after scroll.
Date: 2026-08-13
## Full-view comparison evidence
## Visual source
- Hero now uses a full-bleed, low-saturation travel image, oversized sans-serif statement, acid-green accent, concise explanation, and an explicit planning action. It is structurally distinct from the former split image/copy travel template.
- The second screen uses an eight-item edge-to-edge business/experience matrix with consistent numbered cells and responsive 4/2/1-column behavior.
- The third screen creates a clear narrative funnel: point of view → method → three-step explanation → trust statement.
- Direction: MI Travel / Tran Mau Tri Tam travel editorial design reference supplied through the client's Douyin link.
- Compared at a desktop viewport against the source's defining visual traits: cinematic destination hero, navy/cyan/coral palette, asymmetric editorial image grids, mixed feature-story modules, and a strong planning CTA.
- WanderQ's approved Guizhou photography, bilingual content, routes, service proof, and existing navigation remain the product source of truth.
## Focused-region comparison evidence
## V1 — bold business narrative
- Hero typography/crop checked independently at desktop and mobile widths.
- Theme-card image crop, label contrast, and 2-row alignment checked at 1440 px.
- Third-screen portrait crop, headline wrapping, supporting copy, and step borders checked at 1440 px.
- Full page now uses one scoped visual system from hero through final inquiry.
- Remaining legacy sections were unified through square geometry, oversize display type, paper/ink/acid palette, stronger section pacing, and consistent editorial dividers.
- Desktop browser inspection completed at 1280px.
- Broken image check: 0.
- Horizontal overflow check: passed (`scrollWidth === clientWidth`).
- Primary content and CTA routes: present and valid.
## Required fidelity surfaces
## V2 — travel journal
- Fonts and typography: bold sans-serif display type deliberately replaces the previous classic serif-first homepage hierarchy; line breaks, weight, and mobile wrapping remain readable. Card and step headings use the same sans family to preserve the new direction.
- Spacing and layout rhythm: three distinct near-viewport chapters; desktop margins align to a 1500 px max canvas; responsive layouts collapse cleanly without horizontal overflow.
- Colors and tokens: deep forest, warm paper, off-white and acid green form a controlled four-color palette with adequate foreground contrast on the checked states.
- Image quality: all visible assets are supplied high-resolution client imagery; crops are intentional, no placeholders, broken images, fake illustration, or stretched assets were observed.
- Copy and content: English is the default. New headline and explanatory copy are specific to WanderQ, while the existing customer-approved content and downstream routes remain in place.
- Full homepage contains six complete story chapters plus final conversion: hero, experience entry points, village feature, routes, field collage, local-team proof, and planning CTA.
- Source influence is visible in the cinematic hero, asymmetric image grids, editorial rhythm, dark feature chapter, cyan story panel, and coral CTA; WanderQ-specific content prevents brand cloning.
- Desktop browser inspection completed at 1280px.
- Responsive layouts implemented for tablet and mobile breakpoints.
- Broken image check: 0.
- Horizontal overflow check: passed (`scrollWidth === clientWidth`).
- Primary CTA and experience-card navigation tested in browser.
## Primary interactions tested
## Remaining polish
- Hero slideshow controls render and remain operable.
- Primary “Design your journey” CTA resolves to `/contact/`.
- Eight theme cards resolve to existing experience/contact routes.
- Scroll-triggered entrances and hero parallax run without console warnings or errors.
- Broken-image check returned zero failures.
## Comparison history
1. P1: global heading CSS overrode the intended bold display face, leaving hero and matrix headings in serif. Fixed with scoped, higher-specificity homepage type rules. Post-fix evidence: all four implementation screenshots.
2. P2: theme-card and story-step headings still inherited the classic serif family. Fixed by explicitly applying the homepage sans family. Post-fix evidence: `implementation-themes.png` and `implementation-story.png`.
3. P2: mobile hero needed separate type and spacing constraints. Added 820 px and 540 px responsive rules; verified at 390 × 844 with no clipping of the main statement or CTA.
## Findings
No actionable P0/P1/P2 issues remain in the three-screen prototype. The existing full-site header is intentionally retained so the concept can be judged inside the real product rather than as an isolated mock.
## Follow-up polish
- P3: if this direction is approved, tune the remaining homepage sections to continue the same display typography, dark/light cadence, and tighter content density.
- P3: customer may prefer a different hero photograph after comparing all three versions; this is a content choice, not a layout defect.
- P3: final English line breaks can be tuned after the customer confirms which direction to pursue.
final result: passed