UI设计基础培训教程（全彩版·第2版）

课堂练习：制作软件书艺术二维码

15.2.3 设计艺术二维码的注意事项

15.2.2 生成二维码的方法

15.2.1 课堂案例：制作数艺设艺术二维码

15.2 制作艺术二维码

15.1 二维码的原理结构

第15章 制作艺术二维码

课后习题：对旅游主页进行切图

课堂练习：对播放页进行切图

14.2.2 标注规范

14.2.1 标注软件

14.2 界面标注

14.1.6 Android的“点九”切图法

14.1.5 通用切图法

14.1.4 iOS与Android的切图命名方式

14.1.3 iOS与Android的尺寸关系

14.1.2 Android的常用单位

14.1.1 课堂案例：对个人中心界面进行切图

14.1 iOS与Android的切图方法

第14章 切图与标注

课后习题：制作聊天页

课堂练习：制作预约信息页

13.2.4 聊天页面

13.2.3 信息发布页面

13.2.2 登录页面

13.2.1 课堂案例：制作软件登录页

13.2 可输入页的常见类型

13.1 可输入页的概念

第13章 可输入页设计

课后习题：制作旅游详情页

课堂练习：制作食谱详情页

12.2.3 销售型

12.2.2 普通型

12.2.1 课堂案例：制作购物App详情页

12.2 详情页的常见类型

12.1 详情页的概念

第12章 详情页设计

课后习题：制作音频播放页

课堂练习：制作音乐播放页

11.2.4 音频播放页

11.2.3 视频播放页

11.2.2 音乐播放页

11.2.1 课堂案例：制作音乐播放器界面

11.2 播放页的常见类型

11.1 播放页的概念

第11章 播放页设计

课后习题：制作物流信息列表页

课堂练习：制作购物App列表页

10.2.5 图库列表

10.2.4 时间轴

10.2.3 双行列表

10.2.2 单行列表

10.2.1 课堂案例：制作图书折扣列表页

10.2 列表页的常见类型

10.1 列表页的概念

第10章 列表页设计

课后习题：制作学习类App个人中心页

课堂练习：制作视频App个人中心页

9.2.3 头像居左对齐

9.2.2 头像居中对齐

9.2.1 课堂案例：制作个人中心页

9.2 个人中心页的常见类型

9.1 个人中心页的概念

第9章 个人中心页设计

课后习题：制作美食类App主页

课堂练习：制作旅游App主页

8.2.5 综合型

8.2.4 卡片型

8.2.3 图标型

8.2.2 列表型

8.2.1 课堂案例：制作外卖App首页

8.2 首页的常见类型

8.1 首页的概念

第8章 首页设计

课后习题：制作购物车空白页

课堂练习：制作消息中心空白页

7.2.3 错误提示型

7.2.2 首次进入型

7.2.1 课堂案例：制作资料审核空白页

7.2 空白页的常见类型

7.1 空白页的概念

第7章 空白页设计

课后习题：制作文档App引导页

课堂练习：制作旅游App引导页

6.3.2 浮层引导页的概念

6.3.1 课堂案例：制作浮层引导页

6.3 浮层引导页

6.2.4 幽默型

6.2.3 情感型

6.2.2 功能介绍型

6.2.1 课堂案例：制作功能介绍型引导页

6.2 引导页的常见类型

6.1 引导页的概念

第6章 引导页与浮层引导页设计

课后习题：制作推广型闪屏页

课堂练习：制作品牌宣传型闪屏页

5.2.4 推广型

5.2.3 关怀型

5.2.2 宣传型

5.2.1 课堂案例：制作中秋主题的闪屏页

5.2 闪屏页的常见类型

5.1 闪屏页的概念

第5章 闪屏页设计

课后习题：在Photoshop中绘制功能图标

课堂练习：在Illustrator中绘制手机功能图标

4.3.6 功能图形化图标

4.3.5 文字图标

4.3.4 卡通图标

4.3.3 立体图标

4.3.2 拟物化图标

4.3.1 像素图标

4.3 其他类型的图标

4.2.4 设置线性图标的注意事项

4.2.3 线性图标的概念

4.2.2 课堂案例：制作线性风格的功能图标

4.2.1 课堂案例：制作线性风格的聊天图标

4.2 线性风格图标

4.1.5 设计扁平化图标的注意事项

4.1.4 扁平化图标的类型

4.1.3 扁平化图标的概念

4.1.2 课堂案例：制作扁平化风格的旅游图标

4.1.1 课堂案例：制作扁平化风格的播放器图标

4.1 扁平化风格图标

第4章 图标设计

3.6.8 图标

3.6.7 间距

3.6.6 文字

3.6.5 提示框

3.6.4 头像

3.6.3 分割线

3.6.2 按钮控件

3.6.1 色彩控件

3.6 UI设计的整体规范

3.5.3 界面字体的规范

3.5.2 常用字体的类型

3.5.1 文字设计的要素

3.5 常用字体规范

3.4.2 控件规范

3.4.1 界面尺寸

3.4 Android界面尺寸与控件的设计规范

3.3.4 颜色

3.3.3 动画

3.3.2 层级空间

3.3.1 核心视觉载体

3.3 Android系统的设计原则

3.2.2 控件规范

3.2.1 界面尺寸

3.2 iOS界面尺寸与控件的设计规范

3.1.5 易操作性

3.1.4 层级性

3.1.3 适应性

3.1.2 凸显内容

3.1.1 统一化

3.1 iOS系统的设计原则

第3章 UI设计的原则及规范

2.3.3 配色的要素

2.3.2 配色的方法

2.3.1 色彩心理学

2.3 界面的色彩搭配

2.2.4 界面的层次

2.2.3 界面的间距

2.2.2 页面的对齐方式

2.2.1 页面的留白

2.2 界面布局的要素

2.1.5 直角形构图

2.1.4 折线形构图

2.1.3 放射形构图

2.1.2 三角形构图

2.1.1 井字形构图

2.1 界面的常见构图类型

第2章 界面构图、布局与色彩

课后习题：在Photoshop中制作闹钟App界面

课堂练习：在Illustrator中绘制闹钟App功能图标

1.5 在Photoshop中导入Illustrator文件的方法

1.4.8 文字工具

1.4.7 多边形工具

1.4.6 椭圆工具

1.4.5 矩形工具

1.4.4 钢笔工具

1.4.3 直接选择工具

1.4.2 选择工具

1.4.1 课堂案例：用常用工具制作手机图标

1.4 Illustrator中的常用工具

1.3 Illustrator的界面介绍

1.2.7 横排文字工具

1.2.6 直接选择工具

1.2.5 钢笔工具

1.2.4 椭圆工具

1.2.3 矩形工具

1.2.2 移动工具

1.2.1 课堂案例：用常用工具制作界面

1.2 Photoshop中的常用工具

1.1 Photoshop的界面介绍

第1章 UI设计的常用工具

前言

内容提要

案例赏析

版权信息

封面

封面

版权信息

案例赏析

内容提要

前言

第1章 UI设计的常用工具

1.1 Photoshop的界面介绍

1.2 Photoshop中的常用工具

1.2.1 课堂案例：用常用工具制作界面

1.2.2 移动工具

1.2.3 矩形工具

1.2.4 椭圆工具

1.2.5 钢笔工具

1.2.6 直接选择工具

1.2.7 横排文字工具

1.3 Illustrator的界面介绍

1.4 Illustrator中的常用工具

1.4.1 课堂案例：用常用工具制作手机图标

1.4.2 选择工具

1.4.3 直接选择工具

1.4.4 钢笔工具

1.4.5 矩形工具

1.4.6 椭圆工具

1.4.7 多边形工具

1.4.8 文字工具

1.5 在Photoshop中导入Illustrator文件的方法

课堂练习：在Illustrator中绘制闹钟App功能图标

课后习题：在Photoshop中制作闹钟App界面

第2章 界面构图、布局与色彩

2.1 界面的常见构图类型

2.1.1 井字形构图

2.1.2 三角形构图

2.1.3 放射形构图

2.1.4 折线形构图

2.1.5 直角形构图

2.2 界面布局的要素

2.2.1 页面的留白

2.2.2 页面的对齐方式

2.2.3 界面的间距

2.2.4 界面的层次

2.3 界面的色彩搭配

2.3.1 色彩心理学

2.3.2 配色的方法

2.3.3 配色的要素

第3章 UI设计的原则及规范

3.1 iOS系统的设计原则

3.1.1 统一化

3.1.2 凸显内容

3.1.3 适应性

3.1.4 层级性

3.1.5 易操作性

3.2 iOS界面尺寸与控件的设计规范

3.2.1 界面尺寸

3.2.2 控件规范

3.3 Android系统的设计原则

3.3.1 核心视觉载体

3.3.2 层级空间

3.3.3 动画

3.3.4 颜色

3.4 Android界面尺寸与控件的设计规范

3.4.1 界面尺寸

3.4.2 控件规范

3.5 常用字体规范

3.5.1 文字设计的要素

3.5.2 常用字体的类型

3.5.3 界面字体的规范

3.6 UI设计的整体规范

3.6.1 色彩控件

3.6.2 按钮控件

3.6.3 分割线

3.6.4 头像

3.6.5 提示框

3.6.6 文字

3.6.7 间距

3.6.8 图标

第4章 图标设计

4.1 扁平化风格图标

4.1.1 课堂案例：制作扁平化风格的播放器图标

4.1.2 课堂案例：制作扁平化风格的旅游图标

4.1.3 扁平化图标的概念

4.1.4 扁平化图标的类型

4.1.5 设计扁平化图标的注意事项

4.2 线性风格图标

4.2.1 课堂案例：制作线性风格的聊天图标

4.2.2 课堂案例：制作线性风格的功能图标

4.2.3 线性图标的概念

4.2.4 设置线性图标的注意事项

4.3 其他类型的图标

4.3.1 像素图标

4.3.2 拟物化图标

4.3.3 立体图标

4.3.4 卡通图标

4.3.5 文字图标

4.3.6 功能图形化图标

课堂练习：在Illustrator中绘制手机功能图标

课后习题：在Photoshop中绘制功能图标

第5章 闪屏页设计

5.1 闪屏页的概念

5.2 闪屏页的常见类型

5.2.1 课堂案例：制作中秋主题的闪屏页

5.2.2 宣传型

5.2.3 关怀型

5.2.4 推广型

课堂练习：制作品牌宣传型闪屏页

课后习题：制作推广型闪屏页

第6章 引导页与浮层引导页设计

6.1 引导页的概念

6.2 引导页的常见类型

6.2.1 课堂案例：制作功能介绍型引导页

6.2.2 功能介绍型

6.2.3 情感型

6.2.4 幽默型

6.3 浮层引导页

6.3.1 课堂案例：制作浮层引导页

6.3.2 浮层引导页的概念

课堂练习：制作旅游App引导页

课后习题：制作文档App引导页

第7章 空白页设计

7.1 空白页的概念

7.2 空白页的常见类型

7.2.1 课堂案例：制作资料审核空白页

7.2.2 首次进入型

7.2.3 错误提示型

课堂练习：制作消息中心空白页

课后习题：制作购物车空白页

第8章 首页设计

8.1 首页的概念

8.2 首页的常见类型

8.2.1 课堂案例：制作外卖App首页

8.2.2 列表型

8.2.3 图标型

8.2.4 卡片型

8.2.5 综合型

课堂练习：制作旅游App主页

课后习题：制作美食类App主页

第9章 个人中心页设计

9.1 个人中心页的概念

9.2 个人中心页的常见类型

9.2.1 课堂案例：制作个人中心页

9.2.2 头像居中对齐

9.2.3 头像居左对齐

课堂练习：制作视频App个人中心页

课后习题：制作学习类App个人中心页

第10章 列表页设计

10.1 列表页的概念

10.2 列表页的常见类型

10.2.1 课堂案例：制作图书折扣列表页

10.2.2 单行列表

10.2.3 双行列表

10.2.4 时间轴

10.2.5 图库列表

课堂练习：制作购物App列表页

课后习题：制作物流信息列表页

第11章 播放页设计

11.1 播放页的概念

11.2 播放页的常见类型

11.2.1 课堂案例：制作音乐播放器界面

11.2.2 音乐播放页

11.2.3 视频播放页

11.2.4 音频播放页

课堂练习：制作音乐播放页

课后习题：制作音频播放页

第12章 详情页设计

12.1 详情页的概念

12.2 详情页的常见类型

12.2.1 课堂案例：制作购物App详情页

12.2.2 普通型

12.2.3 销售型

课堂练习：制作食谱详情页

课后习题：制作旅游详情页

第13章 可输入页设计

13.1 可输入页的概念

13.2 可输入页的常见类型

13.2.1 课堂案例：制作软件登录页

13.2.2 登录页面

13.2.3 信息发布页面

13.2.4 聊天页面

课堂练习：制作预约信息页

课后习题：制作聊天页

第14章 切图与标注

14.1 iOS与Android的切图方法

14.1.1 课堂案例：对个人中心界面进行切图

14.1.2 Android的常用单位

14.1.3 iOS与Android的尺寸关系

14.1.4 iOS与Android的切图命名方式

14.1.5 通用切图法

14.1.6 Android的“点九”切图法

14.2 界面标注

14.2.1 标注软件

14.2.2 标注规范

课堂练习：对播放页进行切图

课后习题：对旅游主页进行切图

第15章 制作艺术二维码

15.1 二维码的原理结构

15.2 制作艺术二维码

15.2.1 课堂案例：制作数艺设艺术二维码

15.2.2 生成二维码的方法

15.2.3 设计艺术二维码的注意事项

课堂练习：制作软件书艺术二维码