在Smashing Magazine上看到一篇文章《Next-Generation Responsive Web Design Tools: Webflow, Edge Reflow, Macaw》，抛开响应式不谈，这些工具的出现首先抛弃了PC选择在Web上提供设计服务，这让我有点疑惑，网页上又画图又Coding，借用段暄的一句解说词：“为什么会这样，为什么？”。当我打开Webflow的工作界面的时候，一种似曾相识的即视感，这不仅个工具，它可以干掉前端（至少是重构工程师），这太棒了。

我算是一个同时有四年前端和设计经验的交互设计师，两年前我从腾讯ISUX前端团队回到学校，结束了2个月的实习工作，选择回归设计，至少现在看来是个不错的选择，在当前的工作模式下，我更爱设计。去实习之前我只写自己的设计稿，在公司前端工程师（也有人说是切图仔啦）只负责把设计师的设计稿还原成一个兼容性和交互性都不错的页面，前端需要关注布局方式和设计细节以及交互模式，期间要经历多次的沟通和确认。这种前端和设计分割的工作模式虽然有利于公司业务流程的并行高效，但是为什么设计师画的图一定要找一个不熟悉设计稿的工程师实现呢？我自己的设计稿都是自己写的，对设计细节的还原以及编码的灵活性可以说更加follow designer’s heart。我更愿意实现自己的设计，或者把自己的设计给别人实现，这也是我最终选择设计的主要原因。

回到上一个问题，国外的设计师大部分都是可以独立Coding的，国内的大部分的设计师只可以独立完成设计，所以前端工程师这个行业有多么火也是可想而知的。为了铺垫，我想介绍一下前端的工作，这里只涉及到重构层面的，前端是个大工程，重构也只是其中一部分。

如果把前端工程想象成建筑的话，工程师更关注的是How To Build。构建一个页面大体上是围着布局、定位、样式这三方面转，一个HTML Tag是一个元素，在页面上有自己的布局、定位和样式，而它们又是由一系列组合属性来定义和表示的。多个元素按照特定的文档流来组织有序的呈现在浏览器里。CSS其实是一个很大的属性库，遇到一个元素，先按照设计稿分析出三方面的特征，然后从库里取出适合这个元素的属性，赋特定值，这些新定义或者继承的属性共同作用在这个元素上，就算是垒好了一块砖头。所以前端工程师也是按照这样的工作模式，按照设计稿一块一块的垒砖头，当然聪明的工程师会一大块一大块垒，这也就衍生出了很多前端技能和优化流程的工具，这里就不多介绍了。

Webflow —— http://webflow.com

铺垫了这么多，终于可以揭开Webflow的面纱了。Webflow是2014年才横空出世的一款基于Web的网页生成工具，它的特点是可以将可视化的设计智能的转化为更干净、轻量，更具语义化的前端代码，这样设计师只需要掌握基本的CSS属性就能制作出一个可以直接上线的网站，不仅仅是一个交互demo。

Webflow的设计理念很好的模拟了前端工程师的工作模式，先注册进入新建一个project，这里webflow提供了很多高质量的网页模板，有免费版也有收费版，收费版大多是特约设计师的设计作品，当然也可以选择一个空白的模板一切白手起家，如果有过Keynote或者Powerpoint使用经验都会比较熟悉这种模式。选择一个模板之后，就进入编辑界面了，UI和PS非常相近，对设计来说也是个很自然的过渡。下面介绍几个核心功能：

添加语义化的页面元素

可添加的元素分为六类：Layout、Basic、Typographic、Media、Forms、Widgets，分别都对应到HTML里元素或者布局，下面分别介绍一下：

• Layout：网页设计中经常使用到得布局，有固定的大框架比如section、container，也要灵活的Grid布局，可以自定义Column的数量以及比例，使用Grid布局也有助于响应式的实现。

• Basic: 这里涉及到就是HTML里基本的Tag，Block(<div>)、List(<ul><li>)、Link Block(<a>)等，这几个也是实现过程中最常用的骨架构件。

• Typographic：这部分主要是文本元素。Heading(<h1>...<h6>)、Paragraph(<p>)，这里也要强调一下语义化，判断清楚要添加的文本是标题还是段落。

• Media：媒体当时就是图片和视频了，视频这里介绍一下你可以插入一个在线的标准代码，比如<embed>、<object>等，预览之后就可以直接播放。

• Forms：表单元素，输入框、文本框、单选、多选、下拉等，可以对某个表单元素定义属性，比如一个Text输入框，可以定义占位文字（Placehoder）、是否为必填项(Required)、是否需要自动对焦（Autofocus），HTML5的新属性都可以在属性设置中看到，is that cool? 

• Widgets：可以在页面中插入一些可执行的控件，比如Tab、Slider、NavBar、Google Map、Social Link等。值得说的一点是这些控件用户只需要设置内容、数量、图片，预览可以直接实现功能，这一点对设计师来说简直是福利啊，就是是专业的前端来写也是要费一些功夫的。 

以上介绍的可添加元素实际上就是前端工程师在编写HTML代码时的主要工作，各种复杂的布局、自定义属性都可以通过设置来完成，需要强调的是在选择元素时建议选择符合语义的，另外就是元素之间的嵌套关系，是父子关系还是兄弟关系，可能也是没有实际写过代码的设计师有点捉急的部分。

给添加的元素定义样式

这部分是很重要也是比较细碎的部分，大部分的CSS代码都是在干这件事情。一个页面中的元素的样式是有几类属性组合决定的，比如一个文字标题，在页面中要有自己的Position（盒模型、定位方式、宽高），还要有文本样式（字号、字体、颜色、行距、对齐方式、文字阴影等）以及基本样式（Background、Border、Shadow、透明度等）。其中Postion的部分需要说明一下，盒模型就举个形象的比喻，故宫里的各路妃子都有寝宫，每个寝宫用宫墙分隔，这个宫墙距外部的其他寝宫的距离就是外边距，用margin表示，宫墙对内部建筑物的间距就叫内边距，用padding表示，margin和padding都有东（you）西(zuo)南（xia）北(shang)之分，页面中也是一样，由这八个值决定一个元素的相对位置。另外定位方式里Float就是指一个元素向左浮动还是向右浮动，也不用管清不清浮动的问题，相对定位（Relative）、绝对定位（Absolute）、固定定位（Fixed）不想仔细说了，戳个链接前端观察Position去了解一下呗~

除了这部分在Word里常见到的属性之外，webflow还增加了CSS3的一些效果属性，圆角、阴影设个参数就搞定了，而且阴影和PS里的阴影面板一样可以设置详细的参数，设计师看到应该高兴了。还有更值得高兴的，可以直接在webflow里做CSS3动画...要不要这么腻害！CSS3 Transition全都搬过来了，啪啪啪设置一下要改变的属性、持续的时间、执行动画的曲线就可以做一个动画了，不用管什么浏览兼容，动画的写法，呜，看到这里就想起当年写个动画要写多少行代码了的那个悲催了...

注意给一个元素定义样式之前要先给一个样式名，一个元素可以有多个样式名，不同元素可以使用相同样式名继承共同的样式。这部分是比较琐碎，但是应该难不倒设计师，有天赋嘛~

查看页面的文档结构

HTML页面都会有个文档结构，就像一篇论文的提纲一样，可以清晰的查看你添加的各个元素之间的层级关系，可以拖拽调整。

响应式设计

用webflow完成响应式设计也是很方便的，我看过之前有人很辛苦的写了一篇在Axure中完成响应式设计，简直欲哭无泪...交互花了很多时间做了个响应式demo，然后还是要交给前端工程师实现啊，并没有减轻前端工程师的工作量，所以我认为是事倍功半的。但是webflow就很好的把设计和实现同时搞定了，这才是有意义的效率上的提升。

webflow的响应式提供了三种设备的尺寸，分别是PC、Tablet、iPhone，iPhone上提供了横竖屏两种view，断点（breakpoint）目前不可以自定义。可以在left-sidebar切换四种不同的视图，然后调整不同分辨率下的样式和定位。下面是我插入的一张图片在三种不同的设备下的响应式设计，主要是变宽的百分比。具体的Case大家具体分析喽，这里也不是要将如何进行响应式设计的~对了，如果想针对PC上设置更详细的断点分割，就要在代码里自己添加@media query了。

导出代码

设计过程中可以随时预览生成的代码，可以导出Zip，我目前看到的版本貌似是不能直接修改代码的。

哇，废了好大劲介绍webflow，本来不想说这么详细的，但是最后写着写着还是想给设计师多普及一些前端的基本知识，用起来更得心应手。从上面介绍了很多术语上可以看出来，webflow的设计是很贴合于HTML和CSS的，完全地模拟了前端工程师的工作方式，但是省去了很多重复体力活，让设计更直接的转化为可用的代码。另外我比较推崇webflow的原因是它对新技术（HTML5、CSS3、WebFont等）的支持，背后其实融合了很多个子系统，是个很大的工程。

最后想说一下为什么要写这篇博客，在现在互联网企业的工作模式下，设计师和前端开发每天都有做不完的需求，有很多时间都花在沟通、确认以及前端工程化中的重复性工作，这些夹缝中的冗余也是从业者迫切想清理的，可以利用这些时间做更多地创新性的工作，以此来提高自己和企业的效率。我也希望通过这篇文章来鼓励很多排斥技术或者害怕技术的设计师，你们可以做的更多，不能让技术成为阻碍设计、阻碍创新的魔障，从目前的趋势来看，设计更应该成为技术和商业的推动力，Change By Design, you can make it!

工具终究是工具，能解决问题也能产生问题，总会有不尽人意的地方，都是孰能生巧。

苏塔，是没有脚的少年             原文请戳：http://suta.im/?p=385

http://suta.im