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

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

1997 年的谷歌网站

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

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

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

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

2003 年时候的淘宝网

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

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

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

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

国际互联网络与超级媒体

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

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

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

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

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

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

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

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

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

互联网时代开启

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

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

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

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

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

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

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

CD-ROM 中的互动界面 

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

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

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

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

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

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

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

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

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

90 年代可口可乐的官网

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

网页设计的高速发展

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

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

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

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

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

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

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

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

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

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

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

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

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

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

全 Flash 网站

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

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

全 Flash 网站

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

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

史太浓 2013 年前后的 UI 设计

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

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

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

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

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

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

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

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

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

杰西卡·哈芳德

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

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

本期故事讲到这里，感谢各位，下期再会！

如何高效地进行网页设计？重点关注这7个要素

大家好，我是 Clippp。

阅读文章 >

欢迎关注作者的微信公众号「设计史太浓」：