店铺推荐
【作者】
余兰亭，现任重庆大学城市科技学院讲师，曾任中兴通讯股份有限公司UCD工程师，曾参与中国移动智能家居、WEBGL中文网等网站开发项目。
【内容】
本书主要介绍网页设计中的布局基本原理和网页交互的技巧及视觉表现方法。本书分基础篇、界面交互篇、视觉表现篇、案例实践篇四大模块，每个模块下又细分章节，且每章都设有小结与案例。具体包括：网页设计的概述、网页界面设计的内容、用户体验研究、信息架构设计、界面与布局、网页视觉设计要点、视听元素、网页视觉风格、综合案例。
【目录】
Part1基础篇
第1章网页设计概述
1.1认识网站002
1.1.1网站的基本概念002
1.1.2网站的分类003
1.1.3网站的商业模式005
1.2网页界面空间的影响要素009
1.2.1分辨率与显示器009
1.2.2浏览器010
1.3网站开发的团队与协作012
1.4网页的制作流程013
第2章网页界面设计的内容
2.1网站形象016
2.1.1网站Logo016
2.1.2广告语与图片形象017
2.2导航系统019
2.2.1全局导航019
2.2.2局部导航021
2.2.3搜索引擎导航021
2.2.4面包屑导航022
2.2.5其他辅助导航023
2.3信息内容023
2.3.1首页信息展示024
2.3.2列表页面信息展示024
2.3.3详细页面信息展示025
2.4广告026
2.4.1Banner026
2.4.2弹出式广告027
2.4.3浮动式广告028
2.4.4文字链接式广告028
2.5表单区029
2.5.1信息提交029
2.5.2信息交流029
2.6案例——
Banner设计030
Part２界面交互篇
第3章用户体验研究
3.1以用户为中心的设计034
3.1.1用户体验概念034
3.1.2以用户为中心的研究方法035
3.2用户需求研究039
3.2.1了解你的网站039
3.2.2关注你的用户039
3.3案例——
从用户身上寻找需求【登录界面】041
界面交互篇
Part２
第4章信息架构设计
4.1网站的信息结构047
4.1.1信息结构的概念047
4.1.2网站信息组织方式048
4.1.3信息结构的类型050
4.2网站整体结构到界面架构054
4.2.1确定网站的导航054
4.2.2提高用户体验的交互技巧056
4.3案例——
活动页面设计059
第5章界面与布局
5.1界面的布局原理065
5.1.1对称与均衡065
5.1.2重点与主次066
5.1.3变化与统一066
5.2界面布局类型068
5.2.1固定布局068
5.2.2流动布局069
5.2.3响应式布局069
5.3原型的构建071
5.3.1确定页面尺寸071
5.3.2页面设计的优先级072
5.3.3线框图设计072
5.3.4原型设计074
5.4案例——
食品公司网站的界面改版设计074
Part3视觉表现篇
第6章视听元素
6.1文字082
6.1.1字体的选择082
6.1.2文字的可读性083
6.1.3文字编排的艺术性085
6.2图片086
6.2.1图片的选择086
6.2.2格式与优化089
6.2.3图像的肌理093
6.3色彩095
6.3.1色彩的模式095
6.3.2色彩的情感095
6.3.3色彩组合101
6.4多媒体104
6.4.1视频104
6.4.2音频105
6.5动效106
6.5.1GIF动图106
6.5.2Flash动画107
6.5.3程序实现的动画108
6.6案例——
天猫商城店铺界面设计108
视觉表现篇
Part3
第7章网页视觉设计要点
7.1视觉的有效性116
7.1.1简化116
7.1.2留白118
7.2视觉的层次性120
7.2.1视觉流程120
7.2.2视觉层级关系123
7.3视觉的一致性129
7.3.1与企业形象一致129
7.3.2页面及各元素间的共识130
7.4视觉的创意性131
7.4.1秩序内的创新132
7.4.2新媒体下的出其不意133
7.5案例——
早教机构网站界面设计134
第8章网页视觉风格
8.1简约风格145
8.1.1简约风格的特点145
8.1.2简约风格应用及分析145
8.2影像风格148
8.2.1影像风格的特点148
8.2.2影像风格应用及分析148
8.3手绘风格150
8.3.1手绘风格的特点150
8.3.2手绘风格应用及分析150
8.4复古风格152
8.4.1复古风格的特点152
8.4.2复古风格应用及分析152
8.5中式传统风格153
8.5.1中式传统风格的特点153
8.5.2中式传统风格应用及分析153
8.6立体风格155
8.6.1立体风格的特点155
8.6.2立体风格应用及分析155
8.7拼贴风格157
8.7.1拼贴风格的特点157
8.7.2拼贴风格应用及分析158
Part4综合案例篇
第9章网站静态页面
前端开发基础
9.1HTML基础161
9.1.1HTML简介161
9.1.2HTML文档结构161
9.1.3常用标签162
9.2CSS基础167
9.2.1CSS简介167
9.2.2CSS编码规范167
9.2.3CSS属性选择器168
9.2.4网页中应用样式表171
9.2.5CSS常用属性173
9.2.6CSS盒子模型175
9.3JavaScript脚本基础181
9.3.1JavaScript简介181
9.3.2HTML中使用JavaScript182
9.3.3JavaScript的变量182
9.3.4JavaScript操作HTML标签182
9.3.5JavaScript的注释183
9.3.6函数183
9.3.7JavaScript的运算符184
9.3.8JavaScript的3种流程控制185
9.3.9JavaScript与HTML的交互187
9.4案例——幻灯片效果187
9.4.1Jquery.anythingslider插件188
9.4.2Jquery.anythingslider的用法188
9.4.3顶部导航Logo及菜单189
9.4.4Part1基础篇
第1章网页设计概述
1.1认识网站002
1.1.1网站的基本概念002
1.1.2网站的分类003
1.1.3网站的商业模式005
1.2网页界面空间的影响要素009
1.2.1分辨率与显示器009
1.2.2浏览器010
1.3网站开发的团队与协作012
1.4网页的制作流程013
第2章网页界面设计的内容
2.1网站形象016
2.1.1网站Logo016
2.1.2广告语与图片形象017
2.2导航系统019
2.2.1全局导航019
2.2.2局部导航021
2.2.3搜索引擎导航021
2.2.4面包屑导航022
2.2.5其他辅助导航023
2.3信息内容023
2.3.1首页信息展示024
2.3.2列表页面信息展示024
2.3.3详细页面信息展示025
2.4广告026
2.4.1Banner026
2.4.2弹出式广告027
2.4.3浮动式广告028
2.4.4文字链接式广告028
2.5表单区029
2.5.1信息提交029
2.5.2信息交流029
2.6案例——
Banner设计030
Part２界面交互篇
第3章用户体验研究
3.1以用户为中心的设计034
3.1.1用户体验概念034
3.1.2以用户为中心的研究方法035
3.2用户需求研究039
3.2.1了解你的网站039
3.2.2关注你的用户039
3.3案例——
从用户身上寻找需求【登录界面】041
界面交互篇
Part２
第4章信息架构设计
4.1网站的信息结构047
4.1.1信息结构的概念047
4.1.2网站信息组织方式048
4.1.3信息结构的类型050
4.2网站整体结构到界面架构054
4.2.1确定网站的导航054
4.2.2提高用户体验的交互技巧056
4.3案例——
活动页面设计059
第5章界面与布局
5.1界面的布局原理065
5.1.1对称与均衡065
5.1.2重点与主次066
5.1.3变化与统一066
5.2界面布局类型068
5.2.1固定布局068
5.2.2流动布局069
5.2.3响应式布局069
5.3原型的构建071
5.3.1确定页面尺寸071
5.3.2页面设计的优先级072
5.3.3线框图设计072
5.3.4原型设计074
5.4案例——
食品公司网站的界面改版设计074
Part3视觉表现篇
第6章视听元素
6.1文字082
6.1.1字体的选择082
6.1.2文字的可读性083
6.1.3文字编排的艺术性085
6.2图片086
6.2.1图片的选择086
6.2.2格式与优化089
6.2.3图像的肌理093
6.3色彩095
6.3.1色彩的模式095
6.3.2色彩的情感095
6.3.3色彩组合101
6.4多媒体104
6.4.1视频104
6.4.2音频105
6.5动效106
6.5.1GIF动图106
6.5.2Flash动画107
6.5.3程序实现的动画108
6.6案例——
天猫商城店铺界面设计108
视觉表现篇
Part3
第7章网页视觉设计要点
7.1视觉的有效性116
7.1.1简化116
7.1.2留白118
7.2视觉的层次性120
7.2.1视觉流程120
7.2.2视觉层级关系123
7.3视觉的一致性129
7.3.1与企业形象一致129
7.3.2页面及各元素间的共识130
7.4视觉的创意性131
7.4.1秩序内的创新132
7.4.2新媒体下的出其不意133
7.5案例——
早教机构网站界面设计134
第8章网页视觉风格
8.1简约风格145
8.1.1简约风格的特点145
8.1.2简约风格应用及分析145
8.2影像风格148
8.2.1影像风格的特点148
8.2.2影像风格应用及分析148
8.3手绘风格150
8.3.1手绘风格的特点150
8.3.2手绘风格应用及分析150
8.4复古风格152
8.4.1复古风格的特点152
8.4.2复古风格应用及分析152
8.5中式传统风格153
8.5.1中式传统风格的特点153
8.5.2中式传统风格应用及分析153
8.6立体风格155
8.6.1立体风格的特点155
8.6.2立体风格应用及分析155
8.7拼贴风格157
8.7.1拼贴风格的特点157
8.7.2拼贴风格应用及分析158
Part4综合案例篇
第9章网站静态页面
前端开发基础
9.1HTML基础161
9.1.1HTML简介161
9.1.2HTML文档结构161
9.1.3常用标签162
9.2CSS基础167
9.2.1CSS简介167
9.2.2CSS编码规范167
9.2.3CSS属性选择器168
9.2.4网页中应用样式表171
9.2.5CSS常用属性173
9.2.6CSS盒子模型175
9.3JavaScript脚本基础181
9.3.1JavaScript简介181
9.3.2HTML中使用JavaScript182
9.3.3JavaScript的变量182
9.3.4JavaScript操作HTML标签182
9.3.5JavaScript的注释183
9.3.6函数183
9.3.7JavaScript的运算符184
9.3.8JavaScript的3种流程控制185
9.3.9JavaScript与HTML的交互187
9.4案例——幻灯片效果187
9.4.1Jquery.anythingslider插件188
9.4.2Jquery.anythingslider的用法188
9.4.3顶部导航Logo及菜单189
9.4.4幻灯片效果完整代码190
第10章餐厅网站静态
页面设计
10.1前期准备194
10.1.1项目背景194
10.1.2前期策划194
10.1.3确定网站信息框架195
10.1.4交互原型设计195
10.2网页界面设计197
10.2.1整体视觉风格定位及首页设计197
10.2.2列表页面设计200
10.2.3详细页面设计201
10.3网站布局201
10.3.1首页制作201
10.3.2列表页制作208
10.4网站动效表现215幻灯片效果完整代码190
第10章餐厅网站静态
页面设计
10.1前期准备194
10.1.1项目背景194
10.1.2前期策划194
10.1.3确定网站信息框架195
10.1.4交互原型设计195
10.2网页界面设计197
10.2.1整体视觉风格定位及首页设计197
10.2.2列表页面设计200
10.2.3详细页面设计201
10.3网站布局201
10.3.1首页制作201
10.3.2列表页制作208
10.4网站动效表现215
第1章网页设计概述
1.1认识网站002
1.1.1网站的基本概念002
1.1.2网站的分类003
1.1.3网站的商业模式005
1.2网页界面空间的影响要素009
1.2.1分辨率与显示器009
1.2.2浏览器010
1.3网站开发的团队与协作012
1.4网页的制作流程013
第2章网页界面设计的内容
2.1网站形象016
2.1.1网站Logo016
2.1.2广告语与图片形象017
2.2导航系统019
2.2.1全局导航019
2.2.2局部导航021
2.2.3搜索引擎导航021
2.2.4面包屑导航022
2.2.5其他辅助导航023
2.3信息内容023
2.3.1首页信息展示024
2.3.2列表页面信息展示024
2.3.3详细页面信息展示025
2.4广告026
2.4.1Banner026
2.4.2弹出式广告027
2.4.3浮动式广告028
2.4.4文字链接式广告028
2.5表单区029
2.5.1信息提交029
2.5.2信息交流029
2.6案例——
Banner设计030
Part２界面交互篇
第3章用户体验研究
3.1以用户为中心的设计034
3.1.1用户体验概念034
3.1.2以用户为中心的研究方法035
3.2用户需求研究039
3.2.1了解你的网站039
3.2.2关注你的用户039
3.3案例——
从用户身上寻找需求【登录界面】041
界面交互篇
Part２
第4章信息架构设计
4.1网站的信息结构047
4.1.1信息结构的概念047
4.1.2网站信息组织方式048
4.1.3信息结构的类型050
4.2网站整体结构到界面架构054
4.2.1确定网站的导航054
4.2.2提高用户体验的交互技巧056
4.3案例——
活动页面设计059
第5章界面与布局
5.1界面的布局原理065
5.1.1对称与均衡065
5.1.2重点与主次066
5.1.3变化与统一066
5.2界面布局类型068
5.2.1固定布局068
5.2.2流动布局069
5.2.3响应式布局069
5.3原型的构建071
5.3.1确定页面尺寸071
5.3.2页面设计的优先级072
5.3.3线框图设计072
5.3.4原型设计074
5.4案例——
食品公司网站的界面改版设计074
Part3视觉表现篇
第6章视听元素
6.1文字082
6.1.1字体的选择082
6.1.2文字的可读性083
6.1.3文字编排的艺术性085
6.2图片086
6.2.1图片的选择086
6.2.2格式与优化089
6.2.3图像的肌理093
6.3色彩095
6.3.1色彩的模式095
6.3.2色彩的情感095
6.3.3色彩组合101
6.4多媒体104
6.4.1视频104
6.4.2音频105
6.5动效106
6.5.1GIF动图106
6.5.2Flash动画107
6.5.3程序实现的动画108
6.6案例——
天猫商城店铺界面设计108
视觉表现篇
Part3
第7章网页视觉设计要点
7.1视觉的有效性116
7.1.1简化116
7.1.2留白118
7.2视觉的层次性120
7.2.1视觉流程120
7.2.2视觉层级关系123
7.3视觉的一致性129
7.3.1与企业形象一致129
7.3.2页面及各元素间的共识130
7.4视觉的创意性131
7.4.1秩序内的创新132
7.4.2新媒体下的出其不意133
7.5案例——
早教机构网站界面设计134
第8章网页视觉风格
8.1简约风格145
8.1.1简约风格的特点145
8.1.2简约风格应用及分析145
8.2影像风格148
8.2.1影像风格的特点148
8.2.2影像风格应用及分析148
8.3手绘风格150
8.3.1手绘风格的特点150
8.3.2手绘风格应用及分析150
8.4复古风格152
8.4.1复古风格的特点152
8.4.2复古风格应用及分析152
8.5中式传统风格153
8.5.1中式传统风格的特点153
8.5.2中式传统风格应用及分析153
8.6立体风格155
8.6.1立体风格的特点155
8.6.2立体风格应用及分析155
8.7拼贴风格157
8.7.1拼贴风格的特点157
8.7.2拼贴风格应用及分析158
Part4综合案例篇
第9章网站静态页面
前端开发基础
9.1HTML基础161
9.1.1HTML简介161
9.1.2HTML文档结构161
9.1.3常用标签162
9.2CSS基础167
9.2.1CSS简介167
9.2.2CSS编码规范167
9.2.3CSS属性选择器168
9.2.4网页中应用样式表171
9.2.5CSS常用属性173
9.2.6CSS盒子模型175
9.3JavaScript脚本基础181
9.3.1JavaScript简介181
9.3.2HTML中使用JavaScript182
9.3.3JavaScript的变量182
9.3.4JavaScript操作HTML标签182
9.3.5JavaScript的注释183
9.3.6函数183
9.3.7JavaScript的运算符184
9.3.8JavaScript的3种流程控制185
9.3.9JavaScript与HTML的交互187
9.4案例——幻灯片效果187
9.4.1Jquery.anythingslider插件188
9.4.2Jquery.anythingslider的用法188
9.4.3顶部导航Logo及菜单189
9.4.4Part1基础篇
第1章网页设计概述
1.1认识网站002
1.1.1网站的基本概念002
1.1.2网站的分类003
1.1.3网站的商业模式005
1.2网页界面空间的影响要素009
1.2.1分辨率与显示器009
1.2.2浏览器010
1.3网站开发的团队与协作012
1.4网页的制作流程013
第2章网页界面设计的内容
2.1网站形象016
2.1.1网站Logo016
2.1.2广告语与图片形象017
2.2导航系统019
2.2.1全局导航019
2.2.2局部导航021
2.2.3搜索引擎导航021
2.2.4面包屑导航022
2.2.5其他辅助导航023
2.3信息内容023
2.3.1首页信息展示024
2.3.2列表页面信息展示024
2.3.3详细页面信息展示025
2.4广告026
2.4.1Banner026
2.4.2弹出式广告027
2.4.3浮动式广告028
2.4.4文字链接式广告028
2.5表单区029
2.5.1信息提交029
2.5.2信息交流029
2.6案例——
Banner设计030
Part２界面交互篇
第3章用户体验研究
3.1以用户为中心的设计034
3.1.1用户体验概念034
3.1.2以用户为中心的研究方法035
3.2用户需求研究039
3.2.1了解你的网站039
3.2.2关注你的用户039
3.3案例——
从用户身上寻找需求【登录界面】041
界面交互篇
Part２
第4章信息架构设计
4.1网站的信息结构047
4.1.1信息结构的概念047
4.1.2网站信息组织方式048
4.1.3信息结构的类型050
4.2网站整体结构到界面架构054
4.2.1确定网站的导航054
4.2.2提高用户体验的交互技巧056
4.3案例——
活动页面设计059
第5章界面与布局
5.1界面的布局原理065
5.1.1对称与均衡065
5.1.2重点与主次066
5.1.3变化与统一066
5.2界面布局类型068
5.2.1固定布局068
5.2.2流动布局069
5.2.3响应式布局069
5.3原型的构建071
5.3.1确定页面尺寸071
5.3.2页面设计的优先级072
5.3.3线框图设计072
5.3.4原型设计074
5.4案例——
食品公司网站的界面改版设计074
Part3视觉表现篇
第6章视听元素
6.1文字082
6.1.1字体的选择082
6.1.2文字的可读性083
6.1.3文字编排的艺术性085
6.2图片086
6.2.1图片的选择086
6.2.2格式与优化089
6.2.3图像的肌理093
6.3色彩095
6.3.1色彩的模式095
6.3.2色彩的情感095
6.3.3色彩组合101
6.4多媒体104
6.4.1视频104
6.4.2音频105
6.5动效106
6.5.1GIF动图106
6.5.2Flash动画107
6.5.3程序实现的动画108
6.6案例——
天猫商城店铺界面设计108
视觉表现篇
Part3
第7章网页视觉设计要点
7.1视觉的有效性116
7.1.1简化116
7.1.2留白118
7.2视觉的层次性120
7.2.1视觉流程120
7.2.2视觉层级关系123
7.3视觉的一致性129
7.3.1与企业形象一致129
7.3.2页面及各元素间的共识130
7.4视觉的创意性131
7.4.1秩序内的创新132
7.4.2新媒体下的出其不意133
7.5案例——
早教机构网站界面设计134
第8章网页视觉风格
8.1简约风格145
8.1.1简约风格的特点145
8.1.2简约风格应用及分析145
8.2影像风格148
8.2.1影像风格的特点148
8.2.2影像风格应用及分析148
8.3手绘风格150
8.3.1手绘风格的特点150
8.3.2手绘风格应用及分析150
8.4复古风格152
8.4.1复古风格的特点152
8.4.2复古风格应用及分析152
8.5中式传统风格153
8.5.1中式传统风格的特点153
8.5.2中式传统风格应用及分析153
8.6立体风格155
8.6.1立体风格的特点155
8.6.2立体风格应用及分析155
8.7拼贴风格157
8.7.1拼贴风格的特点157
8.7.2拼贴风格应用及分析158
Part4综合案例篇
第9章网站静态页面
前端开发基础
9.1HTML基础161
9.1.1HTML简介161
9.1.2HTML文档结构161
9.1.3常用标签162
9.2CSS基础167
9.2.1CSS简介167
9.2.2CSS编码规范167
9.2.3CSS属性选择器168
9.2.4网页中应用样式表171
9.2.5CSS常用属性173
9.2.6CSS盒子模型175
9.3JavaScript脚本基础181
9.3.1JavaScript简介181
9.3.2HTML中使用JavaScript182
9.3.3JavaScript的变量182
9.3.4JavaScript操作HTML标签182
9.3.5JavaScript的注释183
9.3.6函数183
9.3.7JavaScript的运算符184
9.3.8JavaScript的3种流程控制185
9.3.9JavaScript与HTML的交互187
9.4案例——幻灯片效果187
9.4.1Jquery.anythingslider插件188
9.4.2Jquery.anythingslider的用法188
9.4.3顶部导航Logo及菜单189
9.4.4幻灯片效果完整代码190
第10章餐厅网站静态
页面设计
10.1前期准备194
10.1.1项目背景194
10.1.2前期策划194
10.1.3确定网站信息框架195
10.1.4交互原型设计195
10.2网页界面设计197
10.2.1整体视觉风格定位及首页设计197
10.2.2列表页面设计200
10.2.3详细页面设计201
10.3网站布局201
10.3.1首页制作201
10.3.2列表页制作208
10.4网站动效表现215幻灯片效果完整代码190
第10章餐厅网站静态
页面设计
10.1前期准备194
10.1.1项目背景194
10.1.2前期策划194
10.1.3确定网站信息框架195
10.1.4交互原型设计195
10.2网页界面设计197
10.2.1整体视觉风格定位及首页设计197
10.2.2列表页面设计200
10.2.3详细页面设计201
10.3网站布局201
10.3.1首页制作201
10.3.2列表页制作208
10.4网站动效表现215
