统一风格配色方案、字体规范、间距系统系列第 2 篇 | 阅读约 10 分钟 写在前面你有没有遇到过这种情况想把项目主色从蓝色调成橙色结果在脚本里搜#号搜到怀疑人生明明 Table 表头、Tabs 下划线、Dialog 确认钮都是蓝色摆在一起却像三套 UI这不是你代码写得不好是缺少一套设计变量。Unity 不缺「能不能画 UI」的能力缺的是一套可复用的视觉语言。第一篇我们搭好了框架今天不急着堆组件先把配色、字体、间距这些设计变量定下来。说明本文所说的「设计变量」指 UI 层面的样式常量如Primary、TextPrimary不是大模型 API 的 Token 计费单位。本篇完成后Table、Tabs、Dialog、Form 所有组件共用一套色板换主题只需改一个地方3 行代码搞定。一、为什么先定设计变量而不是先画按钮如果每个脚本里写死new Color(0.25f, 0.62f, 1f)❌ 亮色/深色切换要改几十处❌ 主色微调如#409EFF→ 工业蓝无法一键生效❌ Table 表头、Tabs 下划线、Dialog 确认钮容易「看起来像三套 UI」正确做法是语义化命名 → 主题赋值 → 组件只引用名字。text组件Table/Tabs → EleUiStyle.Primary / TextPrimary / Border ↑ ApplyTheme(Light | Dark)项目中的对应入口是EleUiStyle.ApplyTheme(EleTableTheme)。后面所有组件只引用EleUiStyle.xxx永远不写裸色号。二、配色方案对齐 Element兼顾工业深色2.1 双主题策略主题用途主色 PrimaryElementLight管理后台、文档感、Tabs 默认演示#409EFFElement 经典蓝IndustrialDark数字孪生/产线监控深色面板#3A6EA5降低饱和减少刺眼亮色尽量贴近 Element 官方色板深色不是「把亮色反相」而是降对比、抬中性灰长时间盯屏更舒适。2.2 语义化颜色分层建议直接当规范表下面这些就是一组颜色设计变量。组件里写EleUiStyle.Primary不要写裸色号。品牌与反馈设计变量LightDark用途Primary#409EFF#3A6EA5主按钮、Tabs 选中字/下划线、链接操作PrimaryHover#66B1FF#4A82BD悬停状态PrimaryActive#3A8EE6#2D5A8A按下状态Danger#F56C6C#C75050删除、危险操作文字四级灰度避免满屏纯黑/纯白设计变量LightDark用途TextPrimary#303133#E8E8E8标题、表头、单元格主文案TextRegular#606266#D0D0D0次要说明TextSecondary#909399#A0A0A0辅助信息、未选中图标TextPlaceholder#C0C4CC#6A6A6A输入框占位结构面面板/边框/填充设计变量LightDark用途PageBg#F0F2F5#141414页面底色PanelBg#FFFFFF#1E1E1E卡片、表格外框、Tabs 内容区HeaderBg#F5F7FA#252525表头、标题栏Border#DCDFE6#3A3A3A分割线、描边BorderLighter#EBEEF5#2F2F2F更浅的分割线RowBg#FFFFFF#1E1E1E表格行背景RowHover#F5F7FA#2C2C2C表格行悬停RowStripe#FAFAFA#1A1A1A表格斑马纹Tabs 专用设计变量LightDark说明TabSelectedPrimaryPrimary深色下略暗文字 下划线用主色TabUnselectedTextPrimary / TextRegular同上不要用过浅灰深色主题会糊2.3 在 Table / Tabs 上的落点Table外框PanelBgBorder表头HeaderBgTextPrimary行RowBg/RowStripe悬停RowHover主按钮/工具栏主色Primary删除链接Danger省略号悬浮框面板底 描边文字TextPrimaryTabs栏底、内容区亮色用白底White选中标签文字与图标 →Primary底部指示条 →Primary未选中文字TextPrimary图标TextRegular通栏分割线BorderLighter1px蓝条叠在分割线上方这就是「同一套设计变量两种组件长得像一家」的原因。三、字体规范UGUI Text 也能做出层级Unity 内置的 Text / LegacyRuntime 能用但需要先定字号阶梯再谈换字体资源。3.1 推荐字号阶梯本项目常用层级字号字重场景页面/弹窗标题14–18BoldDialog 标题、Tabs 内容占位标题组件标题/表头12–14BoldTable 列头、面板 TitleBar正文13–14Normal按钮文字、Tabs 标签、表单标签单元格/辅助12NormalTable 单元格、次要说明小字11–12Normal分页信息、提示文字Table 行高约 30–34px、Tabs 栏高约 40px 时12–14px 最稳既不像手游 HUD 过大也不至于密到难读。3.2 排版原则企业后台向✅ 一屏内字号种类≤ 4 种避免「每个区域自定义一遍」✅ 数字与编码可略收紧便于扫表✅ 中英文混排不要给英文单独再加深一档否则表格会花✅ 深色主题正文用#E8E8E8而非纯白#FFFFFF减少眩光3.3 与 Element 的对应关系Element 常用 14px 正文、12px 辅助。我们在 UGUI 里表格单元格略收一档到 12px换来更高行密度——工业表「一屏多行」往往更重要。规范可写死默认正文 14表格单元格 12标题 14 Bold。四、间距与尺寸系统8 的倍数Element 习惯 8px 节奏。Unity 里建议把间距也做成尺寸设计变量设计变量值用途Space-XS4图标与文字间距、细缝Space-SM8工具栏按钮间距、表单行距Space-MD12–16Tabs 标签左右 padding、面板内边距Space-LG24弹窗边距、大区块分隔常用控件高度便于和 Table 对齐控件高度表头/数据行32 / 30Tabs 栏40按钮28–32输入框28–32Tabs 下划线2圆角亮色可 4px深色工业风可 2px更「设备感」——项目里已按主题区分。五、落地建议一个 Style 类统一管理推荐结构与当前工程一致textEleUiStyle // 颜色设计变量 ApplyTheme 按钮 ColorBlock EleUiFactory // CreateText / CreateButton / 布局辅助统一字号与 padding EleTable / EleTabs // 只引用设计变量不发明新色切换主题时注意三点先ApplyTheme再重建或刷新 UI图标缓存也要清按钮用ColorBlock时深色主题禁止出现默认白色 selected预制体里不要烘焙死颜色运行时按Config.theme上色六、本系列路线图在已有 Table、Tabs、Dialog、Pagination、QueryBar 基础上按「先规范、后组件、再联动」推进阶段组件/能力状态规范配色、字体、间距✅ 本篇实战Table冻结列、分页、选中、弹窗编辑03–04、08实战Tabs图标、下划线、内容面板05深化Dialog Form 字段遮罩、模态/非模态、校验06–07补齐Button / Link / Input / Select / Checkbox计划计划Message / MessageBox / Notification计划计划Tag / Badge / Empty计划计划Dropdown / Popover / Tooltip计划工程化虚拟列表、对象池09分发UPM Package、Samples10七、小结色语义化设计变量 亮/深双主题Primary 对齐 Element深色单独调工业板字14 / 12 / Bold 标题三级就够表格偏密度距8 倍数 固定行高组件才好拼例Table 吃「面板/表头/行态」Tabs 吃「Primary 选中 底边指示」定完这套下一篇就可以安心写 Table——所有颜色都只引 EleUiStyle不再讨论「蓝用哪一号」。 下篇预告03Table 表格组件上表头结构、列宽与 flexible、省略号/折行、左右冻结与横向滚动条——全部基于本篇的设计变量实现。