一段简短的网页设计发展史

本文作者是网站Froont.com联合创始人SandijsRuluks。当我发现设计网页有多投机取巧时，我逐渐开始对对对手玩网页代码失去兴趣。的确，许多网页设计问题不止一个解决方案，但很少有解决方案能够解决所有浏览器的兼容性问题。最让我困惑的是，为什么会有设计和编写代码的分工？随着技术的发展，许多过去难以解决的问题现在很容易解决，但为什么同时，一些简单的事情变得越来越难以实现呢？这些问题的答案不是简单的是对是错。也许我们需要从网页设计的整个发展过程中找到答案，找出设计和代码之间隔膜真正弥合的原因。回顾过去的历史，不妨看看2014年最好的网页设计：“爱不释手！2014年最佳20个优秀网页设计：黎明前的黑暗（1989）只能在互联网真正开始时显示单色像素。可以说，当互联网天地开放时，WebDesign只意味着字符和空格的排列组合。虽然图形界面早在20世纪80年代初就存在，但此时的普及率并不高。直到20世纪90年代，图形界面才真正进入千家万户，当时是互联网的狂野西部。表格（table）：网页的兴起(1995)能够显示图片的浏览器的诞生，是推动网页设计行业诞生的重要先决条件。事实上，当时最接近信息结构化的概念是HTML中现有的元素：表格（Table）。因此，DavidSiegel在他的网页设计书中《CreatingKillerSites》它讲述了他设计优秀网站的秘诀：嵌套表格，巧妙地将静态表格与动态表格结合起来。虽然表格本身是用来承载数据的，用来承载内容和图片有点奇怪，但在那个时代，这种方法仍然相当可靠和流行。网页设计面临的另一个问题是如何保持网页脆弱的结构。正是因为这种需求，切片设计（SlicingDesign）逐渐流行起来。设计师创建了一个美丽的网页布局，然后开发人员将整个设计草案切片，以找到最好的方法来呈现设计。另一方面，表格也有一些很酷的功能，比如垂直对齐，以像素为单位或百分比控制对齐。在那个时代，表格是一个灵活的设计工件，几乎是格栅系统。因此，那个时代的开发者不喜欢前端代码。(嵌套表格有多乱？）JavaScript的救援(1995)JavaScript的出现补充了原始HTML。例如，如果你想写一个弹出窗口，或者动态修改某些对象的顺序？HTML不行，但JS可以！但此时JS的主要问题是，它处于整个网页布局的顶层，需要单独加载。很多时候，它只被懒惰的开发者用作简单的补丁，但如果使用得当，JS可以非常强大。如今，如果CSS能够实现相同的功能，我们将尽量避免使用JS。不可否认的是，JS本身真的很强大，前端常用的JQuery，后端的Node.js是难得的好东西。Flash：作为一项新技术，Flash为网页开发者/设计师带来了前所未有的自由，打破了以往网页设计的固有限制。在Flash的帮助下，设计师可以在网页上随意展示任何形状、布局、动画和交互，并使用任何他们最喜欢的字体。所有这些最终都会被打包成文件，然后发送到浏览器端显示。这意味着用户只需要有最新的Flash插件和一点等待时间就可以享受一个神奇的网页。这是启动页面（splashpages）、黄金时代介绍动画和各种互动特效。不幸的是，这种设计不开放，也不利于搜索，还需要消耗大量的计算机操作能力。2007年，当苹果发布第一款iPhone时，它决定完全放弃Flash。正是在这个时候，Flash开始走下坡路——至少在网页设计领域。CSS的诞生(1998)几乎是在Flash崛起的同时，更好的网页结构化设计工具CSS诞生了。CSS的基本概念是分离网页内容的风格，因此CSS中会定义网页的外观和格式属性，但内容仍然保留在HTML中。CSS的早期版本并不像现在那么灵活，就像许多新事物一样，它最大的障碍是许多浏览器没有时间接受这种新技术，这对开发者来说是一个头疼的问题。需要明确的是，CSS不是一种全新的编程语言，它只是一种声明语言。网页设计师需要学习编程吗？可能需要。但是网页设计师需要知道CSS吗？当然需要。格栅与框架：移动终端的崛起(2007)此刻，在手机上浏览网页是一个全新的挑战。除了为不同的设备设计不同的布局外，设计师还面临着内容控制的问题：小屏幕上显示的内容应该和桌面一样多，还是需要剥离？如何在手机上呈现桌面网页上闪亮精致的小广告？加载速度也是一个大问题。移动设备的网络加载速度不够快，桌面网页会消耗大量流量。急需改进网页设计。第一个重大改进是格栅系统的出现。经过探索，960格栅系统最终获胜，经典的12格栅被设计师广泛接受，甚至成为许多设计师最常用的设计工具。其次，标准化了各种常见的设计元素，如表格、导航和按钮，并将其包装成可重复使用的套件，这基本上构成了视觉元素库，包括常见代码。最典型的代表之一是Bootstrap和Foundation，它们也使网站和APP之间的界限逐渐模糊。当然，它们并非没有缺点。借助这些图书馆设计的网页通常是相似的，网页设计师必须深入了解相关的代码知识才能使用它们。响应式网页设计(2010)惊艳的设计师EthanMarcotte决定挑战传统的网页设计。它使网页的布局随着窗口和屏幕的变化而变化，并将这种设计命名为响应式网页设计。网页设计师仍然只需要HTML和CSS就能实现这一功能，不得不承认这一设计理念非常先进。但是大家对于响应式设计还是有些误解的。对于设计师来说，响应式设计意味着设计许多不同的布局。对于用户来说，响应式设计意味着网页可以在手机上完美浏览。对于开发者来说，响应式设计意味着如何控制网站图片来处理移动和桌面，在不同的情况和语义下有良好的下载速度和呈现效果，等等。总之，一个网站在任何情况下都能很好地展示出来。至少在这一点上，每个人都可以达成共识。在平坦的时代（2010），设计网页布局总是需要很多时间。幸运的是，在这个时候，我们开始放弃复杂的光影效果，重新关注基本的内容呈现。在此之前，网页设计强调精致的图片和排版效果，美丽的插图和周到的布局设计，在简化了这些视觉元素后，我们称之为“平面设计”。淡化复杂效果后，视觉扁平化也促进了内容和信息水平的扁平化。充满光影效果的按钮被扁平图标所取代，矢量图形和图标字体也被广泛使用。网页字体与布局设计的结合使网页视觉更加美观。有趣的是，此时的网页设计开始有回归自然的感觉。光明的未来(2014)技术创新已经开始将网页设计推向一个全新的境界。在许多设计平台上，设计师只需在屏幕上移动不同的控制器就可以生成干净可用的代码，这些代码非常灵活，可控性非常高！想象一下，开发者不必担心浏览器的兼容性，可以专注于更实际的问题！新概念正在推广网页设计。新诞生的CSS属性，如vh和vw(viewportheight和width），它使网页元素的位置控制更加灵活和自由，一次性解决了设计师多年来一直在挣扎的顽固*。Flexbox是CSS的一部分，它可以快速创建布局，轻松修改属性，而无需编写太多代码。网页设计发展迅速，未来会有越来越多的创新，让我们拭目以待吧！