本页是可视化参考(小型风格指南),配套规范文档见 docs/:基础 docs/foundations/、组件 docs/components/、模式与治理 docs/patterns/。品牌色值引用自主项目 docs/design/tokens.md(唯一事实源)。各页右上角 ◐ 可预览暗色 token 映射。

设计令牌 Tokens

唯一事实源 · 品牌色引用主项目 tokens.md · 全部走 CSS 变量,不写死

黄蓝撞色 · 年轻活力

品牌色 Brand

主蓝

brand-primary

#0068C4

深蓝

brand-deep

#0B3D91

点睛

brand-accent

#FDD604

活力黄点睛 仅配深字 #1A1A1A(对比 12.26:1 AAA),禁作大背景、禁配白字。主蓝白字 5.56:1(AA),深蓝白字 12.26:1(AAA)。

主蓝·交互刻度

hover

primary-hover

#0A7BD8

pressed

primary-pressed

#005FB0

soft

primary-soft

#E5F0FC

亮蓝(仅图形/渐变,禁白字)与活力黄刻度

亮蓝

primary-bright

#1FA6F5

黄hover

accent-hover

#FDE047

黄pressed

accent-pressed

#F5C400

亮蓝 #1FA6F5 白字仅 2.68:1 → 禁作白字底,只用于图形/渐变/聚焦环。活力黄三档均配深字(AAA)。

表面 / 底色 Surface

canvas

canvas 浅蓝灰底

#F2F6FB

surface

surface 卡片白

#FFFFFF

muted

surface-muted

#EAF1F8

canvas 与 surface 对比仅 1.08:1 → 卡片必须用 1px 描边或轻阴影与底色区分(硬规则)。

文字 Text

正文主色 #1A1A1A(AAA 17.40:1)

次要文字 #54606C(AA 6.43:1)

占位/最弱 #6B7683(AA 4.62:1,勿用于关键信息)

功能 / 状态色 Feedback

成功

success

#12805C

警示

warning

#B45309

危险

danger

#D92D20

信息

info

#0068C4

聚焦

focus

#1FA6F5

实底白字:成功 4.92 / 警示 AA / 危险 4.83 / 信息 5.56(均 AA)。状态不只靠颜色——须同时配图标+文本。

浅底(徽章/标签/内联提示,配深字)

成功 #DDF2E9 警示 #FBEEDD 危险 #FBE5E3 信息 #E5F0FC

中性灰阶 Neutral

900

#1A1A1A

700

#333D47

600

#54606C

500

#6B7683

400

#9AA5B1

300

#CFD8E0

200

#E3EAF0

100

#F1F5F9

字阶 Typography

8:6score 34 · 计分大比分 tabular

1,024display 24 · 关键数字

标题 Titletitle 18 / 600

正文 Body 台球联盟平台body 15 / 400

次要说明 Captioncaption 13

辅助标签 Labellabel 12

字重:正文 400、标题/数据 500–600。比分/积分/排名/金额/计时一律 tabular-nums。系统字体栈,不依赖网络字体。

间距 Spacing(4 基数)

4

8

12

16

24

32

48

圆角 Radius

6

8

12 控件

16 卡片

24 面板

阴影 / 层级 Elevation

shadow-1 卡片静止

shadow-2 吸底/浮起

shadow-3 弹层

shadow-4 弹窗

移动端避免重阴影;低层级卡片优先用 1px 描边(H5 低端机更干净)。z 层级:sticky10 / dropdown20 / overlay30 / drawer40 / modal60 / toast80,壳层统一建 stacking context,禁止任意 9999。

触控与安全区

所有可点目标 ≥44×44px,相邻间距 ≥8px

吸底 CTA / 底部 Tab / 半屏弹层必须 padding-bottom: env(safe-area-inset-bottom)。

原则与范式

黄蓝撞色 · 中国式移动交互 10 条 · 动效与可达性

设计原则(黄蓝撞色)

1

任务先于对象

「处理成绩争议」比「资源列表」更接近用户语言;一屏一个主行动。

2

数据清晰

关键数字 display+tabular-nums;状态不只靠颜色,图标+文本+形状共同表达。

3

克制点睛

活力黄只用于扫码/计分确认/排名变化等高价值瞬间,不做大背景。

4

即时反馈

按压 100ms 内反馈;网络状态是一等信息;敏感操作逐次授权。

中国式移动交互 · 最关键 10 条

1

路由 history 模式

不用 hash——微信分享会丢 hash,是迁移隐形大坑。

2

左上角可见返回

+ iOS 右滑手势;绝不在内容区/底部放返回按钮。

3

底部 5 Tab 图标+文字

禁用汉堡;低频收进「我的」;中间扫码可凸起。

4

详情页吸底主 CTA

钉在拇指区,适配 env(safe-area-inset-bottom)。

5

列表:下拉刷新+骨架屏+触底加载

到底给「没有更多了」终态。

6

提交按钮内 loading

重要失败用弹窗,不用 Toast。

7

手势配可见入口兜底

删除/取消走 ActionSheet 二次确认。

8

手机号一键登录+协议勾选

为小程序预留微信授权。

9

Toast 居中 2s ≤20字

配色走 CSS 变量(1 主色+灰阶+3 状态色)。

10

iOS+Android 微信真机双测

标题更新/安全区/分享卡/长按识别小程序码。

动效 Motion

180ms 微交互 · 220ms 常规 · ≤250ms 页面切换;只用 transform/opacity;ease-out 进 ease-in 出。

开启系统「减少动态效果」后,位移/缩放被禁用,仅保留必要淡入(本演示已适配)。

可达性 Accessibility(实测)

✓

对比度

正文 on 白 16.61:1(AAA)·主蓝白字 5.69:1(AA)·危险白字 6.57:1(AA);占位 4.97:1 勿用于关键信息。

✓

触控区

≥44×44px,相邻 ≥8px;适老化主文字 ≥18pt、行距 ≥1.3,系统放大不错乱。

✓

焦点与读屏

可见 3px 聚焦环;label 关联控件;错误/同步用 live region 播报。

双端策略

双端分离、同源对齐、不上跨端框架。
H5 = antd-mobile · 小程序 = TDesign(原生);视觉对齐靠「同一份设计 token + 同一套组件语义」,而非同一套代码。点右上角 ◐ 可预览暗色 token 映射(预留)。

按钮 Button

一屏一个主 CTA · 次要/危险分级 · 全状态演示

变体 Variant

主按钮 CTA Accent(黄,主行动,一屏一个)

高能点睛(扫码/计分确认/排名变化)

次按钮 Primary(蓝,链接/常规操作)

次级 Secondary(浅蓝底)

描边 Outline

文字 Text

危险 Danger(删除/不可逆)

深蓝 Deep(深色区/沉浸面)

蓝为底、黄为点:蓝是界面基调(导航/选中/链接/次按钮),黄只留给一屏一个的主 CTA 与高能点睛。

状态 State(以次按钮 Primary 为例)

默认

按下 pressed(压暗 + scale .98)

聚焦 focus(3px 聚焦环)

加载 loading(防重复)

禁用 disabled(灰底灰字,明确不可点)

禁用不只靠降低文字对比度——实底禁用用灰底 #F1F5F9 + 灰字 #9AA5B1,明确不可点。

尺寸 Size

md/lg 触控区 ≥44px;通栏 + 吸底用于详情页主行动。

图标按钮 IconButton

触控区 44×44;功能图标必须有 accessible name,装饰图标对读屏隐藏;不用 emoji 充当结构图标(此处字符仅演示)。

深色区上的按钮

深蓝底上,活力黄点睛配深字,对比 8.84:1(AAA)。

表单 Form

可见 label · 字段级错误贴近字段 · 不用 placeholder 代替 label

输入框 Input

昵称*

2–12 个字符,将展示给其他球友

聚焦态

手机号

⚠ 请输入 11 位有效手机号

禁用

文本域 Textarea

评价

0/200

开关 Switch

点击切换

复选 Checkbox / 单选 Radio

✓我已阅读《用户协议》

✓接收比赛提醒 ✓禁用项

中八追分

选择器 Picker(触发半屏面板)

所在城市

步进器 Stepper

2

人数/局数,触控 44px

评分 Rate

★★★★★4.0 · 球房评价

登录协议勾选(一键登录必备)

手机号

验证码

✓我已阅读并同意《用户协议》《隐私政策》

H5 主用手机号一键登录 + 短信验证码兜底;为小程序预留微信授权 + getPhoneNumber。

导航 Navigation

左上返回铁律 · 底部 5 Tab 图标+文字 · 禁用汉堡

顶部导航栏 NavBar

品牌深蓝(一级页)

浅色(二级页,右侧动作 ≤2 个)

左上角返回箭头(可点区 ≥44px)是铁律;绝不在内容区/底部放「返回」按钮。微信小程序右上角预留胶囊空间,重要按钮不放右上。

底部标签栏 TabBar(5 入口,中间扫码凸起)

页面内容

⌂发现 ♟约球 ▣扫码 ▤战绩 ☺我的

图标+文字缺一不可;选中用主蓝;中间「扫码」凸起为高频行动;禁用汉堡菜单,低频项收进「我的」。

分段控件 Segmented(吸顶,同级切换)

排行/直播的同级分类用顶部吸顶分段,而非新页面。

标签页 Tabs(下划线指示)

内容区

步骤条 Steps(报名/发布/分段表单)

✓时间地点

2规则资格

3预览发布

数据展示 Data Display

卡片 1px 描边 · 关键数字 tabular-nums · 状态不只靠颜色

球房卡片 Card(列表信息流)

🎱

星河台球俱乐部营业中

朝阳区 · 距你 1.2km · 中式八球/斯诺克

★★★★★4.2(128)

层级 = 封面 + 标题(一行截断)+ 1–2 行辅助 + 状态标签;卡片用 1px 描边与米白底区分。

计分卡片(关键数字 display/tabular)

中八 · 第 3 局

玩家 A

8

:

玩家 B

6

比分/积分/排名/金额用 display24+ 加粗 + tabular-nums;活力黄仅在此类高价值瞬间点睛。

列表 List / Cell

★

我的收藏

12 家球房

›

▣

扫码记录

今天 14:20›

✉

消息通知

3›

标签 Tag / 徽章 Badge

状态标签(浅底深字+点) 营业中将过期已过期同步中

语义/分类中八斯诺克热门已确认争议中

角标 ✉9 ♟

头像 Avatar

黄蓝A

排行行 RankRow(前三金/银/铜)

1王

王一杆

▲22,860

2李

李精准

▼12,745

3赵

赵清台

▲42,690

4陈

陈稳定

—2,512

名次+头像+昵称+积分,细分隔线,前三金/银/铜;到底显示「仅展示前 100 名」。

骨架屏 Skeleton(仅首次加载,轮廓贴合卡片)

布局可预测用骨架屏;提交用按钮内 loading;<1 秒不显示加载态;失败/为空转空态。

空态 Empty(插画+描述+一个主 CTA)

🎱

附近暂无球房

换个位置看看,或重新定位你当前的位置

分「无数据」与「网络错误」(错误给「重新加载」);一个具体、动词开头的主 CTA。

进度 Progress(定位进度等)

百局定位进度62 / 100

反馈 Feedback

Toast 居中 2s ≤20字 · 删除走 ActionSheet · 重要失败用弹窗 · 点击可交互

轻提示 Toast(点击体验)

垂直居中、2 秒自动消失、≤20 字、去关闭叉、不可交互;重要失败用弹窗,不用 Toast;成功可配轻振动(iOS Safari 不支持则跳过)。

弹窗 Dialog(重要确认/不可逆)

标题+说明+主次按钮;destructive 按钮文案写具体动作(「删除」而非「确定」)。

半屏操作面板 ActionSheet(删除/取消二次确认)

选项类用 ActionSheet;危险项红色置底、取消独立分区;可下滑关闭、适配底部安全区。

底部面板 BottomSheet(静态示意)

筛选球房

复杂内容(筛选/时间选择)用半屏面板;顶部圆角 24,适配 safe-area-inset-bottom。

下拉刷新 PullToRefresh(三阶段)

↓下拉刷新

↑释放刷新

正在刷新…

列表页标配,国民手势;不放「刷新按钮」;已有内容时不再用骨架屏;H5 处理 overscroll-behavior 防与浏览器原生手势打架。

上拉加载 LoadMore / 终态

正在加载…

— 没有更多了 —

仅展示前 100 名

触底自动加载(IntersectionObserver + 哨兵);到底给终态;排行到底「仅展示前 100 名」;请求节流防快速滚动重复触发。

整页结果态(成功/失败)

✓

报名成功

⚠

支付失败

操作与浮层 Actions

手势配可见入口兜底 · 吸底 CTA 钉在拇指区 · 点击可交互

左滑操作 SwipeAction(微信心智 + 可见兜底)

★

星河台球俱乐部

点击本行演示左滑露出操作

⋯

删除类手势必须二次确认,且同时提供可见「⋯」入口兜底(手势是快捷方式,不是唯一入口)。

吸底动作栏 BottomActionBar(详情页主 CTA)

详情内容区(营业/位置/设施/相册/评价…)

吸底主按钮钉在拇指区,padding-bottom: env(safe-area-inset-bottom);一屏一个主 CTA,次要操作放图标位。

分享面板(半屏)

直播/赛事/球房页设计好分享卡(标题/封面/简介);迁小程序配 onShareAppMessage;报名成功页带小程序码 + 「长按识别」。

气泡 Popover(轻量解释/引导)

段位由近 100 局表现评定,反映你的当前竞技水平。

回到顶部

长列表滚动超一屏后浮出,圆形浮钮,44px。

离线/同步横幅(网络状态是一等信息)

⚠当前离线,数据可能已过期,恢复后将自动同步

◌正在同步 · 服务端版本 v18

✓已同步 · 12:04:33

区分本地草稿/发送中/已确认/失败/冲突;离线禁止开始新一局;冲突展示服务器版本与本地草稿供选择。

星辰台球联盟设计系统