本书主要介绍网页设计中的布局基本原理和网页交互的技巧及视觉表现方法。本书分基础篇、界面交互篇、视觉表现篇、案例实践篇四大模块,每个模块下又细分章节,且每章都设有小结与案例。具体包括:网页设计的概述、网页界面设计的内容、用户体验研究、信息架构设计、界面与布局、网页视觉设计要点、视听元素、网页视觉风格、综合案例。
作者长期从事网页设计相关课程的教学科研等工作。在教学和实践工作中,充分了解网页设计的教学重点和注意事项,并出版过多本相关教材,得到市场的肯定。
1. 网页设计师韩雪冬为本书主审。
2.本书的模块清晰,从基础到交互再到视觉*后案例实战,由浅到深,层层递进。
3.配套教学视频。
作者长期从事网页设计相关课程的教学科研等工作。在教学和实践工作中,充分了解网页设计的教学重点和注意事项,并出版过多本相关教材,得到市场的肯定。
目 录
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 2 界面交互篇
第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 2
第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