feat: 上传stitch设计稿
This commit is contained in:
R524809
@@ -0,0 +1,54 @@
|
||||
# Design System Strategy: Doodle Mini
|
||||
|
||||
## 1. Overview & Creative North Star: "The Sun-Drenched Studio"
|
||||
The creative direction for this design system is **"The Sun-Drenched Studio."** We are moving away from the cold, clinical "educational app" look and toward a space that feels like a physical, tactile craft room bathed in morning light.
|
||||
|
||||
Instead of a rigid, boxed-in grid, we embrace **Organic Asymmetry**. Elements should feel like they were placed on a table by hand, not snapped to a pixel-perfect wireframe. We break the "template" look by using exaggerated corner radii, overlapping "paper" layers, and a hierarchy that prioritizes warmth and play over traditional data density.
|
||||
|
||||
## 2. Colors: Tonal Radiance
|
||||
The palette is anchored by `primary` (#6c5a00) and `primary_container` (#ffd709), creating a "Yaya Yellow" experience that is vibrant yet sophisticated.
|
||||
|
||||
* **The "No-Line" Rule:** Under no circumstances should 1px solid borders be used to separate content. We define boundaries exclusively through background shifts. Use `surface_container_low` (#f8f0e0) for main content areas and `surface` (#fef6e7) for the global backdrop.
|
||||
* **Surface Hierarchy & Nesting:** Treat the UI as stacked sheets of heavy-weight construction paper.
|
||||
* **Level 0:** `background` (#fef6e7) – The desk surface.
|
||||
* **Level 1:** `surface_container` (#f0e7d6) – The worksheet base.
|
||||
* **Level 2:** `surface_container_lowest` (#ffffff) – Active drawing cards or "Paper" modals.
|
||||
* **The Glass & Gradient Rule:** For navigation bars or floating tool palettes, use Glassmorphism. Apply `surface_container_low` at 80% opacity with a `20px` backdrop blur. This ensures the "sunny" background bleeds through, maintaining the "Sun-Drenched" atmosphere.
|
||||
* **Signature Textures:** Main CTAs should not be flat. Apply a subtle linear gradient from `primary_fixed` (#ffd709) to `primary_fixed_dim` (#efc900) at a 145-degree angle to give buttons a "pillowy" 3D volume.
|
||||
|
||||
## 3. Typography: The Friendly Guide
|
||||
We use **Plus Jakarta Sans** exclusively. Its geometric yet soft terminals provide a modern, legible, and approachable voice.
|
||||
|
||||
* **Display & Headlines:** Use `display-lg` (3.5rem) for "Doodle Mini" brand moments. Headlines (`headline-md`) should use a tighter letter-spacing (-0.02em) to feel "hugged" and friendly.
|
||||
* **Body & Labels:** Use `body-lg` for all instructional text. In a children's context, readability is paramount; ensure a line height of at least 1.6x the font size.
|
||||
* **Hierarchy as Personality:** Use `on_secondary_container` (#6d3b00) for sub-headers to provide a warm, "chocolatey" contrast against the yellow, moving away from harsh blacks.
|
||||
|
||||
## 4. Elevation & Depth: Tonal Layering
|
||||
Depth in this system is a result of light and shadow, not lines and strokes.
|
||||
|
||||
* **The Layering Principle:** To lift a component, place a `surface_container_highest` (#e5dcc9) element inside a `surface_container_low` (#f8f0e0) environment. This creates a "recessed" or "elevated" feel through color value alone.
|
||||
* **Ambient Shadows:** Use shadows sparingly. When an object "floats" (like a floating action button), use a shadow color derived from `on_surface` (#322e25) at 6% opacity, with a blur of `32px` and a Y-offset of `8px`. It should look like a soft glow, not a drop shadow.
|
||||
* **The "Ghost Border" Fallback:** If a separator is required for accessibility in input fields, use `outline_variant` (#b3ac9f) at **15% opacity**. It should be felt, not seen.
|
||||
|
||||
## 5. Components: Tactile & Safe
|
||||
Every component must feel "squishy" and safe to touch.
|
||||
|
||||
* **Buttons:**
|
||||
* **Primary:** Uses `primary_container` (#ffd709) with a `full` (9999px) radius.
|
||||
* **States:** On press, scale the button down to 96% size to simulate a physical "click" into the screen.
|
||||
* **Cards & Lists:** Forbid divider lines. Separate list items using a `spacing-3` (1rem) gap and alternating background colors between `surface_container_low` and `surface_container`.
|
||||
* **Input Fields:** Use `surface_container_highest` for the input track. Corners must be `xl` (3rem). Labels sit *above* the field in `title-sm` to ensure children can always see the context.
|
||||
* **Selection Chips:** Use `secondary_container` (#ffc697) for selected states. The roundedness must be `full` to mimic smooth river stones.
|
||||
* **The "Joy" Progress Bar:** A custom component for Doodle Mini. Use a thick track (`1.5rem` height) in `surface_container_highest` with the progress indicator using a gradient of `tertiary` (#006b1b) to `tertiary_fixed` (#91f78e).
|
||||
|
||||
## 6. Do’s and Don’ts
|
||||
|
||||
### Do:
|
||||
* **Do** use `xl` and `full` corner radii for almost everything. Sharp corners are "scary."
|
||||
* **Do** lean into white space. Use `spacing-12` (4rem) between major sections to let the design breathe.
|
||||
* **Do** use `on_tertiary_container` (dark green) for success states; it feels organic and "earthy" against the yellow.
|
||||
|
||||
### Don’t:
|
||||
* **Don’t** use pure black (#000000). Use `on_surface` (#322e25) for all dark text to maintain the warm, sunny tone.
|
||||
* **Don’t** use 1px dividers. If you feel you need one, use a `surface_variant` (#e5dcc9) color block that is `4px` thick with `full` rounded caps.
|
||||
* **Don’t** crowd the interface. If a screen feels busy, increase the background "paper" size and use a scrollable layout instead of shrinking elements.
|
||||
@@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 'Plus Jakarta Sans';
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* Four-line grid simulation */
|
||||
.tracing-grid {
|
||||
background-image: linear-gradient(#b3ac9f 1px, transparent 1px),
|
||||
linear-gradient(rgba(108, 90, 0, 0.2) 1px, transparent 1px),
|
||||
linear-gradient(rgba(108, 90, 0, 0.2) 1px, transparent 1px),
|
||||
linear-gradient(#b3ac9f 1px, transparent 1px);
|
||||
background-size: 100% 40px;
|
||||
background-position: 0 0, 0 10px, 0 20px, 0 30px;
|
||||
height: 31px;
|
||||
width: 100%;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-container-high": "#eae2d0",
|
||||
"tertiary-fixed": "#91f78e",
|
||||
"error": "#b02500",
|
||||
"inverse-surface": "#110e06",
|
||||
"surface-dim": "#dcd4c0",
|
||||
"on-background": "#322e25",
|
||||
"inverse-on-surface": "#a29c8f",
|
||||
"secondary-fixed": "#ffc697",
|
||||
"on-primary-fixed": "#453900",
|
||||
"tertiary-fixed-dim": "#83e881",
|
||||
"surface-tint": "#6c5a00",
|
||||
"surface-bright": "#fef6e7",
|
||||
"tertiary-container": "#91f78e",
|
||||
"on-primary-fixed-variant": "#665500",
|
||||
"background": "#fef6e7",
|
||||
"on-tertiary": "#d1ffc8",
|
||||
"surface-variant": "#e5dcc9",
|
||||
"on-surface-variant": "#605b50",
|
||||
"surface-container": "#f0e7d6",
|
||||
"primary-fixed-dim": "#efc900",
|
||||
"primary-dim": "#5e4e00",
|
||||
"on-error": "#ffefec",
|
||||
"inverse-primary": "#ffd709",
|
||||
"error-container": "#f95630",
|
||||
"primary-container": "#ffd709",
|
||||
"tertiary": "#006b1b",
|
||||
"secondary": "#8a4c00",
|
||||
"on-error-container": "#520c00",
|
||||
"on-surface": "#322e25",
|
||||
"surface-container-low": "#f8f0e0",
|
||||
"on-primary-container": "#5b4b00",
|
||||
"primary": "#6c5a00",
|
||||
"on-secondary-container": "#6d3b00",
|
||||
"on-primary": "#fff2cd",
|
||||
"secondary-dim": "#794200",
|
||||
"surface-container-highest": "#e5dcc9",
|
||||
"outline-variant": "#b3ac9f",
|
||||
"on-tertiary-fixed-variant": "#00691a",
|
||||
"primary-fixed": "#ffd709",
|
||||
"outline": "#7c766a",
|
||||
"on-secondary": "#fff0e6",
|
||||
"on-tertiary-container": "#005e17",
|
||||
"on-secondary-fixed-variant": "#7a4300",
|
||||
"secondary-container": "#ffc697",
|
||||
"on-secondary-fixed": "#512a00",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface": "#fef6e7",
|
||||
"error-dim": "#b92902",
|
||||
"tertiary-dim": "#005d16",
|
||||
"secondary-fixed-dim": "#ffb470",
|
||||
"on-tertiary-fixed": "#00480f"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.75rem",
|
||||
"lg": "1rem",
|
||||
"xl": "1.5rem",
|
||||
"full": "9999px"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface min-h-screen pb-32">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-[#fef6e7]/80 dark:bg-[#322e25]/80 backdrop-blur-xl flex items-center justify-between px-6 h-16 w-full">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-[#6c5a00] dark:text-[#ffd709] hover:bg-[#f0e7d6] dark:hover:bg-[#4a453a] rounded-full p-2 transition-colors active:scale-95">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-bold tracking-tight text-[#6c5a00] dark:text-[#ffd709] text-xl">英语字母描红</h1>
|
||||
</div>
|
||||
<button class="text-[#6c5a00] dark:text-[#ffd709] hover:bg-[#f0e7d6] dark:hover:bg-[#4a453a] rounded-full p-2 transition-colors active:scale-95">
|
||||
<span class="material-symbols-outlined">favorite</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="pt-24 px-6 max-w-2xl mx-auto space-y-8">
|
||||
<!-- A4 Preview Area -->
|
||||
<section class="relative group">
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-sm p-8 aspect-[1/1.41] flex flex-col items-center border border-outline-variant/10 overflow-hidden">
|
||||
<div class="w-full text-center mb-6">
|
||||
<span class="text-on-surface-variant font-bold text-xs tracking-widest uppercase">Tracing Worksheet</span>
|
||||
</div>
|
||||
<!-- Letter Illustration Section -->
|
||||
<div class="flex items-center justify-between w-full mb-10 gap-8">
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<span class="text-[120px] font-extrabold text-primary leading-none select-none">A</span>
|
||||
<p class="text-on-surface-variant font-medium text-lg mt-2">A is for Apple</p>
|
||||
</div>
|
||||
<div class="flex-1 aspect-square bg-surface-container rounded-lg p-4 flex items-center justify-center">
|
||||
<img alt="stylized vector illustration of a bright red apple with a single green leaf" class="w-full h-full object-contain rounded-lg" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3aAl9MLfHA1OCuWhSU8lGzyGRsUY_a5J8YBJTz-5K4LMHGHXBKUSX3g01G_DZ3NVN-NgcxwVUE8R3eZI6eZflKFgS7rH3ccozjtDL39HT8h_sc6Tyvm1ajJibM7dSr86_z5xNJzRjvapmOoHJ7U6Ni2AuNgbrNXJ8GaFdq_p_zT7JEaObUB6mndE4fbnD3ude5ilpsfYc-MZsG23dkS01tAlzUYozze28qkbOxw6l8vgiSagKE8dvS7h0E_hcFjZWusYd8D5mVuU"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tracing Lines Section -->
|
||||
<div class="w-full space-y-8">
|
||||
<div class="space-y-4">
|
||||
<div class="tracing-grid relative flex items-center px-2">
|
||||
<span class="text-2xl text-on-surface-variant/40 font-bold ml-1 opacity-50 select-none">A A A A A</span>
|
||||
</div>
|
||||
<div class="tracing-grid"></div>
|
||||
<div class="tracing-grid"></div>
|
||||
<div class="tracing-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto text-[10px] text-outline-variant font-medium">DOODLE MINI • ALPHABET SERIES</div>
|
||||
</div>
|
||||
<!-- Magnify Icon Decorative -->
|
||||
<div class="absolute bottom-4 right-4 bg-primary-container text-on-primary-container p-3 rounded-full shadow-md">
|
||||
<span class="material-symbols-outlined">zoom_in</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Parameters Setting Panel -->
|
||||
<section class="bg-surface-container rounded-xl p-6 space-y-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xl">⚙️</span>
|
||||
<h2 class="text-lg font-bold text-on-surface">参数设置</h2>
|
||||
</div>
|
||||
<!-- Practice Type -->
|
||||
<div class="space-y-3">
|
||||
<label class="text-sm font-bold text-on-surface-variant ml-1">练习类型</label>
|
||||
<div class="grid grid-cols-2 gap-2 bg-surface-container-high p-1.5 rounded-lg">
|
||||
<button class="py-2.5 px-3 text-sm font-bold rounded-lg bg-primary-container text-on-primary-container shadow-sm transition-all">单字母学习页</button>
|
||||
<button class="py-2.5 px-3 text-sm font-medium rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-all">整页描红</button>
|
||||
<button class="py-2.5 px-3 text-sm font-medium rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-all">大小写对照</button>
|
||||
<button class="py-2.5 px-3 text-sm font-medium rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-all">两列描红</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Letter Selection Grid -->
|
||||
<div class="space-y-3">
|
||||
<label class="text-sm font-bold text-on-surface-variant ml-1">选择字母</label>
|
||||
<div class="grid grid-cols-6 gap-2">
|
||||
<!-- Letter A (Selected) -->
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-[#FFD700] text-[#6c5a00] font-bold text-lg shadow-sm active:scale-95 transition-all">A</button>
|
||||
<!-- Other Letters -->
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">B</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">C</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">D</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">E</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">F</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">G</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">H</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">I</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">J</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">K</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">L</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">M</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">N</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">O</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">P</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">Q</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">R</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">S</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">T</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">U</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">V</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">W</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">X</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">Y</button>
|
||||
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">Z</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Shuffle Button (Secondary Action) -->
|
||||
<button class="w-full py-4 rounded-xl border-4 border-surface-container text-on-surface-variant font-bold text-lg flex items-center justify-center gap-2 hover:bg-surface-container transition-colors active:scale-[0.98]">
|
||||
<span class="material-symbols-outlined">shuffle</span>
|
||||
🔄 换一批
|
||||
</button>
|
||||
</main>
|
||||
<!-- Fixed Bottom Action Bar -->
|
||||
<footer class="fixed bottom-0 left-0 w-full bg-white/90 dark:bg-[#322e25]/90 backdrop-blur-xl px-6 py-4 flex items-center gap-3 z-[100] border-t border-surface-container shadow-[0_-8px_32px_rgba(50,46,37,0.06)]">
|
||||
<!-- Share Button -->
|
||||
<button class="flex-none w-[35%] h-12 rounded-lg bg-[#9CD343] text-white font-bold text-base flex items-center justify-center gap-2 active:scale-95 transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-xl">share</span>
|
||||
分享
|
||||
</button>
|
||||
<!-- Save Button -->
|
||||
<button class="flex-none w-[60%] h-12 rounded-lg bg-[#FFD700] text-[#6c5a00] font-black text-base flex items-center justify-center gap-2 active:scale-95 transition-all shadow-md">
|
||||
<span class="material-symbols-outlined text-xl">download</span>
|
||||
保存到相册
|
||||
</button>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Reference in New Issue
Block a user