网页设计简史看设计&代码“隔膜”

本文来自网易云社区

做者：马宝

设计与代码之间隔膜所在？既然你诚心诚意地问了，我就大发慈悲地告诉你。为了防止地球被破坏，为了维护世界的和平，为了贯彻爱与真实的邪恶~，我是穿梭在前端与设计之间爱与美丽的落花生（化身），可爱又迷人的变态角色（二者之间的纽带），白洞，白色的明天~~嗯， 彷佛很跑偏，客官莫急带着回忆往下看神往而又心动到不行的GIF神图 勾起了我多少的童年回忆。

许多网页设计的问题并不止一种解决方案，可是不多有完美的方案能解决全部的浏览器兼容性问题。最令我纳闷的是，为何会有作设计和写代码的分工？随着技术的发展，许多在过去难以解决的问题如今能够轻松搞定，但为何与此同时一些简单的事情反而愈来愈难以实现？这些问题的答案并非简单的是与否，对与错，也许咱们须要从网页设计的整个发展历程来寻找答案，找到真正弥合设计与代码之间隔膜的缘由所在。

原文.^1做者是网站Froont.com的联合创始人Sandijs Ruluks。

1.网页设计：黎明前的黑暗（1989）

在互联网真正开始之时，黑色的显示屏仅能显示单色的像素。能够说，当互联网天地初开之时，Web Design 仅仅意味着字符和空格的排列组合。虽然图形化的界面早在80年代初就有了，但在此时普及率并不高。直到90年代，图形化界面才真正进入千家万户，而那时候，才是属于互联网的狂野西部。

诸多85后的同窗，比方说我，那个时候正在玩泥巴吧!对于网页设计的暗黑时代，我惟一仅存的记忆应该是上学那会儿学过的QBASIC界面，

INPUT i
mabao=250*iPRINT mabao
END

2.史上第一个网页被建立（1991）

蒂姆·伯纳斯－李创建的第一个网站（也是世界上第一个网站）是http: //info. cern. ch/，它于1991年8月6日上网，它解释了万维网是什么，如何使用网页浏览器和如何创建一个网页服务器等等。蒂姆·伯纳斯－李后来在这个网站里列举了其它网站，所以它也是世界上第一个万维网目录。

3.表格（table）：网页的兴起（1992）

可以显示图片的浏览器的诞生，是促使网页设计这个行业诞生的重要先决条件。实际上在当时，最接近于信息结构化的概念，是HTML中已有的元素：表格（Table）。因此，David Siegel 在他的网页设计书《Creating Killer Sites》讲述了他设计优秀网站的秘诀：在表格中嵌套表格，将静态的表格和动态的表格以巧妙的方式结合到一块儿。尽管表格自己是用来承载数据的，用来承载内容和图片有点奇怪，可是在那个时代，这种方法依然显得颇为靠谱，而且大行其道。

网页设计所面临的另一个问题，就是如何保持网页那脆弱的结构。也正是由于这种需求，切片设计（Slicing Design）逐渐流行了起来。设计师建立出漂亮的网页布局，随后开发者将整个设计稿切片，找出呈现设计的最佳方法。另外一方面，表格还有一些炫酷的功能，好比垂直对齐，以像素为单位或者以百分比来控制对齐。在那个时代，表格但是近乎栅格系统通常的灵活的设计神器，也正是所以，那个时代的开发者并不喜欢前端的代码。（表格嵌套表格有多乱？）

之前作网站的作法，1. PS中的切片切一下，2. 导出web 所用格式，3. 选上全部切片“html＋图片”删除多余的图片，写个title；一张静态页面HTML就完成了。（如今不少专题页 快速的实现方法也是这样的，你们都懂）

4.来自JavaScript的救援（1995）

JavaScript的出现补足了尚且原始的HTML。举个例子，若是你想写个弹出窗，或者想动态修改某些对象的顺序？HTML不行，可是JS能够！不过此时JS的主要问题在于，它处于整个网页布局的顶层而且须要单独加载。不少时候它仅仅被懒惰的开发者用做一个简单的补丁，但若是使用得当，JS能够很是强大。今天，一样的功能若是CSS能实现，咱们会尽可能避免使用JS。不能否认的是，JS自己确实很强大，前端经常使用的jQuery，后端的Node.js都是不可多得的好东西。

nej.netease.com 前端仔赶忙膜拜飞哥吧！ @caijf@corp.netease.com

5.Flash：自由的黄金时代（1996）

做为一门新技术，Flash为网页开发者/设计师带来了史无前例的自由，它打破了以前网页设计所固有的限制。借助Flash，设计师能够为所欲为地在网页上展示任何形状、布局、动画和交互，可使用任何喜欢的字体，他们借助Flash熔于一体。全部的这一切最终会被打包成为一个文件，而后被发送到浏览器端显示出来。这也就意味着，用户只须要拥有最新的Flash插件和些许等待时间，就能够享有一个魔术般的网页。这是启动页面（splash pages）、介绍动画以及各类交互特效的黄金时代。不幸的是，这种设计并不开放，也不利于搜索，还须要消耗计算机大量的运算能力。2007年，当苹果发布他们的第一台iPhone的时候，就决定完全放弃Flash，也正是在这个时候，Flash开始走下坡路——至少在网页设计领域。

http://www.thefwa.com 曾经最喜好的FLASH 全站收集没有之一，如今也改为HTML，里面还有少许的全flash 站点，minisite

6.CSS的诞生 (1998)

差很少是在Flash崛起的同时，一种更好的网页结构化设计工具CSS诞生了。CSS的基本概念是将网页内容的样式分离出来，因此网页的外观和格式等属性将会在CSS中被定义，但内容依然保留在HTML中。早期版本的CSS并无如今那么灵活，和许多新事物同样，它最大的障碍在于许多浏览器还没来得及接纳这一新技术，对于开发者而言，这是一个头疼的事情。须要明确说明的是，CSS并不是全新的编程语言，它仅仅只是一种声明性语言。那么网页设计师须要学习编程吗？可能须要。可是网页设计师须要懂得CSS么？固然须要。

网页设计师须要懂得CSS么？固然须要。

7.栅格与框架：移动端的崛起（2007）

此刻，在手机上浏览网页本就是一种全新的挑战。设计师除了要为不一样设备设计不一样的布局，还面临着内容控制的问题：小屏幕上展现的内容要和桌面端同样多，仍是须要剥离开来？桌面端网页上闪亮精致的小广告要如何在手机上呈现？加载速度也是一个大问题，移动端设备的网络加载速度不够快，并且桌面端网页会消耗大量的流量。网页设计亟待改进。

第一个重大的改进是栅格系统的出现。通过摸索，960栅格系统最终胜出，经典的12栏栅格被设计师们普遍的接纳，甚至成为许多设计师最经常使用的设计工具。接下来，各类常见的设计元素诸如表格、导航、按钮被标准化，打包成为可复用的套件，这基本上就构成了视觉元素库，其中还归入了常见的代码。其中最典型的表明就是Bootstrap和Foundation，它们也使得网站和APP之间的界限逐渐模糊。固然，它们也不是没有缺点，借助这些库设计出来的网页每每大同小异，并且网页设计师要想使用它们还得深刻了解相关的代码知识。

8.响应式网页设计（2010）

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

9.扁平化的时代（2010）

设计网页布局总会花费大量的时间，好在这个时候咱们开始抛弃复杂的光影效果，从新专一于根本的内容呈现。在此以前，网页设计讲求精美的图片和排版效果，漂亮的插画与周到的布局设计，而简化这些视觉元素以后，就是咱们说所的“扁平化设计”。将复杂的效果淡化以后，视觉的扁平化，也促使内容和信息层级的扁平化。充满光影特效的按钮被扁平化的图标所替代，矢量图形和图标字体也开始被大范围使用，网页字体和版式设计的结合令网页视觉更加漂亮。有趣的是，这时候的网页设计开始有返璞归真的感受。

10.光明的将来（2014）

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

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

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

原文地址：
link Froont 优设网译者：@陈子木 http://www.uisdc.com/brief-history-of-web-design

扩展阅读： link 一像素的恩怨情仇！程序猿与设计狮之间的那些事儿

本文来自网易云社区，经做者马宝受权发布 

相关文章：
【推荐】 【你离硅谷只差一步】网易中国创业家大赛项目火热征集中