>>>  創業先鋒 眾人拾柴火焰高  >>>

簡體     傳統

现在，有很多工具可以帮助我们去做设计，但我们还是得应付不同的浏览器。这让人不禁问：为什么复杂的事情可以变简单，简单的事情反而复杂了呢？

我们先放一下关于设计师该不该学代码的争论。去看看网页设计的历史，看人们是如何跨越编代码和设计之间的鸿沟的。

网页设计的暗黑时代（1989）

网页设计史开始于一片黑暗之中——屏幕都是黑的，只有单色的像素浮在上面。设计只能用字符和表格实现。所以让我们快进到有平面用户界面的时代——表单的拓荒时代。

表格——一切的开始（1995）

浏览器的诞生使网页设计迈出了第一步。最靠近信息架构的概念是HTML中的表单。从David Siegel的书Creating Killer Sites开始，人们尝试用表单嵌套表单，将动态单元格和静态的相结合。虽然把表单赋予非数据处理的功用有点不对劲，但这在当时是一种惯用的手法。另外一个问题是如何去权衡这些碎片化的结构。当时还有一种叫slicing design的方法很是流行。设计师来把控结果，但是网页工程师们会把网页肢解成小的部分，然后研究如何让设计得到顺利运行。另一方面，表单有一些很好的功能，比如让元素垂直对齐，可以用像素或比例来控制它的大小。表单最大的优势是它很靠近网格的状态，不过，也就是从那时起，很多工程师决定不再做后端的工作。

雪中送炭的JavaScript（1995）

HTML条件有限，怎么办呢？JavaScript是应对这个问题的答案。比如，在需要弹窗的时候，设计师就需要调整在网页上出现元素的顺序吧——JavaScript就能解决这一点。然而，JavaScript最主要的问题是它置于整个网页结构之上，浏览器加载的时候需要单独处理它。想偷懒的开发者经常使用它，但不得不承认它的确也很有用。不过，现在我们则尽量规避Java，而去用CSS。现在，JavaScript语言仍然流行——在前端有jQuery，在后端有Node.js。

自由的黄金时代——Flash（1996）

打破网页设计限制的还有一项新技术——它可以实现任一图像、图层、动画、交互的观感，这项技术就是Flash。设计师在做完文件以后需要把它打包成一个文件夹，然后送到浏览器上去展示。只要用户下载一个最新的Flash插件，等一段时间，就可以看到Flash呈现的魔幻般的效果。Flash带来了“飞溅网页”（Splash Pages，有很多弹窗和贴图，引导用户转向其他站点）的黄金时代。但是，Flash对搜索并不友好，而且也会消耗很多的流量。2007年，苹果发行第一部iPhone的时候将Flash拒之门外，随之，网页设计上的Flash时代宣告结束。

CSS（1998）

与Flash同时出现的还有一项重要技术——Cascading Style Sheets，也就是CSS。其最基本的思想是把展示的样式和内容本身分离。样式通过CSS语言编写，内容用HTML语言编写。CSS的第一个版本很死板，但最大的问题还是对不同浏览器的适应。浏览器花了几年的时间去实现对CSS的支持，那期间，开发者要同时应付支持CSS和不支持CSS的浏览器。

移动端兴起——网格和框架（2007）

网页要出现在手机上，它本身面临着很大的挑战。设计师们不仅要考虑在不同尺寸大小的屏幕上的设计要做怎样的变化，还要考虑在小屏幕上如何放置广告，等等。加载速度也是必须考虑的因素，如果下载了太多的内容，流量会走得很快。第一个改善这些问题的发明是网格。再数次实验以后，960网格系统胜出，设计师开始运用12栏的模式进行设计。第二部是将表单、导航、按钮等等进行规范化设计。比如建立资料库将这些数据的模式纪录下来。而这使Bootstrap和Foundation成为了大赢家，这也造成了网页和APP之间的界限开始模糊。缺点是，设计师还是不能直接知道代码是如何影响产出的。

响应式设计（2010）

一个名叫Ethan Marcotte的人想要挑战一下当时的情况，想要同样的设计在让不同的设备上显现，于是，响应式设计诞生了。虽然还是用了HTML和CSS语言编辑，但概念上已经出现了跨越。虽然这其中有很多误解，但在设计师眼中，响应式设计意味着在不同的平台上做一样的事情。对客户来说，是网页能轻松地在移动端上实现了；对于开发者来说，这意味着要改变图片的处理方式、优化了下载时间，等等。最主要的好处还是，响应式设计让内容的制作变得更简洁、更纯粹。

扁平化设计（2010）

我们在繁复的设计上耗费了太多的时间，幸运地是，我们最终回归了设计的根本——去除了那些不必要的阴影，用心挑选好的照片、字体等等。我们把简化设计元素的趋势称之为“扁平化设计”。这给设计师带来最大的好处是设计格式极易复制，拉出文本信息的层次。还可以拿很多精心设计的icon去做按钮，造出很好看的字体。这一切，使网页设计似乎又回到了从前。

走向未来（2014）

现在，设计师进行网页设计的过程越来越视觉化了——想象一下设计师只是在屏幕前挥舞手指，就能摆弄好各种元素的状态；想象一下开发者再也不用为浏览器的兼容问题发愁，而是去专注解决真正的问题！

技术上，我们看到了一些迎合这种趋势的新创造。比如CSS中的New units，其vh,vw（viewport height and width）让元素的放置更加具有可变性；作为CSS的一部分，Flexbox允许设计师不用写任何代码就能完成简单的页面设计；web components是更大的一块，这意味着一系列的元素可以打包。它引入了工作流的概念，让元素可以更容易地重复使用。

文章来源：Tezign

互联网er的早读课 2015-08-23 08:42:54