Brad Frost：Techcrunch响应式设计之路

Brad Frost在2013年使用响应式设计技术对著名的技术创业网站Techcrunch进行了重新设计，以适应多屏幕尺寸移动阅读的需要，开发团队通过该项目得以重新审视新型网页设计流程，本文是他的精彩自述。本文中提到的原子、分子、组织这些术语是Atomic Design里面的专用词汇。

设定项目预期（Set Expectations）

很多使用后PSD时代设计流程（Post-PSD Era）效果不佳的原因在于在项目开始的时候，没有能够跟客户和同事一起设定合理的项目预期。 

我们尽了最大的努力来让客户理解网页界面面临的现实挑战（不用多说什么，给客户看一下下面的图），那么由于我们的网站需要是流动的（Fluid），我们的设计流程也要与之相匹配。

我们帮助大家理解开发是设计过程的一个重要组成部分。在Techcrunch项目开始之前的几个月里，我正在深入思考什么才是终极的原子设计（Atomic Design），我甚至已经开始着手建立一个强大的模式库，配合界面模式来组装页面，这个工具最终形成了Pattern Lab项目，

我给项目组所有人介绍原子设计并演示了Pattern Lab。我们讨论了创建一个设计系统和临时收集的页面模板相比的好处，似乎每个人都接受了，并未对我的看法咬牙切齿。

开工和计划（Kickoff and Planning）

我们在Techcrunch的办公室启动这个项目，在那里和利益相关者（Stakeholders）进行了交谈，做了一个20秒的直觉测试（Gut test），以及设计工作室练习，以便于让大家达成一些共识。关于这些练习你可以多了解点，因为我们在娱乐周刊（Entertainment Weekly）项目中也重复了这些有效的练习，我还把这些用在当前的Pittsburgh Food Bank网站重构中。

草图（Sketching）

1.建立全网站范围的信息结构模式

Jennifer（信息架构师）从整个网站的视角提取出共用的信息结构，比如”rivers”,”islands”，river是信息列表比如新闻报道，而islands是被推荐的内容。

建立这些信息模式的好处在于，我马上就可以在Pattern Lab中建立对应的原子设计系统（Atomic Design System）里面的组织（Organisms），根据Jennifer的灰色背景的区块草图，我很快使用一个.fpo类构建了HTML原型，一旦建立好了，后面改动线框图（wireframes）就如同拷贝粘贴一个include那么简单。

除了把Jennifer的草图转化为Pattern Lab中的FPO区块外，我还能够马上开始编写一系列的分子（molecules）和组织（organisms：文本元素（粗体，重点，块引用，突出引用等），图片类型（logo，文章图片，头像等），表单（搜索、订阅、提交内容、联系表单等），广告位元素以及更多。

2.建立视觉方向(Establishing Visual Direction)

与此同时，Dan（视觉设计师）开始构建视觉方向，由于Techcrunch的主要功能是提供用户阅读信息，Dan认为用户第一视觉感受会是字体类型（Type）。因此使用Typecast工具http://typecast.com/，Dan迅速构建了一系列类型方案和用户沟通，用户得以反馈一些意见：比如文字块太挤了，太细长了等等。

动手开发（Rolling Up Our Sleeves）

一旦我们对信息架构、视觉效果、HTML脚手架原型有了具体的感受，我们就可以开始全面的设计和开发整个网站了。

1. 首先是Jennifer构建出所有用例下的HTML线框图，而我则根据线框图开发出每个页面的模板（一开始只是分子、组织这些元素的集合，样式后面再添加）；

2. 然后Dan进行元素拼贴（Element Collages），元素拼贴比样式底板（Style Tile）http://styletil.es/要具体得多，不过仍然不是一个全面的设计对象。下面是一个例子说明在各个屏幕尺寸下，界面如何进行适配：

这里很好的是，使用元素拼贴，Dan不需要担心用户会像对待整个页面设计那样分散注意力，从而可以集中对比如页面头部Header提交反馈意见，一旦客户满意于Header的设计，我就可以开始遵循那样的视觉方向，开始补充样式。我实际是从Header和Footer开始这样做的。

现在可能看起来有点怪了，从客户的角度而言，部分页面已经从线框图转变为了最终的设计，而部分仍然保留为灰色区块，不过由于我们和客户保持积极的沟通，他们理解并实际上参与了整个过程，因此我们可以得到正确的反馈。

3.完整的设计对象（comps）

不管信或不信，我们最终还是生成了部分页面的完整设计图。糟了!可恶!

不过和以往项目不同的是，我们并没有跟着完整设计图走，实际上comps是整个过程的结果，在Dan最终做出部分comps的时候，我们已经构建了大部分的网站原子和组织，并深入理解了我们的设计的系统状态。

我们把comps提交给客户，客户反馈意见，这时我可以直接在HTML上修改，因此我们并不依赖于完整的设计图(comps)。

这样，我们给网页组织（Organisms）创建了视觉效果，并在的确需要完整图纸的地方给出了设计稿。我还将适当的为每个organism添加样式，慢慢的但确切的把所有剩余的灰色区块全部实现。

在此过程中，有些HTML看起来效果不佳，我会和Dan直接通过HTML页面沟通并进行小的调整修改，最终，我们意识到有些Photoshop文档是不必要给客户看的。事实上，这些文档是给我们自己看帮助完善一些细节的。

所有的页面模板都出来后，我们进行了跨浏览器，跨设备以及全部用例的测试（在开发过程中已经进行了部分核心功能的测试），最终提交给了10up团队在Wordpress后台上进行了实现。很好的地方是，我们不只是提交了一些页面模板，我们还构建了可靠的设计系统，可以被复用和进行后续版本功能演进。

我们学到的（Lessons Learned）

1.不是Agile也不是Waterfall，我不知道该怎么称呼我们的整个流程，我只知道我们积极沟通协作（远程的），保持对客户的真诚和对自己工作的认真。

2.并行工作（Work in parallel）

在可能的情况下，并行开展工作。把事情分解开来，统筹交叉进行。

3.缓慢但确保质量（Slowly build fidelity）

感觉就像在雕塑，先取一小块石材，体验材质和培养感觉，然后塑造头部，肩膀，身体，脚...直到完工。和雕塑不同的是，我们拥有Ctrl+Z(Cmd+Z) ：）