Web 前端设计是为适应信息时代发展应运而生的多领域交叉设计方向，对设计师而言，Web 跨平台、跨终端、智能化的新特征，对内容策略、交互方式、用户体验设计都提出了更高的要求，同时了解前端技术对设计师提升自身创新能力也变得越发重要。因此，本书内容整体上包含设计和技术两部分，并在内容编排和设计上充分体现设计和技术的有机融合。在设计部分，按照思维方法到用户体验设计再到跨媒介综合设计的梯度组织内容，融入跨终端、跨媒介等符合时代变化的前沿设计理念和方法；在技术部分，不同于信息技术专业学习的硬核技术，而是以设计师视角切入，以辅助创意设计实现为目标，形成与设计匹配的前端技术基础到响应式前端技术的知识梯度。 本书可以作为高等院校数字媒体、视觉传达、交互设计、网络传播等专业Web 前端设计相关课程的教材，也可以作为爱好者的自学用书。

《Web前端设计》内容整体上包含设计和技术两个部分，在设计部分，按照思维方法到用户体验设计再到跨媒介综合设计的梯度组织内容，融入跨终端、跨媒介等符合时代变化的前沿设计理念和方法；技术方面不同于信息技术专业的学习的硬核技术，而是以设计师视角切入，以辅助创意设计实现为目标，形成与设计匹配的前端技术基础到响应式前端技术的知识梯度。

党的二十大报告指出：教育、科技、人才是全面建设社会主义现代化国家的基础
性、战略性支撑。必须坚持科技是第一生产力、人才是第一资源、创新是第一动力，
深入实施科教兴国战略、人才强国战略、创新驱动发展战略，开辟发展新领域新赛
道，不断塑造发展新动能新优势。

互联网是对人类社会影响最为广泛、深刻的数字媒介，是社会创新驱动的先导
力量，围绕互联网媒介的创新设计是高校艺术设计专业的重要教学方向之一。其中，
Web 是互联网最普及、影响最深远的服务，具有开放、兼容、应用形式多样等特点，
是Web 前端设计成为高校数字媒体专业开展互联网创新设计教学的极佳切入点。随
着技术的不断演进，人类开启了移动互联网 智能时代，Web 早已不仅是网页
的范畴，而且是以各种智能终端为载体，拓展出丰富的应用形式，融合更多的媒介和
技术，满足人们不同应用场景下的不同需求。Web 在多领域跨界融合，使得Web 前
端设计成为紧随时代发展的前沿多领域交叉设计方向，其要求的知识能力与当今社会
对创新型设计人才的需求相吻合。

本书正是瞄准当今时代背景下社会对创新型设计人才的需求，以及高校数字媒体
专业复合型设计人才培养目标对设计人才知识结构和能力水平的要求而进行的内容组
织和编写。本书的特色主要包含以下几方面。

（1）本书从思维、方法、技术三个层面层层递进，以培养创新设计思维、跨学科
知识素养及较强行业实践能力的创新型设计人才为目标，系统地帮助学习者构建Web
前端设计知识体系。
（2）本书注重实用性和前瞻性相结合，在构建基础、系统知识体系的基础上，着
眼于当今移动互联网、智能时代背景下的新设计特征，注重进一步拓展跨媒介、跨学
科的综合设计能力培养，例如融入跨终端Web 设计、智能系统设计、Web VR 和AR
等前沿的设计模式。
Wqjzw.indd 5

2023/5/30 15:49:19

Web前端设计VI
（3 ）本书与教学过程紧密结合，章节设置体现了研究性学习过程和内涵，并专门
设置了Web 设计研究章节，通过真实案例介绍设计研究经典理论和方法，让知
识在真实的应用场景中易于学习者学习和理解，培养科学探究能力和发现解决问题的
能力。
在本书的编写过程中，编者参阅了大量的资料，在此对资料的原著作者表示衷心
的感谢。由于编者水平有限，对书中不足之处敬请广大读者批评、指正。
编者
2023 年3 月

王珊，毕业于北京航空航天大学虚拟现实技术与系统国家重点实验室，获得工学博士学位，2007年起任教于北京航空航天大学新媒体艺术与设计学院。主要研究方向为数字媒体艺术、Web前端设计、虚拟现实，在本领域内知名国际期刊和会议发表多篇论文。主讲课程有《Web前端设计》《网页设计》《网页设计技术》《移动交互应用设计》，在此Web前端设计类课程方面积累十几年的教学经验，打造了Web前端设计课程群，针对不同年级不同专业方向学生，形成了一套完整有效的教学体系和模式，目前依托此课程群承担了北航校级重点教学改革项目。

PART 1 设计篇第1章 Web前端设计概论 / 3
2.1.3 PC 端与移动端的对比/ 17

1.1 Web 前端的概念 / 3
2.1.4 其他终端/ 18
1.2 Web应用类型 / 4
2.2 Web元素 / 19
1.2.1 网站、网页/ 4 2.3 跨终端设计 / 21
1.2.2 Web App 和混合式App / 5
2.3.1 响应式设计/ 21
1.2.3 基于微信的Web 应用/ 6
2.3.2 智能系统设计/ 22
1.2.4 其他游戏和互动类Web 应用/ 6 第3章 Web设计研究 / 24
1.3 Web 媒介特点 / 7
3.1 Web 设计理论 / 24
1.3.1 跨平台性/ 7
3.1.1 设计思维/ 24
1.3.2 融合多元信息形态/ 8
3.1.2 用户体验要素/ 25
1.3.3 动态交互性/ 9
3.2 设计研究的意义 / 26
1.3.4 分布式信息/ 10
3.3 设计研究的方法 / 27
1.4 Web 发展趋势 / 10
3.3.1 用户研究/ 27
1.5 Web 前端设计范畴 / 11
3.3.2 竞品分析（同类、现有解决方案
第2章 Web设计模式 / 13 分析）/ 31

2.1 不同终端的设计模式
/
13
第4章 Web设计过程
/
33
2.1.1 PC 端/ 13
4.1 信息架构的概念
/
33
2.1.2 移动端/ 14
4.2 交互设计的概念
/
34
Wqjzw.indd 7

2023/5/16 19:45:32

Web前端设计VIII
4.3 信息与交互的关系 /354.4 设计方法与工具 /364.4.1 信息架构设计要素/ 36
4.4.2 信息分类方式/ 37
4.4.3 层级式任务分析/ 42
4.5 Web组织结构 /434.5.1 单一模式/ 43
4.5.2 混合模式/ 47
第5章 Web设计表达 /505.1 原型的概念 /505.2 低保真原型 /515.3 高保真原型 /535.4 多模态原型 /535.5 感知设计 /545.5.1 视觉/ 54
5.5.2 听觉/ 55
5.5.3 触觉/ 56
5.5.4 嗅觉/ 56
5.5.5 味觉/ 57
5.6 多模态交互 /57
第6章 Web设计技术结构 /616.1 基本的Web标准 /616.2 HTML与Web结构 /626.3 HTML5基本语法 /636.3.1 HTML 标签/ 63
6.3.2 HTML 5 文档基本结构/ 63
6.4 HTML5元素 /646.4.1 页面布局元素/ 64
6.4.2 文本元素/ 68
6.4.3 超链接/ 69
6.4.4 图像、音视频元素/ 70
6.4.5 列表/ 72
6.4.6 表格和表单/ 73
第7章 Web设计技术表现 /777.1 CSS简介 /777.2 CSS基本语法 /797.3 CSS选择器 /797.3.1 基本选择器/ 79
7.3.2 复合选择器/ 83
7.4 CSS优先级 /857.5 CSS颜色 /867.6 CSS常用属性 /877.6.1 文本相关属性/ 87
7.6.2 图像相关属性/ 88
7.6.3 列表相关属性/ 89
第8章 Web设计技术布局 /918.1 布局基础 /918.1.1 元素显示类型/ 91
8.1.2 盒模型/ 93
8.2 CSS定位方式 /968.2.1 浮动定位/ 97
8.2.2 绝对定位/ 99
8.2.3 相对定位/ 101
8.3 常见布局 /102PART 2 技术篇
Wqjzw.indd 8 2023/5/16 19:45:32

IX
8.3.1 一栏式布局/ 102 第10
章 跨终端Web
设计技术响应式
8.3.2 两栏式布局/ 104 设计
/
118
8.3.3 三栏式布局/ 106
10.1 响应式设计的概念
/
118
第
9
章 跨终端Web
设计技术弹性10.2 响应式设计模式
/
119
布局
/
108
10.3 媒体查询
/
121
9.1 弹性布局的概念
/
108
10.3.1 基本语法/ 121
9.2 弹性盒模型
/
109
10.3.2 媒体查询实例/ 123
9.3 弹性盒基本属性
/
109
10.4 响应式框架
/
124
9.4 弹性盒对齐属性
/
111
10.4.1 Bootstrap 介绍/ 124
9.5 弹性盒布局案例
/
113
10.4.2 Bootstrap 栅格系统/ 125
9.5.1 水平垂直居中元素/ 114
10.4.3 Bootstrap 布局案例/ 126
9.5.2 圣杯布局/ 115
10.4.4 Bootstrap 基本组件/ 129
参考文献
/
130