台網首頁 免費架站
不懂程式也能架設網站
首頁 > 網站架設教學文章

為什么現在網站都長一個樣?研究人員分析1萬個網站后找到了真相

發佈:免費網站架設 時間:2023-03-12 熱度:

在過去的幾年里,一些文章和網頁設計博客開始提出這樣的疑問:“為什么現在所有的網站風格看起來都一個樣了?”

這些帖子通常會指出網站一些雷同的設計元素,比如疊加文本的大圖片、漢堡式菜單(通常是三行堆積在一起,形狀類似于一個漢堡),點擊后會顯示出可供選擇的頁面選項列表等等。

印第安納大學信息學的博士生Sam Goree發現這一趨勢之后,便和其它研究人員一起進行了系列的數據挖掘,仔細研究了 10000 個網站上的近 20 萬張圖片,探索為什么會出現這樣的情況。

網站的相似度分析

全球互聯網上網站超過 10 億個,要對這些網站進行全面研究是不可能的。由于沒有全部的列表可供選擇,對互聯網網站進行隨機抽樣分析的方法也就不可行了。另外,一個隨機樣本意義可能不大,因為這可能無法捕捉到大多數人所訪問的網站。

鑒于各種因素,Goree最終選擇使用了比較有代表性的羅素 1000 指數的網站(也就是采用在羅素 3000 指數中市值最大的1000 家公司網站)作為研究樣本,這在一定程度上更能代表主流企業網站設計的趨勢。Goree還研究了另外兩組網站,一組是Alexa前 500 個訪問量最大的網站,另一組是獲得威比獎(The Webby Awards,是國際公認的代表數字行業最領先和權威的國際性大獎)提名的網站。

Goree團隊對這些網站的視覺元素十分感興趣,并使用來自互聯網檔案館( Internet Archive)的網頁圖片作為研究數據。由于研究人員想要通過比較數百萬對網站進而收集定量數據,于是采用了自動化分析過程。

為了做到這一點,就必須確定一個可以自動測量的“相似性”的標準。Goree團隊研究了網站配色和布局等特定屬性,以及使用人工智能從數據中自動學習屬性。簡單的說

在網站配色和布局屬性方面,研究人員通過分析網頁配色和布局判斷網站的相似度。在人工智能生成的屬性方面,研究人員訓練了一個機器學習模型,可對網頁截圖進行分類并分析圖片的屬性。

大量使用相同的庫 導致網站風格趨于一致

在顏色、布局和人工智能生成的屬性這三個指標上,網站之間的平均差異在 2008 年至 2010 年達到峰值,到了 2010 年至 2016 年開始下降。其中布局差異越來越少,在這期間下降超過30%。


這些發現驗證了上述網頁設計博客們看法,即網站正變得越來越相似。那么是哪些特定的變化導致了這一變化呢?

大多數人可能會認為是因為這些站點簡單地復制彼此的代碼。事實上,隨著時間的推移,代碼相似性已經顯著降低,而軟件庫的使用增加了很多。


庫的功能是為常見任務提供通用代碼集合,例如為移動設備調整頁面大小或制作漢堡式菜單欄的滑入滑出效果。Goree團隊研究了那些使用共同庫的網站后,發現它們看起來相似度極高。用特定庫(bootstrap、FontAwesome和JQuery ui)構建的站點往往風格越是趨于一致。這可能是因為這些庫控制頁面布局并提供了常用的默認選項。而其他庫(如SWFObject和JQuery工具)的站點往往看起來有很大的不同,這可能是因為這些庫允許更復雜、定制化的頁面。

2005 年到 2016 年的網站變化說明了這一點。 2005 年平均相似度得分的網站比 2016 年低了很多,網站相似度也更低。

例如,在 2005 年,Webshots.com和Yum.com被認為是相對相似的,但有一些不同的配色方案和很不一樣的布局。雖然它們都主要使用白色、藍色和黑色,但是右邊的站點有一個藍色的背景。


2006 年Webshots.com和Yum.com的截圖

再舉一個例子, 2016 年的Xfinity.com和Gilt.com兩個網站則更加相似:它們都在頂部設有一個菜單欄,主要是黑白相間的圖片。這些頁面的文本少了很多,并且更充分地利用了現有的高分辨率顯示器。


2016 年Xfinity.com和Gilt.com截圖

網站風格越來越趨于一致性是件好事嗎?

一方面,在時尚或建筑等其他設計領域,緊跟潮流是很正常的現象。如果設計變得越來越相似,因為它們使用相同的庫,這意味著它們可能變得更容易被視覺障礙者訪問,因為主流的庫通常比單個開發人員更容易符合訪問標準。優勢是,對用戶更加友好,因為新訪客不必花那么多時間適應瀏覽網站頁面。

另一方面,互聯網是一種共享的文化產物,其分布式、去中心化的特性使其獨一無二。隨著主頁和完全定制的平臺(如NeoPets、MySpace等)逐漸淡出人們的記憶,那些急劇個性化和創造性網頁設計也跟著大大的減弱了。Mozilla基金會認為,這種整合并不利于互聯網的“健康”,而網絡美學應該是影響互聯網健康的一個因素。

如果網站風格越來越相似,是因為許多人使用相同的庫,維護這些庫的大型科技公司可能會在互聯網的視覺美學上獲得過大的權力。雖然發布任何人都可以使用的庫對于網絡來說比保持代碼私密化有更多的好處,但是大型科技公司的設計原則并不一定適合每一個網站。

如果整個互聯網美學都被一些科技巨頭主導,肯定會引發人們的擔憂,畢竟美學的整合也應該在批判中發展,而不是變成“一家之言”。

相關文章:
  • 2023-03-02網頁設計中最常用的5種配圖

    Lee Odden曾說過“Content isn't King, it's the Kingdom”,內容為王已然是毋庸置疑的真理。在網頁設計中也一樣,內容本身一定是占據最多版面的部分,所以它的質量很大程度上決定網頁最終的效果和成敗。

  • 2023-03-02網頁設計與網站架設的作用與原則

    但要想使網站在互聯網市場中處于不敗之地,在使用時更加便捷,更要具有強烈的視覺效果,就必須加強網頁設計與網站架設的創意性,注重其在實際操作中的應用性。

  • 2023-03-02在響應式網頁設計中需要注意的地方是什么?

    響應性網站的設計思路與傳統網站有很大的不同,因為考慮到PC,平板,手機等終端的兼容性和自適應,在設計中有很多事情要擔心,所以我們不能隨意設計,我們需要遵循響應的基本思路,為實現以下功能鋪平道路.

  • 2023-03-02掌握這五大原則,讓你玩轉網頁設計

    網頁設計不同于一般的平面設計,擁有自身的設計特征。網頁界面設計應時刻圍繞“信息傳達”這一主題來進行。目前網頁界面傳達的信息主要是視覺信息。因此從設計類型上來看,網頁界面設計屬于視覺傳達的領域,故而網頁界面設計的主要視覺元素和設計指導原則都要遵循視覺傳達的一般規律。

  • 2023-03-01網頁設計的視覺化網頁開發工具:Dreamweaver

    Adobe Dreamweaver,簡稱“DW”,中文名稱 "夢想編織者",是集網頁制作和管理網站于一身的所見即所得網頁編輯器。DW是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具,利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。

  • 2023-03-01什么是響應式網頁設計與自適應網頁設計

    隨著互聯網科技的迅速發展,移動設備和PC端桌面設備成為訪問互聯網的最常見終端。在進行網站策劃時,需要根據客戶不同需求來分析PC端網站和移動端網站制作風格。

  • 2023-03-01手機網頁設計制作優化要注意的細節

    手機網頁設計制作優化以方便用戶操作為準則,為用戶帶來切實幫助才是關鍵,在進行制作時要特別注意。

  • 2023-02-2610個網頁設計趨勢在2019年將引領潮流

    我們已經看到了移動的統治,AR,VR,AI和許多其他字母表混合的引入。與所有這些新技術一樣令人興奮的是,網頁設計趨勢是為了使這些進步可以訪問并在視覺上吸引用戶。

  • 2023-02-20網頁設計與網站開發有本質區別兩者不可混為一談

    網站架設是一個包羅萬象的短語,它通常告訴人們你在做什么,而不會把他們與一個過于具體的職稱混淆起來,而這一職稱是網絡行業以外的人可能不會理解的。

  • 2023-02-20網頁設計的步驟有哪些?

    網站的定位主要用來確定網站的內容,也就是網站用來做什么。網站的定位通常需要根據市場需求、環境、目標群體等來進行分析和定義。