| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- {
- "schemaVersion": 2,
- "generatedAt": "2026-05-08T00:00:00+08:00",
- "title": "Design System: YesWash 用户端小程序",
- "extensions": {
- "colorMeta": {
- "primary": {
- "role": "primary",
- "displayName": "Primary Red",
- "canonical": "oklch(48% 0.18 25)",
- "tonalRamp": [
- "oklch(15% 0.05 25)",
- "oklch(25% 0.08 25)",
- "oklch(35% 0.12 25)",
- "oklch(42% 0.15 25)",
- "oklch(48% 0.18 25)",
- "oklch(58% 0.14 25)",
- "oklch(72% 0.08 25)",
- "oklch(90% 0.02 25)"
- ]
- },
- "text-primary": {
- "role": "neutral",
- "displayName": "Text Primary",
- "canonical": "oklch(15% 0.002 250)"
- },
- "bg-page": {
- "role": "neutral",
- "displayName": "Page Background",
- "canonical": "oklch(97% 0.003 250)"
- }
- },
- "typographyMeta": {
- "body": { "displayName": "Body", "purpose": "正文、列表项、描述文本，行高 1.6" },
- "title": { "displayName": "Title", "purpose": "页面标题、区块标题、订单金额，600 字重" }
- },
- "shadows": [],
- "motion": [
- { "name": "ease-tap", "value": "0.15s ease", "purpose": "按钮点击反馈" },
- { "name": "ease-state", "value": "0.2s ease", "purpose": "Tab 切换、列表展开" }
- ],
- "breakpoints": []
- },
- "components": [
- {
- "name": "Primary Button",
- "kind": "button",
- "refersTo": "button-primary",
- "description": "页面主操作按钮，44px 最小触控高度",
- "html": "<button class=\"ds-btn-primary\">立即下单</button>",
- "css": ".ds-btn-primary { background: #C6171E; color: #fff; height: 44px; padding: 0 24px; font-size: 14px; font-weight: 500; border: none; border-radius: 3px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition: background 0.15s; } .ds-btn-primary:active { background: #A81212; }"
- },
- {
- "name": "Ghost Button",
- "kind": "button",
- "refersTo": "button-ghost",
- "description": "次要操作，透明底 + 红色边框",
- "html": "<button class=\"ds-btn-ghost\">取消</button>",
- "css": ".ds-btn-ghost { background: transparent; color: #C6171E; height: 44px; padding: 0 24px; font-size: 14px; font-weight: 400; border: 1px solid #C6171E; border-radius: 3px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition: background 0.15s; } .ds-btn-ghost:active { background: rgba(198,23,30,0.08); }"
- },
- {
- "name": "Card",
- "kind": "card",
- "refersTo": "card",
- "description": "标准内容卡片，白底 6px 圆角",
- "html": "<div class=\"ds-card\"><div class=\"ds-card-title\">最近网点</div><div class=\"ds-card-body\">朝阳区建国路88号</div></div>",
- "css": ".ds-card { background: #fff; border-radius: 6px; padding: 15px; margin-bottom: 12px; } .ds-card-title { font-size: 18px; font-weight: 600; color: #1A1A1A; margin-bottom: 8px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .ds-card-body { font-size: 14px; color: #666; line-height: 1.6; }"
- },
- {
- "name": "Tab Bar Item (Active)",
- "kind": "nav",
- "refersTo": "tab-active",
- "description": "自定义底部导航，选中态",
- "html": "<div class=\"ds-tab-item\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"#C6171E\"><circle cx=\"12\" cy=\"12\" r=\"8\"/></svg><span>网点</span></div>",
- "css": ".ds-tab-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; } .ds-tab-item span { font-size: 12px; color: #C6171E; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }"
- },
- {
- "name": "List Item",
- "kind": "custom",
- "refersTo": "list-item",
- "description": "通用列表项，左侧标签 + 右侧箭头",
- "html": "<div class=\"ds-list-item\"><span class=\"ds-list-label\">我的订单</span><span class=\"ds-list-arrow\">›</span></div>",
- "css": ".ds-list-item { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 15px; background: #fff; border-bottom: 1px solid #F0F0F0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .ds-list-label { font-size: 14px; color: #1A1A1A; } .ds-list-arrow { font-size: 18px; color: #B0B0B0; }"
- }
- ],
- "narrative": {
- "northStar": "口袋里的洗车助手",
- "overview": "车主掏出手机，几秒钟内找到最近的洗车网点、完成预约、扫码启动洗车机。整个过程应该在排队等候的间隙就能完成。系统基于 uni-app + uv-ui 组件库，主色已经是品牌红 (#C6171E)。追求「打开即用，用完即走」的小程序典型体验。",
- "keyCharacteristics": [
- "移动端优先，触控目标 ≥44px",
- "品牌红作为导航和行动色",
- "卡片式布局为主",
- "自定义导航栏和底部 TabBar",
- "150-250ms 微交互做状态反馈"
- ],
- "rules": [
- { "name": "The Red Means Action Rule", "body": "品牌红不出现在非交互元素上。看到红色，就意味着可以点击、可以操作。", "section": "colors" },
- { "name": "The Card-White Rule", "body": "所有内容卡片使用纯白底，与页面底色形成两层信息结构。不做三层以上的背景嵌套。", "section": "colors" },
- { "name": "The Weight Over Color Rule", "body": "同一页面最多使用两种文本颜色。层级差异通过字重和字号表达。", "section": "typography" }
- ],
- "dos": [
- "用 Primary Red 标记所有可交互元素和当前激活态",
- "保持页面底色和卡片白底的二级结构",
- "所有可点击区域至少 44px 高",
- "文本层级靠字重区分：400 → 600 → 700",
- "按钮、列表项保持统一的 3px 圆角"
- ],
- "donts": [
- "使用大红色块铺满屏幕",
- "在非交互元素上使用 Primary Red",
- "卡片内嵌套卡片",
- "使用超过两种文本颜色在同一页面",
- "使用花哨的加载动画",
- "在小程序内引入 Web 字体"
- ]
- }
- }
|
