本书以项目导向、任务驱动的方式进行内容设计，基于UI设计岗位的工作流程分析典型工作情境、解构关键工作任务，实操案例采用UI设计主流工具Figma。本书包括认识UI设计、了解UI设计的基本知识、掌握UI设计的风格定位、掌握UI设计中的关键元素、熟悉UI的组合设计、掌握UI设计的标注和切图、天气类App实训、购物类App实训8个项目，带领读者全方位练习UI设计，强化岗位技能。
项目1 认识UI设计 1
1.1 UI设计的概念及分类 1
1.1.1 UI设计的概念 1
1.1.2 UI设计的分类 2
1.2 UI设计的行业现状 4
1.2.1 UI设计的行业近况 4
1.2.2 UI设计的发展趋势 6
1.3 UI设计的工作流程 6
1.3.1 目标确定 7
1.3.2 竞品分析 7
1.3.3 草图设计 8
1.3.4 界面设计 9
1.3.5 用户测试 9
1.3.6 审查批准 9
1.4 UI设计的基本原则 10
1.4.1 统一性原则 10
1.4.2 简洁美观原则 11
1.4.3 布局合理原则 11
1.5 UI设计的常用工具 12
1.5.1 UI设计工具 12
1.5.2 图形编辑工具 14
1.5.3 设计资源库 15
1.6 学习反思 15
1.6.1 项目小结 15
1.6.2 知识巩固 15
项目2 了解UI设计的基本知识 16
2.1 基本分类 16
2.1.1 启动页、闪屏页和引导页 16
2.1.2 首页 19
2.1.3 详情页 23
2.1.4 个人中心页 24
2.2 基本框架 25
2.2.1 状态栏 26
2.2.2 导航栏 26
2.2.3 内容区域 28
2.2.4 标签栏 31
2.3 界面布局 33
2.3.1 宫格式布局 33
2.3.2 卡片式布局 34
2.3.3 列表式布局 34
2.3.4 侧拉式布局 35
2.3.5 混合式布局 35
2.4 平台规范 36
2.4.1 HarmonyOS 36
2.4.2 iOS 39
2.4.3 Android 43
2.5 学习反思 44
2.5.1 项目小结 44
2.5.2 知识巩固 44
项目3 掌握UI设计的风格定位 45
3.1 需求分析和梳理 45
3.1.1 梳理产品属性 46
3.1.2 了解目标用户 46
3.1.3 竞品分析 48
3.2 产品风格创作 49
3.3 制定设计规范 49
3.3.1 色彩规范 49
3.3.2 文字规范 50
3.3.3 图标规范 51
3.4 制作独立界面 51
3.5 学习反思 52
3.5.1 项目小结 52
3.5.2 知识巩固 52
项目4 掌握UI设计中的关键元素 53
4.1 图标的概述 54
4.1.1 图标的概念 54
4.1.2 图标的分类 54
4.1.3 图标的栅格与尺寸 58
4.2 扁平化风格图标设计 59
4.2.1 【消息】图标的制作要求与分析 59
4.2.2 【消息】图标设计实操 60
4.3 毛玻璃风格图标设计 64
4.3.1 【聊天】图标的制作要求与分析 64
4.3.2 【聊天】图标设计实操 64
4.4 组件 67
4.4.1 组件的概念 67
4.4.2 组件的分类 68
4.5 标题栏组件设计 70
4.5.1 标题栏组件的制作要求与分析 70
4.5.2 标题栏组件设计实操 71
4.6 轻拟态开关组件设计 73
4.6.1 轻拟态开关组件的制作要求与分析 73
4.6.2 轻拟态开关组件设计实操 74
4.7 学习反思 76
4.7.1 项目小结 76
4.7.2 知识巩固 77
项目5 熟悉UI的组合设计 78
5.1 优教App登录页设计 79
5.1.1 优教App登录页的制作要求与分析 79
5.1.2 优教App登录页设计实操 80
5.2 优教App首页设计 83
5.2.1 优教App首页的制作要求与分析 83
5.2.2 优教App首页设计实操 84
5.3 优教App课程页设计 94
5.3.1 优教App课程页的制作要求与分析 94
5.3.2 优教App课程页设计实操 95
5.4 优教网页端首页设计 99
5.4.1 优教网页端首页的制作要求与分析 99
5.4.2 优教网页端首页设计实操 100
5.5 学习反思 105
5.5.1 项目小结 105
5.5.2 知识巩固 105
项目6 掌握UI设计的标注和切图 106
6.1 标注的概述 106
6.1.1 标注的概念和作用 106
6.1.2 标注的内容及规范 107
6.2 界面标注 109
6.2.1 优教App首页的标注要求与分析 109
6.2.2 优教App首页标注实操 110
6.3 切图的概述 111
6.3.1 切图的概念和作用 111
6.3.2 切图的规范 112
6.3.3 切图的工具 114
6.4 优教App登录页切图 115
6.4.1 优教App登录页的切图要求与分析 115
6.4.2 优教App登录页切图实操 115
6.5 学习反思 117
6.5.1 项目小结 117
6.5.2 知识巩固 117
项目7 天气类App实训 119
7.1 产品分析与风格定位 120
7.1.1 产品分析 120
7.1.2 风格定位 121
7.2 草图及原型图设计 122
7.2.1 草图绘制 122
7.2.2 原型图设计 123
7.3 启动图标设计 123
7.3.1 知天气App启动图标分析 123
7.3.2 知天气App启动图标参数设置 124
7.3.3 知天气App启动图标实践过程 124
7.4 闪屏页设计 126
7.4.1 知天气App闪屏页分析 126
7.4.2 知天气App闪屏页参数设置 126
7.4.3 知天气App闪屏页实践过程 127
7.5 引导页设计 128
7.5.1 知天气App引导页分析 128
7.5.2 知天气App引导页参数设置 128
7.5.3 知天气App引导页实践过程 129
7.6 首页设计 132
7.6.1 知天气App首页分析 132
7.6.2 知天气App首页参数设置 132
7.6.3 知天气App首页实践过程 132
7.7 预测页设计 137
7.7.1 知天气App预测页分析 137
7.7.2 知天气App预测页参数设置 138
7.7.3 知天气App预测页实践过程 138
7.8 日历页设计 141
7.8.1 知天气App日历页分析 141
7.8.2 知天气App日历页参数设置 141
7.8.3 知天气App日历页实践过程 142
7.9 学习反思 144
7.9.1 项目小结 144
7.9.2 知识巩固 144
项目8 购物类App实训 145
8.1 产品分析与风格定位 146
8.1.1 产品分析 146
8.1.2 风格定位 147
8.2 草图及原型图设计 148
8.2.1 草图绘制 148
8.2.2 原型图设计 149
8.3 启动图标设计 150
8.3.1 艺购App启动图标分析 150
8.3.2 艺购App启动图标参数设置 150
8.3.3 艺购App启动图标实践过程 151
8.4 闪屏页设计 154
8.4.1 艺购App闪屏页分析 154
8.4.2 艺购App闪屏页参数设置 154
8.4.3 艺购App闪屏页实践过程 155
8.5 登录页设计 156
8.5.1 艺购App登录页分析 156
8.5.2 艺购App登录页参数设置 157
8.5.3 艺购App登录页实践过程 157
8.6 首页设计 159
8.6.1 艺购App首页分析 159
8.6.2 艺购App首页参数设置 159
8.6.3 艺购App首页实践过程 160
8.7 详情页设计 163
8.7.1 艺购App详情页分析 163
8.7.2 艺购App详情页参数设置 164
8.7.3 艺购App详情页实践过程 164
8.8 个人中心页设计 168
8.8.1 艺购App个人中心页分析 168
8.8.2 艺购App个人中心页参数设置 169
8.8.3 艺购App个人中心页实践过程 169
8.9 学习反思 172
8.9.1 项目小结 172
8.9.2 知识巩固 172
书单推荐
