章 网页UI设计概述 1
学习目标 1
本章简介 1
1.1 网页概述 2
1.1.1 网页的常见分类 2
1.1.2 网页UI的构成元素 5
1.1.3 网站开发的基本流程 8
1.2 网页UI设计相关理论 11
1.2.1 网页UI设计的基本流程 11
1.2.2 网页布局的基本原则 15
1.2.3 网页配色的基本方法 16
1.2.4 网页图像的应用原则 19
1.3 网页切片 21
1.3.1 网页切片概述 21
1.3.2 网页切片的编辑 23
1.3.3 常用的切片技巧 27
本章作业 29
第 2章营销类网站首页UI设计 31
学习目标 31
本章简介 31
2.1 项目介绍 32
2.1.1 项目概述 32
2.1.2 首页UI设计要求 32
2.2 营销类网站首页UI设计相关理论 33
2.2.1 营销类网站概述 33
2.2.2 营销类网站的特点 33
2.2.3 营销类网站首页UI设计技巧 34
2.3 项目设计规划 35
2.3.1 项目需求分析 35
2.3.2 项目功能和层级梳理 38
2.4 网站首页UI设计实操 40
2.4.1 头部区域设计 40
2.4.2 轮播图区域设计 42
2.4.3 主要内容区域设计 44
2.4.4 页脚区域设计与首页切图 46
本章作业 48
第3章 教育类网站着陆页UI设计 49
学习目标 49
本章简介 49
3.1 项目介绍 50
3.1.1 项目概述 50
3.1.2 着陆页UI设计要求 50
3.2 着陆页UI设计相关理论 51
3.2.1 着陆页概述 51
3.2.2 着陆页的页面结构 56
3.2.3 着陆页的常见分类 63
3.3 着陆页UI设计方法 64
3.3.1 着陆页的展现形式 64
3.3.2 着陆页的布局类型 67
3.3.3 着陆页的配色原理 67
3.4 项目设计规划 69
3.4.1 项目需求分析 69
3.4.2 项目功能和层级梳理 71
3.5 网站着陆页UI设计实操 73
3.5.1 首屏区域设计 74
3.5.2 主要内容区域设计 76
3.5.3 次要内容区域和底部区域设计 78
本章作业 82
第4章 招聘类网站专题页UI设计 83
学习目标 83
本章简介 83
4.1 项目介绍 84
4.1.1 项目概述 84
4.1.2 专题页UI设计要求 84
4.2 专题页UI设计相关理论 85
4.2.1 专题页的常见类型 86
4.2.2 专题页的常见结构 87
4.2.3 专题页的常见风格 91
4.3 项目设计规划 93
4.3.1 项目需求分析 94
4.3.2 项目功能和层级整理 95
4.4 专题页UI设计实操 98
4.4.1 首屏区域设计 98
4.4.2 主要内容区域设计 102
4.4.3 页脚区域设计 104
本章作业 106
第5章 游戏类网站改版UI设计 107
学习目标 107
本章简介 107
5.1 项目介绍 108
5.1.1 项目概述 108
5.1.2 网站改版UI设计要求 108
5.2 网站改版UI设计的相关理论 108
5.2.1 网站改版的原因 108
5.2.2 网站改版的原则 110
5.2.3 网站改版UI设计的流程 111
5.3 项目设计规划 112
5.3.1 项目需求分析 112
5.3.2 项目功能和层级梳理 115
5.4 网站改版UI设计实操 116
5.4.1 首屏区域设计 117
5.4.2 主要内容区域设计 119
5.4.3 次要内容区域和底部区域设计 121
本章作业 124
第6章 企业网站信息管理后台UI设计 127
学习目标 127
本章简介 127
6.1 项目介绍 128
6.1.1 项目概述 128
6.1.2 信息管理后台UI设计要求 128
6.2 后台产品UI设计相关理论 129
6.2.1 后台产品的常见类型 129
6.2.2 后台产品的界面结构 131
6.2.3 后台产品的界面特征 132
6.3 项目设计规划 135
6.3.1 项目需求分析 135
6.3.2 项目功能和层级梳理 136
6.4 OA系统UI设计实操 140
6.4.1 登录页设计 140
6.4.2 内页设计 142
本章作业 143
第7章 平台类商城UI设计 145
学习目标 145
本章简介 145
7.1 项目介绍 146
7.1.1 项目概述 146
7.1.2 项目设计要求 146
7.2 电商平台UI设计相关理论 147
7.2.1 电商平台的常见分类 147
7.2.2 电商平台的常见功能 149
7.2.3 电商平台页面的基本结构 153
7.3 项目设计规划 160
7.3.1 项目需求分析 160
7.3.2 项目功能和层级梳理 162
7.4 平台类商城首页UI设计实操 163
7.4.1 首屏区域设计 164
7.4.2 商品展示区域设计 166
7.4.3 页尾区域设计 168
本章作业 168
第8章 电商类店铺首页UI设计 171
学习目标 171
本章简介 171
8.1 项目介绍 172
8.1.1 项目概述 172
8.1.2 项目设计要求 172
8.2 电商类店铺装修相关理论 172
8.2.1 店铺首页 172
8.2.2 商品详情页 180
8.2.3 商品关联页 184
8.2.4 商品列表页 186
8.3 项目设计规划 188
8.3.1 项目需求分析 188
8.3.2 项目功能和层级整理 190
8.4 电商类店铺首页UI设计实操 191
8.4.1 首屏区域设计 192
8.4.2 商品展示区域设计 194
8.4.3 页尾区域设计 197
本章作业 198

本教材针对具有Photoshop基础的人群，以真实的Web端网站商业项目为实训任务，从业务需求分析、UI设计流程、效果图设计、设计图切片全面剖析，展现企业实际的UI设计开发流程、真实业务和设计技巧，训练UI设计师工作常见的两大工作任务的能力：设计互联网主流商业网站和设计网