第一章 UI 编排基础 001
一、UI 设计概述 002
1 UI 设计的定义
2 UI 设计相关术语
3 手势交互方式
二、UI 设计的视觉规范 006
1 度量单位
2 界面尺寸
三、界面类型 012
1 引导页
2 引导页类型
3 首页
4 个人中心页
5 列表页
6 音视频播放页
7 详情页
8 注册登录页面
9 侧导航页
10 图表页
四、游戏界面类型 028
1 登录界面
2 加载界面
3 关卡界面
4 情景提示界面
5 地图界面
6 结算界面
五、网页界面设计 034
1 网站
2 组成网页的对象
3 网页的基本编排方式
六、网页界面分类 040
1 个人型网页
2 门户型网页
3 企业型网页
4 功能型网页
5 娱乐型网页
6 机构型网页
第二章 UI 编排中的图标 045
一、UI 中的图标设计 046
1 图标的含义
2 图标设计规范
3 图标设计中常见的问题
二、UI 图标中的常用图形 050
1 圆形、椭圆形
2 正方形、长方形
3 三角形
三、图标的风格种类 052
1 拟物化图标
2 扁平化图标
3 MBE 风格图标
4 像素风格图标
5 线性风格图标
6 立体风格图标
四、游戏界面中的图标 058
五、游戏界面图标分类 060
1 功能性图标
2 道具性图标
六、网页界面中的图标 062
第三章 UI 编排中的布局与构图 063
一、UI 编排中的点、线、面 064
1 UI 编排中的点
2 UI 编排中的线
3 UI 编排中的面
二、UI 编排中的视觉规律 068
1 视觉中心
2 视觉重心
3 视域
4 视觉流程
5 版面率
三、UI 编排设计的方式 074
1 标准式
2 定位式
3 斜置式
4 中轴式
5 文字式
6 图片式
7 水平式
8 指示式
四、UI 编排中的黄金比例 080
1 黄金比例 2 UI 设计中的黄金比例
五、网格化构图 084
六、三角形构图 087
七、对角线构图 089
八、放射形构图 091
九、S 形构图 093
十、对齐元素 095
1 齐左
2 居中
3 齐行
十一、满版式构图 097
十二、标准式构图 098
十三、体现条理 099
十四、倒L形构图 101
十五、F形浏览模式 103
第四章 UI 编排中的文字和图片 105
一、UI 编排中的文字 106
1 字体基础
2 字体样式
二、文字编排专业术语 111
1 中文字符与字体大小
2 英文字符与字体大小
3 字符空格和字距
4 行空格和行距
5 复合字体
三、 UI 字体规范 114
1 系统字体
2 字体色彩
四、合适的字距与行距 116
五、强调和区分 118
六、选用合适的字体 120
1 游戏界面字体
2 强调文字
七、文字图像化 124
八、界面编排中的图片 126
1 位图和矢量图
2 常见的位图图片格式
3 常见的矢量图图片格式
九、图片的形态与处理方法 131
1 大面积使用图片
2 图片的裁剪处理
3 图片的局部提取运用
4 图片的装饰效果
十、合理裁切图片 134
十一、图片最大化 136
十二、 添加装饰元素 138
第五章 UI 编排中的配色 139
一、色彩的基础知识 140
1 三原色
2 间色
3 复色
二、色彩三要素 141
1 要素1: 色相
2 要素2: 明度
3 要素3: 纯度
三、色彩模式 146
1 RGB 色彩模式
2 CMYK 色彩模式
四、色彩的感觉 148
1 色彩的温度感
2 色彩的距离感
3 色彩的体量感
4 色彩的重量感
五、界面中的常用色及意象表达 151
1 红色
2 橙色
3 黄色
4 绿色
5 蓝色
6 紫色
7 黑色
8 白色
六、利用色彩增加文本可读性 159
七、利用色彩表现食欲 161
八、利用黑色渲染高品质氛围 163
九、为页面增加趣味性 165
十、利用色彩表现浪漫感 167
十一、利用色彩表现年龄 169
十二、利用色彩制造对比 171
十三、利用色彩提高界面视觉度 173
十四、利用色彩表现压迫感 175
十五、利用色块区分界面信息 177
附录 各类界面参考模板 179
参考文献 192
鄂公网安备 42010302001612号 