作者：Sandijs Ruluks
译者：陈朝（量子熊猫）
文章选自：http://blog.froont.com
要把网页设计稿用代码实现出来，需要一大堆取巧的办法，我意识到这件事时，曾对网页设计感到腻味。看起来，每个简单的网页问题都有太多办法解决，每个办法却总可能在某些浏览器里不能正常工作。有件事总让我困惑，为什么还要把工作划分为做设计和写代码？为什么现在困难的事情变得简单了，但是简单的事情却有了更多难点？所以，与其争论设计师是否该学编程或者开发者是不是要会设计，先让我们达成一点共识：互联网是如何演化的，以及我们该如何弥合代码与设计的分裂。
互联网设计之前的黑暗时代（1989）
互联网设计的开端可是相当黑暗，屏幕确实就是黑漆漆的一团，只有几个单色像素闪烁其间。能用作设计的只有字符和制表符（tab键）。所以，让我们快进到图形化用户界面成为互联网主流的时代吧，那是用表格（table）编写网页的拓荒时代。
表格——开端（1995）
我们了解的网页设计发端于能显示图片的浏览器诞生。HTML语言中已经存在的表格（table）概念是最接近于结构化信息的解决办法。那时的网页设计就是表格套着表格，用聪明的办法套上一堆静态单元格和动态单元格，这种方法起源于David Siegel的书《制作杀手级网站》（Creating Killer Web Sites）。表格本来是结构化数字用的，用它来处理布局感觉不大对头，不过这还是那会儿设计网页的常见办法。随之而来的问题是，维护这些脆弱的结构特别困难。也是这个时代，术语“切图”大行其道。设计师能设计酷炫的布局，但是对于开发人员，还是需要把它想办法切成小块儿，让设计能够实现。同时，表格也有一些很棒的特性，比如能够根据像素或者百分比垂直对齐元素。这么做的好处是，这是我们当时最接近网格设计的办法。也是那会儿很多开发者决定，觉累不爱前端开发。
JavaScript援兵降临（1995）
javaScript是对HTML种种局限的解答。比如，来一个弹窗，动态调整一些东西的顺序？那就用JavaScript吧。然而，JavaScript的主要问题是，它是在整个网页结构上头又加了一层，只能单独的加载。懒惰的开发者常常用它打个简单的补丁了事，但是如果使用得当，它又异常强大。如今我们如果能用CSS实现一个功能，就会避免用上JavaScript，但是这种语言地位依然稳健，不管对于前端（例如使用JQuery）还是后端（Node.js）。
自由开发的黄金时代——Flash（1996）
一种新技术诞生了，应许了前所未见的自由，打破了过去网页设计的局限。设计师可以任意使用各种形状、布局、动画、交互，使用各种字体，全都靠一个工具，这个工具就是flash。工作完成时就打包一个文件，丢给浏览器让它显示出来。如果用户安装了最新版的flash插件，也有耐心等它加载出来，flash就能像变戏法一样工作。这是启动页面、开场动画、各种交互效果的黄金时代。不幸的是，flash不够开放、不利于搜索引擎抓取，而且特别吃处理器。Apple在2007年决定在第一代iPhone上禁用flash，这时至少在网页设计领域，这种技术开始衰落了。
CSS（1998）
与flash同时，从技术角度出发，解决设计结构化的办法诞生了：连级样式表CSS（Cascading Style Sheets ）。它的基本理念是把内容和展现分离开来。因此，视觉和格式用CSS来定义，内容则用HTML定义。第一版的CSS远谈不上灵活，但更大的问题是有多少浏览器支持它。过了好多年，浏览器才开始全面支持CSS，而且还总是bug连连。这个时代，往往一个浏览器支持了最新的特性，另一个又不支持，这对于开发者来说简直就是噩梦。说白了，与其说CSS是一种编程语言，不如说它是一种声明语言。网页设计师应该学会编程么？也许吧。那么他们应该理解CSS如何工作么？当然啦！
移动互联网崛起——网格与框架（2007）
在手机上浏览网页本身就是个挑战。除了各个设备不同的布局，还有内容一致性的新困难：在小屏幕上是保持一致的设计，还是需要简化？如何把那些闪来闪去的小广告显示在那么小的屏幕上？加载速度也是个问题，而且加载一大堆内容会很快烧掉你不少流量费用。改进的第一步是一栏一栏的网格。多次迭代后，960网格系统胜出，十二栏划分的网格变成了设计师的日常。下一步，是将表单、导航和按钮等常用元素标准化，变得可以复用。简单来说，就是制作一个视觉元素的库，需要的代码已经包含其中。Bootstrap和Fountation这样的前端开发框架是其中的赢家，伴随而来的是网页与应用之间界限逐步模糊。代价则是设计变得雷同，而设计师如果不理解代码如何工作，就很难掌握这些技术。
响应式网页设计（2010）
一个叫Ethan Marcotte的聪明人决定用现成的内容，不同的布局，挑战一下现有的办法，他的办法被称为响应式设计。技术上，我们还是使用HTML和CSS，所以这种设计是一种概念上的演进，尽管对此还是有很多误解。对于设计师来说，响应式意味着仿造出多重的布局；对于需求方，则是：“这玩意儿在手机上能用”；对于开发者，这意味着图片如何访问、下载速度、页面语义元素、移动端还是桌面端优先等等问题。最主要的优点还是内容一致性，也就是一个网站在各个设备上都能工作。希望我们都能同意最后一点，至少啦。
平面之年（2010）
设计多种布局要花更多时间。还好我们决定简化过程，去掉酷炫的阴影效果，重视内容的优先级，回到设计的本源去。精美的照片、字体、犀利的矢量插图和深思熟虑的布局，我们现在就是这么做设计的。简化视觉元素，做所谓“扁平设计”也是这个过程的一部分。这种设计的优点在于我们可以更好的思考文案、思考信息和内容的层级。那些带高光的按钮被图标取代，也让我们能利用矢量图片和图标；同时，网上字体也提供了精美的排版。有趣的是，网页设计又一次接近于当年它诞生时的样子。不过当然啦，青春岁月从来不曾虚度。
光明的未来（2014）
网页设计的圣杯曾几何时只是想办法精确的让东西在浏览器里显示出来。想象一下未来，如果设计师能直接把元素往屏幕里一放，清晰的代码就自己写好！我不是说未来就是颠覆现有秩序，而是说如果设计师能够得到足够的灵活性与控制能力。想象一下工程师能够不去过问浏览器兼容性，而是着手解决实际的问题！
有很多技术的新概念正在朝着这个方向演进。CSS中的新单元（new units）如vh、hw（视域的高和宽）让人能非常灵活的控制元素位置，也能解决困扰许多设计师的问题：为什么让一个元素垂直居中在CSS中这么难搞。Flexbox是另一个CSS中的超酷概念，它允许我们轻松设置一个布局的属性，而不需敲上一堆代码。最后还有“网页零件”（web components），算是更大的努力。它由一组元素打包在一起，例如图片集、注册表单等。它提供了更简单的工作流程，帮助我们把页面元素变成搭建网页的零件，可以轻松复用、独立修改。
对于互联网的未来，你怎么想呢？
联系客服
