本书详细讲解了不同类型Web端UI商业项目的设计理论、设计思路以及实际案例制作过程。全书共8章,具体包括网页UI设计概述、营销类企业网站首页UI设计、教育类企业网站着陆页UI设计、招聘类网站专题页UI设计、游戏类企业网站改版UI设计、企业网站信息管理后台UI设计、平台类商城UI设计以及电商类店铺首页UI设计。
全书采用案例驱动的方式,让读者掌握不同行业、不同类型网站的设计规范和设计方法,并能够按照企业需求制作完整的企业网站。本书适合作为高等院校相关设计专业的教材,也适合UI设计爱好者和Web端界面设计人员阅读。
本书采用逆向课程设计方法,根据企业调研,对企业急需的岗位技能以及前沿技术进行针对性培养,全面提升学生的就业能力,特点如下:
1.选取知识点核心实用,以行业应用组织学习内容,达到学以致用的目的;
2.以任务为驱动,实战为主线,涵盖基础、创意、营销等理念,注重培养实践能力;
3.以案例为主线组织知识点,配套素材及项目案例通过扫描二维码直接下载
4.充分考虑学习者的认知曲线,由浅入深,边讲边练
首创智慧教材,配套视频二维码,提供在线视频,扫描后直接看课。
课工场是专注互联网教育的生态平台,汇聚了中国和北美数百位来自知名互联网企业
的行业大咖,向寻求就业和技术提升的人群提供直播、录播、面授等多模式教学场景,并通过遍布全国的线下服务中心提供成熟的学习服务,形成完善的互联网 教育解决方案。同时,课工场也为高校、企业、行业提供教育技术赋能,依托Transformer 智能教育生态平台,打造智慧校园、企业大学、行业培训的教育场景,提供一站式教育解决方案。
第 1章 网页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