Domů Procházet Nápověda
Registrovat se Přihlásit se
evolve
/
car-wash-java
2
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Strom: f8fafe2818
Větve Značky
car-wash-java
/
DESIGN.md

DESIGN.md 15 KB
Historie Surový

name: 自助洗车运营管理 description: 为自助洗车门店提供一站式运营管理平台，连接门店、服务商与车主 colors: cinnabar-red:

hex: "#C6171E"
role: primary

cinnabar-light:

hex: "#E84545"
role: primary-light

cinnabar-dark:

hex: "#A81212"
role: primary-dark

success-green:

hex: "#52C41A"
role: semantic

warning-orange:

hex: "#FF9800"
role: semantic

error-red:

hex: "#F44336"
role: semantic

info-blue:

hex: "#2196F3"
role: semantic

ink-black:

hex: "#1A1A1A"
role: text-primary

stone-grey:

hex: "#666666"
role: text-secondary

ash-grey:

hex: "#999999"
role: text-disabled

cloud-grey:

hex: "#B0B0B0"
role: text-placeholder

surface-white:

hex: "#FFFFFF"
role: surface

frost-page:

hex: "#F5F7FA"
role: page-bg

hairline:

hex: "#E0E0E0"
role: border

hairline-light:

hex: "#F0F0F0"
role: border-light

typography: display:

fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
fontSize: "32px"
fontWeight: 700
lineHeight: 1.2

headline:

fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
fontSize: "24px"
fontWeight: 600
lineHeight: 1.3

title:

fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
fontSize: "20px"
fontWeight: 600
lineHeight: 1.3

body:

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

body-sm:

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

label:

fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
fontSize: "12px"
fontWeight: 500
lineHeight: 1.2

rounded: sm: "8px" md: "12px" lg: "16px" xl: "24px" pill: "100px" spacing: xs: "4px" sm: "8px" base: "12px" lg: "16px" xl: "20px" card-inner: "10px" components: button-primary:

backgroundColor: "{colors.cinnabar-red}"
textColor: "{colors.surface-white}"
rounded: "{rounded.lg}"
padding: "12px 28px"

button-primary-pressed:

backgroundColor: "{colors.cinnabar-dark}"
textColor: "{colors.surface-white}"
rounded: "{rounded.lg}"

button-secondary:

backgroundColor: "{colors.surface-white}"
textColor: "{colors.ink-black}"
rounded: "{rounded.sm}"
padding: "10px 24px"

chip-status:

backgroundColor: "var(--chip-bg)"
textColor: "var(--chip-color)"
rounded: "{rounded.pill}"
padding: "3px 12px"

card:

backgroundColor: "{colors.surface-white}"
rounded: "{rounded.xl}"
padding: "12px"

input-field:

backgroundColor: "#F5F5F5"
textColor: "{colors.ink-black}"
rounded: "{rounded.sm}"
padding: "10px 14px"

tab-active:

backgroundColor: "{colors.cinnabar-red}"
textColor: "{colors.surface-white}"
rounded: "{rounded.sm}"

tab-inactive:

backgroundColor: "transparent"
textColor: "{colors.stone-grey}"
rounded: "{rounded.sm}"

Design System: 自助洗车运营管理

1. Overview

Creative North Star: "工坊里的红标工具箱"

朱砂红是工具箱上的那块铭牌——它不抢眼，但你扫一眼就知道该拿哪一把。每一件工具都放在它应该在的位置，手柄的弧度刚好贴合手掌，不需要说明书，不需要思考。界面是安静的，但处处有回应：按下去有反馈，等待时有交代，出错时说人话。

这套设计语言服务于每天面对屏幕数小时的操作者——洗车店经营者、员工、服务商。它不追求惊艳，追求的是长期相处的舒适。温润有质、清晰优先、亲切高效：这三条产品原则直接翻译成了视觉规则。

Key Characteristics:

  • 红色是功能性的，不是装饰性的——它标记主操作、激活态、关键信息，只占屏幕的 ≤10%
  • 微妙的触感反馈：静态时平面，交互时元素微升，阴影轻且聚焦
  • Inter 字体承载从 32px 标题到 12px 标签的完整层级，重量对比清晰
  • 字典驱动的状态色系统：红/绿/橙/蓝四色由后端控制，前端不做假设
  • 卡片白底带极轻阴影，页面底色是带有一点蓝调的灰白

2. Colors

朱砂红是工具箱的标记色，灰白系是工坊的墙面和桌面。

Primary

  • 朱砂红 Cinnabar Red (#C6171E): 主操作按钮、选中态、导航栏背景、品牌焦点。出现在每屏 ≤10% 的面积上——它的稀缺就是它的力量。
  • 浅朱砂 Cinnabar Light (#E84545): 悬停态、渐变终点、需要比主色轻一级的强调场景。
  • 深朱砂 Cinnabar Dark (#A81212): 按压态、链接悬停、需要更沉一步的红色。

Semantic

  • 成功绿 Success Green (#52C41A): 在线、已完成、收入金额。字典映射的默认成功色。
  • 提醒橙 Warning Orange (#FF9800): 待处理、忙碌、需注意。非破坏性的警示。
  • 错误红 Error Red (#F44336): 删除、危险操作、失败状态。与朱砂红保持区分。
  • 信息蓝 Info Blue (#2196F3): 链接、辅助信息、中性提示。

Neutral

  • 墨黑 Ink Black (#1A1A1A): 正文标题，最高对比度文字。
  • 石灰 Stone Grey (#666666): 次要信息、描述文字、未选中标签。
  • 灰 Ash Grey (#999999): 禁用态、占位提示、次级辅助信息。
  • 云灰 Cloud Grey (#B0B0B0): 输入框占位符。
  • 纸白 Surface White (#FFFFFF): 所有卡片和内容区的背景。
  • 霜白页面 Frost Page (#F5F7FA): 页面底色，略带蓝调的灰白，与卡片白形成自然层级。
  • 发丝线 Hairline (#E0E0E0): 标准分割线和边框。
  • 浅发丝 Hairline Light (#F0F0F0): 轻量分割，卡片内部元素分隔。

Named Rules

The 10% Rule. 朱砂红在任何一屏上的面积不超过 10%。它是标记，不是底色。如果发现自己在给第三个元素涂红，先问问前两个是不是必须的。

The Red Don't Compete Rule. 错误红 (#F44336) 和朱砂红 (#C6171E) 永远不同时出现在同一视线区域内。它们是两套独立的信号系统——品牌 vs 状态——混在一起就是噪音。

3. Typography

Display Font: Inter (with system fallback stack) Body Font: Inter (with system fallback stack)

Character: Inter 是一个「没有口音」的字体——它不暗示任何时代、任何地域、任何行业。它的中性让操作者把注意力完全放在数据上，而不是字体的性格上。但它的 x-height 偏高、开口开阔，在长时间阅读时不容易疲劳。

Hierarchy

  • Display (700, 32px, 1.2): 页面级标题。每页只出现一次。
  • Headline (600, 24px, 1.3): 区块标题、弹窗标题。
  • Title (600, 20px, 1.3): 卡片标题、列表项主文字。
  • Body (400, 16px, 1.5): 正文、表单标签、列表内容。行宽上限 70ch。
  • Body SM (400, 14px, 1.5): 辅助描述、时间戳、次要列表项。
  • Label (500, 12px, 1.2): 状态标签内文字、表头、元数据。可配合大写。

Named Rules

The Weight Contrast Rule. 相邻层级之间字重差至少 200（Regular→Semibold→Bold），字号差至少 1.25 倍。不要用同字重不同字号来区分层级——它看起来像排版错误。

The Single Typeface Rule. 全系统只用 Inter 一个字族。不要引入第二个字体——层级完全由字号和字重区分，不需要换字体来「增加变化」。

4. Elevation

触感微升 Tactile Lift. 界面在静态时是平的——卡片和页面底色之间只有颜色差异，没有阴影。元素只有在交互时才微微浮起：悬停的卡片、按下的按钮、展开的下拉。阴影是交互的产物，不是默认装饰。

Shadow Vocabulary

  • 微光 Ambient SM (0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04)): 悬停态，元素刚刚离开表面。
  • 标准 Ambient Base (0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)): 卡片默认态（当页面需要卡片显式分层时）。
  • 升起 Lift LG (0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)): 激活卡片、拖拽中元素。
  • 顶层 Elevate XL (0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)): 模态框、弹出层。
  • 品牌导航 Branded Nav (0 2px 8px rgba(198,23,30,0.15)): 顶部导航栏专属——红色调阴影让它温和地浮在内容之上。

Named Rules

The Lift-On-Interaction Rule. 静态元素没有阴影。阴影只在 hover、focus、active、drag 时出现。如果一张卡在用户碰到它之前就已经浮在那里，问自己它是不是真的需要那么重要。

5. Components

Buttons

Character: 温润确定。圆角柔和但不圆胖，按压有下降和颜色加深的双重反馈。

  • Shape: 主按钮圆角 16px（lg），次级按钮和操作按钮 8px（sm）。提交型全宽按钮使用 44rpx（22px）胶囊形。
  • Primary: 朱砂红背景，白色文字，内边距 12px 28px。字体 14px/500。
  • Hover: 背景变为浅朱砂 (#E84545)，或原色基础上叠加半透明遮罩。
  • Pressed: 背景变为深朱砂 (#A81212)，同时 transform: scale(0.97)——双重确认。
  • Disabled: 不透明度 0.5，背景退为 #CCCCCC。交互完全阻断。
  • Secondary: 白底，墨黑文字，1px 发丝线边框。悬停时边框加深。
  • Ghost: 纯文字，无背景无边框。用于表格行内操作、工具栏次要动作。悬停时文字变色为朱砂红。

Chips / Status Tags

Character: 功能性徽章——一眼知道状态，不需要读文字。

  • Shape: 胶囊形（pill，100px 半径），内边距 3px 12px，字号 11px/500。
  • Color: 背景 = 字典色 + 1A（10% 不透明度），文字 = 字典色原值。例如在线状态：background: #52C41A1A; color: #52C41A。
  • Fallback: 当字典数据不可用时，成功态 #52C41A，警告态 #FAAD14，错误态 #F5222D，中性态 #999999。
  • Size: 统一高度，文字自适应宽度。不设固定宽度。

Cards

Character: 安静的白纸。圆角柔和（24px/xl），阴影极轻（Ambient Base），只在悬停时升起。

  • Corner Style: 24px（xl），或页面内使用 20rpx（10px）。
  • Background: 纸白 #FFFFFF。
  • Shadow (at rest): 可选，取决于页面是否需要显式分层。数据密集页面可默认带阴影；信息流页面可仅靠底色区分。
  • Shadow (hover): 0 4rpx 16rpx rgba(0,0,0,0.06)，配合 translateY(-2px)。
  • Border: 无。用阴影和间距区分卡片与背景，不加描边。
  • Internal Padding: 24rpx（12px）标准，30rpx（15px）宽松。

Inputs / Fields

Character: 低调的输入区，焦点时被朱砂红唤醒。

  • Style: 背景 #F5F5F5（比霜白页面稍暖的灰），无边框，圆角 8px（sm），内边距 10px 14px。
  • Focus: 朱砂红聚焦环 0 0 0 3px rgba(198,23,30,0.2)，背景保持 #F5F5F5 不变。
  • Placeholder: 云灰 #B0B0B0，14px/400。
  • Error: 聚焦环变为错误红，输入框下方不额外显示红色提示框（错误信息在字段旁或下方用文字提示）。

Segmented Controls / Filter Tabs

Character: 快速切换视口的「挡位选择器」。选中态有明确的物理感。

  • Container: 背景 #F5F5F5，圆角 16rpx（8px），内边距 6rpx（3px），flex 排列。
  • Active Segment: 朱砂红背景，白色文字，字重 500。附带品牌色阴影 0 4rpx 12rpx rgba(198,23,30,0.3)——这是整个系统里阴影最重的元素，因为它需要确认「你在这里」。
  • Inactive: 透明背景，石灰 (#666666) 文字，字重 400。
  • Transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1)。

Search Bars

Character: 工具条，不是装饰。输入区和按钮紧密相邻，一眼知道是搜索。

  • Container: 白底卡片，标准阴影 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)，圆角匹配所在页面的卡片风格。
  • Input Wrapper: 背景 #F5F5F5，圆角 8px，内含搜索图标（AppIcon search，云灰色）。
  • Search Button: 朱砂红背景，白色文字 "搜索"，圆角 8px。紧贴输入区右侧。

Navigation (NavBar)

Character: 朱砂红的顶部标记——告诉操作者「你还在工具里」。白色标题文字，左侧返回箭头。

  • Background: 朱砂红 #C6171E。
  • Shadow: 品牌导航阴影 0 2px 8px rgba(198,23,30,0.15)。
  • Layout: 三列——左侧 120rpx 固定宽度（返回箭头），中间标题居中，右侧 120rpx 固定宽度（可选操作按钮）。
  • Title: 17px/600，白色。
  • Height: 44px + 状态栏高度。
  • Back Arrow: AppIcon chevron-left，白色，24px。

6. Do's and Don'ts

Do:

  • Do 用朱砂红标记每屏唯一的主操作路径。如果一屏上出现两个红色按钮，其中一个必须降级为次级。
  • Do 用 24px 圆角统一所有卡片。页面上不应该出现两种不同的卡片圆角。
  • Do 让阴影只出现在交互时。静态元素保持平坦，页面底色和卡片底色之间的色差已经足够区分层级。
  • Do 用字重差异（≥200）和字号差异（≥1.25x）来建立信息层级，不依赖颜色。
  • Do 在状态标签上使用字典色 + 10% 不透明度背景的公式。这是系统级的约定，不要为某个标签特判。
  • Do 给所有颜色过渡和位置变化使用 cubic-bezier(0.4, 0, 0.2, 1) 缓动，0.25s 时长。统一的节奏比花哨的曲线更重要。

Don't:

  • Don't 使用大色块堆砌、过度装饰、多余动画、营销口号式文案。这个系统是为工具使用场景设计的，不是营销页面。
  • Don't 出现密集表格、灰色调泛滥、控件堆叠、缺乏视觉层级和呼吸感的老式 ERP 风格。
  • Don't 使用 SaaS 奶油白 + 单色蓝紫渐变的模板化配色。这里没有蓝紫渐变的位置。
  • Don't 为了追求"专业"而牺牲温度——无性格的灰色、机械的间距、缺乏反馈的交互。
  • Don't 使用 border-left 或 border-right 超过 1px 的彩色侧边条纹来标记卡片或列表项。用完整的边框、背景色差或前置图标代替。
  • Don't 使用渐变文字（background-clip: text）。标题的强调通过字重和字号实现，不需要渐变。
  • Don't 在一屏上同时使用错误红 (#F44336) 和朱砂红 (#C6171E)——它们是两套信号系统，混在一起互相消解。
  • Don't 引入第二个字体。Inter 承担所有角色。层级靠字重和字号，不靠换字体。
  • Don't 嵌套卡片——卡片里面再放卡片永远是错的。用背景色差或分割线区分内容区块。