lawless/docs/设计文档/UI-00-界面设计规范.md

UI-00 界面设计规范

文档类型：UI设计规范 版本：1.1 日期：2026-07-06 技术栈：Cocos Creator 3.8.8 + TypeScript 参考来源：images/ 目录内截图 交付范围：仅 启动 / 登录 / 注册 / 创建角色 四个场景

---

一、设计总则

1.1 视觉关键词

• 黑金牌匾
• 米白宣纸
• 卷轴卡片
• 古风写实
• 强层级信息展示
• 横版游戏优先

1.2 视觉结论

• 主体不是单一深色面板，而是“深色背景 + 金边装饰 + 高对比插画”的混合结构。
• 标题、服务器条、按钮大多采用牌匾形态，形成强识别度。
• 信息区域以浅色大面板承载说明文本，适合横向布局中的左右分栏。
• 入口模块以大图卡片、角色立绘、服务器条和主按钮呈现，强调可点击、可浏览、可分组。
• 不使用底部固定导航作为一级入口。
• 游戏只有一个服务器，不存在区服、分区、跨区等概念。

1.3 不建议的风格

• 纯扁平现代风。
• 大面积高饱和霓虹色。
• 过度透明导致文字失焦。
• 过小的按钮和密集的边框装饰。
• 依赖鼠标悬停的交互表现。

---

二、色彩与层级

2.1 主色板

类别	色值	用途
背景深色	#0b0907	页面顶层背景、遮罩外层
面板深色	#3b2818	牌匾、服务器条、按钮外框
米白底色	#e8d8bf	注册表单、信息面板
浅纸色	#f8f0e2	输入框、次级内容区
金色描边	#d9b262	面板边框、标题框
暗金阴影	#8f6c3d	边框暗部、压边
朱红强调	#d83a2b	标识点、提示、状态灯
青蓝强调	#48b8e8	次级发光、装饰高光

2.2 文字层级

层级	色值	适用场景
一级标题	#f7e7b8	章节名、页面主标题
二级标题	#fff2dc	牌匾标题、弹窗标题
正文主字	#533415	米白底上的正文
正文次字	#725c42	辅助说明、注释
弱提示	#9a8665	不重要信息
绿色数值	#63c96f	正向收益、恢复、达成
红色数值	#d83a2b	伤害、损失、失败
蓝色数值	#48b8e8	技能名、特殊效果

2.3 层级原则

• 深色底负责“氛围”，米白底负责“阅读”。
• 金色负责“权重”和“可点击感”。
• 红绿蓝只用于关键数值和状态，不作为大面积背景色。

---

三、字体与排版

3.1 字号建议

用途	字号
页面主标题	34px - 52px
牌匾标题	26px - 38px
模块标题	20px - 26px
正文内容	16px - 20px
说明文字	12px - 16px
辅助标签	11px - 14px

3.2 排版规则

• 长文本优先使用左对齐，正文行高建议 1.45 - 1.65。
• 标题必须与背景形成强对比，避免压在复杂插画上。
• 数值和技能词可局部着色，但每段最多保留 2-3 种强调色。
• 手机端正文优先按段落阅读，不把整页塞成密集表格。

3.3 文字风格

• 标题偏硬朗、庄重。
• 正文偏清晰、温和、可连读。
• 数值表现要醒目，但不能盖过叙事文本。

---

四、页面结构

4.1 通用页面骨架

1. 左侧主视觉区：logo、插画、立绘或主背景。
2. 中央功能区：服务器条、表单、卡片、种族信息。
3. 右侧辅助区：说明、属性、切换、次级入口。
4. 底部操作区：主按钮、次按钮、说明文字。
5. 不引入世界地图、战斗、门派等额外场景。

4.2 主界面结构

• 启动页采用“黑色氛围底 + 巨型品牌标题 + 单服标识 + 登录按钮”的横版结构。
• 登录页采用“深色背景 + 巨型 Logo + 单服标识 + 大按钮”的横版结构。
• 注册页采用“左侧插画 + 右侧米白表单面板”的横版结构。
• 创建角色页采用“左侧种族卡与说明 + 右侧角色插画与属性”的横版结构。
• 不显示底部主导航，不显示战斗/地图/门派入口。

4.3 门派/管理页结构

• 本次交付不包含该类页面。

4.4 地图/风云录结构

• 本次交付不包含该类页面。

4.5 战斗页结构

• 本次交付不包含该类页面。

---

五、组件规范

5.1 牌匾标题

• 外形：横向长条、两端收尖或切角。
• 主体：深色底。
• 边框：金色外描边 + 暗金内压边。
• 文案：居中显示，字重偏高。

5.2 主按钮

• 用于核心操作，如“修炼”“结束战斗”“关闭”。
• 背景以浅金、米白、浅灰为主，避免过亮刺眼。
• 文字居中，按钮高度建议不小于 44px。
• 点击态使用轻微缩放或亮度变化，不依赖悬停。

5.3 次按钮

• 用于次级操作、切换标签、辅助入口。
• 颜色比主按钮更淡，边框比主按钮更轻。
• 与主按钮区分时，优先通过色阶和尺寸区分，不只靠文字。

5.4 图文卡片

• 图卡以竖向角色卡为主，比例接近人物立绘卡。
• 选角页种族卡必须在“选中态”与“未选中态”之间有明显差异。
• 选中一个种族后，右侧/下方必须同步显示该种族的说明信息。

5.5 弹窗

• 弹窗背景使用半透明黑遮罩。
• 弹窗主体优先米白或浅纸色。
• 标题固定在弹窗顶部牌匾位。
• 正文区支持长文本滚动，底部保留单一主操作按钮。
• 登录提示、命名冲突、种族未解锁等状态可以复用弹窗。

5.6 标签与筛选

• 标签采用短条牌匾式结构。
• 选中态可用高亮金边或浅底色。
• 未选中态应降低对比度，但仍需保持可读性。

5.7 底部导航

• 底部导航是一级入口，图标必须大、明确、稳定。
• 图标下方可带书法字或定制字形，但不能影响可点区域。
• 当前选中态必须一眼可辨，建议使用亮边、底纹或发光感。

---

六、手机端适配

6.1 设计原则

• 以横版游戏屏为主，设计基准使用 1600 x 1000。
• 必须同时兼容 1366 x 768 到 1920 x 1200 的常见横向分辨率。
• 所有核心页面必须先保证横版可用，再考虑更大屏。

6.2 安全区

• 左右两侧保留视觉呼吸区。
• 底部保留主按钮与说明文字的安全区。
• 主要按钮不要贴边放置。

6.3 点击区域

• 所有可点击元素最小交互区建议 44px x 44px。
• 图文卡片、服务器条、标签、关闭按钮都要留出冗余点击空间。
• 不把操作点做得过小，避免误触和疲劳。

6.4 长文本处理

• 战报、风云录、说明类文本必须支持纵向滚动。
• 长文本区域应与正文底色一致，减少视觉跳变。
• 文本过长时优先保留完整信息，不强行压缩字号到不可读。

6.5 窄屏规则

• 宽屏优先，小屏缩放时必须保留 Logo、服务器条和主按钮。
• 重要插画可以缩短高度，但不能裁掉标题、表单和主按钮。
• 创建角色页的信息区必须优先保留，不允许为了塞卡片而挤压说明。

---

十、四场景落地约束

1. 启动页只保留主标题、主视觉、进入按钮、加载提示。
2. 登录页只保留账号、密码、记住登录/找回账号/设备校验、登录按钮，且只展示单服标识，不提供区服切换。
3. 注册页只保留账号、密码、确认密码、昵称、设备绑定/协议确认、创建账号。
4. 创建角色页必须包含种族选择、性别选择、名字输入和种族说明。
5. 选中一个种族后，必须立即展示该种族的信息，不得再把信息藏在二级页。
6. 性别只影响立绘、姿态和语音，不影响种族成长规则。
7. 不加入地图、战斗、门派、背包等额外模块。
8. 启动和登录两页允许使用更强的国风主视觉，但必须保持信息层级清楚，不能把按钮藏进复杂背景里。
9. 画面基准为横版，不再按竖屏手机稿执行。
10. 单服务器项目不得在任何页面出现“区”“分区”“切换区服”等字样。

---

七、动效规范

7.1 基础动效

• 页面切换：淡入淡出 0.25s - 0.35s
• 弹窗出现：轻微上浮 + 淡入 0.2s
• 按钮点击：缩放到 0.96
• 标签切换：高亮渐变过渡

7.2 视觉特效

• 角色头像可使用环形光效或气焰光晕。
• 关键数值弹出时可上浮并淡出。
• 战斗表现允许使用闪光、残影、冲击波等效果，但不能淹没文字。

---

八、资源约束

8.1 背景与插画

• 背景图优先使用低饱和、景深感强的国风场景。
• 复杂插画只适合做大区域背景，不适合放进密集信息区。

8.2 图标与装饰

• 图标风格要统一，尽量采用同一批描边与阴影规则。
• 装饰只用于增强识别，不可影响信息阅读。

8.3 可维护性

• 页面结构必须模块化，标题、按钮、卡片、弹窗尽量复用组件。
• 新页面优先遵循本规范，不额外引入另一套视觉语言。

---

九、落地优先级

1. 先统一顶栏、牌匾、按钮、弹窗。
2. 再统一正文板、卡片、标签、底部导航。
3. 最后补动效和装饰纹理。

---

UI设计规范 v1.1 | 2026-07-06 | 基于 images/ 截图整理