Главная Обзор Помощь
Регистрация Вход
evolve
/
car-wash-java
2
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Дерево: 08106a5cab
Ветки Метки
car-wash-java
/
car-wash-mp
/
DESIGN.md

DESIGN.md 7.6 KB
История Исходник

name: YesWash 用户端小程序 description: 自助洗车车主端微信小程序，预约、支付、会员一站式服务 colors: primary: "#C6171E" primary-light: "#E84545" primary-dark: "#A81212" success: "#4CAF50" warning: "#FF9800" error: "#F44336" info: "#2196F3" text-primary: "#1A1A1A" text-secondary: "#666666" text-tertiary: "#999999" text-placeholder: "#B0B0B0" text-inverse: "#FFFFFF" bg-page: "#F5F7FA" bg-card: "#FFFFFF" bg-hover: "#F8F8F8" border: "#E0E0E0" border-light: "#F0F0F0" divider: "#F0F0F0" typography: body:

fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
fontSize: "14px"
fontWeight: 400
lineHeight: 1.6

caption:

fontSize: "12px"
fontWeight: 400
lineHeight: 1.2

title:

fontSize: "18px"
fontWeight: 600
lineHeight: 1.4

headline:

fontSize: "24px"
fontWeight: 700
lineHeight: 1.2

rounded: sm: "2px" md: "3px" lg: "6px" full: "50%" spacing: xs: "4px" sm: "8px" md: "12px" lg: "15px" components: button-primary:

backgroundColor: "{colors.primary}"
textColor: "{colors.text-inverse}"
rounded: "{rounded.md}"

button-primary-hover:

backgroundColor: "{colors.primary-dark}"

tab-active:

textColor: "{colors.primary}"

tab-inactive:

textColor: "#7A7E83"

Design System: YesWash 用户端小程序

1. Overview

Creative North Star: "口袋里的洗车助手"

车主掏出手机，几秒钟内找到最近的洗车网点、完成预约、扫码启动洗车机。整个过程应该在排队等候的间隙就能完成 — 不需要思考，不需要学习，不需要等待。界面是透明的，用户看到的不是 UI，而是自己的车和下一个空闲的洗车位。

系统基于 uni-app + uv-ui 组件库，主色已经是品牌红 (#C6171E)，设计令牌体系完整。追求的是「打开即用，用完即走」的小程序典型体验：信息密度低、操作路径短、视觉噪声少。

Key Characteristics:

  • 移动端优先，触控目标 ≥44px
  • 品牌红作为导航和行动色，页面背景保持浅灰，卡片纯白
  • 卡片式布局为主，每个卡片承载一个独立信息单元
  • 自定义导航栏和底部 TabBar，与系统 UI 自然融合
  • 不做过度动画，只用 150-250ms 微交互做状态反馈

2. Colors

Primary

  • Primary Red (#C6171E): 品牌主红 — 比后台管理系统的 Brand Red 更深一度，在小尺寸屏幕上有更好的辨识度。用于主按钮、Tab 选中态、轮播指示器、价格、关键状态图标。
  • Primary Light (#E84545): 浅红，用于 hover 态和浅色强调背景。
  • Primary Dark (#A81212): 深红，用于按钮按下态和深色强调。

Semantic

  • Success (#4CAF50): 支付成功、操作完成。
  • Warning (#FF9800): 余额不足、即将过期。
  • Error (#F44336): 支付失败、网络错误。
  • Info (#2196F3): 订单状态更新、系统通知。

Neutral

  • Text Primary (#1A1A1A): 正文、标题、核心信息。
  • Text Secondary (#666666): 辅助描述、次要标签。
  • Text Tertiary (#999999): 时间戳、弱化信息。
  • Text Placeholder (#B0B0B0): 输入框占位符。
  • Page Background (#F5F7FA): 页面全局底色，略带蓝灰的浅色。
  • Card Background (#FFFFFF): 卡片、列表项、弹窗背景。
  • Border (#E0E0E0): 分割线、卡片描边。
  • Divider (#F0F0F0): 轻量分割。

Named Rules

The Red Means Action Rule. 品牌红不出现在非交互元素上。看到红色，就意味着可以点击、可以操作、或者这是当前激活态。

The Card-White Rule. 所有内容卡片使用纯白底 (#FFFFFF)，与页面底色 (#F5F7FA) 形成两层信息结构。不做三层以上的背景嵌套。

3. Typography

Font Family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

系统字体栈，保证 iOS 和 Android 各自的最优渲染。小程序内不引入 Web 字体，不增加包体积。

Character: 清晰、中性、不抢戏。字号跨度从 12px 到 24px，通过字重而非颜色区分层级。

Hierarchy

  • Headline (700, 24px, 1.2): 大标题，仅用于首页和重要落地页顶部。
  • Title (600, 18px, 1.4): 页面标题、区块标题、订单金额。
  • Body (400, 14px, 1.6): 正文、列表项、描述文本。
  • Caption (400, 12px, 1.2): 辅助说明、时间、标签。
  • Small (400, 13px, 1.4): 表单标签、次要按钮文字。

Named Rules

The Weight Over Color Rule. 同一页面最多使用两种文本颜色（Primary + Secondary）。层级差异通过字重 (400/600/700) 和字号表达，不引入第三种颜色。

4. Elevation

小程序采用扁平底色分层策略。不依赖阴影区分层级，而是通过背景色差（页面灰 → 卡片白）自然建立视觉层次。

  • 页面底色 #F5F7FA 提供全局基准面
  • 卡片白色 #FFFFFF 浮于基准面之上
  • 弹窗/底部弹出层使用轻微阴影或遮罩 (rgba(0,0,0,0.4))

阴影仅用于必须传达「浮层」的场景：底部弹出菜单、模态对话框。

5. Components

所有组件基于 @climblee/uv-ui，以下记录关键定制和使用约束。

Buttons

  • Shape: 3px 圆角，默认高度 44px（满足触控最小尺寸）。
  • Primary: Primary Red 满底 + 白色文字。用于页面主操作：立即下单、确认支付、一键导航。
  • Hover: 背景深至 Primary Dark，无缩放动画。
  • Ghost: 透明底 + Primary Red 边框和文字。用于次要操作。
  • Disabled: 透明度 0.3，不可交互。

Tab Bar

  • Style: 自定义底部导航，白色背景，顶部 1px 分割线。
  • Active: Primary Red (#C6171E) 图标和文字。
  • Inactive: 灰色 (#7A7E83) 图标和文字。
  • Font Size: 12px 标签文字。

Cards

  • Corner Style: 6px 圆角。
  • Background: Card White (#FFFFFF)。
  • Shadow: 无默认阴影。
  • Internal Padding: 12-15px (md-lg)。

Navigation Bar

  • Style: 自定义导航栏，Primary Red 背景 + 白色标题。
  • Height: 状态栏高度 + 44px 内容区。
  • Title: 18px, 600 字重, 白色。

List Items

  • Style: 白色背景，左侧图标/标签 + 右侧箭头，高度 ≥44px。
  • Divider: 底部 1px Border Light 分割线，左右各 15px 留白。
  • Hover: 背景微变至 #F8F8F8。

Form Inputs

  • Style: 白色背景，底部 1px Border 分割线。
  • Focus: 分割线变为 Primary Red。
  • Label: 14px, Text Primary, 左对齐。
  • Placeholder: 14px, Text Placeholder。

6. Do's and Don'ts

Do:

  • Do 用 Primary Red 标记所有可交互元素和当前激活态
  • Do 保持页面底色 (#F5F7FA) 和卡片白底 (#FFFFFF) 的二级结构
  • Do 所有可点击区域至少 44px 高，满足微信小程序触控规范
  • Do 文本层级靠字重区分：400 正文 → 600 标题 → 700 大标题
  • Do 按钮、列表项、表单项保持统一的 3px 圆角
  • Do 订单金额、优惠标签使用 600 字重突出

Don't:

  • Don't 使用大红色块铺满屏幕。红色是信号，不是背景
  • Don't 在非交互元素上使用 Primary Red
  • Don't 卡片内嵌套卡片
  • Don't 使用超过两种文本颜色（Primary + Secondary）在同一页面
  • Don't 使用花哨的加载动画或页面切换效果
  • Don't 使用 border-left 彩色强调条
  • Don't 在小程序内引入 Web 字体，增加不必要的包体积
  • Don't 在三层以上的背景色嵌套中迷失（页面灰 → 卡片白，仅此两层）