艺术设计必修课:UI设计

**章 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