巧瓜顺风车 · 设计规范系统 Design System

00

设计原则

四条原则，用于裁决所有设计分歧。当方案之间难以取舍时，从上往下依次优先。

一眼看懂

信息的核心是「从哪到哪、什么时候、几个位」。这四件事必须在 1 秒内被读到，其余信息退到第二层。

拇指优先

司机常在停车间隙单手操作。所有可点区域不小于 44×44pt，主操作永远在屏幕下半部。

信任先行

陌生人交易，信任比效率更稀缺。实名标识、虚拟号码、审核状态必须可见且不打扰。

克制用色

绿色只代表「可行动」，红色只代表「付费曝光」。任何装饰性用色都会稀释这两个信号。

01

品牌与调性

从「县域信息小站」升级为「可信赖的顺路网络」——保留乡土亲切感，去掉廉价感。

巧

品牌标识

巧瓜顺风车

标识取「巧」字，方中带圆，寓意「顺路、凑巧」。
图形圆角 26px，与卡片体系同源。

品牌语与文案调性

顺路同行，空位不空跑

· 说人话，不说术语：「空位」而不是「可载客数」
· 用短句，不用长句：一句一行，最多两行
· 给确定感：「剩 3 座」而不是「有座位」
· 不用感叹号堆情绪，信任靠事实建立

02

色彩系统

主色取自「山野青绿」，在深色县域场景下辨识度高，且与红色付费标识形成明确区隔。

主色阶 · Brand Green

50#EAF8F3

100#D2F1E6

200#A4E4CD

300#6BD3B0

400#2EC495

500#0EA47A

600#0A8763

700#07694D

500 为主色，用于按钮、选中态、品牌元素；600 用于按下态与深色文字；50/100 用于浅底标签与图标底。

语义色 · 四大信息类型

车找人

有空位 · 主色绿

#0EA47A

平台最高频类型，使用品牌主色建立正向联想

人找车

需求方 · 沉静蓝

#3B7DF6

代表「等待被满足」的需求，与供给形成冷色对比

车找货

运力方 · 暖琥珀

#F5A524

货运场景的工业属性，同时区别于客车的绿色

货找车

货源方 · 紫罗兰

#7C5CFC

与「车找货」同属货运但角色相反，用同色系区分方向

功能色

Token	色值	用途	使用约束
`--coral-500`	#FF5A4E	付费加红	仅用于「加红标题」「热门/火爆」角标，不得用于普通按钮
`--coral-600`	#E8443A	加红标题文字	加红信息的标题文字色，保证 4.5:1 对比度
`--amber-500`	#F5A524	置顶 / 提醒	表示「更强曝光」与「需要注意」，不与红色同时出现在一个标签内
`--blue-500`	#3B7DF6	系统 / 信息	系统通知、审核通过等中性正向反馈

中性色阶

900

800

700

600

500

400

300

line

bg

surface

中性色带轻微绿调（而非纯灰），使页面在白与绿之间过渡更自然。正文使用 800，次要信息 400/500，禁用态 300。

用色比例

70% 中性底色

20% 文字与深色块

8% 品牌绿

2%

屏幕上绿色占比不超过 10%。一旦超过，绿色就失去「可点击」的信号意义。

03

字体系统

使用系统字体，零加载成本。字号偏大——目标用户中 40 岁以上占比高。

字族

-apple-system → PingFang SC → HarmonyOS Sans SC → MiSans → Microsoft YaHei

iOS 用苹方，Android 用系统默认（鸿蒙 / 思源黑），小程序与 H5 共用同一套 fallback，保证双端一致。

Display28 / 760
lh 1.18

顺路同行空位不空跑

首页主标题、活动页

H121 / 750
lh 1.36

威宁 → 贵阳明天中午出发

详情页信息标题

H218 / 700
lh 1.4

热门线路 · 威宁到贵阳

卡片路线、区块标题

H316 / 680
lh 1.45

你要发布哪类信息？

表单分组、弹窗标题

Body15 / 550
lh 1.55

无烟车，私家车找人，后排可放行李，老人小孩都可乘坐。

正文、输入框内容

Body-S13.5 / 500
lh 1.6

发布于 2 分钟前 · 2,936 次浏览 · 128 次转发

辅助说明、元信息

Caption12 / 500
lh 1.6

手机号仅对已登录用户可见，支持虚拟号保护

表单提示、卡片次要字段

Micro10.5 / 600
lh 1.5

出发地 / 目的地 / 空位数量

字段标签、Tab 文字、角标

数字规范：所有数字使用 font-feature-settings:"tnum" 等宽对齐，浏览数、金额、时间不会因位数变化而跳动。

04

间距与栅格

以 4pt 为基础单位，8pt 为主节奏。所有间距只能取下列值，不允许出现 13px、17px 这类随意数值。

4 · 极小

图标与文字、标签内左右内边距

8 · 小

标签间距、紧凑元素间隔

12 · 基础

卡片内边距、列表行间距

16 · 标准

页面左右安全边距（固定值）

20 · 中

卡片内大间距、区块间

24 · 大

区块之间、页面纵向分组

32 · 加大

页面大分区

48 · 超大

空状态、结果页留白

4 列栅格 · 页面边距 16 / 槽宽 8

390px 屏宽下，内容区 358px，单列宽 81.5px。首页四大入口、双列卡片均按此栅格排布。

关键尺寸

元素	尺寸	说明
页面左右边距	`16px`	全局固定，任何页面不得例外
主按钮高度	`48px`	底部操作条、表单提交
次级按钮高度	`36px`	卡片内操作
输入框高度	`50px`	含 1.5px 边框
信息卡内边距	`14px`	卡片圆角 20px 时为最佳比例
底部导航高度	`66px`	不含 iPhone 安全区，安全区另加 34px
最小点击区	`44×44px`	图标按钮可视 24px，热区补足到 44px

05

圆角与投影

圆角随元素层级递增：越大的容器圆角越大。投影用「大范围、低透明度」，避免灰边。

8 · 标签

10 · 小按钮

14 · 输入框

20 · 卡片

26 · 区块

999 · 胶囊

投影层级

Shadow 10 1px 2px

Shadow 2卡片默认

Shadow 3悬浮 / 弹层

Brand Glow仅主按钮

卡片默认使用 Shadow 2 + 1px 极浅描边（rgba(11,21,18,.035)）。描边比纯投影更能稳定边界，尤其在浅色背景上。

06

图标规范

统一 24×24 网格，线宽 1.8px，圆头圆角。不使用填充图标，除非表达「已选中」状态。

图标尺寸：24px（导航 / 主导航）、16px（行内辅助）、13px（标签内）。图标与文字并排时，间距固定 4–6px。

07

基础组件

按钮、输入框、标签。全站只允许这几种形态，新需求优先组合，不新增变体。

按钮 · 层级

一个页面只允许出现一个 Primary 按钮。Primary 表达「最重要的下一步」，不是「最重要的信息」。

按钮 · 尺寸

输入框 · 四种状态

默认 / 聚焦

请输入目的地

贵阳目的地

错误 / 禁用

138手机号格式有误

该字段不可修改

标签 · 语义

车找人人找车车找货货找车加红已过期

标签高 22px，字号 11px，圆角 6px。同类标签在同一屏内不超过 3 个，超过则降级为纯文字。

08

业务组件

信息卡是平台的核心资产。全站 80% 的浏览发生在卡片上，它的信息密度决定了产品成败。

信息卡 · 免费 vs 加红

车找人 2 分钟前

威宁贵阳

剩 3 座轿车 5 座途经深圳

2,936 10-31 12:00 联系

车找人加红置顶 2 分钟前

威宁贵阳

剩 3 座轿车 5 座途经深圳

2,936 10-31 12:00 联系

加红的实现边界：只允许改变「标题与路线文字颜色」+「加红角标」，不允许改变卡片尺寸、位置或增加背景色。付费买的是注意力，不是版面破坏权。

发布流程步骤条

✓选择类型

2填写信息

3推广发布

✓选择类型

✓填写信息

3推广发布

底部导航 · 中间发布

首页

消息

加群

我的

「发布」是全站唯一的核心动作，因此用凸起圆形按钮置于正中，与四个导航项视觉分离。凸起高度 18px，白色描边 5px 保证在任何背景上都能分离。

费用说明卡 · 车费 / 高速费 / 杂费

费用说明上车前确认

车费¥120元 / 人

高速费乘客分摊

全程高速费约 ¥80共 4 人分摊

威宁 → 贵阳全程 320 公里高速，过路费约 80 元，按实载 4 人分摊每人约 20 元。上车前与司机确认，中途不加价。

运费与杂费到付

运费¥1,500元 / 趟

高速费含在运费里

装卸费¥150货主另付

运费到付，高速费已含在运费内，司机不得中途加价。装卸费 150 元由货主现场付给装卸工。

费用信息不塞进普通字段列表，单独成卡。金额用 tabular 数字 + 主色，分摊方式用文字，底部一行说明把「谁出、出多少、怎么算」一次讲完。

高速费的三条硬规则

必选，不可留空。高速费只允许三种答案：含在车费里 / 乘客分摊 / 司机承担。没有「不填」这个选项，因为它就是纠纷的起点。

选了「分摊」就必须给金额。只写「高速费 AA」等于没说，要写「全程约 80 元，4 人每人约 20 元」，让乘客在上车前就知道总价。

禁止「费用面议」单独出现。面议只能作为车费的一个选项，高速费必须明确。货运同理：高速费要么含在运费里，要么另付，要么实报实销。

09

二维码与分享

二维码是平台从线上走到线下、从公域走进微信群的关键入口。三个场景、三种形态，规则不能混用。

三种形态

A · 群二维码（深色场景）

长按识别 · 扫码入群

全屏页使用。深色底必须用白色卡片承托，卡片圆角 16px。

B · 个人推广码（浅色场景）

邀请码 QG 8823

带邀请码与奖励说明，用于裂变。卡片下方必须显示邀请码。

C · 小程序码（海报内嵌）

威宁 → 贵阳
明天中午出发

长按识别小程序码
查看完整信息与联系方式

嵌在分享海报右下角，尺寸不小于 72px，四周留 5px 白边。

尺寸规范

场景	码尺寸	静区	约束
群二维码（全屏）	`196px`	`12px`	白色卡片承托，卡片内边距 ≥ 22px
个人推广码（全屏）	`214px`	`12px`	下方必须紧跟邀请码，不可只放二维码
海报内嵌	`76px`	`5px`	最小不低于 72px，低于此尺寸手机难以识别
列表 / 信息卡	不使用		二维码只出现在专属页面，不进入信息流

四条硬规则

静区不可裁剪：码四周的留白是识别的一部分，裁掉会直接扫不出来。静区宽度 = 4 个模块。

深色底必须垫白卡：反色或半透明底上的二维码识别率大幅下降，禁止深色背景直接放码。

中心 logo 不超过 22%：logo 覆盖面积超过码面的 22% 会破坏容错，导致识别失败。

只允许等比缩放：不可旋转、拉伸、加描边或改圆角，任何形变都会影响纠错。

分享链路

信息详情→ 分享面板→ 转发给好友/ 生成海报→ 保存相册 / 长按转发

群二维码与推广码共用同一套「深色页 + 白卡」结构，区别只在文案与码内容：群码强调「加入」，推广码强调「奖励」。两者都不提供「长按保存」，只提供「保存到相册」，避免用户存到相册后无法追溯来源。

10

反馈与状态

每一个用户操作都必须有回应。加载、成功、失败、空，四种状态缺一不可。

Toast / 轻提示

已复制联系方式

1.6 秒自动消失，居中偏下 120px。不使用图标以外的装饰。

Dialog / 二次确认

确认下架这条信息？

下架后其他人将无法看到，加红费用按剩余天数退还。

Empty / 空状态

这条线路暂时还没有信息

换个日期看看，或者第一个发布

Skeleton / 骨架屏

骨架屏结构与真实卡片完全一致，避免内容出现时跳动。

11

信息架构

四条业务线共用一套界面框架，但客运与货运是两套字段——差异在字段，不在界面。

车找人

出发地 / 目的地

出发时间

空位数量

车型车况

途经地点

费用说明

人找车

出发地 / 目的地

出发时间

人数

行李件数

可接受价格

特殊需求

车找货

起点 / 终点

最早可发车

车厢类型（高栏/厢式）

车长 + 可载重量

容积 / 车龄

是否回程车 / 能否拼车

货找车

装货地 / 卸货地

装货时间

货物名称 + 总重量

体积 / 包装方式

货物属性（冷链/易碎）

需要车长 / 装卸方式

时效要求

客运 / 货运字段矩阵

四条业务线共用一套界面框架，但 客运与货运必须用两套字段。客运问的是「还有几个座、什么时候走」，货运问的是「多少吨、多大体积、要什么车厢」——把两者塞进同一张表单，等于让货车司机填「空位数量」。

信息域	车找人	人找车	车找货	货找车
路线	出发地 / 目的地 ●	出发地 / 目的地 ●	起点 / 终点 ●	装货地 / 卸货地 ●
时间	出发时间 ●	出发时间 ●	最早可发车 ●	装货时间 ●
载客	空位数量 ●、车型 ●	人数 ●、行李件数 ○	不出现
载货	不出现		可载重量 ●、车长 ●、容积 ○	货物名称 ●、总重量 ●、体积 ○、包装方式 ●
车况	途经地点 ○	可接受价格 ○	车厢类型 ●、车龄 ○、是否回程车 ○	需要车长 ○、装卸方式 ○
时效	不出现		可接范围 ○	时效要求 ●、货物属性 ●
费用	车费 ●、高速费分摊方式 ●、预估高速费 ○	可接受价格 ○、高速费分摊方式 ○	期望运费 ○、高速费怎么算 ●、能否开票 ○	运费 ●、高速费谁出 ●、装卸费 ○、付款方式 ●
说明	行程备注 ○	特殊需求 ○	车辆备注 ○	货物备注 ○
联系方式	姓名 + 手机号 ●（四类共用，虚拟号保护）

● 必填 ○ 选填「不出现」指该类型下这一组字段整组不渲染，不做置灰处理。

四条硬规则

切换类型 = 整组换字段，不是在同一张表单上多加几项。用户从「车找人」切到「货找车」，空位、车型、途经必须消失，换成吨位、体积、车厢类型。

吨位、体积、车长必须带单位。写「5」没有意义，要写「5 吨 / 32 m³ / 6.8 米」。单位做在输入框内右侧，不做成 placeholder，避免用户漏填。

车厢类型是货运的第一筛选项，必选、单选、不可留空。高栏 / 厢式 / 平板 / 冷藏 / 自卸五种之外不允许自由输入，否则列表无法聚合筛选。

货运表单允许比客运长，但必须分组。按「路线与时间 → 货物信息 → 车辆要求 → 补充说明 → 联系方式」切块，单屏可见区块不超过 4 组。

核心转化链路

首页→ 搜索线路→ 列表→ 信息详情→ 查看联系方式→ 电话 / 微信

选择类型→ 填写信息→ 推广方案→ 支付→ 发布成功→ 我的发布

免费发布与付费发布共用同一条链路，付费只是「推广方案」这一步的选择差异，不做两条独立流程——降低理解成本，也让免费用户更容易被引导升级。

12

页面模板

所有页面由此三种骨架衍生。新增页面先选骨架，再填内容。

A · 沉浸式（首页 / 我的）

状态栏 + 品牌区

底部导航

B · 标准内容页（列表 / 详情）

状态栏

导航栏 · 标题

底部操作条

C · 流程页（发布 / 支付）

状态栏 + 导航栏

① 选择类型 —— ② 填写信息 —— ③ 推广发布

当前方案

13

双端适配

同一套设计语言，两种能力边界。小程序多出的能力必须被用足，H5 缺失的能力要有降级方案。

能力	H5（微信内浏览器）	微信小程序
登录	手机号 + 短信验证码	微信一键授权 + 手机号快速验证组件
支付	微信 JSSDK 唤起支付	原生 `wx.requestPayment`，体验更短
消息触达	无主动触达，依赖公众号模板消息	订阅消息，线路匹配可实时提醒
分享	微信 JSSDK 自定义分享卡片	转发卡片 + 生成海报保存相册
定位	H5 Geolocation，需授权且精度低	原生定位，可获取区县精度
客服	外链客服 / 电话	原生客服会话按钮
返回	浏览器返回，需处理历史栈	胶囊按钮 + 页面栈，不用自绘返回键
安全区	`env(safe-area-inset-bottom)`	同左，底部导航需额外避让

小程序特别注意：右上角胶囊按钮占据约 87×32px，自定义导航栏时标题必须居中于「屏幕宽度 − 胶囊区」，不能简单居中于屏幕。本规范中所有小程序页面的导航标题均按此规则留白。

14

无障碍与设计校验

这不是加分项。目标用户中大量为中老年司机，可读性直接等于可用性。

对比度：正文与背景 ≥ 4.5:1，大字号 ≥ 3:1。加红标题 #E8443A 在白底为 4.6:1，达标。

点击区：所有可点元素 ≥ 44×44px，图标视觉 24px 但热区补足。

字号下限：任何正文不小于 12px，关键信息不小于 15px。

不依赖颜色：类型标签同时用颜色 + 文字 + 图标三重编码，色盲用户仍可区分。

状态可见：审核中 / 展示中 / 已过期，除颜色外必须有文字状态词。

隐私提示：手机号展示前明确告知「虚拟号保护」，避免用户不敢留电话。

错误可恢复：表单校验错误必须指明字段与原因，不能只飘一个红框。

付费透明：付费方案页必须写明有效期与退款规则，不做诱导性默认勾选。

上线前自检清单

#	检查项	通过标准
01	页面左右边距是否为 16px	全部页面一致
02	每页是否只有一个 Primary 按钮	是
03	所有间距是否取自 4/8/12/16/20/24/32/48	无例外值
04	四种信息类型颜色是否与规范一致	绿 / 蓝 / 琥珀 / 紫
05	加载、空、错误、成功四态是否齐备	每个数据页面均覆盖
06	底部安全区是否避让	iPhone 全系不遮挡
07	数字是否等宽对齐	tnum 已开启
08	加红信息是否只改文字色与角标	版面结构不变