网页设计基本步骤（10分钟讲清楚网页设计发展史）

上回我们简略介绍了数码时代的到来如何加速后现代风格的百花齐放，因为几乎同一个时间段出现多种成型风格的探索。

47回：从解构主义到新极简主义

而紧接数码时代，互联网时代也拉开序幕。

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网站

“体验馆”的大致效果就是能在网站场景中做一些换部件，换颜色，或者点击指引箭头切换画面等操作。

印象中当时有一个奢侈品平台站就是纯falsh网站，开发制作费用高达300多万。

但好景不长，因为智能手机的崛起与4G通信技术的发展，互联网的主阵地慢慢往移动端迁移，而智能手机中的浏览器是明确不支持falsh组件的。

所以很快falsh就跌落神坛，而我们这一代网页设计从业者可以说见证了全过程。

全Flash网站

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

说到商城，网页设计还有一个重要的主题变化，就是从企业网站到平台网站到电子商城再到手机网站， App应用，公众号，小程序这样的不断切换。

到了移动端其实网页设计就被“UI设计”（User Interface用户界面）这样更专业化的称谓取代。

史太浓2013年前后的UI设计

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

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

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

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

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

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

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

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

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

杰西卡·哈芳德

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

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

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

,