网页设计简史

Date 2025-04-06 14:31:33

1.jpg

当我发现设计网页有多机会主义时,我逐渐开始对对对手玩网页代码失去兴趣。事实上,许多网页设计问题不止一个解决方案,但很少有解决方案能够解决所有浏览器兼容性问题。最让我困惑的是,为什么会有设计和编写代码的分工?随着技术的发展,许多过去难以解决的问题现在可以很容易地解决,但为什么一些简单的事情越来越难以同时实现呢?这些问题的答案不是简单的是对是错,也许我们需要从网页设计的整个发展过程中找到答案,找到真正弥合设计和代码之间隔膜的原因。

网页设计:黎明前的黑暗(1989)

01-Tab_keys-1

当互联网真正开始时,黑色显示屏只能显示单色像素。可以说,当互联网世界开始时,Web Design 这只意味着字符和空间的排列组合。虽然图形界面早在20世纪80年代初就存在,但在这个时候并不受欢迎。直到20世纪90年代,图形界面才真正进入成千上万的家庭,当时,它是互联网的野生西部。

表格(table):网页的兴起(1995)

02-Tables-1

能够显示图片的浏览器的诞生是促进网页设计行业诞生的重要先决条件。事实上,当时最接近信息结构化的概念是HTML中现有的元素:表格(Table)。所以,David Siegel 在他的网页设计书中《Creating Killer Sites》它讲述了他设计优秀网站的秘诀:嵌套在表格中,巧妙地将静态表格与动态表格结合起来。虽然表本身是用来承载数据和内容和图片的,但在那个时代,这种方法仍然相当可靠和流行。

网页设计面临的另一个问题是如何保持网页脆弱的结构。正是因为这种需求,切片设计(Slicing Design)逐渐流行起来。设计师创建了一个美丽的网页布局,然后开发人员切割整个设计草案,以找到呈现设计的最佳方式。另一方面,该表还具有一些很酷的功能,如垂直对齐、像素或百分比控制对齐。在那个时代,表格是一个灵活的设计工件,几乎是网格系统,因此,那个时代的开发人员不喜欢前端代码。(嵌套表格有多混乱?)

JavaScript救援(1995)

03-Javascript-1

JavaScript的出现弥补了原始的HTML。例如,如果你想写一个弹出窗口,或者动态修改某些对象的顺序?HTML不好,但JS可以!然而,JS的主要问题是它位于整个网页布局的顶部,需要单独加载。大多数时候,它只被懒惰的开发人员用作简单的补丁,但如果使用得当,JS可以非常强大。今天,如果CSS能够实现相同的功能,我们将尽量避免使用JS。不可否认的是,JS本身确实非常强大。前端常用的Jquery和后端的Node.js是难得的好东西。

Flash:自由黄金时代(1996)

04-Flash-1

设计网页布局总是需要很多时间。幸运的是,在这个时候,我们开始放弃复杂的光影效果,重新关注基本的内容呈现。在此之前,网页设计强调精美的图片和排版效果,美丽的插图和周到的布局设计,在简化了这些视觉元素后,我们称之为“扁平化设计”。在稀释了复杂的效果后,视觉的扁平化也促进了内容和信息水平的扁平化。充满光影效果的按钮被扁平图标所取代,矢量图形和图标字体也被广泛使用。网页字体与布局设计的结合使网页视觉更加美观。有趣的是,此时的网页设计开始感觉回归自然。

光明的未来

09-Future-1

技术创新已经开始将网页设计推向一个新的领域。在许多设计平台上,设计师只需在屏幕上移动不同的控制器就可以生成干净可用的代码,这些代码非常灵活和可控!想象一下,开发者可以专注于更实际的问题,而不必担心浏览器的兼容性!

新诞生的概念正在推动网页设计。VH和VW等CSS中新诞生的属性(viewport height 与 width),它使网页元素的位置控制更加灵活和自由,一次性解决了设计师多年来一直在挣扎的顽固疾病。Flexbox作为CSS的一部分,是另一件新事物,它可以快速创建布局,轻松修改属性,而不需要编写太多的代码。

网页设计发展迅速,未来会有越来越多的创新,让我们拭目以待吧!

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计

Floating Image