Brad Frost:Techcrunch响应式设计之路

techbrood 发表于 2014-04-16 02:25:52

标签: 响应式设计, 原子设计, 后PSD时代

- +

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

possitive(15) views26057 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • OpenGL/WebGL顶点坐标变换过程简介

    世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...

  • 谷歌ARCore技术特性简介

    谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...

  • A-Frame WebVR(网页虚拟现实)快速开发入门教程

    WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的

  • 深入理解CSS3滤镜(filter)功能和实例详解

    CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
    把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

  • HTTP1.1协议现状、问题和解决方案

    HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

  • Three.js入门教程6 - 创建全景图和纹理

    全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...

  • Three.js入门教程2 - 着色器(下)

    这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • 如何使用CSS3实现一个平滑的3D文本标题

    要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...

  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Proce...

  • 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

    在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop

  • 更多...