songlf/gp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: make visual direction style-agnostic

Browse Source
This commit is contained in:
songlf
2026-06-11 00:19:17 +08:00
parent 740cb1b18a
commit 4bf6d8059f
1 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
launch/roadmaps/v1.0.1-experience-brief.md
+27 -15
View File
@@ -1,6 +1,6 @@
# Focus Seed 1.0.1 Experience Brief # Focus Seed 1.0.1 Experience Brief
Status: approved product direction, visual route not yet selected. Status: approved product and design principles, visual route not yet selected.
## Product Intent ## Product Intent
@@ -16,9 +16,11 @@ Every screen and feature should strengthen this loop. Generic feature accumulati
## Design Principles ## Design Principles
1. One coherent visual language 1. Coherence without genre constraints
- Do not mix clay, cyberpunk, glass, paper, and flat Material styles indiscriminately. - Clay, cyberpunk, glass, paper, floating surfaces, editorial layouts, and other labels are exploration vocabulary, not requirements or exclusions.
- Select one primary direction after reviewing three complete visual routes. - Derive the visual language from the product's calm focus loop, information hierarchy, interaction needs, audience, accessibility, localization, and performance constraints.
- Select one primary visual grammar after reviewing three complete routes. A small secondary contrast is welcome when it makes a meaningful state, reward, or transition clearer and more memorable.
- Do not mix styles casually or pursue novelty at the expense of clarity. Every visible difference must have a product reason.
- The chosen route must work in light/dark mode, on low-end Android devices, and across supported languages. - The chosen route must work in light/dark mode, on low-end Android devices, and across supported languages.
2. Interaction before decoration 2. Interaction before decoration
@@ -54,21 +56,30 @@ Every screen and feature should strengthen this loop. Generic feature accumulati
## Visual Direction Gate ## Visual Direction Gate
Before implementation, create and review exactly three full-screen directions using the same Today and Timer content: Before implementation, create and review exactly three materially different full-screen directions using the same Today and Timer content. Generate these routes from the product brief each time rather than filling fixed style categories.
1. Organic Clay Growth, recommended starting point The routes may use any visual tradition or combination that has a defensible product rationale. Organic clay, quiet precision, botanical editorial, cyberpunk, glass, paper, spatial depth, or a new hybrid are examples only. No genre receives automatic preference or rejection.
- Soft dimensional seed/growth objects, restrained tactile depth, calm teal and warm yellow.
- Strong brand fit without turning the whole UI into toy-like clay controls.
2. Quiet Precision Each route must show how its visual choices improve:
- Crisp typography, calm surfaces, subtle floating depth, high information clarity.
- Best for long-term productivity credibility and accessibility.
3. Botanical Editorial - Task clarity and one-handed ease of use
- More expressive type and organic composition, grounded by functional controls. - Calmness, comfort, and low cognitive load
- Stronger emotional identity but higher localization and layout risk. - Immediate tap, state, transition, and completion feedback
- Brand recognition and the seed-growth metaphor
- Accessibility, localization, dark mode, and responsive layouts
- Smooth rendering and restrained battery use on ordinary Android devices
Cyberpunk is not the default recommendation for this product. It can look striking, but its high-energy visual language conflicts with calm focus and broad global accessibility unless research demonstrates a specific audience fit. Evaluate the three routes with the same weighted scorecard:
- Usability and task clarity: 30%
- Comfort and cognitive load: 20%
- Interaction and motion coherence: 15%
- Visual hierarchy and readability: 15%
- Distinctiveness and emotional appeal: 10%
- Accessibility and global adaptability: 5%
- Performance feasibility: 5%
The highest score is not automatically selected. Resolve any weak core-flow score first, then use informed visual judgment to choose the most compelling complete experience.
The chosen visual route must define: The chosen visual route must define:
@@ -77,6 +88,7 @@ The chosen visual route must define:
- Surface/elevation model - Surface/elevation model
- Icon treatment - Icon treatment
- Illustration/growth system - Illustration/growth system
- Rules for deliberate visual contrast and where it is not allowed
- Navigation and tab behavior - Navigation and tab behavior
- Dialog, sheet, menu, snackbar, empty, loading, error, success, and destructive states - Dialog, sheet, menu, snackbar, empty, loading, error, success, and destructive states
- Motion curves and durations - Motion curves and durations