包邮UI界面设计与制作标准教程(全彩微课版)

第1章
UI设计基础知识
1.1 认识UI设计 2
1.2 UI设计方向 2
1.2.1 用户研究 2
1.2.2 交互设计 3
1.2.3 界面设计 3
1.3 UI设计规范 4
1.3.1 一致性原则 4
1.3.2 准确性原则 5
1.3.3 可读性原则 6
1.3.4 布局合理化原则 6
1.3.5 操作合理性 7
1.3.6 系统响应时间 7
1.4 UI设计的项目流程 8
1.4.1 需求分析 8
1.4.2 设计研究 9
1.4.3 原型设计 9
1.4.4 界面设计 10
1.4.5 用户测试 11
1.4.6 方案优化 12
1.4.7 交付结果 13
1.5 AIGC在UI中的应用 13
1.5.1 AIGC的基本功能 13
1.5.2 AIGC在UI中的应用方式 14
1.5.3 常用的AIGC工具 17
1.6 UI设计元素应用规范 18
1.6.1 文字应用解析 18
1.6.2 图片应用解析 23
1.6.3 色彩应用解析 25
新手答疑 29

第2章
界面设计在线工具——MasterGo
2.1 认识MasterGo 31
2.1.1 操作界面 31
2.1.2 标尺与参考线 32
2.1.3 基础工具 34
2.1.4 协同评论 37
2.1.5 切图和导出 39
2.2 组件与样式 41
2.2.1 创建组件 41
2.2.2 应用预设组件 42
2.2.3 创建样式 42
2.3 原型交互 44
2.3.1 交互 45
2.3.2 溢出行为 47
案例实战：原型交互效果制作 48
新手答疑 56

第3章
界面图标设计
3.1 认识图标 58
3.1.1 图标的类型 58
3.1.2 图标的设计风格 60
3.1.3 辅助绘制网格 62
3.2 iOS图标设计规范 64
3.2.1 iOS应用图标设计 64
3.2.2 iOS系统图标设计 65
3.3 Android图标设计规范 66
3.3.1 Android应用图标设计 66
3.3.2 Android系统图标设计 67
3.4 HarmonyOS图标设计规范 68
3.4.1 HarmonyOS应用图标设计 68
3.4.2 HarmonyOS系统图标设计 70
案例实战：制作天气类功能图标 72
新手答疑 88

第4章
基础控件设计
4.1 认识控件 90
4.2 按钮控件 90
4.2.1 按钮控件的类型 90
4.2.2 按钮控件设计规范 93
4.3 选择控件 95
4.3.1 选择控件的类型 96
4.3.2 选择控件设计规范 97
4.4 分段控件 98
4.4.1 分段控件的类型 98
4.4.2 分段控件设计规范 99
4.5 信息反馈控件 99
4.5.1 反馈控件的类型 99
4.5.2 反馈控件设计规范 100
4.6 文本框控件 102
4.6.1 文本框控件的类型 102
4.6.2 文本框控件设计规范 103
案例实战：制作美食App登录页控件 103
新手答疑 106

第5章
常用组件设计
5.1 认识组件 108
5.2 基础组件 108
5.2.1 基础组件解析 108
5.2.2 基础组件设计规范 109
5.3 导航类组件 111
5.3.1 导航类组件解析 111
5.3.2 导航类组件设计规范 113
5.4 输入类组件 116
5.4.1 输入类组件解析 116
5.4.2 输入类组件设计规范 118
5.5 展示类组件 119
5.5.1 展示类组件解析 119
5.5.2 展示类组件设计规范 121
5.6 反馈类组件 122
5.6.1 反馈类组件解析 122
5.6.2 反馈类组件设计规范 124
案例实战：制作App系统更新对话框 126
新手答疑 133

第6章
移动端App界面设计
6.1 App常用界面类型 135
6.1.1 闪屏页 135
6.1.2 引导页 136
6.1.3 注册登录页 137
6.1.4 空白页 137
6.1.5 首页 138
6.1.6 个人中心页 138
6.1.7 其他界面 139
6.2 App原型设计 140
6.2.1 草图的绘制 140
6.2.2 原型的设计 141
6.3 App设计规范 142
6.3.1 iOS设计规范 142
6.3.2 Android设计规范 144
6.3.3 HarmonyOS设计规范 146
案例实战：制作美食App首页界面 147
新手答疑 158

第7章
PC端界面设计
7.1 PC端界面设计简介 160
7.2 PC源生界面 161
7.3 客户端界面 162
7.3.1 客户端界面的类型 162
7.3.2 客户端界面设计规范 167
7.4 网页端界面 169
7.4.1 网页端界面类型 169
7.4.2 网页端界面设计规范 173
案例实战：制作聊天类客户端首页 175
新手答疑 184

第8章
小程序界面设计
8.1 关于微信小程序 186
8.1.1 移动端微信小程序 186
8.1.2 PC端微信小程序 186
8.1.3 微信小程序的创建 187
8.2 微信小程序界面设计规范 188
8.2.1 微信小程序界面尺寸 188
8.2.2 微信小程序视觉设计 189
8.2.3 微信小程序文字设计 193
案例实战：制作旅行类小程序界面 194
新手答疑 202

第9章
界面的标注、输出与动效制作
9.1 界面标注 204
9.1.1 界面标注的作用 204
9.1.2 界面标注的内容 204
9.1.3 界面标注的规范 205
9.1.4 界面标注的常用工具 206
9.2 界面的切图 207
9.2.1 界面切图的原则 207
9.2.2 界面切图的要点 208
9.2.3 界面切图的命名规范 209
9.2.4 界面切图的常用工具 211
9.3 界面的动效制作 212
9.3.1 界面动效的属性 212
9.3.2 界面动效的作用 212
9.3.3 界面动效的类型 213
9.3.4 动效制作的常用工具 217
案例实战：标注App登录界面 218
新手答疑 224