什么是“數(shù)字出版商網(wǎng)站”？” 這是一個致力于每天發(fā)布大量文章的網(wǎng)站。 這是一個高于“博客”的水平。 它基本上是一個新聞?wù)军c(diǎn)或病毒發(fā)布平臺，例如BuzzFeed。

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

發(fā)布者網(wǎng)站與常規(guī)網(wǎng)站之間有兩個主要區(qū)別。

第一個顯而易見的是內(nèi)容量。 現(xiàn)在， 當(dāng)然， 有很多網(wǎng)站， 尤其是像Amazon或eBay這樣的電子商務(wù)網(wǎng)站，它們很可能擁有更多的內(nèi)容， 但是這些平臺是從網(wǎng)站用戶那里獲取內(nèi)容的平臺。 出版商擁有編輯團(tuán)隊(duì)，他們?nèi)毠ぷ饕园从媱澲谱鲀?nèi)容。 就像報紙一樣。

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

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

廣告， 最堅決地 運(yùn)行網(wǎng)絡(luò)，這是許多網(wǎng)站的主要優(yōu)先事項(xiàng)。 他們的內(nèi)容主要是吸引盡可能多的讀者，以便他們可以在其版式上看到廣告。

從設(shè)計的角度來看， 這是出版商和雜志網(wǎng)站的主要優(yōu)先事項(xiàng)。

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

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

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

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

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

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

還有更多的“排名”，因?yàn)? 2， 右側(cè)趨勢3， 帶有“ Breaking”新聞的鮮紅色標(biāo)簽，依此類推。 相似設(shè)計的一個主要趨勢是引起用戶的注意。 但是，您必須將注意力集中在正確的方向上，因?yàn)槟幌雽⑵浞譃閮蓚€同等重要的項(xiàng)目。

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

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

圍繞廣告進(jìn)行設(shè)計是發(fā)布者的另一個主要主題。 考慮到它是主要的收入來源， 這也是當(dāng)務(wù)之急。 設(shè)計師在這里應(yīng)該考慮幾件事， 首先是從AdOps團(tuán)隊(duì)那里獲得反饋或良好信息，他們對這些廣告的要求和功能非常了解。

例如，廣告尺寸。 300×250 300×600， 有728×90和300×50。

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

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

是的， 第一步是收集所有這些信息。 布局是一種更簡單的查看方式。 單個帖子可以具有多個布局，具體取決于發(fā)布者的目標(biāo)。 有時廣告較少， 有時還有更多。 有時，廣告會針對不同的負(fù)載更改尺寸， 其他時候，它們保持不變。 盡管隨著新趨勢和新規(guī)則的出現(xiàn)，這一切都可能迅速改變。 經(jīng)常每天！

要記住的一些重要事項(xiàng)是：

• 具有高度的廣告可能會加載。 這意味著內(nèi)容將被下推，并且為適應(yīng)折疊上方的某個小部件而進(jìn)行的設(shè)計將失敗。
• 廣告可能需要背景， 這可能是廣告周圍的淺灰色背景， 觸摸屏幕的各個角落。
• 廣告通常需要在其周圍留有間距，以避免意外的觸摸。廣告之間的距離最好為20-30像素。
• 您可能希望在廣告投放之前/之后添加“廣告”標(biāo)簽，以吸引更多廣告提供商。
• 廣告不應(yīng)太多！ 最佳解決方案是AdOps團(tuán)隊(duì)為特定的發(fā)布商尋找解決方案， 特定頁面甚至特定流量（例如Facebook， Snapchat， 等等）

導(dǎo)致效果不佳的主要原因是設(shè)置了8個以上的廣告，并試圖加載大量其他腳本。 當(dāng)全部包含在代碼中時，為什么這是設(shè)計師的關(guān)注點(diǎn)？ 開發(fā)人員不能只是對其進(jìn)行優(yōu)化嗎？ 嗯，是， 但這幾乎是一份全職工作， 一位設(shè)計師可以提供幫助。 要了解所有這些， 您首先需要對瀏覽器有所了解

來源

瀏覽器可以利用機(jī)器的CPU或GPU，具體取決于前端開發(fā)人員對某些元素進(jìn)行編碼的方式。 有時， 懸停時的動畫和互動等動作， 按下就會利用CPU或GPU。 舉例來說，如果某個動畫使用了CPU，那么很可能會出現(xiàn)延遲， 如果是GPU， 那么就有可能獲得更好的性能。 設(shè)計師的要求可能是兩者之間的差異。

以下是一些一般性提示：

• 幾乎沒有陰影。 陰影渲染非常昂貴，尤其是在低端移動設(shè)備和筆記本電腦上。
• 不要使用背景濾鏡或模糊濾鏡（或任何濾鏡），因?yàn)樗鼈円埠馨嘿F。
• 保持形狀盡可能簡單，以減少額外的計算。
• 請勿請求影響布局的元素（其他元素）的動畫。 盡可能多地設(shè)計。 重疊或彈出的任何內(nèi)容都是更好的選擇。
• 保持圖像相對較小。 這將允許開發(fā)人員加載較小尺寸的圖像，從而減輕站點(diǎn)的重量。
• 總體上將動畫保持在最低水平， 特別是現(xiàn)場負(fù)載。 同樣適用于布局轉(zhuǎn)換。 應(yīng)用所有JavaScript時，第一個負(fù)載是網(wǎng)站占用CPU最多的時間。

來源

發(fā)布者網(wǎng)站上的大部分流量都來自Mobile。 因此，花在拋光所有細(xì)節(jié)上的時間最多。 在移動設(shè)備上也需要進(jìn)行大多數(shù)優(yōu)化，因?yàn)榇蠖鄶?shù)設(shè)備不是高端旗艦產(chǎn)品，而是200-300美元的智能手機(jī)。

在移動， 您的重點(diǎn)是在以清晰的方式展示廣告的同時保持內(nèi)容的可讀性。 保持所有可點(diǎn)擊元素與廣告之間的距離較大，以消除廣告上的意外點(diǎn)擊。 如果可能的話， 減少可能會使網(wǎng)站不那么生動的動畫和疊加層。

發(fā)布商專注于大量內(nèi)容和大量廣告。 一般來說， 著陸頁和歸檔文件的優(yōu)先級低于單一視圖，因?yàn)樵L問量通常直接來自其他廣告的文章。 作為設(shè)計師， 您的重點(diǎn)是找到最合適的廣告投放方式， 添加適當(dāng)?shù)拈g距，并將其與主要內(nèi)容很好地分開，以保持所有內(nèi)容的可讀性和可用性。

將復(fù)雜的UI元素保持在最低限度以提高速度性能，并請求盡可能少的動畫。 要把一切都釘牢， 發(fā)布商通常需要與在AdOps方面擁有豐富經(jīng)驗(yàn)的開發(fā)機(jī)構(gòu)合作， 跟隨最新趨勢， 和諸如DevriX之類的業(yè)務(wù)中的技術(shù)堆棧。

也許是時候重新設(shè)計您的網(wǎng)站了。 DevriX可以幫助您根據(jù)技術(shù)規(guī)范構(gòu)建定制的定制解決方案。 提交您的提案或請求一個完整的發(fā)現(xiàn)會話，以確定您的要求并評估您的業(yè)務(wù)需求。

DevriX的創(chuàng)意主管和前端開發(fā)人員
亞歷克斯（Alex）的熱情在于學(xué)習(xí)新的網(wǎng)絡(luò)技術(shù)， 探索創(chuàng)新的方法來優(yōu)化網(wǎng)站性能并改善用戶體驗(yàn)。 亞歷克斯（Alex）喜歡騎自行車和數(shù)字藝術(shù)，最近開始在ELSYS技術(shù)學(xué)校教授設(shè)計。