UI设计基础与实战项目教程 微课版

**单元　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