Design System
数学王国
UI 设计规范
这是一套面向轻探索、低压解谜、收集养成类客户端游戏的 UI 设计规范。重点是：清新、温暖、半透明、轻仪式感、低负担阅读，同时避免过度接近单一参考游戏。
01 色彩规范 Color Palette
主色低饱和，功能色只做点状提示
深湖绿#1F5B61
界面青绿#3F8484
主按钮绿#5AA7A3
薄荷浅绿#A6D4C9
羊皮纸白#FFFAF0
符文金#C9A064
成功#7BC68F
提醒#F2C38A
错误#E57373
信息#9AC7E6
02 字体规范 Typography
中文建议：思源黑体 / Noto Sans SC / PingFang SC
标题 / Title
开始旅程
副标题 / Subtitle
寻回散落的数字
正文 / Body
数字碎片散落在王国的各个角落，请找回它们并带回。
说明 / Caption
用于进度、价格、状态、次级描述，避免超过两行。
03 图标规范 Icon System
线面结合，圆角端点，几何符号可作为视觉母题
✉
♟
▣
⚙
✦
▶
⌂
◇
!
↻
造型
基础形以圆、菱形、短线段为主。避免复杂写实图标，保持 2 秒内可识别。
描边
常规 1.5px，重要按钮 2px。描边色使用深湖绿 70% 或白色 65%。
发光
仅用于选中、奖励、主操作。发光半径 12–24px，透明度不超过 35%。
04 组件规范 Components
所有组件均保留轻微纸感、玻璃感或柔光边
按钮 Button
左侧导航 Navigation
章节卡片 Card
几何之城
第一章
输入 / 进度 / 滑杆
任务进度6/10
音乐80%
05 面板规范 Panels & Windows
弹窗承担确认、奖励、成就、暂停，不抢走画面氛围
提示
是否消耗 10 根蜡烛解锁新的旅程路线？
恭喜获得
♥
★
▥
成就达成
探索者
发现 10 个隐藏区域
🏛
暂停菜单
继续游戏
返回温境
设置
退出游戏
06 布局规范 Layout & Grid
以 1440×1024 为横屏基准，可适配 16:9 与平板比例
安全区
核心按钮距离屏幕边缘 ≥ 32px。移动端横屏建议 ≥ 48px，避免刘海和系统手势区域。
间距系统
8
12
16
24
32
48
64
圆角系统
8px
16px
24px
圆形
07 交互状态与动效 Interaction
轻、慢、柔，不做强刺激反馈
默认
悬停
按下
禁用
◇
08 设计原则 Design Principles
用于后续扩展新界面时判断是否跑偏
☁
轻盈通透界面像薄雾覆盖在场景上，不压住世界。◇
几何叙事用菱形、圆、塔、桥作为数学王国的视觉符号。♥
温暖友好反馈积极、颜色柔和，避免压迫与恐怖感。✦
层次清晰主操作最亮，次操作留白，奖励才发光。▣
可扩展性组件可复用到任务、商店、图鉴、角色等系统。09 参考图集 Reference Gallery
作为视觉校准，不替代上方设计规范
解构后的主界面
系统界面总览
角色设计方案
UI 设计规范视觉稿
10 Style Tokens
可用于样式原型与设计走查初始化
:root {
--teal-900:#1F5B61;
--teal-700:#3F8484;
--teal-500:#5AA7A3;
--teal-300:#A6D4C9;
--paper:#FFFAF0;
--gold:#C9A064;
--radius-lg:28px;
--radius-md:18px;
--radius-sm:10px;
--shadow:0 18px 50px rgba(45,92,92,.16);
--blur:blur(24px);
}