Brad Frost:TechCrunch响应式设计之路

Brad Frost在2013年使用响应式设计技术对著名的技术创业网站TechCrunch进行了重新设计,以适应多屏幕尺寸移动阅读的需要,

开发团队通过该项目得以重新审视新型网页设计流程,本文是他的精彩自述。

(注:原文发表在技术创业微门户:踏得网(Techbrood.com))

设定项目预期(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是被推荐的内容。

Brad Frost:TechCrunch响应式设计之路_第1张图片

Brad Frost:TechCrunch响应式设计之路_第2张图片


建立这些信息模式的好处在于,我马上就可以在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 Tilehttp://styletil.es/要具体得多,不过仍然不是一个全面的设计对象。下面是一个例子说明在各个屏幕尺寸下,界面如何进行适配:

 Brad Frost:TechCrunch响应式设计之路_第3张图片

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

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

 

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) :)



by iefreer

你可能感兴趣的:(响应式设计,TechCrunch,原子设计,后PSD时代)