ZartUI Mobile 按钮规范 v3

按钮类型6 Types

主要按钮

主要 Primary

渐变 DB60→DB40 · 文字 #FFF · 主导操作

同级按钮

同级 Secondary

DB60 描边/文字 · 填充 #FFF · 取消/返回

次级按钮

次级 Tertiary

描边 G30 · 文字 G60 · 辅助功能

危险按钮

危险 Danger

背景 #FF4433 · 文字 #FFF · 删除/注销

警告按钮

警告 Warning

背景 #FFAA00 · 文字 #FFF · 二次确认

成功按钮

成功 Success

背景 #11C79B · 文字 #FFF · 完成/通过

按钮尺寸4 Sizes

大 44pxLarge

确认提交取消

中 36pxMedium

保存草稿取消

小 28pxSmall · 14px

编辑删除

微 24pxMini · 14px

查看

主要按钮 PrimaryDB

默认 — 渐变 DB60→DB40

加载中 — 左侧加载图标

按下 — 渐变 DB70→DB50

禁用 — 渐变 DB30→DB20 · 文字#FFF

危险按钮 DangerR

默认 — R60

加载中 — 左侧加载图标

按下 — R70

禁用 — R30

同级按钮 SecondaryDB

默认 — DB60描边 · DB10填充

加载中 — 左侧加载图标

按下 — 填充 DB10→DB20

禁用 — opacity:0.35

次级危险按钮 Secondary DangerR

默认 — R60描边/文字 · R10填充

加载中 — 左侧加载图标

按下 — 填充 R10→R20

禁用 — 描边/文字 R30

次级描边按钮 Secondary OutlineG

默认 — G10描边 · G60文字

加载中 — 左侧加载图标

按下 — 背景→G05

禁用 — 描边G05 · 文字G30

应用场景6 Scenarios

场景 1 — 底部悬浮：单个按钮 通栏大按钮，高度 44px，左右边距 16px

页面底部 — 单个通栏按钮

— 页面内容区域 —

确认提交

场景 2 — 底部悬浮：两个按钮 左侧次级描边按钮，右侧主按钮，间距 12px

底部两个按钮布局

— 页面内容区域 —

取消

确认提交

场景 3 — 底部悬浮：多个按钮 左侧「更多」按钮，右侧两个次级按钮 + 主按钮，主按钮永远在最右边

底部多个按钮 · 主按钮始终在最右侧

— 页面内容区域 —

⋯

取消

暂存

确认提交

卡片底部按钮Card

场景 4 — 卡片底部按钮 使用中号按钮，高度 36px，左侧「更多」，右侧次级按钮 + 主按钮

卡片底部中号按钮 · 36px

申请单号：20260609-0042
申请人：李小明 · 事假 3 天
状态：待审批

⋯

驳回

通过

消息通知：系统升级维护预计 2h

查看详情

纯文字按钮Text

场景 5 — 纯文字按钮 底部高度 48px，次要按钮文字 G60，主要按钮文字 DB60；一个按钮时居中，两个按钮时等分

纯文字操作栏 · 48px 高度 · 单个居中 / 两个等分

单个按钮 — 居中显示

确认提交

两个按钮 — 等分显示

取消确认删除

两个按钮 — 另一种组合

稍后再说立即更新

输入框底部按钮Input

场景 6 — 长文本输入框底部按钮 输入框为面性区域，微小按钮（24px）位于输入框内部右下角，背景 DB10、文字 DB60

面性输入框 · 按钮在内部右下角 · 24px

填写备注

今天下午3点开会讨论Q2计划

发送

输入审批意见

请输入审批意见…

提交

选项按钮Option

场景 7 — 多选选项 选中：DB60 描边 + DB60 文字 + DB10 填充 | 未选中：G10 描边 + G60 文字

年假事假病假调休婚假

选中态：描边/文字 DB60，填充 DB10

未选中：描边 G10，文字 G60

场景 8 — 单选选项 选中：DB60 背景 + G0(#FFF) 文字 | 未选中：G10 描边 + G60 文字

上午下午全天

选中态：背景 DB60，文字 G0（#FFFFFF）

未选中：描边 G10，文字 G60

色值映射速查表

前缀	来源色板	色值参考
DB	蓝色 Blue	10=#E8F1FF 20=#C2D8FF 30=#9EBFFF 40=#75A3FF 50=#4D88FF 60=#3388FF 70=#2B72D9
R	红色 Red	10=#FFECE8 20=#FDD5CE 30=#FCBAAA 60=#F26450 70=#D5493B
G	深蓝 Indigo	0=#FFFFFF 05=#F4F6FA 10=#E8EDF5 30=#9EADD5 60=#223355

CSS 变量

/* ── 色板 Token ── */
/* Blue */ --DB10:#E8F1FF; --DB20:#C2D8FF; --DB30:#9EBFFF; --DB40:#75A3FF; --DB50:#4D88FF; --DB60:#3388FF; --DB70:#2B72D9;
/* Red  */ --R10:#FFECE8; --R20:#FDD5CE; --R30:#FCBAAA; --R60:#F26450; --R70:#D5493B;
/* Indigo */ --G0:#FFFFFF; --G10:#E8EDF5; --G05:#F5F7FA; --G30:#9EADD5; --G60:#223355;

/* ── 按钮尺寸 Token ── */
--btn-width:348px; --btn-height-lg:44px; --btn-font:16px; --btn-font-sm:14px;

类型速查表Quick Ref

类型	背景	文字色	描边	场景
主要 Primary	渐变 DB60→DB40	#FFFFFF	无	提交/保存
同级 Secondary	#FFFFFF	DB60 #3388FF	DB60 1px	取消/返回
次级 Tertiary	#FFFFFF	G60 #223355	G30 1px	辅助功能
危险 Danger	#FF4433	#FFFFFF	无	删除/注销
警告 Warning	#FFAA00	#FFFFFF	无	二次确认
成功 Success	#11C79B	#FFFFFF	无	完成/通过

应用场景速查表Scenarios

场景	布局	按钮尺寸	类型	规则
底部单个	通栏全宽	44px	Primary	左右 margin 16px
底部两个	左 Outline + 右 Primary	44px	Outline / Primary	间距 12px
底部多个	更多 + Outline × 2 + Primary	44px	Outline / Primary	Primary 永远在最右侧
卡片底部	更多 + Secondary + Primary	36px	Secondary / Primary	中号按钮，左侧更多
纯文字	48px 高度 · 单居中/双等分	—	G60(次) / DB60(主)	无背景无描边，1居中 2等分
长文本输入框	面性 textarea · 按钮在右下角内部	24px	DB10 填充 DB60 文字	微小按钮，浮动于输入区内部
多选选项	排列成行	36px	选中 DB10 填充 / 未选 G10 描边	DB60 vs G60 文字
单选选项	排列成行	36px	选中 DB60 填充 / 未选 G10 描边	G0 vs G60 文字

注意事项

类别	说明	正确做法
避坑	渐变方向错误	固定 90deg 从左到右，DB60→DB40 不可颠倒
避坑	尺寸和字号不匹配	大/中按钮 16px，小(28px)/微(24px)按钮 14px
避坑	禁用态未设白色文字	主要按钮禁用态渐变 DB30→DB20，文字保持 #FFF
避坑	底部多按钮排列顺序错误	主按钮永远在最右侧，次级/描边按钮在左侧
避坑	多选与单选样式混淆	多选选中=DB10填充+DB60描边；单选选中=DB60填充+G0文字
避坑	次级描边按钮暗色画布不可见	G10 描边仅限浅色背景，深色背景需反色