發布者網站的設計方法

已發表: 2020-12-17

什麼是“數字出版商網站”? 該網站致力於每天發布大量文章。 這是一個高於“博客”的水平。 它基本上是一個新聞網站或病毒發布平台,例如BuzzFeed。

與產品銷售,業務,個人博客或任何其他類型的網站相比,此類網站的設計方法有所不同。 它的佈局通常被稱為“雜誌”風格,在主題市場中也相當飽和。

buzzfeed屏幕截圖

是什麼使發布者網站與眾不同?

發布者網站和常規網站之間有兩個主要區別。

第一個顯而易見的是內容量。 當然,現在有龐大的網站,尤其是像Amazon或eBay這樣的電子商務網站,它們很可能擁有更多的內容,但是這些平台是從站點用戶那裡獲取內容的平台。 出版商擁有編輯團隊,他們全職工作以按計劃製作內容。 就像報紙一樣。

另一個主要區別是收入來源。 像可口可樂這樣的公司網站並非從該網站產生收入,而是來自其產品。 大多數公司網站的目的都是為了成為數字化存在。

知道這一點,很可能發布者的網站收入來自網站本身。 怎麼樣? 廣告! 這幾乎就是Google或Facebook如何產生大部分收入的方式。

廣告最明確地運行在網絡上,並且是許多網站的主要優先事項。 他們的內容主要是吸引盡可能多的讀者,以便他們可以在其版式上看到廣告。

從設計的角度來看,這是發行商和雜誌網站的主要優先事項。

設計內容豐富的網站

讓我們看一下像Variety這樣的大型發行商:

各種首頁

首先看到的是頂部的大型廣告。 在此之前,我們將在一秒鐘之內進一步研究內容佈局。 一個帶有許多鏈接的大標題-漢堡在頂部,搜索,號召性用語,然後是更多菜單項。 目的是使訪問所有類別的內容變得容易。 與許多少於10個頁面(不包括博客頁面)的商業網站形成了鮮明的對比。

之後–主文章的大盒子。 這是一個很好的設計決定。 它使您的訪客更容易決定做什麼。 如果有10個同樣重要的元素,那麼選擇一個而不是另一個的精神壓力會使一些用戶跳出頁面。 通過對重要項目至次要項目的清晰視覺層次結構,設計人員可以使用戶在網頁上停留的時間更長。

在右側-另一個廣告和一個“最受歡迎”小部件,這正是大多數用戶希望看到的。 為了容納如此多的內容,Variety決定將其放入可滾動區域。

這是大型出版商通常會採用的佈局類型。

buzzfeed主頁

BuzzFeed是另一個用於處理大量文本的佈局示例。 儘管這裡的設計更生動有趣,但鮮豔的色彩和引人注目的形狀(如右上角的三個按鈕)。

右側趨勢圖上的1、2、3,“突發”新聞的鮮紅色標籤等等,還有更多的“排名”。 相似設計的一個主要趨勢是引起用戶的注意。 但是,必須將注意力集中在正確的方向上,因為您不想將其分為兩個同等重要的項目。

這是一個錯誤方法的示例,該方法試圖將所有內容都放在首位:

靈車

我們很清楚,目的是完全不同的,並且上面的網站實際上可能會帶來豐厚的利潤,但是它很好地說明了“一切為了吸引您的注意力”的原則

數字出版商和廣告

圍繞廣告進行設計是發布者的另一個主要主題。 考慮到這是主要的收入來源,這也是當務之急。 設計師在這裡應該考慮幾件事,首先是從AdOps團隊那裡獲得反饋或良好的信息,他們對這些廣告的要求和功能非常了解。

例如廣告尺寸。 有300×250、300×600,有728×90以及300×50。

  • 有些可能會粘在屏幕的一側,您可以在其中滾動瀏覽不同的點
  • 有些人可能會留在自己的小角落,有些人會始終停留在頁面頂部。
  • 其他的則以兩個300×250或一個720x90px成對出現。

您如何知道所有這些要求?

所以是的,第一步將是收集所有這些信息。 佈局是一種更簡單的查看方式。 單個帖子可以具有多個佈局,具體取決於發布者的目標。 有時廣告較少,有時更多。 有時,廣告會針對不同的負載更改大小,而有時卻保持不變。 儘管隨著新趨勢和新規則的出現,這一切都可能迅速改變。 經常每天!

要記住的一些重要事項是:

  • 具有高度的廣告可能會加載。 這意味著內容將被下推,並且為適應折疊上方的某個小部件而進行的設計將失敗。
  • 廣告可能需要背景,這可能是圍繞廣告的淺灰色背景,觸摸了屏幕的各個角落。
  • 廣告通常需要在其周圍留有間距以避免意外觸摸。廣告之間的距離最好為20-30像素。
  • 您可能希望在廣告投放之前/之後添加“廣告”標籤,以吸引更多廣告提供商。
  • 不應有太多廣告! 最佳解決方案是AdOps團隊將致力於確定特定的發布者,特定的頁面甚至特定的流量(例如Facebook,Snapchat等)

發布者網站的效果

造成效果不佳的主要原因是設置了8個以上的廣告,試圖加載大量其他腳本。 當所有這些都在代碼中時,為什麼這是設計師的關注點? 開發人員不能優化它嗎? 是的,但是這幾乎是一項全職工作,設計師可以提供幫助。 要了解所有這些,您首先需要對瀏覽器有所了解

發布者網站的效果

資源

瀏覽器可以利用機器的CPU或GPU,具體取決於前端開發人員對某些元素進行編碼的方式。 有時,動畫,懸停,按下時的交互等動作會利用CPU或GPU。 例如,如果動畫利用CPU,則很可能會有滯後,如果是GPU,則有可能獲得更好的性能。 設計師的要求可能是兩者之間的差異。

以下是一些一般性提示:

  • 幾乎沒有陰影。 陰影渲染起來非常昂貴,尤其是在低端移動設備和筆記本電腦上。
  • 不要使用背景濾鏡或模糊(或任何濾鏡),因為它們也很昂貴。
  • 保持形狀盡可能簡單以減少額外的計算。
  • 請勿請求影響佈局的元素(其他元素)的動畫。 盡可能多地設計。 任何重疊或彈出的窗口都是更好的選擇。
  • 保持圖像相對較小。 這將允許開發人員加載較小尺寸的圖像,從而減輕站點的重量。
  • 總體上將動畫保持在最低水平,尤其是在站點負載方面。 同樣適用於佈局轉換。 應用所有JavaScript時,第一個負載是網站佔用CPU最多的時間。

資源

設計優先

發布者網站上的大部分流量都來自Mobile。 因此,花在拋光所有細節上的時間最多。 在移動設備上也需要進行大多數優化,因為大多數設備不是高端旗艦產品,而是200-300美元的智能手機。

在移動設備上,您的重點是在以清晰的方式展示廣告的同時保持內容的可讀性。 保持所有可點擊元素與廣告之間的距離較大,以消除廣告上的意外點擊。 如果可能,請減少任何動畫和疊加層,這些動畫和疊加層可能會使網站不那么生動。

概要

發布商專注於大量內容和大量廣告。 通常,登錄頁面和歸檔文件的優先級要比單一視圖低,因為訪問量通常直接來自其他廣告。 作為設計師,您的重點是找到最合適的方法來投放廣告,添加適當的間距,並將其與主要內容很好地分隔開,以確保所有內容均易於閱讀和使用。

盡量減少複雜的UI元素以提高速度性能,並請求盡可能少的動畫。 為了確定一切,發布商經常需要與在AdOps方面擁有豐富經驗,遵循最新趨勢以及業務中的技術棧(例如DevriX)的開發機構合作。