第一单元　UI设计概述 1
1.1　UI设计的定义 3
1.1.1　人机交互 3
1.1.2　操作逻辑 4
1.1.3　界面观感 4
1.2　UI设计的分类 5
1.2.1　移动端UI设计 5
1.2.2　网页端UI设计 6
1.2.3　其他UI设计 6
1.3　UI设计知识储备 7
1.3.1　视觉设计基础 8
1.3.2　软件设计基础 9
1.4　UI设计工作流程 9
1.5　单元小结 11
1.6　课后习题 11
第二单元　UI设计要素 13
2.1　UI色彩设计 15
2.1.1　色彩设计的原则 15
2.1.2　色彩设计方案 17
2.2　UI图形设计 23
2.2.1　图形创意表现 23
2.2.2　图形与空间 27
2.3　UI文字设计 29
2.3.1　文字设计规范 29
2.3.2　字体设计技巧 34
2.4　单元小结 39
2.5　课后习题 39
第三单元　移动端UI设计 41
3.1　图标设计 43
3.1.1　主题图标设计 45
3.1.2　App图标设计 47
3.1.3　项目实战——“中古印象”主题图标设计 47
3.2　界面设计 53
3.2.1　布局设计 55
3.2.2　颜色设计 60
3.2.3　项目实战——“迪拜之旅”微信小程序界面设计 62
3.3　交互设计 66
3.3.1　设计流程 67
3.3.2　设计工具 70
3.3.3　项目实战——“TAOC”App交互设计 72
3.4　单元小结 75
3.5　课后习题 76
第四单元　网页端UI设计 79
4.1　网页端UI设计基础 81
4.1.1　网页发展历史 81
4.1.2　网站开发流程 81
4.1.3　网站类型 83
4.1.4　网页版式 88
4.2　导航栏 92
4.2.1　导航栏分类 92
4.2.2　项目实战——“至尚装饰公司”顶部栏设计 96
4.3　Banner设计 98
4.3.1　Banner的构图 98
4.3.2　Banner的文字 99
4.3.3　Banner的配色 99
4.3.4　Banner的背景 100
4.3.5　项目实战——“至尚装饰公司”Banner设计 100
4.4　页面主体设计 102
4.4.1　文字设计 102
4.4.2　色彩搭配 105
4.4.3　排版原则 108
4.4.4　项目实战——“至尚装饰公司”页面主体设计 110
4.5　页脚设计 116
4.5.1　页脚信息 116
4.5.2　页脚设计原则 117
4.5.3　项目实战——“至尚装饰公司”页脚设计 118
4.6　网页效果的实现 121
4.6.1　HTML基础 121
4.6.2　CSS技术 125
4.6.3　其他开发工具 131
4.6.4　项目实战——“至尚装饰公司”网页搭建 131
4.7　单元小结 136
4.8　课后习题 137
第五单元　UI设计综合项目实战 139
5.1　网页端UI设计综合项目实战 141
5.1.1　主页界面的设计与制作 141
5.1.2　“图文详情页”子页界面的设计与制作 146
5.1.3　“视频详情页”子页界面的设计与制作 150
5.2　移动端UI设计综合项目实战 153
5.2.1　主界面的设计与制作 153
5.2.2　“图文详情页”子页界面的设计与制作 155
5.2.3　“视频详情页”子页界面的设计与制作 156
5.3　单元小结 159
5.4　课后习题 159