什么是“數字出版商網站”？” 這是一個致力于每天發布大量文章的網站。 這是一個高于“博客”的水平。 它基本上是一個新聞站點或病毒發布平臺，例如BuzzFeed。

與產品銷售相比，此類網站的設計方法有所不同， 商業， 個人博客， 或任何其他類型的網站。 其布局通常被稱為“雜志”風格， 在主題市場中，這也是一個非常飽和的類別。

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

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

另一個主要區別是收入來源。 像可口可樂這樣的公司網站不會產生收入 從網站上， 相反，它來自其產品。 大多數公司網站的目的只是為了成為數字化存在。

知道這一點， 很明顯，發布者的網站收入來自網站本身。 如何？ 廣告！ 這幾乎就是Google或Facebook如何產生大部分收入的方式。

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

從設計的角度來看， 這是出版商和雜志網站的主要優先事項。

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

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

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

在右側–另一個廣告和“最受歡迎”小部件， 這正是大多數用戶希望看到的。 為了容納如此多的內容， 品種已決定使其成為可滾動區域。

這是大型出版商通常會采用的布局類型。

BuzzFeed是另一個用于處理大量文本的布局示例。 盡管這里的設計更加生動有趣，但鮮艷的色彩和引人注目的形狀（如右上角的三個按鈕）。

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

這是一個錯誤方法的示例，其中所有內容都試圖放在頂部：

我們很清楚，目的是完全不同的，并且上面的網站實際上可能會帶來可觀的利潤， 但它很好地說明了“凡事引起您的注意”的原則

圍繞廣告進行設計是發布者的另一個主要主題。 考慮到它是主要的收入來源， 這也是當務之急。 設計師在這里應該考慮幾件事， 首先是從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之類的業務中的技術堆棧。

也許是時候重新設計您的網站了。 DevriX可以幫助您根據技術規范構建定制的定制解決方案。 提交您的提案或請求一個完整的發現會話，以確定您的要求并評估您的業務需求。

DevriX的創意主管和前端開發人員
亞歷克斯（Alex）的熱情在于學習新的網絡技術， 探索創新的方法來優化網站性能并改善用戶體驗。 亞歷克斯（Alex）喜歡騎自行車和數字藝術，最近開始在ELSYS技術學校教授設計。