响应式Web设计全流程解析

出版者:人民邮电出版社

作者:【美】Stephen Hay

页数:212

译者:余果

出版时间:2014-9-1

价格:55

装帧:平装

isbn号码:9787115364210

具体描述

固定宽度的Photoshop图层、不断膨胀的客户需求、无休止的线框图……抛弃它们吧！陈旧的Web设计交付流程不再适用于移动时代的响应式方案。设计的工作流本质上并没有发生改变，是最佳实践变了。

《响应式Web设计全流程解析》为你展示了如何拥抱新的设计范式，创造微信时代的网站。你会学到的策略包括：如何更好地管理客户的开发需求和预期；在浏览器中进行设计的方法；超越静态的Photoshop图层的文档化方法；将响应式设计断点可视化的方法。 　学习并掌握《响应式Web设计全流程解析》引人入胜的内容之后，你就可以完全抛弃老旧的瀑布流交付模型，转而使用一种全新的方式来设计移动时代的网站。

作者简介

Stephen Hay

出生于加利福利亚，1992年时迁往荷兰生活和工作，从1 9 9 5 年开始设计Web站点。他现在的工作是在Zero Interface公司担任Web设计和开发顾问，在那之前他做过企业形象设计、包装设计、广告设计，这些设计经验为其现在的工作奠定了扎实的基础。除了经常在行业会议上发表演讲，Stephen还会发表一些关于CSS、Web可用性、开放网络标准以及设计方面的文章。

目录信息

第1章　拥抱变化　1
1.1　精美设计稿的诞生　2
1.2　静态设计稿舒适区　4
1.3　专家的入侵　5
1.4　我们都是交互设计师　8
1.5　跳出瀑布模型　8
1.6　压死骆驼的稻草　9
1.7　屋里的大象　10
1.8　这并非福音书　11
1.9　这是个挑战　11
第2章　从内容开始　13
2.1　微结构vs.模块化结构　14
2.2　懒人的内容清单　16
2.3　通用的例子：本书网站　　16
2.4　渐进的设计原则：零界面　17
2.5　创建内容清单示例　18
2.6　试试看　21
第3章　内容参考线框图　23
3.1　别把线框图复杂化　25
3.2　第一步：创建低保真的、基于网络的设计稿　26
3.2.1　创建基础HTML　27
3.2.2　形成基本样式　30
3.2.3　移动优先版线框图　33
3.2.4　添加导航　35
3.2.5　为大尺寸屏幕创造变量　37
3.3　打破神话　43
3.3.1　交互设计师应该做线框图　43
3.3.2　线框图应该详细　44
3.3.3　内容参考线框图是否限制了设计选择？　44
3.3.4　现在就考虑布局是不是有点太早了？　45
3.3.5　我应该做什么样的线框图？　45
3.3.6　我应何时让客户参与？(或者说“我的漂亮的交付品在哪儿？”)　46
3.4　动手试试　46
第4章　基于文本而设计　49
4.1　内容为王　50
4.2　标记纯文本　53
4.2.1　用Markdown来处理图书页面的内容　54
4.2.2　这个阶段修改的意义　56
4.2.3　思考很重要　58
4.3　将纯文本转换为HTML　59
4.3.1　使用命令行　60
4.3.2　转化为HTML　65
第5章　线性设计　67
5.1　开发一种设计语言　68
5.1.1　使用设计漏斗　70
5.1.2　在实际设备中运行设计　72
5.2　增强结构化内容　74
5.2.1　模板介绍　76
5.2.2　目前你的项目文件夹　79
5.2.3　思考和画草图　80
5.2.4　多尝试字体和颜色　81
5.2.5　暂时不要做太多　85
第6章　断点图　87
6.1　文档断点　89
6.1.1　剖析断点　90
6.1.2　可视化断点　92
6.1.3　断点图组件　93
6.2　创建简单的断点图　95
6.3　主次断点　97
6.4　添加更多东西　98
6.5　总结　102
第7章　为断点而设计　103
7.1　首先，关于草图的一点点东西　104
7.1.1　如何素描　105
7.1.2　在设备上素描　109
7.1.3　养成素描的习惯　111
7.2　专注于主断点　112
7.3　素描的时候仔细思考内容　114
7.3.1　文本　114
7.3.2　导航　115
7.3.3　表格　116
7.4　当你没有灵感的时候怎么办　119
第8章　创建Web设计模型　121
8.1　跨越障碍　123
8.1.1　客户不关心　123
8.1.2　其他的人　124
8.1.3　你自己　125
8.1.4　展示你的模型　127
8.2　开始实践　128
8.3　从静态页面到静态网站生成器　133
8.3.1　模板　133
8.3.2　选择一个静态站点生成器　134
8.3.3　关于Dexy　135
8.3.4　安装Dexy　136
8.3.5　你积累的资源　140
8.3.6　添加样式　140
8.3.7　添加内容　142
8.3.8　给内容分组　142
8.3.9　Dexy控制中心：dexy.yaml文件　146
8.3.10　使用CSS完成Web设计模型　148
8.3.11　多个页面　148
8.4　总结　150
第9章　截屏　151
9.1　为什么不直接在网页上进行展示？　152
9.1.1　演示/现实的平衡　153
9.1.2　截屏：从Web设计模型回到图像　154
9.2　如何截屏　157
9.2.1　手动截屏　157
9.2.2　自动截屏　159
9.3　展示截屏　164
第10章　成果展示：浏览器体验　167
10.1　你会在你的设计中发现很多的bug　168
10.2　沟通与协作　169
10.3　怎样去展示你的交互原型　171
10.3.1　用设备来让你的设计更有说服力　171
10.3.2　解释你的设计　172
10.4　测试和客户审阅　173
10.4.1　客户审阅　175
10.4.2　做好笔记　176
10.4.3　使用笔记去修改设计　182
第11章　创建设计手册　185
11.1　网页设计规范　187
11.2　设计手册的内容与结构　189
11.3　我心仪的规范设计软件　191
11.4　创建设计文档　193
11.4.1　动手写文档　194
11.4.2　添加各种形式的示例　196
11.4.3　生成截图　197
11.4.4　配置Dexy　199
11.4.5　测试整个Dexy项目　200
11.4.6　捕获特定元素的屏幕截图　201
11.4.7　引入能渲染出效果的HTML　204
11.4.8　包含高亮的代码　207
11.4.9　动手做一个你自己的文档　210
11.5　写在末尾的话　211
· · · · · · (收起)

读后感

看完书里的内容，本来想转战Axure，用Axure的响应式来做，结果在设置初始断点时卡住了。 谷歌一下，读到这么一句 普遍的响应式设计一般会要求按照主流设备的屏幕分辨率设置断点。随着现在手机更新迭代越来越快，屏幕分辨率更是参差多态。现在设置的断点，可能一年半载就已不适...

全新的工作流程，响应式WEB设计流程是面对技术和设备革新最好的应对和改进。 解决多种角色（产品设计、交互设计、前端开发人员）在工作中流程管理问题，提高效率，优化流程！ 腾讯公司一线工程师等自身专业人士结合国内实践翻译，符合国内情况，不生涩、容易懂！  

全新的工作流程，响应式WEB设计流程是面对技术和设备革新最好的应对和改进。 解决多种角色（产品设计、交互设计、前端开发人员）在工作中流程管理问题，提高效率，优化流程！ 腾讯公司一线工程师等自身专业人士结合国内实践翻译，符合国内情况，不生涩、容易懂！  

看完书里的内容，本来想转战Axure，用Axure的响应式来做，结果在设置初始断点时卡住了。 谷歌一下，读到这么一句 普遍的响应式设计一般会要求按照主流设备的屏幕分辨率设置断点。随着现在手机更新迭代越来越快，屏幕分辨率更是参差多态。现在设置的断点，可能一年半载就已不适...

看完书里的内容，本来想转战Axure，用Axure的响应式来做，结果在设置初始断点时卡住了。 谷歌一下，读到这么一句 普遍的响应式设计一般会要求按照主流设备的屏幕分辨率设置断点。随着现在手机更新迭代越来越快，屏幕分辨率更是参差多态。现在设置的断点，可能一年半载就已不适...

用户评价

对于初学者而言，我感觉这本书或许会显得内容有些庞杂。但是，如果你像我一样，希望能够深入地理解响应式Web设计的方方面面，那么这本书绝对是值得投资的。它并不是一本速成手册，而是一部系统性的学习指南。书中详细讲解了从HTML结构、CSS布局到JavaScript交互的每一个环节，并且强调了它们之间的相互作用。例如，在讲解CSS的媒体查询时，作者并没有仅仅停留在语法层面，而是深入剖析了在不同断点下如何调整元素尺寸、隐藏或显示元素，以及如何改变元素的排布顺序。 我特别喜欢书中关于跨浏览器兼容性的讨论，这一点在Web开发中永远是绕不开的难题。作者并没有回避这个问题，而是给出了不少实用的技巧和解决方案，比如如何使用Polyfill来支持旧浏览器，以及如何进行有效的测试和调试。这些内容对于保证响应式设计在各种设备和浏览器上的稳定性和一致性至关重要。读完这部分内容，我感觉自己对响应式设计的理解更加全面和扎实了。

我是一名有着几年经验的前端开发者，之前在工作中也接触过响应式设计，但总感觉自己对一些底层原理和最佳实践的理解不够深入。这本书的出现，恰好填补了我在这方面的知识空白。它以一种非常务实的方式，从头到尾地梳理了响应式Web设计的方方面面。我发现书中对性能优化方面的讲解尤为精彩，比如如何利用懒加载、响应式图片格式（如WebP）来提升网站在移动端加载速度，以及如何通过代码拆分和按需加载来减少初始请求。这些内容对于提升用户体验至关重要，也正是我在实际工作中一直追求的目标。 书中对于不同设备尺寸下的用户交互和布局调整也给出了不少有价值的建议。例如，它讨论了如何在小屏幕上优化导航菜单，以及如何调整表单元素的可用性，这些细节往往决定了一个网站的成败。我尤其欣赏书中对JavaScript在响应式设计中的作用的阐述，它不仅仅局限于DOM操作，更深入地探讨了如何利用JavaScript实现更智能的响应式效果，比如基于视口大小的动态内容加载和组件重构。这部分内容让我对响应式设计的理解上升到了一个新的高度，感觉不再仅仅是CSS的范畴，而是整个前端技术栈的协同。

这本书的写作风格非常有条理，而且逻辑清晰，使得我这个相对来说在前端领域还在摸索阶段的读者也能很容易地跟上思路。它不像一些技术书籍那样枯燥乏味，而是通过生动形象的语言和贴近实际的案例，将复杂的概念变得易于理解。我尤其欣赏书中对于响应式设计中“以用户为中心”理念的强调。作者通过大量的实例，展示了如何从用户的角度出发，去设计和实现一个既美观又实用的响应式网站。 书中对于响应式图片的处理，以及如何优化图片加载的策略，是我非常感兴趣的部分。作者详细地介绍了各种方法，比如使用`srcset`和`sizes`属性，以及如何利用CSS来控制图片的显示。这些都是在实际项目中能够直接应用的技术，能够有效地提升网站的性能和用户体验。此外，书中对响应式设计的测试和调试方法也进行了深入的讲解，这对于保证网站在不同设备上的兼容性和一致性非常有帮助。我感觉这本书不仅仅是一本技术书籍，更是一本能够帮助开发者提升专业素养和解决实际问题的宝典。

我对这本书的期待值非常高，尤其是它标题中提到的“全流程解析”。我一直在寻找一本能够系统性地讲解响应式Web设计从构思、设计到实现、优化的完整过程的书籍。这本书的内容给我带来了一些惊喜，它不仅仅是停留在前端的技术层面，更是在探讨如何将响应式设计融入到整个项目流程中。例如，书中对项目启动阶段的响应式规划、设计师如何产出适应不同屏幕尺寸的设计稿、以及后端开发如何配合前端实现动态内容加载等方面都有涉及。这一点让我觉得非常难得，因为在实际工作中，很多时候前端和后端、设计和开发之间的沟通协作是响应式设计能否成功的关键，而这本书似乎在这方面提供了一些实用的指导和思考方向。 在书中，我注意到作者花费了不少篇幅来讲解如何进行响应式图片的优化，以及如何处理不同分辨率下的字体显示问题。这些都是在实际开发中经常会遇到的痛点，而书中的解决方案听起来既有理论依据，又不乏实践指导。我特别关注了它关于CSS Grid和Flexbox的应用，作者的讲解非常到位，从基础属性到高级用法，都做了细致的梳理，并且配合了大量的代码示例。这些示例不仅仅是简单的堆砌，而是带有很强的启发性，能够帮助读者理解不同场景下如何灵活运用这些布局技术。

这本书的名字叫《响应式Web设计全流程解析》，我一直在关注这个领域，所以毫不犹豫地入手了。拿到书之后，我迫不及待地翻开了它。第一印象是纸质很好，印刷清晰，排版也很舒服，这一点对于长时间阅读的技术书籍来说非常重要。我尤其喜欢它封面设计的那种简洁而现代的感觉，很符合响应式设计本身的精神。 刚开始阅读，我就被作者宏大的视野和清晰的思路所吸引。书中开篇并没有直接进入技术细节，而是从响应式设计产生的历史背景、核心理念以及它如何解决移动互联网时代网页适配难题等问题进行了深入的探讨。这部分内容对于我这样想要从根本上理解响应式设计为何如此重要，以及它在整个Web开发生态中扮演的角色的人来说，简直是及时雨。作者的语言流畅且富有逻辑性，将一些相对抽象的概念讲解得非常透彻，例如“移动优先”的设计原则，以及如何从用户体验的角度出发去构建一个真正响应式的网站。我感觉这本书不仅仅是教我“怎么做”，更重要的是教我“为什么要这么做”，这种深度是我在其他一些技术书籍中很少见到的。

从学习的先后来讲：了解流程 > 深入技术。没有流程，开发会陷入迷茫与混乱。 全栈：前端开发者也要培养培养自己的品味，学习、参与设计！

建议大家先打开BE的网址，然后手动调节横向浏览器，就知道这本书介绍的响应式设计的优点在哪里。特别喜欢这一点，随着宽度变小，网页内容也在变化，就像电脑浏览器→平板→手机的视角。国内网址好多都没有这样设计。最好有一点前端代码基础，不然读起来有点吃力。文中所涉及的流程值得一读。

作为想学习响应式设计的书籍，是一本值得推荐的书，翻译的也很好。

哎就是说设计要直接上代码了呗 要拜拜ps

建议大家先打开BE的网址，然后手动调节横向浏览器，就知道这本书介绍的响应式设计的优点在哪里。特别喜欢这一点，随着宽度变小，网页内容也在变化，就像电脑浏览器→平板→手机的视角。国内网址好多都没有这样设计。最好有一点前端代码基础，不然读起来有点吃力。文中所涉及的流程值得一读。