Web前端设计

图书标准信息

• 作者 王珊
• 出版社 清华大学出版社
• 出版时间 2023-06
• 版次 1
• ISBN 9787302631729
• 定价 59.00元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸
• 页数 144页
• 字数 203千字

【内容简介】

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

【作者简介】

王珊，毕业于北京航空航天大学虚拟现实技术与系统国家重点实验室，获得工学博士学位，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