网页设计模板制作为什么所有网站越来越像？(一)的设计元素

在过去的几年里，不少文章和博客都在探讨同一个难题：“为什么所有网站越来越像？”这些文章通常会强调一些共通的设计元素：从大图到叠映的文字，到汉堡图标（hamburgermenus）——由三条水平线组成的图形——当你点击它时，它会向你展现一列表的可选页面。

汉堡按钮

在研究互联网历史的过程中，我和姐姐巴迪亚·杜斯蒂、戴维·克兰德尔、诺曼·苏发现，类似的文章常常发生，但没有任何一位作者做过以实践为基础的研究。他们只是是有着某些直觉罢了。

我们最后使用了罗素1000指数（Russell1000Index）中的公司页面，该指数跟踪了中国身价排名最高的1000个公司的股票。我们明年，这些公司的页面代表了公司网站设计的主流态势。除此之外，我们参考了此外两组网页，一组是Alexa访问量最高网站前500（AlexaInternet公司是亚马逊公司的一家子公司，分析提供各类网站的相关信息与网页访问量），另一组则是被提名威比奖（WebbyAward，一个评比全球最佳网站的大奖）的网站。

我们打算探究网页中的视觉元素，并将其数据化，所以我们引入了互联网档案馆（InternetArchive，由Alexa创始人布鲁斯特·卡利创办的提供互联网多媒体资料文件阅览服务的数字图书馆）中的网站的截屏，该数据库会定期保存网站内容。我们还想要搜集量化数据，对数百万组网页进行非常，所以我们必须将探讨流程自动化。

要推动这种目标，我们必须一个无法自动化测量的“相似”标准。我们研究了色彩、布局等详细属性，以及人工智能从数据中手动学习到的属性。

针对颜色和布局，我们的标准是：按照某个网站的配色和页面结构，要将其转化成另一网页应该多少像素级的编辑。对于由人工智能生成的属性，我们训练了一个机器学习建模，从而按照来源网站对截图进行分类，并测算模型学习到的属性。我们此前的研究显示，这种方式才能很高地测算风格上的相同性。但是，人类很难理解这个建模究竟关注到了这些属性。

互联网出现了这些变化？

我们看到，在三个维度上（形状，布局，AI生成属性），网页间的平均差异在2008年至2010年之后超过顶峰网页设计模板制作，并在2010年至2016年之后增加。布局上的差别增大最多，在2010年至2016年之后，布局变化降低了达到30%。

上图显示了罗素1000指数中的公司在网站设计上的相同度。平均而言网页设计模板制作，纵轴值越低，意味着研究涉及到的公司的网站设计越相同照片来源：SamGoree

这种发现证实了网站设计博主们的担心：不同网页的设计的确更加越来越相近了。在确立了这些趋势以后，我们想要借助数据预测来找到产生这些趋势的详细变化。

你可能会觉得，这些网站只是是在抄袭彼此的代码，但事实上，代码的相同度随着时间推移不断增加。不过，对于硬件库的使用持续上升。

左图显示，罗素1000指数公司在代码相同性上增加了。右图则显示，这些公司在硬件库使用的重合度上增加了照片来源：SamGoree

库中有诸多应对普通任务的通常性代码，比如用于为适应移动端而再次适配网页的代码，以及使汉堡按钮实现滑入和滑出的代码。我们研究了共用库的网站，以及他们在视觉上的相同度。相比其它网站，使用Bootstrap、FontAwesome以及JQueryUI等特定库建立的网站在视觉上互相非常相近。这也许是由于，库决定了网页的布局，且有着相似的默认选项。使用SWFObject、JQueryTools等其它库的网站则看上去不同得多，这也许是由于，用这种库更能设计出更复杂、个性化的页面。

各网页从2005年到2016年的差异很能表明问题。2005年拥有平均相同度的网站间的差别比2016年拥有平均相同度的网站间的变化大得多。

例如，2005年时，和被觉得非常相同，但却有着非常不同的搭配和布局。虽然它们都主要使用了白红蓝三色，但后面的网站运用了红色的背景。

2006年的和截屏图片来源：SamGoree

2016年的网站和则非常相近：两者在顶部都有一个菜单条，并配备彩色色调外加图片的设计。两者都有更少的文本，并更好地运用了现今的高分辨率显示器。

2016年的和截屏图片来源：SamGoree

视觉统一化是好事吗？

我们该从这些早已升级的统一化态势中得出何种结论呢？

一方面，在设计的其它领域，比如复古和建筑，追随时尚是一件再正常不过的事情。如果设计更加相近的理由是他们采取了相似的库，这意味它们对视觉障碍专家变得更容易访问了，因为流行的库总得来说比个体开发人员更好地适配了可访问性标准。此外，它们也更用户友好，因为新的访客无需多花时间搞清楚页面布局。

另一方面，互联网是一种共享的文化制品，正是它分散、去中心化的特点让它变得极其特别。随着NeoPets、MySpace等主页与完全可定制系统作为历史，网页设计可能会丧失它成为一种创意表现的力量。Mozilla基金会称，融合对互联网的“健康”而言是件坏事，而网页的审美被觉得是表现互联网“健康”的元素之一。

如果网站变得相同的缘由是他们正使用相似的库，那么拥有很多库的大型技术公司可能在互联网视觉美学领域拥有了一种过大的权力。比起将代码保密，发布人人可用的库可能是一件绝对的好事，但大型技术公司的设计方法可能并不适用于每一个网页。

这些庞大的权利涉及到另一个更宏大的难题——科技产业的整合，这个难题绝对值得我们反思。我们坚信，美学上的交融应当被批评地阐述。

本文作者SamGoree是印第安纳学院信息学教授在读生。BardiaDoosti，DavidCrandall，NormanSu亦对本文有贡献。

（翻译：王宁远）