在上一篇文章中,谷歌搜索在设计上的变化引发了我们对于获取信息这件事的思考。不过,谷歌也有很多让人津津乐道的设计。举个例子,你有没有想过,每天打开谷歌首页看到的 logo 在 5 年前、10 年前、甚至是 20 年前的模样呢?这篇文章将会带你穿越历史长河,把谷歌这些年来首页的变化向你娓娓道来。

作为世界上最大的搜索引擎,有超过 70% 的搜索是在谷歌上进行的。

“专注于用户,其它顺应而生。秉持着这个理念,我们力图设计出能够开导和启发用户的体验。”

本文将会探讨这些年来谷歌首页的变化。由于首页一天中可能发生多次更改,并且也会随着使用设备和视窗大小而有所不同,所以我在比较的时候会以桌面设备为标准。同时选用的也是通常情况下的 logo,而不是特殊日期时的 logo(译者注:谷歌的 logo 在节日时会有变化)。

1998 — Google! Beta

1998 年的谷歌首页

其实早在 1998 年之前,谷歌就已经开始在 google.com 上提供内容了,不过当时这还只是一个托管页。这个页面真正作为搜索引擎发挥作用是在 1998 年。页面上有一个 I’m feeling lucky 按钮,这是我个人一直很喜欢的一个设计。

1999 — 让外观简洁一点

1999 年的谷歌首页

这段时期,基于表格的设计在互联网盛行一时,但是谷歌决定将底部的表格移除,选择了更为简洁的外观。如果你把 1999 年的谷歌首页与之前的首页比较,你会注意到它的外观实际上几乎没有改变。

2000 — 把链接放在右边吧

2000 年的谷歌首页

谷歌首页在 2000 年的一大变化就是在 logo 右侧引入了链接。也就是我们今天所熟知的导航栏,不过那时候这还只是用 map 标签实现的带有可点击区域的图像:

<img src="/web/20000407062157im_/[http://www.google.com/images/Title_HomPg2.gif](http://www.google.com/images/Title_HomPg2.gif)" width="600" height="130" border="0" usemap="#map1" alt="Google">  
 <map name="map1">  
	<area shape="RECT" coords="493,58,595,103" href="jobs.html" alt="We're Hiring!">  
	<area shape="rect" coords="381,57,488,104" href="about.html" alt="About Google" title="About Google">  
 </map>  

那时候就已经有了和我们现在所用的类似的布局,但是它们的实现方式却与现在大相径庭,这是一件很有意思的事情。

2001 — Google web 目录

2001 年的谷歌首页

2001 年出现了新的东西,也就是被称为谷歌 Web 目录的链接,它可以跳转到下面这个页面:

Google Web 目录

Web 目录或者链接目录指的是在线网站的目录清单。也即”万维网里的万维网目录“。历史上,目录经常用于列出个人或者企业的条目以及联系信息。这类目录至今也还在使用。

Web 目录在多年前就很常见了。如果你想让谷歌或者其它搜索引擎索引你的网站,你可以将网站的链接提交给 Web 目录中其中一种类型的索引。

2002 — 引入选项卡

2002 年的谷歌首页

2002 年,谷歌搜索引擎开始进行分类。分类采用的方式很像我们现在熟知的选项卡,不过这可不是单页 app!它们并不等同于今天的选项卡,每次点击的时候仍然会重新渲染整个页面。另外,它们还是用表格进行布局的,并且只有文本可以点击:

 Web Images Groups Directory 

2003 — 引入新闻

2003 年的谷歌首页

2003 年,选项卡依然存在,不同的是,这次你可以点击选项卡的任何地方,而不只是文本。同时,搜索引擎还添加了谷歌新闻。

谷歌新闻并不像搜索引擎首页那样简洁悦目。不过我猜,要在展示这么多信息的同时还保持简洁,想必也很困难。 首页和新闻的样式风格也并不一致。

2004 — 引入 Froogle

2004 年的谷歌首页

首页新增了 Froogle 链接

Froogle 是 “frugal” 一词的双关语,它后来又相继更名为谷歌产品搜索和谷歌购物。

由于不方便进行国际化,而且人们不理解双关语的含义以及服务的具体内容,所以原先的名字被弃用了。

2005 — 引入 Local

2005 年的谷歌首页

首页新增了 Local 链接

Local 就是后来谷歌地图的前身。

与其它页面不同的是,Local 在风格上与搜索引擎登录页保持了一致。

2006 — 移除页面计数

2006 年的谷歌首页

2006 年,谷歌不再将所拥有的页面数量显示在它的索引中。

下面这幅图通过近似值展现了从 1999 年到 2005 年,页面索引的增长情况(基于这段时期显示的索引大小)。

很难粗略估计谷歌索引有多大,我见过很多地方都引用了下面的说法:

谷歌搜索的索引包含数千亿个页面,大小超过 100000000 GB

2007 — 在首页引入谷歌地图

2007 年的谷歌首页

谷歌地图于 2005 年 2 月 8 日首次在谷歌博客上发布,但直到 2007 年才登上这家搜索引擎巨头的主页。

2008 — 导航链接,iGoogle 和 登录

2008 年的谷歌首页

选项卡不见了,取而代之的是页面顶部的导航栏!

链接都是可以重定向到其它谷歌应用的锚点链接。

登录选项以及 iGoogle 也是在这个时候出现的

iGoogle(前身为 Google 个性化主页)是 Google 于 2005 年 5 月推出的一个可定制的、基于 Ajax 技术的开始页面,或者说是个人门户网站。在 2013 年 11 月 1 日被移除

2009 — 变化不大

2009 年的谷歌首页

2009 年的谷歌首页相比 2008 年变化不大。区别仅在于,谷歌从这一年开始,每逢特殊日期就会把正常 logo 替换为更具有艺术气息的 logo。

这一时期关于首页的一些事实:

  • 谷歌的 logo 只有 9KB 大小
  • 谷歌的 logo 是 gif 格式
  • 页面结构依然是基于表格的

2010 — logo 背后的阴影终于减少了

2010 年的谷歌首页

回首这些年来的谷歌首页,一大特征想必就是 logo 背后的阴影了。2010 年,谷歌大幅度减少了这种阴影,虽然还有残留,但是很不明显。

2011 — 引入黑色导航栏

2011 年的谷歌首页

2011 年,导航栏更像是真正的导航栏,而不是锚点标签了。

布局也不再采用表格,取而代之的是列表。

2012 — 引入 Google+

2012 年的谷歌首页

首页风格没有大的变化,但是引入了 Google+ 的链接

Google+ 是 Google 运营的一个社交网络。它在 2011 年 6 月 28 日推出,旨在将谷歌的其它产品,如 Google Drive、Blogger 和 YouTube 连接起来,挑战其它社交网络。

2013 — 更扁平的 logo

2013 年的谷歌首页

在 2013 年年底,谷歌推出了不带阴影的扁平化 logo。

比起以前的 logo,这个新的 logo 更加简洁、更具现代化气息、更易阅读。

2014 — 好像有人忘记更新版权声明了?

2014 年的谷歌首页

样式依然没有大的变化,我猜设计师们已经对自己的设计很满意了。

有趣的是,页面底部的版权声明标签只在 2013 年 12 月下旬更新为 2014 年。而在 2014 年的绝大部分时间,版权声明的日期都被设置成了 2013 年。

2015 — 是时候改变 logo 字体了

2015 年的谷歌首页

2015年,谷歌 logo 的字体发生了改变

将这些年来谷歌 logo 的变化制成一幅长图怎么样?感受一波:

1997–1998

1998–1999

1999–1999

1999–2010

2010–2013

2013–2015

2015+

2016 — 没有大的变化

2016 年的谷歌首页

2016 年的谷歌首页与 2015 年相比,变化很小。

这个时期关于首页的一些事实:

  • 谷歌 logo 的大小只有 5KB
  • 谷歌 logo 采用 png 格式
  • logo 的尺寸是 272 x 92

2017 — 仍然没有大的变化

2017 年的谷歌首页

谷歌肯定很满意自己的设计,毕竟它是这么地干净简洁。

2018 — 扁平化的按钮和输入框阴影

2018 年的谷歌首页

2018 年,输入框多了阴影效果。这一年相当流行这种样式。

2019 — 更圆的输入框

2019 年的谷歌首页

2019 年,阴影输入框被替换为带有圆角的输入框。这个样式可以用 css 轻松实现,开发者无需再像过去那样使用图片或者 css 的一些 hack 实现。

2020 — 输入框的阴影

2020 年的谷歌首页

我们终于来到现代了!

输入框的圆角还在,另外,阴影效果又再度回来了。我个人觉得这个样式相当惊艳。

经过 20 年的发展,到底是什么发生了变化?

其实,变化并不大。从设计的角度来看,它的外观实际上与 20 年前非常相似。而在功能方面,虽然它看起来很简单,但可藏着不少功能!

这么多年来一直不变的就是,这个世界上浏览量最大的网页,其代码体积却是非常地小。我猜大概是因为它每天所消耗的全球带宽实在是太多了!

这是一个function这是代码块的一部分,文本文本