游戏UI设计方法与案例应用解析 张吉航 著 专业科技 文轩网

1初识游戏界面设计 1.1?理解交互 002 1.1.1?什么是交互行为 002 1.1.2?交互核心 002 1.2?适配显示 002 1.2.1?分辨率 002 1.2.2?适配规范 003 1.通用屏 003 2.拉伸屏 004 3.曲面屏 008 4.折叠屏 010 5.系统控件适配 011 1.3?操作区间 012 1.3.1?信息传递 013 1.3.2?视点行为 015 1.3.3?指向操作 017 1.设备握持 017 2.操作手势 018 1.3.4?操作热区 021 1.设备热区 021 2.陀螺操作 022 1.3.5?盲区 023 1.通用屏 023 2.拉伸屏 024 3.曲面屏 025 1.3.6?记忆识别 025 1.3.7?操作踏频 027 1.4?空间设计 028 1.4.1?视觉空间 028 1.信息空间处理 028 2.视觉环境空间 029 1.4.2?视觉平衡 029 1.4.3?落差空间 030 1.4.4?矩阵格测试 031 1.空间平衡线 032 2.界面中心线 032 3.矩形规格线 033 4.单元素中轴线 034 5.视觉出血线 034 1.5?界面动画 035 1.5.1?从动作出发 035 1.5.2?元素 037 1.6?情感设计 037 1.6.1?情感关系 037 1.6.2?解析情感 038 1.6.3?设计情感 039 1.形式化情感 039 2.色彩情感 039 3.语言情绪 040 4.不同的角度 040 1.6.4?反馈情感 041 1.7?色彩法则 041 1.7.1?慎用色 042 1.7.2?畅用色 043 1.7.3?反运用原理 043 1.固定元素显示 043 2.通用元素显示 044 1.7.4?取色技巧 044 1.8?布尔运算 045 1.8.1?什么是布尔运算 045 1.并集 045 2.交集 046 3.去除 046 1.8.2?实际操作示例 047 1.9?实景测试 050 1.9.1?什么是实景测试 050 1.9.2?测试推荐知识 050 1.9.3?测试环境 050 1.固定测试环境 051 2.随机测试环境 051 1.9.4?测试工具 052 1.9.5?实景测试的意义 052 2游戏界面的设计规范 2.1?游戏界面 054 2.1.1?登录界面 054 2.1.2?Loading页面 054 2.1.3?主界面 055 2.1.4?二级界面 055 2.1.5?玩法界面 055 2.1.6?结算界面 056 2.1.7?设置界面 057 2.1.8?商城界面 057 2.1.9?背包界面 058 2.1.10?个人信息界面 058 2.1.11?技能界面 059 2.1.12?活动界面 059 2.1.13?分享界面 059 2.1.14?排行榜 059 2.1.15?好友系统 061 2.1.16?聊天界面 061 2.2?游戏弹框 062 2.2.1?常态框与伪全屏框 062 1.常态框 062 2.伪全屏框 063 2.2.2?一、二、三级弹框 064 2.2.3?拖曳框 064 2.2.4?提示框 065 2.3?游戏按钮 066 2.3.1?系统按钮 066 2.3.2?主按钮 067 2.3.3?页签按钮 068 2.3.4?选择按钮 068 1.单选按钮设计 069 2.多选按钮设计 069 2.3.5?拟物按钮 070 2.3.6?文字按钮 070 2.4?游戏字体 071 2.4.1?系统字 071 1.常态系统字 071 2.艺术系统字 071 2.4.2?艺术字 071 2.5?文本规范 072 2.5.1?类多字文本处理 073 1.友好的信息处理 073 2.反馈处理状态 074 2.5.2?类输入文本处理 075 1.输入前 075 2.输入时 075 3.输入后 075 4.反馈处理状态 076 2.5.3?类数量提示文本处理 077 1.文本处理 077 2.状态处理 077 2.5.4?多环境文字处理 078 2.6?提示标识 078 2.6.1?系统提示 078 1.轻弹提示 078 2.公告提示 079 3.界面提示 080 2.6.2?小红点提示 080 1.无信息的小红点 080 2.有信息的小红点 081 2.6.3?气泡类型 082 2.6.4?标签类型 082 2.7?不同功能的图标 083 2.7.1?入口图标 083 2.7.2?主入口图标 084 2.7.3?活动图标 084 2.8?关闭操作 085 2.8.1?常态关闭 086 2.8.2?延伸关闭 086 2.9?进度条 088 2.10?切图方法 089 2.10.1?什么是切图 089 2.10.2?切法 089 1.整切 089 2.对半切 089 3.拼合切 090 4.切边 090 5.九宫切 091 6.填补 091 2.10.3?切图输出 092 1.常用方法 092 2.自创方法 094 2.10.4?半像素 094 2.11?输出管理 095 2.11.1?善于使用已知工具 095 1.图层重命名 095 2.分组 096 2.11.2?命名与编号 096 1.常用命名 097 2.编号 097 2.11.3?划分游戏模块 098 2.11.4?三叉树原理 100 2.11.5?输出信息 100 2.11.6?快速迭代资源管理 101 2.11.7?信息记忆 103 2.12?美术线前测试文档反馈规范 103 2.12.1?什么是美术线前测试文档反馈 103 2.12.2?测试文档反馈规范 103 1.测试文档名称规范 103 2.测试文档内容规范 104 3 游戏附加功能 3.1?音频 106 3.2?振动 106 3.3?视频 106 3.4?截图 107 3.5?分享 107 3.6?五图 107 4 游戏界面绘制案例 4.1?设计准备 109 4.1.1?硬件设备 109 4.1.2?设计软件 109 4.1.3?设计插件Photoshop Mirror 110 4.1.4?精准透视辅助工具 110 1. Perspective Tools插件 110 2. 2.5D六边立体透视辅助线 111 3. 3D全景透视辅助线 112 4.2?设计案例―元素篇 113 4.2.1?绘制光源 114 1.绘制径向光 114 2.绘制放射光 118 4.2.2?绘制彩带 123 4.3?设计案例―按钮篇 129 4.3.1?绘制水晶按钮 129 4.3.2?绘制透视按钮 137 4.4?设计案例―图标篇 151 4.4.1?绘制金币 151 4.4.2?绘制金币宝箱 165 4.4.3?绘制财宝车 169 4.5?设计案例―角色绘制篇 174 4.6?设计案例―界面篇 204 4.6.1?绘制匹配界面 204 4.6.2?绘制古风效果的活动界面 214 4.7?设计案例―综合篇 221 4.7.1?绘制五子棋大厅 221 1.绘制头像 221 2.绘制公告栏 223 3.绘制返回按钮和菜单按钮 223 4.绘制入口按钮 225 4.7.2?绘制设置对话框 226 1.绘制框体 227 2.添加信息 229 3.绘制关闭按钮 231 4.7.3?绘制匹配画面 233 1.绘制底框 234 2.添加文字信息 235 4.7.4?绘制五子棋对局效果 237 1.绘制棋子、棋盘 238 2.绘制头像信息 240 3.绘制常态按钮 241 4.7.5?绘制五子棋结算页面 243 1.绘制云朵 243 2.绘制彩带和星星图形 244 3.绘制玩家信息页面 245