成都創(chuàng)新總結10個官方網(wǎng)站新聞博客樣式，打造用戶體驗

您企業(yè)的新聞博客是吸引新用戶訪問您網(wǎng)站的主要工具，這些是新用戶尋求知識和對他們所提問題的答案。

為了幫助塑造和優(yōu)化內容的可讀性，您需要新聞設計來促進它的出現(xiàn)，該設計能夠吸引客戶成為頭條新聞，吸引互動，優(yōu)化轉化并創(chuàng)造持久的印象。

將您的內容整理到學習中心

如果您像成都創(chuàng)新一樣，并且已經(jīng)創(chuàng)建內容多年，那么您可能已經(jīng)積累了許多不同類型的內容。

自然，您可能已經(jīng)完成了許多其他組織所做的工作，并將內容分為多個不同的領域。例如，視頻在視頻庫中生活，資源中心中的博客文章，白皮書和電子書，您就會明白。

從內容類型的角度來看，這可以很好地組織所有內容，但您的用戶并不一定總是只想觀看視頻或只看新聞博客內容。

假設用戶是您，您就在探索關于特定主題的更多信息的過程中。

您是希望在站點的不同部分之間跳轉，以查看可用于該主題的內容，還是希望您擁有一個可以查看該主題的所有內容的位置，無論是博客，視頻，支柱還是可下載的內容？

我的猜測是后者。

除了輕松之外，這種方法還使您的用戶更有可能在您的網(wǎng)站上花費更多的時間，因為發(fā)現(xiàn)他們想要的東西的障礙已大大減少。這也可能導致每個會話的頁面數(shù)增加。

那么，這個學習中心應該是什么樣的？

好吧，有幾種方法可以解決這個問題。

一種方法是成都創(chuàng)新的客戶之一Aquila Commercial如何做到這一點。

他們有一頁，其中包含他們創(chuàng)建的所有可能內容的提要。

在這里，您可以使用左側菜單按不同的角色，主題或內容類型進行過濾。在這里，您可以按最新帖子或*的帖子進行排序。

如果您仍然找不到想要的東西，那么這里還有一個搜索欄。

*，有一個由最新組織的博客文章和播客的提要，隨著新文章的出現(xiàn)而自動更新。

總體而言，這種方法都可以實現(xiàn)相似的目標-使您的用戶獲得最相關的內容。根據(jù)當前內容的組織方式以及網(wǎng)站的構建方式，一種方法可能會比另一種更好。

因此，在進入此項目之前，請確保與您的開發(fā)團隊進行內部討論，或者，如果您沒有團隊，請隨時與我們聯(lián)系并聊天，以便我們討論如何實現(xiàn)這一目標。

縮小網(wǎng)格范圍以獲取博客內容

開始使用簡潔，有組織的設計的最簡單方法之一就是利用網(wǎng)格系統(tǒng)，該技術已在報紙和雜志的整個印刷版面中得到廣泛使用。

此技術已應用于網(wǎng)站設計，以幫助在各種屏幕尺寸上為用戶提供一致的體驗。

想象一下，您有一張8.5 x 11英寸的打印紙，前面有一篇打字稿。在當前狀態(tài)下，它很容易閱讀。但是，如果將紙張拉伸到18英寸寬會發(fā)生什么？

逐行閱讀變得更具挑戰(zhàn)性。這就是為什么您看到報紙和雜志采用更窄列格式的原因。

新聞博客也是如此。如果您新聞博客的網(wǎng)格寬度太大（尤其是用戶在大屏幕上），則會給用戶帶來可讀性問題。

這有可能使他們在逐行閱讀時失去自己的位置，同時也使您的內容顯得更短且間隔不佳。

由于絕大多數(shù)用戶使用的顯示器的寬度為1200px-1300px（筆記本電腦大?。?，因此您博客的網(wǎng)格寬度應在900px-1100px之間，*是1024px。

一家在網(wǎng)站上做得很好的公司是Helpscout，請注意他們是如何利用網(wǎng)格使博客內容易于辨認和吸引人的。

此技術還可以在整個博客中為您提供一定數(shù)量的空白。使用網(wǎng)格可幫助用戶將整個博客中的元素（側欄，標題/正文，圖像，共享圖標）區(qū)分開。

網(wǎng)格在組織博客信息方面的有效性是保持內容受控的基礎。

使用博客卡布局

我們許多人都投入了很多內容。根據(jù)您是每周一次還是每天兩次寫博客，到年底，您在網(wǎng)站上可能已經(jīng)有多達600多個博客帖子。

有那么多帖子，您如何*地利用網(wǎng)站的資源來整理這些文章，以便一次顯示最多的信息，而不會給訪問者帶來過多的信息？

基于卡的設計是解決此問題的最適合UX的布局之一。

眾所周知，物理牌（棒球/籃球，口袋妖怪，歷史牌）已經(jīng)存在了很長一段時間，并且可以作為直觀顯示和組織信息的簡便方法。

卡片的體系結構幫助我們輕松地識別，回憶和閱讀重要的信息。

卡設計現(xiàn)已應用于整個網(wǎng)絡。諸如Pinterest，Twitter和Google之類的大型公司已經(jīng)將其根深蒂固地放在了用戶體驗中：

像這些家伙一樣，保持您的博客卡片簡單。

使用不同的圖像和字體大小來表示卡片中最重要到最不重要的元素，會使閱讀它們的人更容易理解。

另外，請確保將重點放在將這些元素合并到卡中（粗體是必不可少的）：

特色圖片博客標題博客作者（和圖片，如果有的話）博客摘錄發(fā)布日期類別社交分享鏈接 閱讀更多按鈕

牢記這一清單，讓我們以Zenefits的名片設計為例，看看他們如何應用這些元素。

在卡片布局中，他們突出顯示特色圖像和標題作為最突出的元素。

摘錄不僅可以幫助用戶確定文章是否適合他們，還可以誘使用戶單擊標題，如果標題仍然令人難以置信。

通過日期，用戶可以識別文章是新文章還是最新文章，同時讓作者（帶有圖片！）可以使您的帖子更具個性-并幫助建立作者的思想領導力。

在您的文章列表頁面上，根據(jù)卡片中信息的排列方式，將這些卡片排列在2或3列中，以*程度地一次顯示多少張卡片。

選擇大尺寸，精美的精選圖片

許多博客的當前趨勢之一是為每個博客卡和內部博客帖子合并大型的，不笨拙的英雄圖像。

這種設計選擇并非沒有道理。以對講機的內部博客模板為例。

盡管他們的特色圖片看起來很大，以至于壓低了內容，但它還是一個引人注目的元素，可以幫助用戶在閱讀標題或作者以外的內容之前將其連接到文章。

在層次結構方面，它還在頁面頂部添加了一個不錯的錨點，使用戶可以輕松識別文章的起點。

盡管不必像對講機一樣大，但重要的是讓您的特色圖像尺寸足夠大，這樣它就具有足夠的視覺重量，可以從與其緊鄰的元素中脫穎而出。

隨意調整布局盡管Intercom之類的公司選擇全幅顯示圖像，而Drift等其他博客則將其圖像保留在網(wǎng)格中，這使您可以查看內容。

在所有設備上使用清晰的字體

并非所有訪問您網(wǎng)站的人都具有20/20的視野，而那些仍然不愿閱讀您12pt字體的人。僅因為較小的字體會縮短所有內容，并不一定會使您的讀者想要繼續(xù)閱讀。

我無法數(shù)出我的父母和朋友訪問博客文章的次數(shù)，只是發(fā)現(xiàn)自己只是為了閱讀頁面上的內容而放大。

聽起來很荒謬，對吧？

您希望網(wǎng)站的字體大小，尤其是博客上的字體大小，成為用戶抱怨的*一件事。

那么問題來了–我應該使用哪種字體大?。?/p>

當涉及到身體字體時，我的經(jīng)驗使我說出介于17像素到21像素之間的某個位置，具體取決于您使用的是哪種字體（某些字體自然大于其他字體）。

對于您的標題大小以及對這一切為何重要的更深入的分析，我建議您閱讀本文。它提供了完整的圖表，其中包含從臺式機到移動設備的標頭標記的一些最常用尺寸。

如果您正在尋找一些掌握網(wǎng)站排版和大小的網(wǎng)站示例，建議您訪問以下公司：

有線

包括文章快速摘要框

為了使競爭關鍵字的排名更好并吸引您的網(wǎng)站訪問量，我們撰寫的大多數(shù)文章都可能需要一兩個句子來回答，而最終以1500個詞的形式發(fā)布。

雖然寫內容的長度正是Google想要您做的，但對于尋求快速解答的用戶而言，這并不完全直觀。

例如，考慮一下“什么是內容營銷”查詢。

與此類關鍵字相關的大多數(shù)搜索結果都是綜合指南，可為您提供有關該主題的所有信息。

但是，如果您只是在尋找內容營銷的定義，那么瀏覽一下4000字的文章以發(fā)現(xiàn)它可能有點乏味。這是簡短的摘要框非常方便的地方。

傳統(tǒng)上，這些框放在博客文章的開頭，您可以在其中添加對文章所涉及的較大問題的簡短答案。如下例所示，其文章中進行了此操作。

除了獲得更快的用戶答案之外，這還有另一個優(yōu)勢。Google經(jīng)常將這些框中的內容用于精選片段。

這意味著您將顯示為SERP中的*篇文章，從而增加了文章的點擊率。

并非所有博客文章都必須使用此框。它應該主要用于文章中那些可能帶有特色片段的頻繁搜索的問題將從較短的答案中受益的文章。

使用簡短的描述性副標題

談到尋找問題的快速答案...

您應該練習的另一個重要特征是編寫簡短明了的標題以將您的文章分成幾部分，以方便讀者使用。

通常，人們?yōu)g覽這些文章的目的是瀏覽它們，直到找到可以回答問題的部分。

考慮到這一點，您需要確保您有清晰的標題以區(qū)分文章，以便讀者可以完成此操作。我不是在說“第1節(jié)”，也不是在說“為什么”和“如何”之類的通用詞。

您需要標題來準確定義讀者在文章的這些分組段落中將學到的內容。

如果您覺得自己的博客文章甚至做不到，建議您在此處查看一些寫作技巧，以幫助您井井有條。

您需要編寫子標題，以提高寫作質量，并幫助您的文章吸引訪問者，尤其是*次訪問者。Copyhackers在這方面做得非常出色。

在這篇博客文章“如何通過復制吸引Instagram追隨者，使他們喜歡您的品牌并購買您的產(chǎn)品”中，每一點都有清晰簡潔的標題，方便讀者對其進行掃描。

如果您正在尋找有關如何編寫子標題的技巧，或者甚至給它們加了些香料，請使用Copyblogger的這篇文章來指導您。

使社交共享可在所有設備上訪問

如今，大多數(shù)博客都使用社交共享來允許用戶輕松共享博客文章。但是，許多網(wǎng)站并沒有為平板電腦和移動用戶提供相同的體驗。

皮尤（Pew）的一項調查發(fā)現(xiàn)，現(xiàn)在至少有一部分時間，美國85％的成年人通過移動設備接收新聞，包括65歲以上的成年人。

這些人也在他們的移動設備上瀏覽社交平臺，因此您可以打賭他們也愿意在移動設備上共享內容（只要他們發(fā)現(xiàn)該內容知識豐富并且可以輕松地做到這一點）。

但是，您應該在哪里放置社交按鈕？由于較小的設備上的空間有限，所以很多人都不知道將它們放在哪里。

在Mashable的博客上，社交按鈕位于導航的右側，并在您滾動頁面時與您保持一致，從而使用戶可以隨時共享。

NBC采取了類似的方法，將其共享選項也放置在固定的頂部欄中，一旦用戶滾動到頁面上的某個點，該頂部就會出現(xiàn)。

有策略地放置您的表單

我們中的許多人發(fā)現(xiàn)自己的流量非常健康，但是卻難以獲得所需的訂閱者數(shù)量或轉化次數(shù)。在這里，非常需要使用誘人且美觀的表單。

如果您不熟悉該術語，那么表達是用戶無法接受的以交換特定聯(lián)系信息的不可抗拒的報價。

理想情況下，您希望表單能夠與目標受眾產(chǎn)生共鳴，從而將合格的鉛吸引到系統(tǒng)中。

盡管許多人在整個博客中都將表單用作獨立產(chǎn)品，但更具戰(zhàn)略意義的用途是當人們訂閱您的博客時收到的產(chǎn)品。

這樣，您不僅在增加訂戶數(shù)量，而且在轉換方面！

確定了最適合您的受眾的報價后，您現(xiàn)在需要使其在視覺上具有說服力。

在成都創(chuàng)新的客戶博客中，我們以兩種不同的方式使用此技術。

*個是在博客文章頁面上（您的用戶可以在其中看到您發(fā)布的所有文章）。

用戶滾動瀏覽列出的幾篇文章后，將放置號召性用語以下載指南或訂閱。

第二種方法是通過彈出窗口每天向未訂閱網(wǎng)站博客的用戶顯示一次。

表單的兩種情況都需要以下元素才能使其發(fā)揮*性能：

要約或圖片的封面，因此用戶可以直觀地看到要約的內容 標題，可幫助用戶了解報價是什么 子標題可幫助用戶理解為什么他們需要特定的報價以及對他們有什么價值 一種按鈕顏色，與您網(wǎng)站的調色板分開，因此非常容易識別。

保持直插式磁鐵的侵入性稍小。無需動畫或強制交互。

它應該舒適地適合您的列表頁面，同時使用不同的布局和顏色變化來與文章區(qū)分開，例如以下所示的Armstrong Transport的文章。

對于彈出窗口，請確保它易于區(qū)分。

例如，使背景變暗并創(chuàng)建白色容器可以幫助強調彈出窗口，并防止用戶被黑色覆蓋下的博客分散注意力。

10.突出顯示您的作者

您的作者在創(chuàng)建博客內容上花費了大量時間和精力，您應該通過將其發(fā)布為各自文章的作者來慶祝。

不僅如此，您還應該給他們提供簡短的履歷，出現(xiàn)在文章的底部，以便您的用戶能夠區(qū)分誰在您的博客上寫了什么。更好的是，有單獨的作者頁面可以顯示他們撰寫的所有帖子。

這有助于博客的UX，因此用戶可以更輕松地搜索自己喜歡的作者的文章，同時還為您的作者提供了一個展示他們在各個主題上提供的所有見解的地方。

下一步

您越早將這些設計原則實施到博客上，就越早開始看到更多的轉換和流量。

如果您覺得這對您有所幫助，那么該做了。在內部與您的團隊合作，提出可以與上述至少4個項目相關聯(lián)的新設計，并逐步開發(fā)出博客的完整更新版本。

如果您認為仍需要有關博客其他方面需要改進的指導，請考慮將您的網(wǎng)站提交給免費的網(wǎng)站評論。在10分鐘內，您將走出可行且個性化的待辦事項，以幫助改善從消息傳遞到SEO和設計的所有內容。

當前文章：成都創(chuàng)新總結10個官方網(wǎng)站新聞博客樣式，打造用戶體驗
路徑分享：http://www.bm7419.com/news/199706.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有用戶體驗等

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)