第 1章　初识UI设计　001
1.1　UI设计的基本概念　001
1.2　UI设计的常用软件　002
1.3　UI设计的发展趋势　003
1.4　UI设计的学习方法　003
1.5　UI设计的项目流程　005
1.6　UI设计规范与规则　005
AI扩展知识1：AI辅助UI设计的常用工具　014
AI扩展知识2：AI辅助UI设计的流程　014
第 2章　图标设计　015
2.1　线性图标　015
2.1.1　基本概念　015
2.1.2　使用场景　016
2.1.3　设计要点　016
2.1.4　课堂案例——制作探途旅游App线性图标　018
2.2　面性图标　022
2.2.1　基本概念　022
2.2.2　使用场景　022
2.2.3　设计要点　023
2.2.4　课堂案例——制作探途旅游App面性图标　024
2.3　线面图标　029
2.3.1　基本概念　029
2.3.2　使用场景　029
2.3.3　设计要点　030
2.3.4　课堂案例——制作探途旅游App线面图标　030
2.4　课堂练习——制作臻选电商App线性图标　035
2.5　课后习题——制作食汇餐饮App面性图标　035
2.6　AI辅助图标设计　036
2.6.1　AI扩展案例——使用豆包生成趣游旅游App果冻面性图标　036
2.6.2　AI扩展案例——使用即梦AI生成享食餐饮App微质感面性图标　037
第3章　控件设计　038
3.1　控件　039
3.1.1　控件的概念　039
3.1.2　控件的获取　039
3.2　按钮控件　040
3.2.1　按钮控件的概念　040
3.2.2　按钮控件的类型　040
3.2.3　按钮控件的设计规范　042
3.2.4　课堂案例——制作探途旅游App按钮控件　044
3.3　选择控件　046
3.3.1　选择控件的概念　046
3.3.2　选择控件的类型　046
3.3.3　选择控件的设计规范　047
3.3.4　课堂案例——制作探途旅游App选择控件　048
3.4　加减控件　051
3.4.1　加减控件的概念　051
3.4.2　加减控件的类型　051
3.4.3　加减控件的设计规范　051
3.4.4　课堂案例——制作食汇餐饮App加减控件　052
3.5　分段控件　054
3.5.1　分段控件的概念　054
3.5.2　分段控件的类型　054
3.5.3　分段控件的设计规范　055
3.5.4　课堂案例——制作探途旅游App分段控件　056
3.6　页面控件　060
3.6.1　页面控件的概念　060
3.6.2　页面控件的类型　060
3.6.3　页面控件的设计规范　061
3.6.4　课堂案例——制作探途旅游App页面控件　061
3.7　反馈控件　063
3.7.1　反馈控件的概念　063
3.7.2　反馈控件的类型　064
3.7.3　反馈控件的设计规范　065
3.7.4　课堂案例——制作臻选电商App反馈控件　068
3.8　文本框控件　069
3.8.1　文本框控件的概念　069
3.8.2　文本框控件的类型　070
3.8.3　文本框控件的设计规范　070
3.8.4　课堂案例——制作探途旅游App文本框控件　071
3.9　课堂练习——制作臻选电商App文本框控件　073
3.10　课后习题——制作食汇餐饮App页面控件　074
3.11　AI辅助控件设计　074
3.11.1　AI扩展案例1——使用妙多AI制作趣游旅游App分段控件　074
3.11.2　AI扩展案例2——使用MasterGO AI制作享食餐饮App按钮控件　075
第4章　组件设计　076
4.1　组件　076
4.1.1　组件的概念　076
4.1.2　组件的获取　077
4.2　导航栏　077
4.2.1　导航栏的概念　078
4.2.2　导航栏的类型　078
4.2.3　导航栏的设计规范　080
4.2.4　课堂案例——制作探途旅游App导航栏　082
4.3　标签栏　087
4.3.1　标签栏的概念　087
4.3.2　标签栏的样式　087
4.3.3　标签栏的设计规范　088
4.3.4　课堂案例——制作探途旅游App标签栏　091
4.4　金刚区　098
4.4.1　金刚区的概念　099
4.4.2　金刚区的类型　099
4.4.3　金刚区的设计规范　100
4.4.4　课堂案例——制作探途旅游App金刚区　103
4.5　瓷片区　107
4.5.1　瓷片区的概念　108
4.5.2　瓷片区的类型　108
4.5.3　瓷片区的设计规范　109
4.5.4　课堂案例——制作探途旅游App瓷片区　112
4.6　课堂练习——制作臻选电商App导航栏　117
4.7　课后习题——制作食汇餐饮App标签栏　117
4.8　AI辅助组件设计　117
4.8.1　AI扩展案例1——使用DeepSeek和妙多AI制作趣游旅游App金刚区　117
4.8.2　AI扩展案例2——使用即梦AI和MasterGo AI制作享食餐饮App瓷片区　118
第5章　页面设计　119
5.1　闪屏页　119
5.1.1　闪屏页的概念　120
5.1.2　闪屏页的类型　120
5.1.3　课堂案例——制作探途旅游App闪屏页　121
5.2　引导页　123
5.2.1　引导页的概念　124
5.2.2　引导页的类型　124
5.2.3　课堂案例——制作探途旅游App引导页　125
5.3　首页　130
5.3.1　首页的概念　130
5.3.2　首页的类型　130
5.3.3　课堂案例——制作探途旅游App首页　132
5.4　详情页　146
5.4.1　详情页的概念　147
5.4.2　课堂案例——制作探途旅游App酒店详情页　147
5.5　个人中心页　173
5.5.1　个人中心页的概念　173
5.5.2　课堂案例——制作探途旅游App个人中心页　174
5.6　注册登录页　187
5.6.1　注册登录页的概念　187
5.6.2　课堂案例——制作探途旅游App登录页　188
5.7　课堂练习——制作臻选电商App页面　197
5.8　课后习题——制作食汇餐饮App页面　199
5.9　AI辅助页面设计　201
5.9.1　AI扩展案例1——使用DeepSeek和妙多AI制作趣游旅游App页面　201
5.9.2　AI扩展案例2——使用MasterGO AI制作享食餐饮App页面　203
第6章　UI设计输出　206
6.1　UI页面标注　206
6.1.1　标注原因　206
6.1.2　标注内容　207
6.1.3　标注规则　209
6.1.4　标注工具　210
6.1.5　课堂案例——标注探途旅游App首页　211
6.2　UI页面切图　214
6.2.1　切图目的　214
6.2.2　切图类型　215
6.2.3　切图规则　217
6.2.4　切图方法　218
6.2.5　大小优化　218
6.2.6　课堂案例——制作探途旅游App首页切图　219
6.3　UI页面命名　223
6.3.1　命名原因　224
6.3.2　命名规则　224
6.3.3　常用名称　224
6.3.4　课堂案例——命名探途旅游App首页切图　225
6.4　课堂练习——输出臻选电商App首页　226
6.5　课后习题——输出食汇餐饮App首页　227
6.6　AI辅助UI输出　228
6.6.1　AI扩展案例1——使用妙多AI输出趣游旅游App首页　228
6.6.2　AI扩展案例2——使用MasterGO AI输出享食餐饮App首页　229