|
|
@@ -0,0 +1,117 @@
|
|
|
+{
|
|
|
+ "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 字体"
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
skyline