汽修门店数字化系统 · 界面样式规范

文档编号 QX-UI-2026-001　│　版本 V1.0　│　2026-11-08　│　覆盖 Web 管理端、技师 App、客户小程序、平板与深色主题

适用产品	Web 管理端（前台/库管/老板）· 技师安卓 App · 客户微信小程序
屏幕范围	360px 手机 → 1920px 一体机 → 车间大屏 / 门店 LED
主题	浅色（默认）· 深色 · 4 套品牌主题 · 门店自定义主色
语言	简体中文（默认）· 英文 · 预留繁体与越南语
令牌格式	CSS 变量 + JSON（Figma Variables / Style Dictionary 双出）
关联文档	需求说明书 QX-SRS-2026-001 · 开发设计文档 QX-SDD-2026-001

1　设计原则

原则	含义	落地约束
一眼看清	门店是站着用、边干活边看，信息必须扫读	单屏主任务不超过 1 个；字号不小于 12px；关键数字 ≥ 20px 且等宽
单手可达	技师一手拿工具、一手点手机	主操作放屏幕下半部；底部 44px 操作区；不用悬停下拉
断网可用	门店网络是常态性不稳定	离线横幅常驻可见；提交失败不丢数据；同步状态有明确反馈
少即是快	前台每天重复 50 次的动作要少一步	开单默认带出上次项目；常用配件置顶；表单支持回车跳转
一店一面	不同门店品牌色不同，但不是重做一套 UI	只换品牌色阶与圆角，不改布局与语义色

2　端、断点与布局图

2.1　结论先说

2.2　断点定义

代号	宽度	典型设备	栅格	导航形态
xs 手机	< 600	技师安卓机、客户手机	4 列 / gutter 16 / 边距 16	底部 Tab（≤5 项）
sm 平板竖	600 – 899	iPad 竖屏、10 寸安卓平板	8 列 / gutter 16 / 边距 24	底部 Tab + 顶部返回
md 平板横	900 – 1199	iPad 横屏、前台触屏一体机	12 列 / gutter 24 / 边距 24	左侧图标栏（72px）
lg 桌面	1200 – 1599	前台电脑、笔记本	12 列 / gutter 24 / 边距 32	左侧导航（208px，可折叠）
xl 宽屏	≥ 1600	一体机、连锁总部大屏	12 列 / 最大内容宽 1440 居中	左侧导航 + 右侧信息栏

2.3　三种版式

界面	手机	平板竖	平板横 / 桌面	宽屏
工单列表	卡片流	卡片流 + 顶部筛选条	左列表 + 右详情	左列表 + 详情 + 右侧客户信息
接车开单	分步（3 步）	单页滚动	单页两栏（车辆 / 项目）	两栏 + 右侧历史工单
经营看板	4 张核心卡纵排	2×2 卡片	4 卡 + 趋势图	4 卡 + 趋势 + 技师榜 + 回厂漏斗
配件库存	搜索 + 列表	列表 + 详情	表格（可编辑行）	表格 + 右侧库存流水

2.4　全局框架

所有宽屏页面共用一套骨架：顶栏固定 56px，左侧导航 208px（平板横与窄屏收成 72px 图标栏），右侧信息栏 320px（≥1280 才出现）。 内容区最小可用宽度 1024px，低于这个值右栏自动收起。

2.5　典型页面线框

下面 6 张图覆盖门店最高频的几条路径。线框只定区域划分、信息优先级、操作位置，不定义视觉细节；视觉以组件规范为准。

① 工单列表（桌面：列表 + 详情双栏）

② 工单列表（手机：卡片流）

③ 接车开单（桌面：左填单、右参考）

④ 结算收银

⑤ 经营看板（桌面 / 手机）

要点：手机上第一屏必须看到今日产值与进场台次——这是老板打开系统的唯一目的； 趋势图在手机端只保留折线，去掉坐标轴与图例，点一下看具体数值。

⑥ 车间报工（10 寸平板）

2.6　线框的使用规则

规则	说明
线框是约束，不是设计稿	区域划分、信息层级、操作位置以线框为准；颜色字体图标以组件规范为准，两者冲突时先改线框再改视觉
一个页面只有一个主操作	线框里蓝色描边的按钮就是主操作，出现第二个主按钮视为设计缺陷
主操作位置固定	桌面在右下、移动端在底部通栏；不因内容多少上下移动
新增区块先问"放在哪一格"	不能答出"在内容区第几栏、占几列"，就先别加
平板不单独出图	同一张线框的两种断点排布（单栏 / 双栏）即可，不为平板做第六张页面

3　栅格与间距

间距基于 4px 基线，组件内部用 4 的倍数，区块之间用 8 的倍数。所有边距、行高、控件高度都必须是下表中的值，不出现 13、17、23 这类数字。

令牌	值	用途
space-1	4px	图标与文字、标签内边距
space-2	8px	同行控件间距、卡片内小间距
space-3	12px	表单行间距
space-4	16px	卡片内边距（移动）、栅格 gutter
space-5	20px	卡片内边距（桌面）
space-6	24px	区块间距、页面边距（桌面）
space-8	32px	大区块分隔、页面上下留白
space-10	40px	空状态上下留白
space-16	64px	登录页、引导页

4　色彩与设计令牌

令牌分三层：基础色（不直接用）→ 语义色（界面只用这一层）→ 组件令牌（按钮底色、表格描边等）。 改主题只改基础色与语义色的映射，组件层不动。

4.1　品牌主色阶

4.2　语义色（浅色 / 深色两套）

语义	用途	浅色	深色	备注
brand	主操作、选中、链接	#2F76A8	#6AA8D6	深色提亮约 20%，保证 4.5:1
success	已完成、已收款、库存充足	#2E7D52	#4FB783	不与 brand 抢视线
warning	待料、挂账超期、离线	#B26A12	#E0A45A	必须配图标，不能只靠颜色
danger	删除、欠款逾期、失败	#B42318	#F07067	危险操作需二次确认
info	提示、说明	#2F76A8	#6AA8D6	与 brand 同色系，弱化处理

4.3　中性色与表面层级

4.4　令牌代码

/* 语义令牌：界面里只允许用这一层，不直接写 hex */
:root{
  --bg-canvas:#F5F7F9;  --bg-surface:#FFFFFF;  --bg-sunken:#EEF1F5;
  --text-primary:#1F2937; --text-secondary:#5B6573; --text-disabled:#9AA7B8;
  --border-default:#E3E7EC; --border-strong:#CFD6DE;
  --brand:#2F76A8; --brand-hover:#245F8A; --brand-weak:#EEF6FB;
  --success:#2E7D52; --warning:#B26A12; --danger:#B42318; --info:#2F76A8;
}
html[data-theme="dark"]{
  --bg-canvas:#0E1116;  --bg-surface:#161B22;  --bg-sunken:#1C232C;
  --text-primary:#E6EDF5; --text-secondary:#9AA7B8; --text-disabled:#6B7788;
  --border-default:#2A323D; --border-strong:#3A4453;
  --brand:#6AA8D6; --brand-hover:#8DBDE4; --brand-weak:#16222E;
  --success:#4FB783; --warning:#E0A45A; --danger:#F07067; --info:#6AA8D6;
}

5　字体与排版

中文用系统字体（不下载字体包，门店网络不稳定），数字必须等宽，方便对账时对齐。

font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
font-feature-settings: "tnum" 1;      /* 金额、数量、车牌强制等宽 */
-webkit-font-smoothing: antialiased;

层级	字号/行高	字重	用在哪
Display	30/38	600	看板核心数字、登录页标题
H1	24/32	600	页面标题
H2	20/28	600	卡片标题、弹窗标题
H3	18/26	500	区块标题、列表主信息
Body	14/22	400	正文、表格、表单
Caption	12/16	400	辅助信息、占位符
Number	继承	600	金额/数量：等宽 + 右对齐

6　图标与图片

项目	规范
网格	24×24，安全区 2px（实绘 20×20）
线宽	1.5px，圆角端点；填充图标仅用于选中态
尺寸	16（行内）/ 20（按钮）/ 24（导航）/ 32（空状态）
颜色	继承 currentColor，不写死颜色
图标库	统一用一套线性图标（建议 Lucide），禁止混用多套风格
语义	图标不能单独承载状态，必须配文字或 aria-label
车辆照片	上传压缩到长边 1280、WebP、≤ 300KB；列表用 4:3 缩略图
门店 Logo	正方形 ≥ 256px，深色主题下自动加 1px 描边避免融底

7　组件规范

7.1　按钮

类型	使用场景	一屏最多	规则
Primary	页面唯一主操作（保存、结算、确认）	1 个	同屏出现两个主按钮时，另一个降为 Secondary
Secondary	次要操作（存草稿、返回、取消）	2 个	描边样式，不与主按钮同色块
Ghost	低权重（查看、更多）	不限	仅文字 + 悬停底色
Danger	作废、删除、退款	1 个	必须二次确认；不可作为默认焦点
Disabled	条件未满足	—	必须给出原因（tooltip 或旁注），不能只置灰

7.2　表单

• 标签在输入框上方（不用浮动标签，中文易错位）；必填项在标签后加红色 *。
• 校验时机：失焦校验、提交时汇总；错误文案写在字段下方，说明「怎么改」而不是「错了」。
• 数字键盘：金额与里程调起 inputmode="decimal"，手机号 tel。
• 长表单按业务分段（车辆 → 项目 → 结算），每段可独立保存。

7.3　状态标签

7.4　表格

• 表头吸顶；列宽按内容分配，工单号与车牌不换行。
• 超过 8 列时把次要列收进「更多」，移动端改卡片流。
• 空数据必须有「空状态 + 主操作」，不能只显示一片白。

7.5　反馈：提示、空态、加载

类型	位置	时长	规则
轻提示 Toast	顶部（移动）/ 右上（桌面）	2.5s 自动消失	不打断操作；错误提示不自动消失
横幅 Banner	内容区顶部	常驻	离线、只读、欠费三类状态用横幅
弹窗 Dialog	居中	手动关闭	仅用于确认与不可逆操作；移动端用底部抽屉
加载骨架	列表/卡片占位	—	超过 300ms 才显示，避免闪烁
空状态	内容区	常驻	一句说明 + 一个主操作

8　移动端与车间场景

9　深色模式

深色不是把浅色反色。反色会让品牌色发灰、阴影失效、图片像贴纸。我们采用表面抬升体系：背景越靠上层越亮，用亮度差代替阴影。

规则	做法	原因
不用纯黑	画布 #0E1116，不用 #000	纯黑在 OLED 上边缘生硬，滚动拖影明显
不用纯白字	正文 #E6EDF5，不用 #FFF	纯白在深底上产生光晕，长时间看眼睛累
层级靠表面	bg → surface → elevated 三级	深色下阴影几乎不可见，用亮度区分层级
品牌色提亮	500 → 300 档，饱和度略降	深底上原色对比不足，会“糊”在背景里
语义色重取	成功/警告/危险各自定义深色值	直接复用浅色值会刺眼或对比不足
图片处理	亮度 90%、去纯白底	避免整屏突然一块白
描边替代阴影	1px #2A323D 边框	深色下阴影不可见，靠描边分层
跟随系统	默认跟随 prefers-color-scheme，可手动覆盖并记忆	门店白天/夜间交接班需求不同

10　多主题

“多主题”分两层：品牌主题（我方预设 4 套）与门店主题（客户自选主色）。两者都只改 brand 色阶与圆角，不动语义色和布局。

层级	可改	不可改	生效方式
平台主题	品牌色、圆角、Logo	语义色、字号、栅格	发版时内置
门店主题	品牌主色（从预设选或输入 HEX）	语义色、布局、圆角上限	后台参数，实时生效
深浅模式	浅色 / 深色 / 跟随系统	—	用户偏好，本地记忆

10.1　自定义主色的约束

• 只让用户选 1 个 HEX，系统按 HSL 自动生成 50–900 色阶（亮度步进 8%），避免用户配出不可用的组合。
• 主色与白字对比度 ≥ 4.5:1 才允许保存；不达标时提示「偏亮，建议加深」并给出推荐值。
• 主色不能进入语义色区间（红 / 橙 / 绿），否则会和「危险 / 警告 / 成功」混淆——预检时直接拦截。
• 深色模式下主色自动提亮 20%，不采用用户原值。

10.2　主题令牌导出

{
  "theme": "steel-blue",
  "color": {
    "brand":  { "500": "#2F76A8", "600": "#245F8A", "weak": "#EEF6FB" },
    "text":   { "primary": "#1F2937", "secondary": "#5B6573" },
    "border": { "default": "#E3E7EC" }
  },
  "radius": { "sm": 4, "md": 8, "lg": 12, "pill": 999 },
  "dark": { "brand": { "500": "#6AA8D6" } }
}

11　多语言

首版做中文 + 英文，架构上支持任意语言。多语言的成本不在翻译，而在布局被撑爆和拼接出来的病句。

规则	错误做法	正确做法
不拼句子	"共" + n + "单"	整句做 key：order.count = "共 {n} 单" / "{n} orders"
复数	n + " items"	ICU：{n, plural, one{# item} other{# items}}
数字/货币	手写 ¥ 与千分位	Intl.NumberFormat，货币随门店设置
日期	2026-11-08 硬编码	Intl.DateTimeFormat，存储 UTC，展示按门店时区
文本膨胀	按钮按中文字宽定死	预留 +30%，按钮最小宽度 88px，允许换行到两行
词序	把变量放在句中固定位置	用占位符，翻译者可调整顺序
图片文字	把说明写进图片	文字全部走 i18n，图里只放图标
字体回退	只声明一个中文字体	中英混排字体栈 + lang 属性，避免英文被中文字体渲染

11.1　key 命名

// 模块.组件.语义，全小写，用点分层，不用拼音
order.status.settled        = "已结算" / "Settled"
order.action.settle         = "确认结算" / "Settle"
order.empty.title           = "今天还没有进场车辆" / "No vehicles today"
order.count                 = "共 {n} 单" / "{n, plural, one{# order} other{# orders}}"
common.unit.km              = "公里" / "km"
error.inventory.insufficient= "库存不足，仅剩 {qty} 件" / "Only {qty} left in stock"

11.2　切换行为

• 语言切换不刷新页面，未提交的表单内容保留。
• 数字、日期格式随语言切换，但业务精度不变（金额始终两位小数）。
• 打印小票、报表导出按当前语言生成，已归档单据不回溯翻译。
• 客户侧（小程序）默认跟随微信语言，可手动切；技师端跟随系统语言。

12　无障碍

项	要求
对比度	正文 ≥ 4.5:1；大字（≥18px 或 14px 粗体）与图形边界 ≥ 3:1
触控目标	移动 ≥ 44×44；车间（戴手套）≥ 48×48；相邻目标间距 ≥ 8
焦点可见	键盘 Tab 有 2px 焦点环，颜色 brand-500，不允许 outline:none
不只靠颜色	状态 = 颜色 + 图标 + 文字；图表需有数值标签或表格替代
语义结构	正确使用 h1–h3、label、button；图标按钮必须带 aria-label
动态播报	提交结果、错误提示用 aria-live，屏幕阅读器可听到
缩放	浏览器 200% 缩放不出现横向滚动，不遮挡内容
动效	尊重 prefers-reduced-motion，关闭非必要动画

13　动效

场景	时长	缓动	说明
悬停 / 按下	120ms	ease-out	只改颜色与 1px 位移，不做缩放
弹出层 / 抽屉	180ms	cubic-bezier(.2,.8,.2,1)	从触发点方向进入
页面切换	240ms	ease-out	移动端右进右出，桌面淡入
骨架 → 内容	180ms	ease-out	淡入，不跳动布局
数值变化	300ms	ease-out	只用于看板数字，滚动计数

禁止：超过 400ms 的过渡、无意义的弹跳、加载动画超过 2 秒仍无进度提示。

14　交付与走查

14.1　交付物

交付物	内容	格式
设计文件	Tokens / 组件 / 页面模板（Web、App、小程序各一页）	Figma，变量与代码同名
令牌包	CSS 变量、JSON、SCSS 三份，同源生成	Style Dictionary
组件库	Vue3 + Element Plus 主题包；uni-app 组件	npm 包 + 示例页
走查清单	本页 14.2 的 12 条	Markdown / 表格

14.2　上线前走查清单

1. 颜色：界面中是否出现未走令牌的硬编码 hex？
2. 对比度：正文、按钮文字、禁用态是否达标（含深色）？
3. 字号：是否存在 <12px 的文字？金额是否等宽右对齐？
4. 间距：是否都是 4 的倍数？卡片内边距是否统一？
5. 触控：移动端可点区域是否 ≥44px，车间页 ≥48px？
6. 状态：加载、空、错误、无权限、离线五种状态是否都设计了？
7. 表单：错误提示是否说明「怎么改」？必填是否有标记？
8. 表格：表头是否吸顶？数字列是否右对齐？超 8 列如何处理？
9. 深色：是否在深色下逐页截图走查过？图片是否需要降亮度？
10. 多语言：切到英文后按钮、标签、表格是否溢出或截断？
11. 平板：横竖屏切换后已填内容是否保留？是否误用 hover？
12. 无障碍：Tab 能否走完全流程？图标按钮是否有 aria-label？

---

本文档 V1.0 与需求说明书、开发设计文档同版本发布；令牌变更须同步更新三处代码与 Figma 变量。文档编号 QX-UI-2026-001。