WEB—DE：网页设计简史

Evolution-of-web-design

从1990年代初的基本文本编辑的网页开始，1990年代中期的在线网页建设，到上世纪90年代末崛起的flash，再到后来的CSS和Javasvript的崛起，直到现在web 2.0时代鼎盛时期，网页设计经历了多次变革。

这是一段简短的网页设计发展史，我们可以看到技术、设计与思想的演进，看到无数有识之士改变世界的剪影。

HELLO WEB

---

1989：网页设计——黎明前的黑暗

在互联网真正开始之前，黑色的显示屏仅能显示单色的像素。因此当时的网页设计是“极简风”，没有图像，只有单色像素风格的纯文字，Web Design仅仅意味着符号+制表（Tab键）的排列组合。尽管早在80年代就已经有了图形化界面，但普及率就像80年代中国的电视机，低得可怜。

---

1995：表格——网页的兴起

浏览器的出现使网页设计向前迈进一大步。当时最接近于信息结构化的概念，是HTML中已有的元素：table（表格），当设计师制作花哨的布局时，最佳方法就是切片+表格。David Siegel在他的网页设计书《Creating Killer Sites》里面讲述了他设计优秀网站的秘诀：在表格中嵌套表格，将静态的表格和动态的表格以巧妙的方式结合到一起。
为了应对网页脆弱的结构，切片设计（Slicing Design）也流行了起来。设计师设计出漂亮的网页布局，随后开发者将整个设计稿切片，找出呈现设计的最佳方法。另一方面，表格还有一些炫酷的功能，比如垂直对齐，以像素为单位或者以百分比来控制对齐。在那个时代，表格算得上是近乎栅格系统般灵活的设计神器。

---

1995：来自JavaScript的救援

JavaScript 的出现补足了尚且原始的HTML。不过它处于整个网页布局的顶层并且需要单独加载。很多时候它仅仅被懒惰的开发者用作一个简单的补丁，但如果使用得当，JS可以非常强大。JavaScript 可以解决HTML一些局限性，比如，需要一个弹提示，这时就需要JS来实现了。那时背景图像、GIF动画、闪字、计数器等工具迅速成为网页必须的噱头。

---

1996：Flash——自由的黄金时代

作为一门新技术，Flash为网页开发者/设计师带来了前所未有的自由，它打破了之前网页设计所固有的限制。设计师在设计形状、布局、互动以及一些很棒很弦的动画都可以在这一个工具上执行，完成后只是一个单独的文件输出，并能显示在浏览器中。用户浏览它时需要安装插件并等待FLASH加载完成后方可浏览。

不幸的是，这种设计并不开放，也不利于搜索，还需要消耗计算机大量的运算能力。2007年，当苹果发布他们的第一台iPhone的时候，就决定彻底放弃Flash，也正是在这个时候，Flash开始走下坡路——至少在网页设计领域。

---

1998：CSS的诞生

CSS称为 层叠样式表（Cascading Style Sheets）。差不多是在Flash崛起的同时，一种更好的网页结构化设计工具CSS诞生了。CSS的基本概念是将网页内容的样式分离出来，所以网页的外观和格式等属性将会在CSS中被定义，但内容依然保留在HTML中。

CSS的第一个版本很不灵活，但最大的问题是浏览器的兼容性，不同浏览器对CSS的支持不一样，这个花了好几年的时候才得到改进。需要明确的是CSS不是一个程序言语(coding language)，这相当一个声明性的语言。

---

2007：MOBILE——栅格和框架

移动端网页本身就是一个挑战，除了各种不同设备对应不同尺寸的布局，它的内容应该和小屏幕上的相同或是单独剥离出来？是否添加广告到小屏幕上？访问速度也是问题，因为内容太大，访客浏览网页慢、流量增加，从而成本也增加。

第一个重大的改进是栅格系统的出现。经过摸索，960栅格系统最终胜出，经典的12栏栅格被设计师们广泛的接纳，甚至成为许多设计师最常用的设计工具。接下来，各种常见的设计元素诸如表格、导航、按钮被标准化，打包成为可复用的套件，这基本上就构成了视觉元素库，其中还纳入了常见的代码。其中最典型的代表就是 Bootstrap 和 Foundation ，它们也使得网站和APP之间的界限逐渐模糊。

---

2010：响应式网页设计

惊才绝艳的设计师Ethan Marcotte决定挑战传统的网页设计，它让网页在内容不变的前提下，布局随着窗口和屏幕的变化而变化，并且将这种设计命名为响应式网页设计（Responsive Web Design）。网页设计师依然只需要HTML和CSS就可以实现这种功能，不得不承认这种设计理念非常超前。不过大家对于响应式设计依然有些许误解。对于设计师而言，响应式设计意味着为设计许多不同的布局。对于用户而言，响应式设计就意味着这个网页可以在手机上完美浏览。对于开发者而言，响应式设计意味着如何控制好网站图片应付移动端和桌面端，在不同情形和语义下，拥有良好的下载速度和呈现效果，等等。简而言之，就是一个网站能在任何情况下良好展现。至少在这一点上，所有人能达成共识。

---

2010：Hello FLAT

设计一些布局需要大量的时间，幸运的是我们决定抛弃界面上那些花哨的装饰元素（如3D、阴影效果、纹理材质），重新专注于根本的内容呈现。在此之前，网页设计讲求精美的图片和排版效果，漂亮的插画与周到的布局设计，而简化这些视觉元素之后，就是我们说所的“扁平化设计”。将复杂的效果淡化之后，视觉的扁平化，也促使内容和信息层级的扁平化。充满光影特效的按钮被扁平化的图标所替代，矢量图形和图标字体也开始被大范围使用，网页字体和版式设计的结合令网页视觉更加漂亮。有趣的是，这时候的网页设计开始有返璞归真的感觉。

---

2014：光明的未来

技术的革新已经开始将网页设计推动到一个全新的境界。在许多设计平台上，设计师只需要在屏幕上移动不同的控件就可以生成整洁可用的代码出来，并且这些代码非常灵活，可控度极高！试想一下，开发者无需担心浏览器兼容性，可以专注于更加实际的问题！

新诞生的概念正在推动网页设计。CSS中新诞生的属性，诸如vh和vw（viewport height 与 width），就使得网页元素的位置控制更加灵活自由，一次性解决了设计师纠结多年的顽疾。作为CSS一部分的Flexbox则是另一个新事物，它可以快速创建布局，轻松修改属性而无需编写过多代码。

---

2015：前端框架之路

2015将是前端框架相互借鉴相互融合的一年，随着webcomponent的落地，大家都在向标准靠近。实际上所谓的MVVM框架的关键技术就一个：数据与视图的绑定。在Angular/polymer/knockout/vue/avalon 中，这项技术的实现又可以拆分成两个关键点：模板分析和数据监测。而 React 本质上只是View（视图层），它是Facebook所开发的JavaScript框架，它的唯一目标就是构建高性能的用户接口。开发React就是为了解决其他JavaScript框架都未能解决的一个问题-高效地渲染大型数据集。它采用了虚拟文档对象模型(DOM)和拼接机制，这样，每一次对网页做了更改后，React就只更新与更改相关的部分，而不需要重新对整个站点进行渲染。

我们看到在"渲染机制"、"数据绑定"、"组件化"、"模块化"这些关键技术点中各个框架中都有非常精彩的实现，值得深入学习。

Angular VS React

网页设计正在飞速发展，未来还会有越来越多的创新，就让我们拭目以待吧！

欢迎关注我的 GitBook——WooKong
文章来自：WEB-DE