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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

來(lái)源

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

以下是一些一般性提示：

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

來(lái)源

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

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

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

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

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

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