摘要:使用SWFObject和JQuery Tools等其他庫的網站在視覺上會有很大的不同,這可能是因爲這些庫支持自定義、設計更復雜的網頁。研究員們觀察了哪些網站使用了很多重合的網頁設計庫,以及它們在視覺上的相似性。

題圖來自視覺中國,本文來自 微信公衆號:快公司FastCompany(ID: FCChinese)

近幾年來,越來越多的文章都問過類似的這麼一個問題:爲什麼那麼多的網站看起來好像越來越一個樣了?

如果你也有留意過這點的話,相信也能理解這個問題。這些文章通常會指出這些網頁相同的設計元素,包括疊加有文本的圖片和漢堡菜單 (hamburger menus,由三條橫線構成的菜單按鈕,單擊時會呈現下拉列表)

山姆·戈裏 (Sam Goree) 帶着這個問題進行了大篇幅的研究,他是一名印第安納大學信息學在讀博士。戈裏發現,儘管很多人已經注意到了網頁趨同化這一現象,但目前並未有任何形式的實證研究,趨同化的結論更多隻是人們的直覺罷了。於是,他與同事巴爾迪亞·杜斯蒂 (Bardia Doosti) 、大衛·克蘭德爾 (David Crandall) 、諾曼·蘇 (Norman Su) 等人決定親自去做一項研究,以檢驗這個結論是否屬實。如果屬實,那麼導致網頁出現這種趨勢的原因又是什麼?

首先,戈裏和同事們通過一系列數據挖掘,瀏覽了近20000張網頁圖片,並找出10000個網站進行鍼對性對比研究。

如何衡量網頁間的相似度?

把整個互聯網當作研究對象顯然不可能的。互聯網上有超過十億個網站,網頁的數量更是要多上許多倍。由於沒有可供選擇的網站列表,所以對互聯網進行隨機抽樣也是不可行的。即使有了參考列表,大多數人也只能看到這些網站的一小部分,所以隨機抽樣可能無法獲取到多數人經常看到的網頁。

戈裏最終使用了羅素1000指數 (Russell 1000 Index) 網頁。羅素1000指數是一個股票市場指數,追蹤美國市值排名最高的1000家企業的股票。“我們認爲這些企業的頁面能代表企業網站設計的主流趨勢。”戈裏說。此外,團隊還研究了另外兩組網頁,一組是位列Alexa網站流量全球前500的網站,另一組是獲得威比獎 (Webby Awards,由國際數字藝術與科學學院主辦的評選全球最佳網站的獎項) 提名的網站。

幾位研究員們對這些網站的視覺元素很感興趣,因此他們選擇了互聯網檔案館 (Internet Archive,互聯網檔案館會定期保存網頁) 中網頁的截圖作爲研究數據。此外,由於團隊想要收集數百個網站比對的量化數據,因此需要使分析流程自動化。

“爲此,我們必須明確能夠自動化衡量網頁相似度的指標。我們嘗試了選擇顏色、佈局等具體屬性,以及人工智能自動學習生成的屬性。”戈裏說。

對於顏色和佈局屬性,研究員們衡量了在一個網頁的配色或頁面結構基礎上,將其轉換成另一個網頁需要多少像素級的編輯。對於人工智能生成的屬性,團隊建立了一個機器學習模型,訓練其基於網頁來源對圖片進行分類,並計算學習到的屬性數量。“我們此前的研究顯示,後者能夠很好地衡量網頁風格上的相似度,但人們很難得知該模型究竟關注了哪些屬性。”戈裏說。

互聯網發生了什麼改變?

戈裏通過此項研究還發現,在顏色、佈局和人工智能生成的屬性這三項指標上,網頁間的平均差異在2008年至2010年間達到峯值,在2010年至2016年間有所下降,且佈局上的差異下降最多,下降比例超過30%。

圖爲羅素1000指數中的企業在網站設計上的相似度。平均而言,值越低,代表相關企業網頁設計的相似度越高。[圖片來源:由作者提供]

“這張圖證實了網站設計師和行業觀察人士們的猜測,就是網站設計確實變得越來越相似了。”戈裏說。在確定了這個趨勢後,他的團隊想要通過數據,研究導致這種趨勢的具體變化。人們可能會認爲這些網站只是互相抄襲了代碼。但事實上,隨着時間的推移,這些代碼的相似度顯著降低。然而,軟件庫的使用頻率卻在大幅增加。

左圖顯示了羅素1000指數中的企業在網站代碼相似度上的降低。右圖顯示了這些企業在網頁設計庫的使用重合度上的增加。[圖片來源:由作者提供]

網頁設計庫中有實現常見功能的通用代碼,例如使網頁自適應移動端設備大小的代碼,或實現漢堡菜單的下拉和收回的代碼等。研究員們觀察了哪些網站使用了很多重合的網頁設計庫,以及它們在視覺上的相似性。

使用BootStrap、FontAwesome和JQuery UI設計等特定庫設計的網站看起來更加相似。這可能是因爲這些庫能夠控制網頁佈局,且有着常用的默認選項。使用SWFObject和JQuery Tools等其他庫的網站在視覺上會有很大的不同,這可能是因爲這些庫支持自定義、設計更復雜的網頁。

2005年至2016年間網站的變化說明了網頁設計在發生的演變。與2016年相比,2005年相似度在平均值左右的網站間的差異要大得多。比如,在2005年,Webshots.com和Yum.com的網站被認爲是比較相似的,但網頁配色和佈局有很大不同。儘管兩者都用了黑白藍的配色,但右邊的網站採用了藍色的背景。

2006年Webshots.com和Yum.com網頁截圖 [圖片來源:由作者提供]

然而,2016年的網站Xfinity.com和Gilt.com更加相似。兩者網頁頂部都有一個菜單欄,都採用了圖片加黑白配色的設計。這些頁面上的文字更少,更好地利用瞭如今的高分辨率顯示器。

2016年Xfinity.com和Gilt.com網頁截圖 [圖片來源:由作者提供]

這種變化是好事嗎?這種逐漸的同質化意味着什麼呢?

一方面,在時尚或建築等設計領域,緊跟潮流是完全正常的現象。如果設計由於使用相同的庫而變得越來越相似,這意味着它們對於視障人羣更加友好了,因爲流行庫比個人開發的庫更加符合可訪問性的標準。它們也在變得更加用戶友好,新的訪問者很快便能瞭解網站導航。

另一方面,互聯網是一種共享的文化產物,它的獨特正是在於其分散化、去中心化等特點。隨着NeoPets和MySpace等主頁退出歷史舞臺,互聯網設計或許會失去其作爲一種創造性表達方式的力量。 Mozilla基金會 (Mozilla Foundation) 認爲這種統一化不利於互聯網“健康”,而網頁的審美是體現互聯網“健康”的一大元素。

如果網站由於使用相同的庫而變得越來越相似,維護這些庫的大型科技公司或許在互聯網視覺美學方面擁有過大的權力。雖然比起代碼加密,發佈開源庫可能是一件好事,但大型科技公司的設計原則並不一定適合每一個網站。

“如果科技行業聯合起來,這種過大的力量肯定會引起人們的擔憂。我們認爲,美學上的統一化應當被批判性地審視。”戈裏說。

本文來自 微信公衆號:快公司FastCompany(ID: FCChinese)

相關文章