网站设计之六:4000 字快速回顾20多年的网页设计发展史!

2022-6-14    博博

20 世纪末到 21 世纪开始,宣传品牌与产品的阵地不再局限于印刷品,电视、电台及现场活动,而是出现了网站,网站可以链接更多陌生人,而且没有时空限制。

4000 字快速回顾20多年的网页设计发展史!

1997 年的谷歌网站

美国最火的设计风格只要有人将资料放到网上,远在日本的一名中学生都可以去学习了解,所以也打破了过去信息差的优势。本回我们要跟大家聊聊网页设计的发展,但在展开内容前,要搞清楚一个问题,就是网页设计属于平面设计吗?

国内早在差不多 20 年前,建站公司就开始独立存在,所以这个问题蛮有争议,尤其是 UI 设计也很成熟之后,大家更愿意认为此学科是独立的。

4000 字快速回顾20多年的网页设计发展史!

中国建于 1994 年的第一个网页,主要对外沟通

平面设计的定义不管怎么粉饰,简单而言就是:以某种目的,将文字、图像、图形安排在一起。网页设计也是如此,唯一区别是网页具有动态,但这种动态属于若干个静态设定的切换关系,其关键帧也是平面设计。

4000 字快速回顾20多年的网页设计发展史!

2003 年时候的淘宝网

我在国内蛮早就从事网页设计工作,早年甚至可以自己独立完成网站,除了页面设计,还包括套 ASP 程序(Active Server Pages 动态服务器页面),用 table 布局前端等,当然这些技术如今早已过时。

4000 字快速回顾20多年的网页设计发展史!

12 年前史太浓独立完成的网站

因此这段历史我就是参与者之一,所以本回不仅是对搜集资料的剪裁分析,还会结合不少自身经历体验跟大家分享。

首先我们来简单回顾下互联网的发展与网页设计的演变。


国际互联网络与超级媒体


互联网发展到如今已经像空气一样存在,断网已经如同缺氧那么严重,而互联网的诞生最初跟两件事情相关。

第一件大家也许比较熟悉,就是在 20 世纪 50 年代末美国国防部高级研究项目总署(the United States Department of Defense,Advanced ResearchProjects Agency,简称 ARPA)成立了。

4000 字快速回顾20多年的网页设计发展史!

美国国防部高级研究项目总署 logo

其成立的根本原因是冷战背景下,苏联不但先于美国在 1957 年将卫星送上太空,而且世界第一枚多级远程弹道火箭发射也试验成功,因此苏联宣称可以将核弹送往地球任何地区。这对美国而言实在太吓人,所以 ARPA 是一个专门研究国防技术的“事业部”,聚合美国当时最牛的几百位科学家,研究如何将最先进技术应用到美国国防。

4000 字快速回顾20多年的网页设计发展史!

人类第一个卫星由苏联在 1957 年发射

由于这些科学家当时分散于全国各地,因为如此厉害的科学家肯定本身有重要事务,而不是放着随传随到,因此大伙无法专门聚在一起专门干这事,而是远程协作,所以就需要一个有效的远程沟通工具。

这个工具不能只局限于语言声音,还要做到资源共享,更关键的是要高效安全,信息不可被盗取,当时负责研究此事的人是麻省理工科学家约翰·利克利德(John Licklider)。

4000 字快速回顾20多年的网页设计发展史!

麻省理工科学家约翰·利克利德 

此处省略一堆过程与专业技术术语,反正如此这般,利克利德因为 ARPA 组织这个沟通交接需求无意中发明出“国际互联网网络”(the World Wide Web)。

4000 字快速回顾20多年的网页设计发展史!

互联网时代开启

事后证明,国不国防是一回事,这才是他们最伟大的发明。这种技术能做到资源共享与防止盗取的一个重要原因是可以将信息分解成“数据包”,将他们发送到目的地后可以重新组装,也就是“分组路由”的雏形。大家了解到这个程度就可以了,再往深里说意义不大,况且我也说不清楚,

而时间很快去到 1987 年,这是第二件事情,这一年苹果电脑公司向外界报道了一款可在网络上寻找资料的软件,名为“超级文件”(Hypertext)。

4000 字快速回顾20多年的网页设计发展史!

苹果 1987 年的“超级文件”软件

比如在电脑上打“设计史太浓”就可以将当时整个网络与此相关的文字内容集中起来(当时网络上的内容其实非常有限),等于是谷歌百度的前身了。

后来这个软件进化为“超级媒体”(Hypermedia),除了可以检索文字,还可以找到图形、声音、电影及电视图像。

4000 字快速回顾20多年的网页设计发展史!

苹果软件“超级媒体”软件

再然后,苹果公司将这种技术跟日本索尼公司发明的 CD-ROM(compact disc read only memory,于 1982 年发明)进行结合,变成“互动光盘”,这种光盘就等于是如今网站的鼻祖版本了。在大致容量 600MGB 的 CD 中,苹果公司的工作人员往里面塞进了文字、图形、动画,而且形成一个复杂的索引架构。

4000 字快速回顾20多年的网页设计发展史!

CD-ROM 中的互动界面 

这样一来就形成一个灵活且可互动的内容库,大家可以根据需要选取想看的部分,有首页、二级栏目、三级栏目、内容详情页等。在此过程中还发明设计出一些后来常见的网站架构逻辑,比如“平行文本”、“多层”“矩阵”“网络系统”等,这里作很简单的介绍:

平行文本就是可以在看一篇文字时候可一边看到它相关的摘要跟缩写,这等于如今的鼠标经过效果。

4000 字快速回顾20多年的网页设计发展史!

网页中的“鼠标经过”效果

多层就是看一个内容的时候可以看到其它相关部分,等于如今网站中的“相关推荐”。

4000 字快速回顾20多年的网页设计发展史!

网页中的“相关推荐”效果

矩阵就是将资料布局到一个网格中方便大家查询,等于现在的产品系统,新闻系统一类。

4000 字快速回顾20多年的网页设计发展史!

网页中的“产品系统”效果

网络系统就是可以联系外部信息,其实就等于友情链接一类了。

当时间去到 1991 年,美国政府开始投入资金将“互联网”引入公共学校,而经过 6 年,世界上就有 3000 万个网络用户,2000 年左右,美国就有三分之一的家庭实现了联网。有流量就有商机,于是就有人将“互动光盘”这样的呈现方式搬到互联网上变成网站,变成一种宣传展示的渠道,不亦乐乎。

4000 字快速回顾20多年的网页设计发展史!

90 年代可口可乐的官网

所以最初的“互动光盘”设计其实就等于第一代网页设计。


网页设计的高速发展


1994 年时候,中国有个人因为公务出差去美国见证过互联网的神奇,回国之后辞职,在 1998 年创立了一个如今市值 1.8 万亿的公司—阿里巴巴,这人就是马云。

4000 字快速回顾20多年的网页设计发展史!

阿里巴巴早期的网页设计样式

20 世纪 90 年代恰好是网站建设数量急剧暴增的时候,充满了商机,大家可以理解为近几年短视频暴增一样,根据回顾统计,在 1997 年时候仅仅一年美国本土就新增了 80 万个新网页。

所以用“网页”一词是因为最初蛮多网站都是静态,网站后台是后来慢慢才发展形成。

4000 字快速回顾20多年的网页设计发展史!

1997 年时候的麦当劳网站设计

但网页设计最初的暴增还没有直接为平面设计师创造岗位,因为第一代网页设计师其实大部分由程序员转型而来。后来不断发展竞争升级才将程序、前端、网页设计及推广优化这样的岗位分来,以便有更专业的表现。

我在 2010 年时候开始从事网页设计,恰好是一个将网站建设不同岗位独立出来的时代。当时我所在公司中企动力属于国内最大型建站公司,大部分老同事都曾经是程序前端设计甚至推广这样一条龙为客户提供服务。

4000 字快速回顾20多年的网页设计发展史!

史太浓在 2010 年前后的网页设计

他们本质上就是从一名开发人员入行,所以他们会从实现效果端来规划设计,跟后来网页设计岗独立后完全不同。蛮多网页设计师其实根本不管程序实现问题,也因此产生出更多更好的视觉效果,反推程序开发与前端制作的进步。当时在公司经常见到的就是网页设计跟前端或者开发同事“干架”,争论要点就是很多效果程序根本做不出来。

4000 字快速回顾20多年的网页设计发展史!

史太浓在 2010 年前后的网页设计

这样的事情其实一直在全世界发生,所以网站制作技术也是以飞一般的速度在发展。比如我刚刚学会 Table 布局不久,css+div 布局就成主流了,再然后 HTML+css+js 也成熟起来,而程序开发端则是 asp 到 asp·net 到 php 到 java 等不同开发语言在不断进化。

4000 字快速回顾20多年的网页设计发展史!

史太浓在 2010 年前后的网页设计

这样的变化结果就是不断优化网页设计的表现效果。

那时候我们往往在掌握一门自认为很牛的必杀技后不到两年就也许会过时,最典型例子莫过于 Flash 的“死亡”。2010 年前后,懂得用 fash 建站的人非常吃香,因为人才稀缺,收入可以是我们的 2-3 倍,那时候最流行就是用 flash 做所谓的“体验馆”。

4000 字快速回顾20多年的网页设计发展史!

全 Flash 网站

“体验馆”的大致效果就是能在网站场景中做一些换部件,换颜色,或者点击指引箭头切换画面等操作。印象中当时有一个奢侈品平台站就是纯 flash 网站,开发制作费用高达 300 多万。

但好景不长,因为智能手机的崛起与 4G 通信技术的发展,互联网的主阵地慢慢往移动端迁移,而智能手机中的浏览器是明确不支持 flash 组件的。所以很快 flash 就跌落神坛,而我们这一代网页设计从业者可以说见证了全过程。

4000 字快速回顾20多年的网页设计发展史!

全 Flash 网站

当时身边就有同事因为精通 flash 被挖去甲方企业开发纯 flash 的眼镜商城,据说后来项目就没发展起来。

说到商城,网页设计还有一个重要的主题变化,就是从企业网站到平台网站到电子商城再到手机网站,App 应用,公众号,小程序这样的不断切换。到了移动端其实网页设计就被“UI 设计”(User Interface 用户界面)这样更专业化的称谓取代。

4000 字快速回顾20多年的网页设计发展史!

史太浓 2013 年前后的 UI 设计

因为革命性的屏幕触摸技术的诞生,很多网站本身就可以通过触屏控制,所以从定义上来说,UI 设计可以说包含了网页设计。

4000 字快速回顾20多年的网页设计发展史!

史太浓 2013 年前后的网页设计

随着移动互联网的不断发展其实也拔高了 UI 设计门槛,因为要考虑很多交互体验问题与技术规格标准,有点像当时乌尔姆学院做产品设计那一套,有很多理科属性的知识融入进来。

所以网页设计经过仅仅 30 年的发展,就走向细分领域的拆解,分裂出企业网站设计(偏向品牌与广告)、电商设计(偏向营销)跟移动端设计(偏向交互体验)。

4000 字快速回顾20多年的网页设计发展史!

史太浓 2018 年前后的电商网站设计

但不管如何,这个过程中平面设计的本质属性仍然没变,只是要解决的问题更多元化,更具体了。

根据历史纪录,美国的设计师杰西卡·哈芳德(JessicaHelfand)是较早以平面设计师身份参与到网页设计中的,比如 90 年代她为美国“发现频道”设计了网站。

4000 字快速回顾20多年的网页设计发展史!

美国“发现频道”90 年代的网站

哈芳德生于 1960 年,目前还活跃于设计圈,她也许是最有资格感叹互联网设计形式剧烈变化的人之一。

4000 字快速回顾20多年的网页设计发展史!

杰西卡·哈芳德

本期内容没有谈及太多具体人物及作品,因为在有限篇幅里本期内容已经高度浓缩,更多是在给大家整理一个框架。

关于网页设计发展的经历,也欢迎大家根据自己的体会参与到讨论中,说出你们的故事。

本期故事讲到这里,感谢各位,下期再会!

作者:设计史太浓

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!








分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档