目　录
Part　1 基础篇
第 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　网站Logo　016
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.1　Banner　026
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

Part　3 视觉表现篇
第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.1　GIF动图　106
6.5.2　Flash动画　107
6.5.3　程序实现的动画　108
6.6　案例——
天猫商城店铺界面设计　108
视觉表现篇
Part　3
第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

Part　4 综合案例篇
第9章　网站静态页面
　前端开发基础
9.1　HTML基础　161
9.1.1　HTML简介　161
9.1.2　HTML文档结构　161
9.1.3　常用标签　162
9.2　CSS基础　167
9.2.1　CSS简介　167
9.2.2　CSS编码规范　167
9.2.3　CSS属性选择器　168
9.2.4　网页中应用样式表　171
9.2.5　CSS常用属性　173
9.2.6　CSS盒子模型　175
9.3　JavaScript脚本基础　181
9.3.1　JavaScript简介　181
9.3.2　HTML中使用JavaScript　182
9.3.3　JavaScript的变量　182
9.3.4　JavaScript操作HTML标签　182
9.3.5　JavaScript的注释　183
9.3.6　函数　183
9.3.7　JavaScript的运算符　184
9.3.8　JavaScript的3种流程控制　185
9.3.9　JavaScript与HTML的交互　187
9.4　案例——幻灯片效果　187
9.4.1　Jquery.anythingslider插件　188
9.4.2　Jquery.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