首页 > 知识•资讯 >  网页技术不断的演化是网站科技的展现。 > 正文

网页技术不断的演化是网站科技的展现。

2021/3/21 0:05:22 · 稿源:传诚信


世界第一个网站是由英国物理学家提姆(Tim Berners-Lee)在欧洲粒子物理研究所(CERN)时发明,当初成立的目的,是为了让世界各地的物理学家可以方便交换研究资料而开发,后来CERN在1993年4月30日决定以免授权费的方式,将WWW (World Wide Web )和全世界同享。27年前诞生的CERN的网站只运用了简单的URL、http和html组成,这样的创举改变了全世界的网络世界,也让他在2002年入选BBC最伟大的100名英国人。


1993 文字和空格

在网际网络真正开始之时,黑色的介面仅能显示单色的像素。当时的网站设计仅能使用文字和空格排列组合。虽然图形化的界面早在80年代初就有了,但在此时普及率并不高。直到90年代,图形化界面才真正进入千家万户。

1995网站的兴起,Table的使用

能够显示图片的浏览器的诞生,是促使网站设计这个行业诞生的重要先决条件。在当时最接近于资讯结构化的概念,是HTML中已有的元素:表格(Table)。所以,David Siegel在他的网站设计书《Creating Killer Sites》讲述了他设计优秀网站的秘诀:在表格中嵌套表格,将静态的表格和动态的表格以巧妙的方式结合到一起。表格正确的用法应该是在表现数据,但是在那个时代,这种方法大为流传。
网站设计所面临的另外一个问题,就是如何保持网站设计脆弱的结构。也正是因为这种需求,切片设计(Slicing Design)逐渐流行了起来。设计师创建出漂亮的网站排版,开发者将整个设计稿切片,找出呈现设计的最佳方法。另一方面,表格也有好用的地方,比如垂直对齐,以像素为单位或者以百分比来控制对齐。在当时,表格可是近乎栅格系统一般的灵活的设计神器,也正是因此,那个时代的开发者并不喜欢前端的代码。

 

1995 JavaScript 打破局限

JavaScript解决HTML一些局限。举个例子,如果你想写个弹出窗,或者想动态修改某些对象的顺序?HTML不行,但是JS可以!当时背景图像、GIF动画、闪烁文字字、计数器等工具迅速成为网站设计的噱头。不过JS主要问题在于,它处于整个网站布局的顶层并且需要单独加载。很多时候它仅仅被当作一个简单的补丁,但如果使用得当,JS可以非常强大。今天,同样的功能如果CSS能实现,我们会尽量避免使用JS。不可否认的是,JS本身确实很强大,前端常用的jQuery,后端的Node.js都是不可多得的好东西。

 

1996 Flash 自由的黄金年代

Flash为网站开发者/设计师带来了前所未有的自由,它打破了之前网站设计固有的限制。设计师可以随心所欲地在网站上展现任何形状、排版、动画和互动,也可以使用任何喜欢的字体。所有的这一切最终会被打包成为一个文件,然后被发送到浏览器端显示出来。这也就意味着,用户只需要拥有最新的Flash插件和些许等待时间,就可以享有一个魔术般的网站这是启动页面(splash pages)、介绍动画以及各种交互特效的黄金时代。不幸的是,这种设计并不开放,也不利于搜寻,还消耗大量的运算能力。2007年,当苹果发布他们的第一台iPhone,就决定彻底放弃Flash,也正是在这个时候,Flash开始走下坡路——至少在网站设计领域,且逐渐被html5取代。

 

1998 CSS (Cascading Style Sheets)

CSS与Flash约同期出现,是一种更好的网站结构化设计工具。CSS的基本概念是将网站内容和设计样式分开管理,所以网站的外观和排版等属性将会在CSS中被定义,但内容依然保留在HTML中。早期版本的CSS并没有现在那么灵活它最大的障碍在于许多浏览器还没来得及接纳这一新技术,对于开发者而言,这是一个头疼的事情。需要明确说明的是,CSS并非全新的编程语言,它仅仅只是一种声明性语言。那么网站设计师需要学习编程吗?可能需要。但是网站设计师需要懂得CSS么?当然需要。

 

2007 Grid Syste iPHONE 问世

在手机上浏览网站本就是一种全新的挑战。设计师除了要为不同尺寸的屏幕设备设计不同的排版布局,还面临着内容控制的问题:小屏幕上展示的内容要和PC端一样多,还是需要单独抽离开来?PC端网站上的广告要如何在手机上呈现?加载速度也是一个大问题,移动设备的网络加载速度不够快,且PC端网站会消耗大量的流量。

第一个重大的改进是栅格系统的出现。960- Grid System或12- Grid System,12- Grid System被设计师们广泛的接纳,甚至成为许多设计师最常用的设计工具。各种常见的设计元素诸如表格、导航、按钮被标准化成为可复用的套件,构成了视觉元素库。其中最典型的代表就是Bootstrap和Foundation,使得网站和APP之间的界限逐渐模糊。它们也不是没有缺点,借助这些元素库设计出来的网站往往大同小异,而且网站设计师要想使用它们还得深入了解相关的代码知识。

 

2010   响应式网站设计(Responsive Web Design)

设计师Ethan Marcotte决定挑战传统的网站设计,让网站在内容不变的前提下,版面布局随着显示器的尺寸的变化而变化,将这种设计命名为 响应式网站设计设计师只需要HTML和CSS就可以实现这种功能。不过大家对于响应式网站设计依然有些许误解。对于设计师而言,响应式网站设计意味着为设计许多不同的布局。对于用户而言,响应式网站设计就意味着这个网站可以在手机上完美浏览。对于开发者而言,响应式网站设计意味着如何控制好网站图片在移动端和PC端,在不同情形和语义下,拥有良好的下载速度和呈现效果。简而言之,就是一个网站能在任何情况下良好展现,且更利于搜寻引擎优化

 

2010 Flat Design 扁平化设计

以往设计会耗费太多时间在繁杂的设计上,如不必要的阴影、纹理、装饰等,现今开始抛弃复杂的光影效果。设计走向化繁为简,回归到设计的根本,专注在内容呈现将复杂的效果淡化后,这些简化的视觉元素就是说谓的「扁平化设计」。充满光影特效的按钮被扁平化的图标所替代,向量图SVG和图形字Font icon体开始被广泛使用,简约的介面与流畅操作,给使用者更直觉的设计。

 

2014网站设计璀璨的未来

网站设计演化至今,目的在于呈现直觉的内容、快速的传递讯息。在许多设计平台上,设计师只需要在屏幕上移动不同的控件就可以生成整洁的代码,且这些代码非常灵活,可控度极高!开发者无需担心浏览器兼容性,可以专注于更加实际的问题!网站设计的概念与技术不断推陈出新。在CSS中新诞生的属性,如vh和vw(viewport height与width),就使得网站设计的元素的定位控制更加灵活自由,一次性解决了设计师纠结多年的顽疾。还有影片型网站、向量图形SVG与图形字Font icon...等技术使网站效能更加优化。


原文与图片来源自froont.com


  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354