mobile-game-ui-pattern-library — 手游UI设计模式库 Skill

触发条件

当用户提到"手游UI"、"移动端界面设计"、"手游界面模式"、"UI模式库"、"手游交互设计"、"mobile game UI"、"手游UI规范"时触发。 也适用于：用户说"帮我设计手游背包界面"、"商城UI怎么做"、"抽卡界面参考"、"战斗HUD布局"、"手游弹窗规范"、"适配刘海屏"、"手游导航怎么做"等场景。 当用户要求为手游项目输出UI方案、界面设计或交互文档时，也应触发。

技能描述

为游戏策划和UI设计师提供系统化的手游UI设计能力：

1. 设计原则 — 拇指热区、单手操作、信息层级、视觉引导
2. 通用模式库 — 覆盖手游主流界面类型的标准化设计方案
3. 组件规范 — 弹窗、导航、列表、卡片等通用组件的设计准则
4. 动效规范 — 转场、反馈、引导动画的标准时间参数
5. 适配方案 — 多设备、多分辨率的适配策略
6. 状态覆盖 — 全链路UI状态的完整性检查
7. 文档模板 — 标准化UI需求文档输出格式

---

一、手游UI设计核心原则

1.1 拇指热区法则

手游界面设计的第一要务是适应单手操作。拇指自然活动范围决定了按钮和交互区域的放置策略。

┌─────────────────────┐
│  ◄ 困难区域（状态栏）  │  ← 仅放置只读信息
│                     │
│   较难触达区域        │  ← 低频操作、信息展示
│                     │
│                     │
│   自然触达区域        │  ← 核心交互、主要按钮
│                     │
│   最佳触达区域        │  ← 高频操作、主Tab
│ ┌───┬───┬───┬───┐   │
│ │Tab│Tab│Tab│Tab│   │  ← 底部导航栏
│ └───┴───┴───┴───┘   │
└─────────────────────┘

热区分级与设计建议：

热区等级	屏幕位置	适合放置	按钮最小尺寸
S级（最佳）	底部1/4区域	主操作按钮、底部Tab、确认键	44x44pt
A级（自然）	中下部1/3区域	列表交互、卡片操作、次要按钮	40x40pt
B级（较难）	中上部1/3区域	信息展示、筛选栏、搜索框	36x36pt
C级（困难）	顶部1/4区域	状态信息、标题、返回按钮	44x44pt（因为难触达所以要更大）

1.2 信息层级设计

手游界面的信息层级采用「三层漏斗」模型：

graph TD
    A[第一层：核心信息] -->|占屏60%| B[玩家最关心的内容]
    C[第二层：辅助信息] -->|占屏25%| D[帮助决策的补充内容]
    E[第三层：操作入口] -->|占屏15%| F[按钮/导航/功能入口]

    B --> G[示例：角色属性、商品价格、战斗数值]
    D --> H[示例：描述文本、对比数据、标签分类]
    F --> I[示例：购买按钮、返回按钮、切换Tab]

信息层级规范：

层级	字号范围	字重	颜色要求	行间距
标题（H1）	20-24pt	Bold	高对比度，与背景对比度>=7:1	1.4倍
副标题（H2）	16-18pt	Medium	对比度>=4.5:1	1.3倍
正文	14-16pt	Regular	对比度>=4.5:1	1.5倍
辅助文字	12-13pt	Regular	对比度>=3:1	1.4倍
最小可读	10-11pt	Regular	仅用于法律声明等	1.3倍

1.3 单手操作适配原则

原则	说明	实施要点
底部优先	高频操作放底部	确认按钮、主要CTA放在屏幕下半部分
左右对称	兼顾左右手用户	避免关键按钮只在单侧，或提供镜像布局选项
滑动优于点击	手势操作更自然	用左右滑动替代小按钮切换
安全距离	防误触设计	危险操作按钮远离高频按钮，间距>=16pt
大按钮原则	关键按钮足够大	主CTA按钮最小宽度>=屏幕宽度40%，高度>=48pt

---

二、通用UI模式库

2.1 背包/物品系统

graph LR
    A[背包主界面] --> B[分类Tab切换]
    A --> C[物品网格/列表]
    A --> D[排序/筛选]
    C --> E[物品详情弹窗]
    E --> F[使用/装备]
    E --> G[分解/出售]
    E --> H[锁定/收藏]
    B --> I[全部/装备/消耗/材料/其他]

背包界面标准布局：

区域	位置	内容	尺寸建议
顶部栏	顶部固定	标题"背包"、容量(128/200)、整理按钮	高度 44-56pt
分类Tab	顶部栏下方	全部/装备/消耗品/材料/其他	高度 40-44pt，可横滑
物品网格	中部（可滚动）	物品图标+数量+品质边框	单格 72-80pt，间距 8pt
底部操作栏	底部固定	批量操作、一键整理	高度 56-64pt

物品格子设计规范：

• 图标尺寸：64x64pt（网格模式）或 48x48pt（列表模式）
• 品质边框颜色体系：白 > 绿 > 蓝 > 紫 > 橙 > 红（参考业界通用）
• 数量角标：右下角，字号10-12pt，背景半透明黑
• 已装备标记：左上角小图标或底部「已装备」标签
• 新物品标记：右上角红点或"NEW"角标
• 锁定标记：左下角锁图标

2.2 商城系统

商城导航结构：

graph TD
    A[商城主入口] --> B[推荐/热卖]
    A --> C[限时特惠]
    A --> D[礼包]
    A --> E[道具]
    A --> F[皮肤/外观]
    A --> G[VIP/月卡]

    B --> H[Banner轮播 + 精选商品]
    C --> I[倒计时 + 折扣标签]
    D --> J[礼包内容预览 + 价值标注]

商城卡片设计要素：

要素	必须/可选	设计要点
商品图标/预览图	必须	高清大图，支持点击放大
商品名称	必须	单行显示，超长截断+省略号
价格标签	必须	货币图标+数值，原价划线样式
折扣标签	可选	醒目色（红/橙），"-50%"格式
限购标签	可选	"限购3次"、"已购1/3"
倒计时	可选	限时商品必须展示剩余时间
购买按钮	必须	高对比色，已购灰化
热卖/推荐标签	可选	角标形式，不遮挡核心信息

2.3 抽卡/召唤系统

抽卡界面核心流程：

stateDiagram-v2
    [*] --> 抽卡主界面
    抽卡主界面 --> 选择卡池: 切换Banner
    抽卡主界面 --> 查看概率: 点击概率公示
    抽卡主界面 --> 抽卡动画: 点击抽1次/抽10次
    抽卡动画 --> 结果展示: 动画播完/点击跳过
    结果展示 --> 抽卡主界面: 确认/继续抽
    结果展示 --> 角色详情: 点击查看新角色
    角色详情 --> 抽卡主界面: 返回

抽卡界面必要元素：

元素	位置	说明
卡池Banner	顶部/中上部	展示当期UP角色/武器，支持左右滑动切换卡池
保底计数	Banner附近	距离保底还需X次，给玩家明确预期
抽卡按钮	底部	抽1次（小按钮）+ 抽10次（大按钮），显示消耗货币数
货币余额	顶部/按钮附近	当前持有抽卡货币数量
概率公示	可点击入口	法规要求必须展示，通常为文字链或小按钮
历史记录	可点击入口	查看历史抽卡记录
规则说明	可点击入口	卡池规则、保底机制说明

2.4 战斗HUD

战斗HUD布局模板（横屏ARPG/MOBA）：

┌─────────────────────────────────────────────┐
│ [头像][HP条][MP条]      [小地图] [暂停][设置] │  ← 顶部状态栏
│                                             │
│ [Buff图标行]                                 │
│                                             │
│                                             │
│              战 斗 场 景 区 域                │  ← 中央保持清洁
│                                             │
│                                             │
│                                             │
│ [摇杆]              [技能1][技能2][技能3][大招] │  ← 底部操作区
│                      [普攻]  [闪避]          │
└─────────────────────────────────────────────┘

HUD元素规范：

元素	位置	尺寸	交互方式
虚拟摇杆	左下角	外圈120-140pt，内圈40-50pt	触摸拖拽
技能按钮	右下角	60-72pt圆形	点击释放/长按蓄力/滑动指向
普攻按钮	右下角最内侧	72-80pt（最大）	连续点击
血条	左上角	宽度120-160pt，高度12-16pt	只读
小地图	右上角	80-100pt方形	点击可展开
Buff图标	左侧中上	24-28pt每个，横排	长按查看详情
伤害数字	场景内浮动	动态字号	飘字动画后消失

2.5 社交界面

社交系统核心页面结构：

graph TD
    A[社交主界面] --> B[好友列表]
    A --> C[聊天]
    A --> D[公会/帮派]
    A --> E[排行榜]

    B --> B1[在线好友]
    B --> B2[离线好友]
    B --> B3[好友申请]
    B --> B4[推荐好友]

    C --> C1[世界频道]
    C --> C2[公会频道]
    C --> C3[私聊]
    C --> C4[系统消息]

聊天界面设计要点：

要点	规范
消息气泡	自己右侧蓝色，他人左侧灰色，系统居中无气泡
输入框位置	底部固定，键盘弹起时跟随上推
表情/道具快捷入口	输入框左侧或右侧图标
消息时间戳	每隔5分钟或以上间隔时显示时间分割线
未读消息	Tab上红点+数字角标，列表中加粗/高亮
快捷短语	战斗中提供预设消息一键发送

2.6 设置界面

设置项分组规范：

分组	包含项	优先级
账号与安全	绑定手机、修改密码、实名认证、注销账号	高
画面设置	画质（低/中/高/极高）、帧率（30/60）、特效开关	高
声音设置	主音量、音乐、音效、语音，各带滑动条	高
推送通知	活动推送、好友消息、体力恢复提醒	中
语言	语言切换，需二次确认	中
客服与反馈	在线客服、问题反馈、FAQ	中
关于	版本号、用户协议、隐私政策、版权信息	低

---

三、弹窗设计规范

3.1 弹窗分类与规格

弹窗类型	用途	宽度	按钮数	是否可点蒙层关闭
确认弹窗	二次确认危险操作	屏幕宽度70-80%	2（取消+确认）	否
奖励弹窗	展示获得物品	屏幕宽度80-90%	1（确认/领取）	否
提示弹窗	通知信息	屏幕宽度70%	1（我知道了）	是
引导弹窗	新手引导说明	屏幕宽度85-90%	1-2（下一步/跳过）	否
公告弹窗	版本更新/活动公告	屏幕宽度85%	1-2（查看详情/关闭）	是
输入弹窗	改名/输入兑换码	屏幕宽度75%	2（取消+确认）	是
全屏弹窗	抽卡结果/剧情	全屏	1（确认/跳过）	否

3.2 弹窗层级管理

graph BT
    A[游戏主界面 z-index: 0] --> B[功能面板 z-index: 100]
    B --> C[普通弹窗 z-index: 200]
    C --> D[重要弹窗 z-index: 300]
    D --> E[系统弹窗 z-index: 400]
    E --> F[最高优先级：断线重连/强制更新 z-index: 500]

弹窗队列规则：

1. 同时只显示一个弹窗（队列模式依次弹出）
2. 高优先级可打断低优先级（低优先级入队等待）
3. 优先级排序：强制更新 > 断线提示 > 系统公告 > 活动公告 > 奖励领取 > 普通提示
4. 弹窗关闭后自动弹出队列中下一个

3.3 确认弹窗设计准则

准则	说明
双按钮布局	取消在左（次要样式），确认在右（主要样式）
危险操作	确认按钮用红色，增加二次确认或输入确认文字
消耗类操作	显示消耗数量和当前持有量
不可逆操作	明确标注"此操作不可撤销"
默认焦点	默认焦点在「取消」按钮上，防止误操作
按钮间距	两按钮间距>=16pt，防误触

3.4 奖励弹窗设计准则

奖励展示层级：

1. 单个稀有奖励 → 全屏特效+角色立绘+品质光效
2. 多个奖励 → 列表/网格展示，稀有物品高亮+动效
3. 纯数值奖励（金币/经验） → 简洁弹窗+飘字动画

奖励弹窗必要元素：

元素	说明
奖励来源标题	"通关奖励"、"每日签到奖励"、"成就达成"
物品图标+名称+数量	网格排列，品质色边框
稀有物品特效	紫色/橙色物品添加光效动画
领取/确认按钮	底部居中，"点击领取"或"确认"
分享按钮（可选）	稀有奖励提供社交分享入口

---

四、导航模式

4.1 导航模式选型指南

导航模式	适用场景	最大项数	优点	缺点
底部Tab	主界面一级导航	3-5个	拇指友好、切换快	占用底部空间
顶部Tab	二级分类导航	3-7个（可滑动）	不占底部空间	触达距离远
侧边栏	功能菜单多的游戏	8-15个	容纳多入口	需额外操作打开
全屏导航	游戏主城/大厅	不限	沉浸感强	学习成本高
九宫格	功能入口集合	6-12个	一目了然	占用面积大
浮动按钮	核心单一操作	1-2个	不遮挡内容	信息承载少

4.2 底部Tab设计规范

规范项	标准值
Tab栏高度	49-56pt（不含安全区）
图标尺寸	24-28pt
文字大小	10-12pt
选中态	图标高亮+文字变色+可加微动效
未读标记	红点（无数字）或红底白字角标（有数字）
最大Tab数	5个（超出考虑"更多"入口或侧边栏）
中央凸起按钮	用于核心操作（如开始战斗），凸出高度16-24pt

4.3 层级返回规范

graph LR
    A[主界面] -->|进入| B[功能一级]
    B -->|进入| C[功能二级]
    C -->|进入| D[功能三级]
    D -->|返回| C
    C -->|返回| B
    B -->|返回| A
    D -->|Home键| A

返回逻辑规则：

场景	返回行为
普通页面	返回上一级
弹窗打开时	先关闭弹窗，不返回页面
编辑模式	提示是否保存后返回
系统返回键（Android）	等同于页面左上角返回按钮
主界面按返回	弹出退出确认弹窗
全屏弹窗/过场动画	提供跳过/关闭按钮

---

五、列表与卡片设计模式

5.1 布局模式选型

布局模式	适用内容	方向	典型应用
纵向列表	好友列表、聊天记录、任务列表	垂直滚动	信息密度高的线性内容
横向滚动	推荐内容、卡池切换、皮肤预览	水平滚动	少量精选内容展示
网格布局	背包物品、图鉴、头像选择	垂直滚动	同类型等重要性的项目
瀑布流	动态广场、玩家作品展示	垂直滚动	高度不一的UGC内容
轮播Banner	公告、活动推荐	自动/手动轮播	运营位推广

5.2 卡片设计标准

卡片类型	最小宽度	高度	圆角	阴影	内边距
小卡片（物品格子）	64pt	64pt	8pt	无	4pt
中卡片（商品卡）	160pt	200pt	12pt	轻投影	12pt
大卡片（活动Banner）	全宽-32pt	160-200pt	16pt	中投影	16pt
列表项	全宽	64-80pt	0pt	分割线	16pt左右

5.3 滚动加载规范

加载模式	触发方式	反馈形式	适用场景
下拉刷新	下拉超过阈值(60-80pt)释放	顶部加载动画	列表页首次数据刷新
上拉加载更多	距底部200pt时预加载	底部加载指示器	分页列表
骨架屏	页面首次加载	灰色色块占位	所有列表/卡片页
分页指示器	横向滚动	底部圆点指示器	有限页数的横向内容

---

六、动效规范

6.1 基础动效参数表

动效类型	时长	缓动曲线	触发条件
页面推入（前进）	300ms	ease-in-out(0.4, 0, 0.2, 1)	导航至下一级页面
页面滑出（返回）	250ms	ease-in(0.4, 0, 1, 1)	返回上一级页面
弹窗弹入	250ms	ease-out(0, 0, 0.2, 1)	弹窗打开
弹窗关闭	200ms	ease-in(0.4, 0, 1, 1)	弹窗关闭
蒙层渐显	200ms	linear	弹窗打开时
蒙层渐隐	150ms	linear	弹窗关闭时
Toast提示	显示2000ms	fade-in 200ms + fade-out 200ms	操作反馈
按钮点击缩放	100ms	ease-out	点击时缩放至0.95，释放回1.0
红点出现	200ms	spring(弹性)	新消息/新内容
飘字动画	800-1200ms	ease-out + fade-out	获得物品/经验/金币
数值滚动	500-800ms	ease-out	数值变化展示
骨架屏闪烁	1500ms/周期	linear	加载占位

6.2 转场动画规范

转场类型	使用场景	动画描述
右推入/左推出	同层级前进/后退	标准导航转场
底部滑入/滑出	弹出面板/详情页	半屏或全屏底部面板
渐变切换	Tab内容切换	旧内容淡出+新内容淡入，共200ms
缩放弹入	弹窗/浮层	从0.8缩放至1.0+透明度0到1
全屏特效	抽卡结果/成就达成	自定义全屏动画

6.3 反馈动效规范

操作	反馈类型	参数
点击按钮	缩放+色变	scale 0.95, 100ms
点击失败/不可用	抖动	水平位移+-4pt, 3次, 300ms
长按	缩放+进度环	scale 0.90, 进度环600ms
滑动切换	跟手+回弹	跟手实时，回弹200ms spring
操作成功	对勾动画+飘字	对勾300ms, 飘字1000ms
网络请求中	加载指示器旋转	360度/秒, linear
下拉刷新	下拉图标旋转	跟手旋转，释放后加速

---

七、适配方案

7.1 屏幕适配矩阵

设备类型	分辨率范围	安全区处理	设计基准
iPhone SE系列	375x667pt	无刘海，标准状态栏20pt	小屏基准
iPhone 标准	390x844pt	刘海/灵动岛，底部Home Indicator 34pt	主设计基准
iPhone Max系列	428x926pt	同上，更宽	大屏适配
Android 标准	360x780dp	状态栏24dp，导航栏48dp	Android基准
Android 大屏	412x915dp	各厂商异形屏不同	宽屏适配
折叠屏（展开）	600x900+dp	折痕区域避让	平板级适配
iPad/平板	768x1024+pt	无刘海（新款有）	另需平板布局

7.2 刘海屏/异形屏适配

安全区规则：

区域	处理方式	具体值（以iPhone为例）
顶部状态栏	内容不侵入状态栏区域	安全区顶部 47-59pt
底部Home Indicator	底部操作栏上移	安全区底部 34pt
左右边缘（横屏）	两侧留出安全距离	安全区左右各 44pt
灵动岛区域	避免在该区域放交互元素	顶部中央区域预留

7.3 横竖屏切换

场景	推荐方向	切换策略
主城/大厅	竖屏	固定竖屏不切换
ARPG战斗	横屏	进入战斗自动切换
卡牌/SLG战斗	竖屏	保持竖屏
MOBA战斗	横屏	进入战斗自动切换
剧情/过场	横屏	自动切换，结束后恢复
直播/观战	横屏	支持手动切换

7.4 小程序适配要点

适配项	说明
胶囊按钮避让	右上角胶囊区域不放交互元素，高度约32pt
导航栏自定义	可自定义导航栏但需保留返回按钮功能
页面栈限制	注意页面层级上限（通常10层），合理使用redirectTo
分享卡片	设计专门的分享图片（5:4比例），标题限34字
下拉刷新	使用平台原生下拉刷新或自定义（需兼容）
底部安全区	同App规则，底部预留Home Indicator空间

---

八、UI状态覆盖清单

8.1 通用状态清单

每个页面/组件必须考虑以下状态，设计时逐项检查：

状态	描述	设计要求	检查项
加载中	数据请求中	骨架屏或加载动画，禁止空白页面	[ ] 已设计
正常展示	数据正常返回	主设计稿	[ ] 已设计
空状态	无数据	插画+文案+引导操作按钮	[ ] 已设计
错误状态	请求失败	错误提示+重试按钮	[ ] 已设计
网络断开	无网络连接	断网提示+重试/离线模式	[ ] 已设计
首次使用	用户从未访问	新手引导/功能介绍	[ ] 已设计
部分加载	部分数据成功	已有数据展示+失败部分重试	[ ] 已设计
权限不足	等级/VIP不够	提示解锁条件+引导	[ ] 已设计
维护中	服务器维护	维护公告+预计恢复时间	[ ] 已设计
版本过低	需要更新	强制/建议更新弹窗	[ ] 已设计

8.2 按钮状态清单

按钮状态	视觉表现	交互行为
默认(Normal)	标准样式	可点击
按下(Pressed)	缩放0.95+深色	触摸反馈
不可用(Disabled)	灰化，透明度40-50%	不响应点击，可展示tooltip说明原因
加载中(Loading)	按钮内显示加载指示器	不响应点击，防重复提交
高亮(Highlighted)	呼吸光效/边框动画	引导用户注意
红点提示	右上角红点	有新内容/未读
倒计时	按钮内显示倒计时	倒计时结束后变为可用

8.3 输入框状态清单

输入框状态	视觉表现	说明
默认	灰色边框+占位文字	未聚焦
聚焦	主题色边框+光标闪烁	键盘弹起
输入中	主题色边框+清除按钮出现	实时输入
校验成功	绿色边框+对勾图标	内容合法
校验失败	红色边框+错误提示文字	内容不合法
不可编辑	灰色背景+文字灰化	只读展示
字数限制	显示"已输入X/最大Y"	接近上限时变色警告

---

九、手游特有交互模式

9.1 手势交互模式

手势	使用场景	设计要点
长按预览	物品详情、角色信息	长按300ms触发，松手关闭，半屏弹出
左右滑动切换	卡池切换、角色切换、Tab切换	跟手滑动+回弹，翻页阈值为屏宽30%
双指缩放	地图、图鉴大图	缩放范围0.5x-3x，双击回到1x
上滑展开	底部面板、详情页	支持三档停靠：收起/半屏/全屏
下拉关闭	全屏详情页、图片查看	下拉>100pt时缩小+透明度降低，释放关闭
摇一摇	抽奖、社交匹配	需防误触，灵敏度可调

9.2 虚拟摇杆设计

参数	推荐值	说明
外圈直径	120-140pt	可视范围
内圈直径	40-50pt	操控手柄
激活方式	固定位置 / 触摸位置生成	两种模式可切换
死区半径	外圈半径的10%	微小移动不触发
最大偏移	外圈半径	内圈不超出外圈
方向分段	8方向或360度自由	根据游戏类型决定
回弹时间	100ms	松手后内圈归位
透明度	默认60%，操作时80%	不遮挡场景

9.3 技能按钮设计

设计要素	规范
按钮布局	弧形排列，拇指自然触达范围内
CD指示	扇形遮罩+倒计时数字
能量/怒气	环形进度条包裹按钮
连招提示	按钮边缘高亮闪烁+连线指引
锁定态	灰化+锁图标，展示解锁等级
自动施法	按钮角标显示"自动"标识
技能升级	按钮上红点提示可升级

---

十、UI需求文档模板

10.1 标准文档结构

每份UI需求文档应包含以下章节：

一、文档信息
   - 功能名称、版本号、作者、日期、状态（草稿/评审中/定稿）

二、功能概述
   - 功能目标（1-2句话概括）
   - 目标用户（哪些玩家会使用）
   - 入口位置（从哪里进入）

三、页面结构
   - 页面层级关系图（Mermaid flowchart）
   - 各页面简述

四、界面设计（按页面逐个描述）
   4.1 页面名称
       - 线框图（SVG或描述）
       - 布局说明（各区域尺寸、位置）
       - 元素清单表格（元素名|类型|状态|交互说明）
       - 数据来源与显示规则

五、交互流程
   - 核心操作流程图（Mermaid）
   - 每步交互的三段式描述（操作→响应→界面变化）

六、状态覆盖
   - 所有页面的状态清单（加载中/空态/错误等）

七、动效说明
   - 转场动效、反馈动效参数表

八、适配说明
   - 特殊设备适配要求

九、埋点需求
   - 页面曝光、按钮点击等数据埋点清单

10.2 元素描述模板

每个界面元素使用以下表格格式描述：

字段	内容
元素名称	购买按钮
元素类型	Button
位置	底部居中，距底部安全区16pt
尺寸	宽度=屏幕宽度-64pt，高度=48pt
默认态	主题色背景+白色文字"立即购买"+货币图标+价格
按下态	背景色加深10%，缩放0.95
不可用态	灰色背景，文字"货币不足"，点击弹提示
加载态	白色加载指示器替换文字
交互说明	点击发起购买请求，成功后关闭弹窗+飘字提示

10.3 通用交互流程模板（Mermaid）

flowchart TD
    A[用户进入页面] --> B{首次访问?}
    B -->|是| C[展示新手引导]
    B -->|否| D[请求数据]
    C --> D
    D --> E{请求结果}
    E -->|成功且有数据| F[正常展示]
    E -->|成功但无数据| G[展示空状态]
    E -->|失败| H[展示错误状态+重试按钮]
    H -->|点击重试| D
    F --> I[用户操作]
    I --> J{操作类型}
    J -->|查看详情| K[打开详情弹窗/页面]
    J -->|执行操作| L{二次确认?}
    L -->|需要| M[弹出确认弹窗]
    L -->|不需要| N[直接执行]
    M -->|确认| N
    M -->|取消| I
    N --> O{执行结果}
    O -->|成功| P[成功反馈+刷新页面]
    O -->|失败| Q[失败提示Toast]
    P --> I
    Q --> I

---

十一、设计走查Checklist

在UI方案评审或提交开发前，逐项检查以下清单：

11.1 布局与排版

• 拇指热区：高频按钮位于屏幕下半部分
• 最小点击区域：所有可交互元素>=44x44pt
• 按钮间距：相邻按钮间距>=8pt，危险按钮间距>=16pt
• 文字大小：正文>=14pt，辅助文字>=12pt，最小>=10pt
• 行间距：正文行间距>=1.4倍
• 内边距：卡片内边距>=12pt，页面左右边距>=16pt
• 对齐：所有元素遵循栅格对齐
• 截断处理：超长文本有省略号或换行方案

11.2 状态完整性

• 加载状态：每个页面有加载态（骨架屏/loading）
• 空状态：无数据时有插画+文案+引导
• 错误状态：网络错误有重试机制
• 首次使用：新功能有引导说明
• 按钮全状态：Normal/Pressed/Disabled/Loading 四态齐全
• 输入框全状态：默认/聚焦/错误/成功/不可编辑
• 列表边界：没有更多数据时有底部提示

11.3 交互规范

• 返回逻辑：每个页面的返回路径明确
• 弹窗层级：弹窗优先级和队列规则定义
• 防重复点击：提交类按钮有防重复机制
• 手势冲突：滑动手势与系统手势无冲突
• 动效参数：所有动效有明确的时长和曲线值
• 蒙层规则：弹窗蒙层是否可点击关闭已定义

11.4 适配兼容

• 安全区适配：刘海屏顶部和底部Home Indicator
• 横竖屏：明确支持方向和切换策略
• 多分辨率：最小屏(375pt宽)和大屏(428pt宽)均验证
• 系统字体大小：系统大字体模式下不会溢出
• 深色模式：如支持，所有页面均有深色配色
• 小程序胶囊：右上角胶囊区域无遮挡

11.5 可访问性

• 色彩对比度：文字与背景对比度>=4.5:1
• 非色彩信息：不完全依赖颜色传递信息（辅以图标/文字）
• 触摸目标：最小触摸区域符合平台规范
• 动效减弱：尊重系统"减少动态效果"设置
• 文字可缩放：支持系统级字体大小调整

---

十二、附录：通用界面交互流程图集

12.1 登录注册流程

flowchart TD
    A[启动App] --> B{已登录?}
    B -->|是| C[进入主界面]
    B -->|否| D[展示登录页]
    D --> E[一键登录/手机号登录]
    D --> F[第三方登录-微信/QQ/Apple]
    D --> G[游客登录]
    E --> H{验证结果}
    F --> H
    G --> H
    H -->|成功 + 已建角| C
    H -->|成功 + 未建角| I[创建角色流程]
    H -->|失败| J[错误提示 + 重试]
    I --> C
    J --> D

12.2 首充/付费流程

flowchart TD
    A[点击购买] --> B[弹出确认弹窗]
    B --> C{是否确认}
    C -->|取消| D[关闭弹窗]
    C -->|确认| E[调起支付SDK]
    E --> F{支付结果}
    F -->|成功| G[发放物品 + 成功弹窗]
    F -->|失败| H[支付失败提示]
    F -->|取消| I[返回确认弹窗]
    G --> J[关闭弹窗 + 刷新界面]
    H --> K{重试?}
    K -->|是| E
    K -->|否| D

12.3 新手引导流程

flowchart TD
    A[触发引导条件] --> B{引导类型}
    B -->|强制引导| C[遮罩+高亮目标元素]
    B -->|弱引导| D[手指动画+提示气泡]
    B -->|功能介绍| E[全屏图文介绍-支持翻页]
    C --> F[用户按指示操作]
    F --> G{还有下一步?}
    G -->|是| C
    G -->|否| H[引导完成-记录状态]
    D --> I[用户可忽略]
    I --> H
    E --> J[用户翻页/关闭]
    J --> H
    H --> K[恢复正常界面]

---

十三、附录：标准ASCII线框图模板集

以下模板模拟375px宽竖屏手机效果，可直接用于策划案和UI需求文档中。所有模板为通用结构，不包含具体项目内容。

13.1 背包/仓库界面

┌─────────────────────────────────────┐
│ 9:41            ▐███▌  ⚡ 📶        │ ← 状态栏
├─────────────────────────────────────┤
│ ◀ 返回      背  包      ⚙ 整理     │ ← 导航栏（标题居中）
├─────────────────────────────────────┤
│ 容量: 128/200                       │ ← 容量提示
├──────┬──────┬──────┬──────┬────────┤
│ 全部 │ 装备 │ 消耗 │ 材料 │ 其他   │ ← 分类Tab栏（可横滑）
├──────┴──────┴──────┴──────┴────────┤
│ ┌─────────────────────────────────┐ │
│ │ 排序: 品质▼   筛选: 全部▼       │ │ ← 排序/筛选栏
│ └─────────────────────────────────┘ │
│                                     │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌────┐ │ ← 物品网格（4列）
│ │ ★★★ │ │ ★★  │ │ ★★★★│ │ ★  │ │   品质用星级区分
│ │ 图标 │ │ 图标 │ │ 图标 │ │图标│ │
│ │  x5  │ │  x1  │ │  x3  │ │ x99│ │ ← 右下角数量角标
│ │[装备] │ │      │ │ NEW  │ │ 🔒 │ │ ← 状态标记
│ └──────┘ └──────┘ └──────┘ └────┘ │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌────┐ │
│ │ ★★  │ │ ★★★ │ │ ★   │ │ ★★│ │
│ │ 图标 │ │ 图标 │ │ 图标 │ │图标│ │
│ │  x2  │ │  x1  │ │  x50 │ │ x8 │ │
│ └──────┘ └──────┘ └──────┘ └────┘ │
│         ...（可向下滚动）...         │
│                                     │
├─────────────────────────────────────┤
│  [ 批量选择 ]        [ 一键整理 ]   │ ← 底部操作栏
├─────────────────────────────────────┤
│  🏠主城  ⚔战斗  📦背包  👤角色  ⋯  │ ← 底部Tab栏（背包高亮）
└─────────────────────────────────────┘

布局说明：

• 网格区域可滚动，每行4列，单格72-80pt
• 品质边框以颜色区分（白/绿/蓝/紫/橙/红）
• 已装备、NEW、锁定标记分别位于左下、右上、左下

13.2 商城界面

┌─────────────────────────────────────┐
│ 9:41            ▐███▌  ⚡ 📶        │ ← 状态栏
├─────────────────────────────────────┤
│ ◀ 返回      商  城     💎1280 🪙9999│ ← 导航栏 + 货币余额
├──────┬──────┬──────┬──────┬────────┤
│ 推荐 │ 限时 │ 礼包 │ 道具 │ 月卡   │ ← 商城分类Tab
├──────┴──────┴──────┴──────┴────────┤
│ ┌─────────────────────────────────┐ │
│ │                                 │ │
│ │      ★ Banner轮播区 ★          │ │ ← 运营Banner（自动轮播）
│ │   当期主推活动/限定礼包图片      │ │
│ │                                 │ │
│ │           ● ○ ○ ○               │ │ ← 轮播指示器
│ └─────────────────────────────────┘ │
│                                     │
│  🔥 热卖推荐                        │ ← 小节标题
│ ┌────────────────┐ ┌──────────────┐ │
│ │   [商品图片]   │ │  [商品图片]  │ │ ← 商品卡片（2列）
│ │   商品名称A    │ │  商品名称B   │ │
│ │  ̶原̶价̶:̶ ̶1̶2̶8̶0̶  │ │  限购: 1/3  │ │ ← 原价划线
│ │  💎 648  -50% │ │  💎 328     │ │ ← 现价 + 折扣标签
│ │ [  立即购买  ] │ │ [ 立即购买 ] │ │ ← 购买按钮
│ └────────────────┘ └──────────────┘ │
│ ┌────────────────┐ ┌──────────────┐ │
│ │   [商品图片]   │ │  [商品图片]  │ │
│ │   商品名称C    │ │  商品名称D   │ │
│ │  ⏰ 剩余02:30  │ │              │ │ ← 限时倒计时
│ │  💎 198       │ │  🪙 5000     │ │
│ │ [  立即购买  ] │ │ [ 立即购买 ] │ │
│ └────────────────┘ └──────────────┘ │
│         ...（可向下滚动）...         │
│                                     │
├─────────────────────────────────────┤
│  🏠主城  ⚔战斗  🛒商城  👤角色  ⋯  │ ← 底部Tab栏（商城高亮）
└─────────────────────────────────────┘

布局说明：

• 顶部货币余额常驻显示，点击可跳转充值
• Banner高度160-200pt，支持手动左右滑动
• 商品卡片2列网格，包含图片、名称、价格、购买按钮
• 限时商品必须展示倒计时，已售罄商品按钮灰化

13.3 抽卡界面

┌─────────────────────────────────────┐
│ 9:41            ▐███▌  ⚡ 📶        │ ← 状态栏
├─────────────────────────────────────┤
│ ◀ 返回      召  唤      💎 1280    │ ← 导航栏 + 抽卡货币
├─────────────────────────────────────┤
│ ┌─────────────────────────────────┐ │
│ │                                 │ │
│ │                                 │ │
│ │       ★ 卡池主视觉区 ★         │ │ ← UP角色立绘/卡池展示
│ │    （当期UP角色大图展示区域）    │ │   支持左右滑动切换卡池
│ │                                 │ │
│ │                                 │ │
│ │        ◀  卡池1/3  ▶           │ │ ← 卡池切换指示
│ └─────────────────────────────────┘ │
│                                     │
│  ┌───────────────────────────────┐  │
│  │ UP角色: 角色名称   概率: 0.7% │  │ ← 当期UP信息
│  │ 距保底: 还差 42 次            │  │ ← 保底计数器
│  └───────────────────────────────┘  │
│                                     │
│  [概率公示]  [历史记录]  [规则说明]  │ ← 信息入口（文字链）
│                                     │
├─────────────────────────────────────┤
│                                     │
│   ┌──────────┐   ┌──────────────┐  │
│   │  抽 1 次 │   │   抽 10 次   │  │ ← 抽卡按钮区
│   │  💎 160  │   │   💎 1600    │  │   10次按钮更大更醒目
│   └──────────┘   └──────────────┘  │
│                                     │
│   今日免费次数: 0/1                  │ ← 免费次数提示
│                                     │
├─────────────────────────────────────┤
│  🏠主城  ⚔战斗  📦背包  👤角色  ⋯  │ ← 底部Tab栏
└─────────────────────────────────────┘

布局说明：

• 卡池视觉区占屏幕上半部约40%，是视觉重心
• 保底计数和UP信息紧跟卡池区下方
• 概率公示为法规要求必须展示的入口
• 抽卡按钮位于底部拇指热区，10连抽按钮更大
• 左右滑动可切换不同卡池

13.4 角色详情界面

┌─────────────────────────────────────┐
│ 9:41            ▐███▌  ⚡ 📶        │ ← 状态栏
├─────────────────────────────────────┤
│ ◀ 返回     角色详情     ⭐ 收藏     │ ← 导航栏
├─────────────────────────────────────┤
│ ┌─────────────────────────────────┐ │
│ │                                 │ │
│ │                                 │ │
│ │        角色立绘展示区域          │ │ ← 角色立绘（可左右滑动
│ │       （支持缩放/旋转预览）      │ │   切换角色皮肤）
│ │                                 │ │
│ │                                 │ │
│ │ Lv.60        ★★★★★             │ │ ← 等级 + 星级
│ └─────────────────────────────────┘ │
│                                     │
│ ┌──────┬──────┬──────┬───────────┐ │
│ │ 属性 │ 技能 │ 装备 │ 命座/突破  │ │ ← 信息Tab切换
│ └──────┴──────┴──────┴───────────┘ │
│ ┌─────────────────────────────────┐ │
│ │ 生命值   ████████████░░  12450  │ │ ← 属性面板
│ │ 攻击力   ██████████░░░░  1856   │ │   数值条形图 + 具体数值
│ │ 防御力   ██████░░░░░░░░  945    │ │
│ │ 暴击率   ████░░░░░░░░░░  32.5%  │ │
│ │ 暴击伤害 ██████░░░░░░░░  165.0% │ │
│ │ 元素精通 ████████░░░░░░  286    │ │
│ └─────────────────────────────────┘ │
│                                     │
│ 装备槽位:                           │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌──┐ │
│ │武器│ │头盔│ │铠甲│ │鞋子│ │饰│ │ ← 装备槽位（点击可更换）
│ │ 图 │ │ 图 │ │ 图 │ │ 图 │ │品│ │   空槽位显示"+"号
│ │ 标 │ │ 标 │ │ 标 │ │ 标 │ │图│ │
│ └────┘ └────┘ └────┘ └────┘ └──┘ │
│                                     │
├─────────────────────────────────────┤
│  [ 升级 ]   [ 突破 ]   [ 培养 ]    │ ← 底部操作按钮
├─────────────────────────────────────┤
│  🏠主城  ⚔战斗  📦背包  👤角色  ⋯  │ ← 底部Tab栏
└─────────────────────────────────────┘

布局说明：

• 角色立绘区占屏幕上方约35-40%，是视觉焦点
• 信息Tab可切换属性/技能/装备/命座等面板
• 属性面板用条形图直观展示数值高低
• 装备槽位一行排列，点击可打开装备选择弹窗
• 底部操作按钮为角色养成核心入口

13.5 聊天/社交界面

┌─────────────────────────────────────┐
│ 9:41            ▐███▌  ⚡ 📶        │ ← 状态栏
├─────────────────────────────────────┤
│ ◀ 返回      聊  天      👥 好友    │ ← 导航栏
├──────┬──────┬──────┬───────────────┤
│ 世界 │ 公会 │ 私聊 │ 系统         │ ← 频道切换Tab
│  ·3  │  ·1  │  ·5  │              │   （数字为未读数）
├──────┴──────┴──────┴───────────────┤
│                                     │
│        ── 2026-03-28 14:30 ──       │ ← 时间分隔线
│                                     │
│ ┌──┐ ┌─────────────────┐           │
│ │头│ │ 玩家A:            │           │ ← 他人消息（左对齐）
│ │像│ │ 有人一起打副本吗？│           │   灰色气泡
│ └──┘ └─────────────────┘           │
│                                     │
│           ┌──────────────────┐ ┌──┐ │
│           │ 我来！等我换装备 │ │头│ │ ← 我的消息（右对齐）
│           └──────────────────┘ │像│ │   蓝色气泡
│                                └──┘ │
│                                     │
│ ┌──┐ ┌───────────────────────┐     │
│ │头│ │ 玩家B:                 │     │
│ │像│ │ [表情包图片]           │     │ ← 表情消息
│ └──┘ └───────────────────────┘     │
│                                     │
│  ┌──────────────────────────────┐  │
│  │  📢 系统: 玩家C获得了传说装备  │  │ ← 系统消息（居中无气泡）
│  └──────────────────────────────┘  │
│                                     │
│         ...（可向上滚动）...         │
│                                     │
├─────────────────────────────────────┤
│ ┌─┐ ┌──────────────────────┐ ┌──┐ │
│ │😀│ │  输入消息...          │ │发送│ │ ← 输入栏
│ └─┘ └──────────────────────┘ └──┘ │ ← 表情入口 + 输入框 + 发送
├─────────────────────────────────────┤
│  快捷: [组队] [求助] [打招呼] [GG] │ ← 快捷短语栏（可选）
├─────────────────────────────────────┤
│  🏠主城  ⚔战斗  📦背包  💬聊天  ⋯  │ ← 底部Tab栏（聊天高亮）
└─────────────────────────────────────┘

布局说明：

• 频道Tab栏显示未读消息数量红点
• 消息列表区域可向上滚动加载历史
• 自己的消息右对齐蓝色气泡，他人左对齐灰色气泡
• 系统消息居中显示，无气泡样式
• 输入框固定在底部，键盘弹起时跟随上推
• 快捷短语栏用于战斗中快速发送预设消息

13.6 设置界面

┌─────────────────────────────────────┐
│ 9:41            ▐███▌  ⚡ 📶        │ ← 状态栏
├─────────────────────────────────────┤
│ ◀ 返回          设  置              │ ← 导航栏
├─────────────────────────────────────┤
│                                     │
│ 账号与安全                          │ ← 分组标题
│ ┌─────────────────────────────────┐ │
│ │ 绑定手机         138****5678  ▶ │ │ ← 列表项（带箭头）
│ ├─────────────────────────────────┤ │
│ │ 修改密码                      ▶ │ │
│ ├─────────────────────────────────┤ │
│ │ 实名认证           已认证    ▶ │ │ ← 状态说明文字
│ └─────────────────────────────────┘ │
│                                     │
│ 画面与性能                          │ ← 分组标题
│ ┌─────────────────────────────────┐ │
│ │ 画质         低 [中] 高  极高   │ │ ← 分段选择器
│ ├─────────────────────────────────┤ │
│ │ 帧率              [30] 60      │ │ ← 分段选择器
│ ├─────────────────────────────────┤ │
│ │ 特效开关                 [●——] │ │ ← 开关Toggle（开启）
│ └─────────────────────────────────┘ │
│                                     │
│ 声音设置                            │ ← 分组标题
│ ┌─────────────────────────────────┐ │
│ │ 主音量     ──────●────── 80%   │ │ ← 滑块Slider
│ ├─────────────────────────────────┤ │
│ │ 音乐       ────────●──── 60%   │ │
│ ├─────────────────────────────────┤ │
│ │ 音效       ──────────●── 90%   │ │
│ ├─────────────────────────────────┤ │
│ │ 语音       ────●──────── 40%   │ │
│ └─────────────────────────────────┘ │
│                                     │
│ 推送通知                            │ ← 分组标题
│ ┌─────────────────────────────────┐ │
│ │ 活动推送                 [●——] │ │ ← 开关Toggle（开启）
│ ├─────────────────────────────────┤ │
│ │ 好友消息                 [●——] │ │
│ ├─────────────────────────────────┤ │
│ │ 体力恢复提醒             [——●] │ │ ← 开关Toggle（关闭）
│ └─────────────────────────────────┘ │
│                                     │
│ 其他                                │
│ ┌─────────────────────────────────┐ │
│ │ 语言                  简体中文▶ │ │
│ ├─────────────────────────────────┤ │
│ │ 在线客服                      ▶ │ │
│ ├─────────────────────────────────┤ │
│ │ 用户协议                      ▶ │ │
│ ├─────────────────────────────────┤ │
│ │ 版本号                  v1.2.3  │ │ ← 纯展示，不可点击
│ └─────────────────────────────────┘ │
│                                     │
│        [ 🔴 注销账号 ]              │ ← 危险操作按钮（红色）
│                                     │
│         ...（可向下滚动）...         │
│                                     │
└─────────────────────────────────────┘

布局说明：

• 设置项按功能分组，每组有分组标题
• 三种控件类型：跳转项（带箭头▶）、开关项（Toggle）、滑块项（Slider）
• 开关Toggle用 [●——] 表示开启，[——●] 表示关闭
• 危险操作（注销账号）独立放置，使用红色样式
• 整个页面为一个长列表，可向下滚动
• 无底部Tab栏，从其他页面入口进入

---

使用说明

当被要求设计手游UI方案时，按以下步骤操作：

1. 明确需求：确认要设计的界面类型、游戏品类、目标平台
2. 选取模式：从本模式库中匹配最合适的UI模式作为基础
3. 定制调整：根据具体需求在标准模式基础上增减元素
4. 状态覆盖：用第八章清单逐项检查所有状态是否覆盖
5. 交互标注：用第六章的动效参数标注所有交互细节
6. 适配检查：用第七章的适配方案确认多设备兼容
7. 文档输出：用第十章的模板格式输出标准化UI需求文档
8. 走查验证：用第十一章的Checklist做最终走查