详情
移动设备不断普及，而设计工作流程却没有太大变化。本书将说明如何更好地管理客户期望和开发需求，并且提供了一种撰写设计文档的方法。新的工作流使用10个步骤去拆分移动产品设计流程，并优化工作流，最大程度提高效率。
书名：响应式Web设计全流程解析
ISBN：978-7-115-36421-0
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [美]Stephen Hay
译 余果 等
责任编辑 赵 轩
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
Responsive Design Workflow （ISBN: 9780321887863）
Stephen Hay
Copyright © 2013
Authorized translation from the English language edition published by New Riders.
All rights reserved.
本书中文简体字版由美国New Riders出版公司授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
我不得不说，你正在读的这本书非常棒。
路德维希•维特根斯坦说过一句话，我很喜欢：“我的语言的界限就是我的世界的界限。”这个概念很神奇：这意味着你的词汇量越大，你的视野就越宽广。
我常常会想这句话，还有我的第一份工作。因为回忆过去，我才意识到我的Web设计入门遵循了一条非常狭隘的路，被四个词局限住：发现、设计、开发、发布。我被教导的是，每一个设计项目都被分为这四个独立的步骤。先是调研，然后设计阶段，然后就是编码实现，最后站点上线。简单、直观、线性开发。
开发流程有点像是接力比赛，团队成员必须完成自己的工作，然后其他人才能开始，一个一个传下去直到最终站点上线。当然，现实中有时候会出现一些意外和混乱。但是当我们不要仅为桌面设计站点，还要把我们的设计延伸到越来越多的设备上时，这种老旧的线性工作流程开始暴露出局限性。团队需要更多的合作。调研、设计和开发之间的联系比我们想象中更加紧密，而传统瀑布流的方法将它们割裂开了。
幸运的是，在本书中，Stephen分享了他在这几年的思考，这是一种为Web设计和开发量身定做的响应式设计流程。他引导我们通过一个设计练习来了解新的线框模型，然后给客户展示响应式的设计，这让我们确信，这确实是更好的工作方式。
如果我们的世界的界限是由我们的语言限制的，那么Stephen的书就是一本名副其实的词典，它包含了新的原则和技术，它会颠覆你已有的思考方式，不光使你重新思考设计，还有Web的本质。
这本书会大大扩展你的视野，好好享受吧。
Ethan Marcotte
关于什么是正确的Web设计流程，这个问题没有统一的答案，探其原因，是因为Web设计是一门非常年轻的行业。
十几年前，Web设计是由传统的平面设计师兼职的，在之后十几年变化中，这一职位渐渐分裂为Web设计相关的各个职位，包括用户研究、交互设计、视觉设计、前端开发。这些职位的分割带来了设计流程上的隔阂，每个人成为流水线上的一环，专注于输出自己的“交付物”。交互设计师输出线框图、流程图以及可交互的原型。视觉设计师参考交互设计师的交付物，输出精美的视觉设计稿，如果是响应式设计，需要输出多份设计稿。前端工程师根据视觉设计稿来输出静态页面。
这一现象带来的弊端有：很慢的开发流程，在输出产出物上无谓地浪费了时间；在针对需求变更的时候不能很好地响应变化；在移动浪潮来临的时代因为要输出多份交付物，流程显得更慢；大家的工作方式更像是传统软件公司的流程，而不是互联网公司的流程。
本书作者Stephen对这一现象提出了自己的疑问，并给出了自己亲身实践的一套流程方案。
Stephen鼓励耦合度更高的设计流程：设计团队更加紧密地坐在一起，为同一个项目快速研发。
鼓励关注内容，关注基本内容的可用性，这样能确保在最糟糕的情况下，用户得到的网站也是可用的。
鼓励设计师身兼数职，不再区分交互设计师和视觉设计师，因为现在的交互线框图太具体明确，视觉设计师没有发挥才能的空间。
即使仍然保留交互设计师和视觉设计师的职位区分，也不再输出传统交互线框图，而是使用可迭代的交付物。交互设计师输出HTML页面，视觉设计师可以基于此来工作，避免时间浪费在交付物的输出上。
鼓励设计师学习一些自动化工具，比如简单的HTML和CSS、自动截图脚本、静态服务器等，把自己从无聊的大量输出中解放出来。
如果你是：
那么这本书就是为你而写。
对于专注交互和视觉设计师来说，这一创新流程是不小的挑战，因为要跳出自己的舒适区，学习一些技术相关的知识。而对于已经习惯已有流程的同事，要推进新的流程在整个部门的落地势必会遇到很大的阻力。
虽然挑战很大，但随之而来的回报是颇为丰厚的，在移动互联网的时代，谁更快、更能拥抱变化、拥抱多终端设备，谁就能更成功。
余 果
腾讯ISUX高级前端设计师
2014年6月8日
余 果
腾讯高级前端设计师，负责本书的部分翻译和全书的校对工作。有志成为全栈工程师，并积极地利用技术来优化用户体验。
周天牧
前腾讯产品经理，现创业。信仰互联网精神，坚持学习，对产品、技术、设计和商业模式。
陈伟华
前腾讯前端设计师，现居新西兰，是一位自由职业者，正在学习油画。
林钊仕
前腾讯前端工程师，现创业。热爱Web事业，热爱分享。
黄雪莲（snowdrop）
金立前端工程师，常年混迹于互联网。专注技术，捣鼓翻译，热爱跑步，享受在个人局限中无限燃烧自己。
王琨琛
iFLYTEK项目经理，热血青年。喜欢摇滚、足球、机车、马拉松。
互联网是个神奇的存在，是个不断变化，并且在创新中见证奇迹的地方。如果你记得最早的互联网长什么样，你会有更深刻的感触。1995年建立的网站和那时的“设计”，在现在来看可能更像一个笑话。
某种程度上说，现在网站的设计流程已截然不同，但反过来说，却也丝毫未变。
从互联网的伊始，设计师们就在绞尽脑汁将创意落实到浏览器里。最早火起来的互联网设计师是那些爱耍小聪明的家伙，用hacking技巧来帮助自己实现目标。从spacer GIF和表格布局（layout tables）到滑动门（sliding doors）、伪等高布局（faux columns）和图像置换，再到编程框架、CSS预处理器和JavaScript polyfills[1]，他们将设计与网页融合的招儿想了个遍，即使需要把页面内容和无实际含义的表现元素相结合，甚至破坏语义化的Web。
时光流逝，不论是上网设备、浏览器还是用户本身，都随整个互联网发生了巨变，但设计流程还基本保持着早期互联网时代的模样，更准确地说，与互联网产生之前一样。
我以前在传统设计行业工作。那时候刚毕业几个月，我就去了荷兰，花几周时间打遍了周边所有设计公司的电话，通过了其中一家公司的面试并拿到了实习offer。那是1992年，大部分荷兰人在3年后才接触到互联网。我所在的这家小公司有台电脑，我记得是台苹果的Macintosh LC。它只能用来写信或者开发票，唯独不能做 设计，而那时的设计稿都是用昂贵的彩色马克笔手工绘制的。
那时候我们做设计纯靠手绘。就像在学校学过的那样，先画草稿，越多越好，选几幅好的，再画初稿。然后再从初稿里选1到3幅画出成品，因为广告公司都喜欢以量取胜，所以一般都是3幅。在那个年代，负责马克笔渲染的设计师是最牛的。印前工作都是整体或部分外包给专业公司的。而常和电脑打交道的我，很费解为什么电脑在行业里没有被充分利用，但这种情况很快就不一样了。
6个月后我转正了。源于对电脑字体排版的钟爱，我探索出一条路：在公司的Macintosh Quadra 700电脑上（在我开始实习不久后买的）用QuarkXPress创建设计稿，打印出来，并在这个设计稿的基础上做马克笔渲染。这对我们的客户来说有更实际的好处—所见即所得。我认识的其他设计师也纷纷效仿，开始把彩印图片加入设计初稿而非手绘。没过多久我就开始用Photoshop和QuarkXPress在电脑上做完整的设计稿。这期间许多经验告诉我，用电脑做设计很省事儿，只需要在印出的设计稿上用马克笔画阴影就行了。于是我开始用Photoshop完成全部设计，因为这样效果看起来更真实。客户都爱Photoshop渲染，而那些曾经很厉害的马克笔渲染设计师，从此以后就接不到我们的活儿了。
我对这样的工作方式很满意，但当时却没有意识到电脑正在逐渐取代马克笔，我在创造产品而非仅仅实现视觉。不过事后来看，用电脑排版，批量复制样式精美的作品确实节省了时间，也成为了常规的工作方式。当我开始用Photoshop的时候，与其他纯手绘的公司比起来，作品质量确实鹤立鸡群。客户都希望看到他们将得到的是什么，于是我们每次都胜出。最终，大家都选择这么做。
有趣的讨论接踵而至。是否因为我们使用了新的工具就削弱了创意？以往大家的印象是，用马克笔在纸上作画是创意的延伸和实现，而电脑却从某些程度上僵化了这些创意。作为视觉设计的工具，电脑是不是让我们变得缺乏创意？抑或是一个更有效的实现已有创意的工具？整个行业在基础重复性工作上投入大量时间值得么？真的有必要在售前阶段细化如此多的细节吗？
不论如何，事情自然发展着。客户都开始期待优质的精美的静态设计稿。我们的做法是，把打印好的设计稿贴在展板上展示给客户，告诉他们这就是方案。当时我们也没想到更好的办法展示，因为稿子用电脑打印总比马克笔手绘更接近现实。
在我们做精美的静态设计稿几年后，发生了有趣的事情——互联网诞生了。你可能会期待，这个改变全世界的新事物能否也在设计领域催生什么变化，正如当年电脑帮助设计脱离了纯手工劳动那样。但什么都没发生。我们仍然用Photoshop合成漂亮的产品设计稿，而客户也认可，于是我们就这样继续了多年。
停下来想想，设计界随着电脑的出现产生了天翻地覆的变革。作品变得更真实，它们比以往任何时候都更准确地展示了最终产品的样子。为什么类似的变革没有随着互联网的出现而产生？
我个人的观点是，网上展示出来的东西看起来不够好。早些年里，网页字体不是抗锯齿的，而Photoshop设计稿却能使抗锯齿。所以它看起来更美观，因此也能卖得好。
这种总把网站设计稿处理成漂亮图片的办法带来了麻烦。最后我也厌倦了总是向客户解释，为什么网站上线后看起来总是比设计稿差很多。于是我放弃了抗锯齿化，并且要求我的员工也这么做，因为我不想让客户有这种不愉快的“惊喜”。这么多年来，我们使用图像编辑软件，比如Illustrator或者Photoshop时，一直尽可能坚持真实。与此同时，我们采取两个配套措施：一是多说话，第二是生动、精确地解释我们做出来的网站长啥样。这些策略在很多项目上救了我们的命，但那个时代正在过去。
响应式互联网来得很自然。它不是台式机互联网，不是最新的Safari浏览器互联网或者移动互联网或者iOS互联网，也不是平板电脑互联网。它是不受终端设备和物理限制，所有人都可以访问所有网上信息的终极网络。
现在的互联网设计更具挑战性，正如开发者Jack Archibald所说，现代网站分为文档型网站和交互型网站。设计交互型网站（或者叫Web App），我们不仅要考虑形式和内容，更要考虑人机交互，而用视觉把交互表达好是很难的。
很久以前，每个公司只要一个人就可以完成绝大多数的网页设计，不包括项目管理、后台开发，只包括视觉设计、交互设计和常见的前端开发。
1998年，前端开发主要的工作就是写写HTML，也有些Flash要做。我最早的员工都不知道什么是CSS，还得我来给他们解释。那时候还有很多用CSS做不了的事情，而JavaScript还完全名不见经传。
那时候设计一个网站大概是这样的：在Photoshop里画好设计稿，切图，把它们放回HTML，用Photoshop渲染的内容替换对应的部分，不论这个网站是小的静态宣传站还是CMS的模板站。
图1.1 早期的线框比今天常用的线框简单。
当开始系统化、模块化地思考网站的视觉架构时，我们用最简单的线条，称为线框或者图表，来描绘网站。即使文档型网站也有交互方式，而这些特性都需要在设计流程中沟通清楚。
图1.2 许多设计师和信息架构师仍然用Jesse James Garrett视觉图表来描述网站结构和交互。
在我的记忆中，从2002年开始，事情有了转折。当项目足够大，网页上的工作量足够复杂时，我们会在一两个前端体验上专业化。许多设计师还在写HTML，而网站图表和线框是信息架构师的工作范畴。像“Jame Garrett的视觉词汇表”这样的工具给了我们一个方法，可以根据基础交互实时查看网站结构。随着交互形式的变化，从客户端和服务器的交互到更小而具体的客户端侧交互，专家们使用了大量细化的线框来展示。这些线框逐渐变成了没有颜色和图片的网页，有时在设计稿里为了客户可以点击，在线框里配上链接可以互相跳转。
不久之后我们意识到，继续做一个全面的网页设计师很难了。网页设计领域诞生了信息架构、交互设计、视觉设计、前端开发等细分子领域，几年后又相继出现了更多子领域，比如每个网站都有强需求的内容运营和时常含糊的用户体验设计。这时，作为交互设计师重要的产出之一，线框已经足够细化，而视觉设计师的职能也相应有略微改变。即使在笔者成文的今天，在很多网站设计和开发公司，许多视觉设计师仍遵循传统瀑布流程，跟随着交互设计师的脚步。这意味着，视觉设计师拿到手的是复杂的线框图，并且是由客户看过并且认可的，没办法改动。这让他们的工作简化成了令人尴尬的“根据编号涂颜色练习”。视觉设计师被要求在线框的基础上做设计——改改字体排版、按网格排整齐、上色并画出图像——基本可以概括为在线框的底子上做点小修饰。
图1.3 今天的细化线框毫无想象空间。
在这种情况下，真正的设计工作是由交互设计师完成的，他们才是解决问题的人，而视觉设计师只是按照线条上色罢了。这看上去很不公平，因为不解决问题的设计师仅仅是在做装饰，而做装饰不是设计。
Archibald所说的文档型网站和交互型网站之间的区别并不那么明显，有时候文档型网站也需要有交互性的内容。搜索或者过滤信息、登录或请求文档、填充表单、甚至在网站不同模块之间点击跳转都是由用户不假思索就完成的交互动作。
我认为交互设计师和视觉设计师应该是同一个人。实际上我敢断言，只要是做前端网页相关工作的设计师或者开发者，都可以被称为交互设计师，因为他们工作的某些方面总会影响用户体验。一个优化性能的开发者是在积极地提升用户体验和交互；一个设计师有意用颜色、空间、大小和表单的排列方式也是为了让用户更顺畅地使用网页；而一个内容运营者认为某些内容重要，某些内容不重要，也是在考虑如何提升用户体验。
这并不意味着纯做交互的设计师没有自己的地位，只是想表达，从古至今，视觉设计师一直在解决各种交互的、可读性的、可用性的、美学的问题，没有必要在网页设计领域让他们只做装饰。至少，交互设计、视觉设计和内容运营（也可能还有其他领域）应该比现在有更多的重叠。这需要增加各个步骤间的合作，而不是把现有的每个步骤独立。
我建议用跨职能的迭代方法取代瀑布方法，这样可以让客户体验到整个设计从头到尾的进化过程，绝无可能产生不愉快的“惊喜”。我建议采用重叠的、合并的职能安排，在设计流程内彻底把坑填满。
我期望演进、迭代的设计流程，特性和元素都是根据需求添加的。这个流程基于“小步快跑”原则，从最简单的结构式设计稿开始一步一步迭代到最终的复杂成品。这个流程的特点是，从小开始，慢慢变大。它很杂乱，是因为没有先完成线框然后交给设计师。线框是简单的，它逐渐变成设计，直到变进了浏览器。
互联网给了我们绝好的机会，让我们可以在设计的同时有个媒介来检测结果。别再设计网站的图片了，想想怎么切实在各个方面同时提升用户体验吧。
这本书展示了我在这个创新过程中的尝试。
对于本书理念的思考开始于四年之前，那时我正在跟进一个客户项目，在Photoshop模板中创建设计。Photoshop模板能表示对应的Web页面和页面中包含的元素。我们需要对这些页面进行清晰的描述才可以做设计稿。我们一般也是这么做的。但在这个项目里，做前端的公司要求每个元素必须在Photoshop文件里精确描述。如果链接是蓝的，那Photoshop模板文件里所有用到这个链接地方都得有所体现。我们不能简单标注下＂链接是蓝色的＂，因为Photoshop模板文件就是他们的文档。好吧这也是一般的做法，但是紧接着一件令我不爽的事发生了，客户反馈需要在段落间添加元数据，并且头部的尺寸要改，虽然这些在当时也很常见。接下来的两天，我所做的只是打开一个Photoshop模板文件，增加所需改动部分的高度，手工移动每一个像素，最终对每个Photoshop模板文件依法炮制。
如果这个项目是个该死的＂响应式＂设计项目会怎样？在100个Photoshop文档上做了相同的操作后（假设每个文档20页，五屏大小），我宁愿像个胎儿一样蜷缩在某个黑暗的角落。
当我意识到两天的工作量用两行CSS代码就能搞定时，我立刻决定再也不用Photoshop做模板了，并开始创造一种全新的、省时省力省脑细胞的工作流程。
2010年我成为了一名独立顾问，可以有机会实践我的新工作流程：客户必须无条件接受我的工作方式。我发现，不论对客户还是对我自己，这种方式效果都很好。并不是说这种方法没有自己的问题（这些问题现在仍然存在），但和瀑布流程相比，它更快、更简单、更有趣，客户也更喜欢看见从结构化内容到成品的整个设计演化流程。另外，无需我多言，他们也能看到并欣赏我们为一份设计稿的诞生所做的努力。
考虑采用全新工作流程的主要原因之一是为了响应式设计。从本质来看，响应式设计让一屏单独的静态页面变得毫无意义。在图像编辑器里创造的图像不是任何浏览器里的页面，更别提种类繁多的浏览器的背后还有更种类繁多的跨平台多视图（见图1.4）。总之在我看来，响应式设计比单独的页面设计高明太多。
图1.4 对于因屏幕尺寸不同而变的布局，静态设计稿太费时。
图像编辑器仍是有价值的工具，比如用来编辑图像、组合图片，制造有创意的情绪变化，例如萨曼塔·沃伦发明的Style Tile。Photoshop和其他图像编辑器早已变成了很多设计师的视觉游乐场，用他们来创造静态设计稿太老掉牙了，建议设计师们用一点心思来探索你们的设计工具吧！
直到今天，我仍然使用这个设计流程。虽然它不是一个完美的从头到尾的网站设计开发过程，而且有些地方会有点乱，但它是我认为最理想的视觉设计流程，让内容策略、交互设计、可用性设计与实用性都能有所重叠。
这本书的设计流程已经在项目中实践过了，不可能被一句轻描淡写的“只是对自由职业者有用的小玩意儿，但对我们大型的Web工程毫无意义”所雪藏。因为，本方法的有效性已经在或大或小的项目实际操作中得到过印证。
本书的观点比较中庸，有老的有新的，也有各种观点的糅合。你也许会看到自己的思路，也有可能和其他同样优秀的观点混杂。 书中的工作流程并不是一定是对的或者错的，但它会挑战很多深入人心的工作习惯和思维。
这本书会督促你从不同的角度思考，你怎么设计，用什么工具设计。它会挑战你去学习一些HTML、CSS，甚至在可怕的CMD界面下操作命令行。它会鼓励你跳出固有的思维模式和设计工具，学习一些开发者的工具来释放你更多的精力去思考，更快捷高效的工作，而不是仅仅做一个切图仔。实际上，你会很享受需求变更。呃，当然，只是一定程度的变更。
这本书也记录了两年来的试验、观察、阅读、思索和实际操作。这个工作流程对我有效，但并不意味这里的描述也对你们一样起作用。我邀请你来发现对自己、客户和团队有用的部分。我的希望是，至少书中部分思想可以改变你设计的方式和你对设计的看法。
希望你获得乐趣，不断学习。
[1]JavaScript polyfills指一些浏览器暂不支持的高级CSS或者HTML特性，使用JavaScript实现类似的功能，作用是让使用高级CSS和HTML功能的开发者不用纠结浏览器兼容性问题（译者注）。
