市場營銷副總裁，超過10年的銷售和營銷經(jīng)驗(yàn)，超過12年的開發(fā)經(jīng)驗(yàn)，超過14年的項(xiàng)目管理專業(yè)知識
例如，博客已成為任何成功網(wǎng)站的基石。引導(dǎo)用戶提供具有針對性，相關(guān)性和吸引力的內(nèi)容，并最終使他們感到高興，他們轉(zhuǎn)化并訂閱以獲取更多。
事實(shí)是，通過您的博客文章進(jìn)入您的網(wǎng)站（并找到您的品牌）的用戶比您的主頁要多，因此 您的博客設(shè)計(jì)應(yīng)使您“盡力而為”。
作者的注釋：所有這些博客都在13英寸的Macbook Pro上進(jìn)行查看。您查看的內(nèi)容可能會(huì)根據(jù)屏幕大小而改變。但！屏幕應(yīng)該是一致的用戶體驗(yàn)。
1. Wistia
請注意，共有4個(gè)主題，而不是25個(gè)。這可以簡化用戶體驗(yàn)，并為他們提供他們最關(guān)心的內(nèi)容，并且使您無需進(jìn)行導(dǎo)航。
它還突出顯示了作者及其出版時(shí)間，這看似很小，但實(shí)際上非常重要。用戶想知道他們正在閱讀的內(nèi)容并不是過時(shí)的，并且是由專家編寫的。
向克里斯·拉維尼（Chris Lavigne）喊叫，獲得精美的精選圖片和文章（實(shí)際上非常有用，請查看?。?/div>
Wistia的文章設(shè)計(jì)也非常簡潔清晰，將重點(diǎn)放在內(nèi)容和內(nèi)容上。
使用字體層次結(jié)構(gòu)將各部分分開可以使瀏覽更加容易，并且缺少側(cè)邊欄確實(shí)有助于訪問者對內(nèi)容進(jìn)行歸零，而不會(huì)分散注意力。
2. 漂移
Drift的博客設(shè)計(jì)絕對是另一個(gè)醒目的標(biāo)記。
blog-design-inspiration-drift.png
它的列表頁面是一個(gè)最小的單列，帶有大而漂亮的圖像，可以真正激發(fā)用戶的興趣并使他們閱讀。
IMPACT Plus
估計(jì)讀取時(shí)間的增加是被遺忘的，但是對您的用戶而言絕對是至關(guān)重要的。
您是否曾經(jīng)遇到過您真正想閱讀但又覺得自己沒有足夠的時(shí)間卻從未做過的文章？為用戶需要付出的努力提供一些指導(dǎo)，這是提高讀者數(shù)量的好方法。這使用戶知道何時(shí)應(yīng)該為文章添加書簽，而不是閱讀四分之一并跳至其他內(nèi)容而未完成。
Drift的實(shí)際文章設(shè)計(jì)也令人印象深刻。
同樣，遵循單列路線并消除干擾是鼓勵(lì)讀者完成完整博客文章并最終達(dá)到策略性放置在末尾或應(yīng)該放置的轉(zhuǎn)換點(diǎn)的好方法。
該團(tuán)隊(duì)非常擅長使用全列圖像來分解帖子，因此用戶不會(huì)遇到可怕的“文字墻”。
阻止某人閱讀您的內(nèi)容沒有比讓它看起來像令人生畏的體驗(yàn)更快的方法。用適當(dāng)?shù)臉?biāo)題和出色的視覺效果來分解長篇文章，是提高讀者人數(shù)和可讀性的不二之選。
這就是為什么我不得不將Drift當(dāng)作一個(gè)以用戶為中心的博客設(shè)計(jì)靈感的例子的原因。
3. Sigstr
在Sigstr上可以看到另一個(gè)很棒的博客列表布局。
電子郵件簽名公司使用“卡片”樣式的布局，這種布局可以做得很好（在這種情況下），也可以做得很差。
通常，您會(huì)看到三欄式卡片清單頁面，這會(huì)使內(nèi)容難以理解。 但是，Sigstr團(tuán)隊(duì)選擇了兩列布局，這限制了手頭的選項(xiàng)數(shù)量，并避免了一次發(fā)送太多消息。
blog-design-inspiration-sigstr.png
特色圖片的使用有助于突出顯示每張卡片，并使用戶想要滾動(dòng)瀏覽所有內(nèi)容以查看他們還能學(xué)到什么。
我唯一建議您進(jìn)行的更新是延長文章摘錄的長度，以使用戶對文章的內(nèi)容有更多的了解。通過這種調(diào)整，您將獲得真正的贏家！
查看內(nèi)部文章的設(shè)計(jì)，將其很好地組合在一起，并專注于用戶的可讀性。
該頁面的字體系列和大小選擇非常方便，可幫助您向下瀏覽頁面。
我之所以要在博客設(shè)計(jì)靈感列表中加入Sigstr的主要原因之一是由于在他們的博客中大量使用了適當(dāng)?shù)木€條高度 字形。使用錯(cuò)誤的行高（無論行高還是過?。┒紩?huì)嚴(yán)重影響您的可讀性。內(nèi)容太大，內(nèi)容感到抽筋且難以閱讀；太小了，雜亂無章，變成了一塊實(shí)心的文本。
通過實(shí)現(xiàn)吸引人的線條高度，您將為內(nèi)容提供一個(gè)需要吸收和保留的呼吸空間。
4. 視覺
InVision的博客確實(shí)做得很好。
對我來說，最大的好處就是使用了描述性標(biāo)題。在內(nèi)部，這消除了對完整文章摘錄的需求，而該摘要摘錄可與精選的文章滑塊很好地配合使用。
blog-design-inspiration-invision.png
通常，我反對使用滑塊或旋轉(zhuǎn)木馬，但為此，它與博客標(biāo)題和背景中的大型精選圖像配合使用效果很好。
在功能強(qiáng)大的帖子滑塊下方，inVision還使用3列布局，其中包含簡短而甜美的摘錄，幾乎都是一線描述。
對空白空間的策略性使用使每個(gè)帖子都可以“呼吸”，并幫助用戶專注于找到他們關(guān)心的內(nèi)容，而不是一次被太多選項(xiàng)轟炸-這是三欄式外觀??的常見現(xiàn)象。
與其他博客設(shè)計(jì)靈感網(wǎng)站一樣，實(shí)際的文章設(shè)計(jì)是 簡單 和單列。
blog-design-inspiration-invision2.png
InVision最喜歡做的事情是使用其社交共享按鈕和主要的號召性用語（CTA），并將它們放置在導(dǎo)航欄中，當(dāng)用戶滾動(dòng)時(shí)，導(dǎo)航欄中的導(dǎo)航條會(huì)停留在屏幕底部。
這是保持他們的頭腦和易于訪問而又不引起人們注意力的一種好方法。
5. DigitalMarketer
可以在DigitalMarketer上找到更多博客設(shè)計(jì)靈感。
培訓(xùn)機(jī)構(gòu)選擇了與InVision類似的布局，但沒有滑塊/轉(zhuǎn)盤。因?yàn)椴季值捻敳坎皇悄ǔ５牟┛土斜眄撁妫运隙〞?huì)激起用戶的興趣并使他們閱讀。
blog-design-inspiration-digitalmarketer.png
DigitalMarketer還在第一部分中突出顯示了其特色文章，該文章與該列表中的其他文章一樣，利用描述性標(biāo)題來吸引用戶并使他們閱讀更多內(nèi)容。
我最喜歡的部分是如何在英雄下方顯示四個(gè)最新帖子，并用數(shù)字對它們進(jìn)行排序。它吸引眼球，給人以方向感，讓您幾乎立即閱讀標(biāo)題。
在此“特色部分”下方，您將獲得更傳統(tǒng)的博客布局，左側(cè)的帖子供稿，右側(cè)的側(cè)邊欄。帖子供稿使用摘錄來幫助用戶為文章提供更多背景信息，并包括一個(gè)不容錯(cuò)過的醒目的“更多閱讀”按鈕。
總體而言，DigitalMarketer所做的出色工作不會(huì)使廣告或CTAs的側(cè)邊欄混亂。
團(tuán)隊(duì)選擇包括一個(gè)簡單的博客搜索，其最受歡迎的帖子以及一個(gè)可追蹤您的有價(jià)值的CTA。
6. 新芽社交
接下來是Sprout Social。我將其稱為“全角”卡布局；它被屏蔽了，但每個(gè)單獨(dú)的博客帖子在用戶眼中都沒有爭取關(guān)注。
blog-design-inspiration-sprout.png
該博客的精選大圖像給人以極大的視覺興趣，并引導(dǎo)讀者注意標(biāo)題。通過這種布局，您可以滾動(dòng)或滑動(dòng)查看大量文章，以了解其他內(nèi)容。
布局的版式和字體層次結(jié)構(gòu)也非常簡潔，與其他示例一樣，它使瀏覽和實(shí)際消化內(nèi)容變得容易，從而有助于保持讀者的注意力。
值得一提的是，Sprout Social和其他產(chǎn)品表現(xiàn)良好，是因?yàn)樽煮w顏色不使用全黑。
我發(fā)現(xiàn)白色背景上的純黑色可能會(huì)使您的眼睛疲勞，因此將顏色更改為深灰色或木炭會(huì)大大提高可讀性。
我真正喜歡的是Sprout Social如何淡化閱讀時(shí)跟隨您的社交共享圖標(biāo)。
這可以消除干擾因素的影響，但仍可以使用戶能夠根據(jù)需要進(jìn)行共享。
7. 石家莊裕華區(qū)網(wǎng)站建設(shè)公司幫助偵察員
最后但并非最不重要的一點(diǎn)是，Help Scout的博客使用了另一種“卡片”樣式，但是這次使用了一個(gè)粗體的3列。
blog-design-inspiration-helpsout.png
它從一個(gè)大而漂亮的精選文章欄開始，該節(jié)立即在插圖中吸引用戶，然后在各列中顯示大量內(nèi)容。
如前所述，三列布局很容易讓人分心，但是Help Scout的作品卻是如此。這些卡片沒有大的描述，它們使用更大，更生動(dòng)的圖像吸引眼球并吸引他們。
Help Scout還巧妙地將“廣告”與其實(shí)際內(nèi)容文章結(jié)合在一起。
現(xiàn)在，我所說的廣告不是付費(fèi)橫幅，而是相關(guān)的內(nèi)部促銷項(xiàng)目，例如2017年客戶支持薪酬研究。
這是一種明智的方法，可讓您關(guān)注優(yōu)質(zhì)內(nèi)容的提供，而不會(huì)變得過于冒進(jìn)或垃圾郵件。
文章內(nèi)部的設(shè)計(jì)使用了很高的行高和內(nèi)邊距，以確保內(nèi)容可以呼吸并且閱讀時(shí)不會(huì)感到太費(fèi)力。
我還是“額外閱讀”部分的忠實(shí)擁護(hù)者。這是繼續(xù)用戶繼續(xù)瀏覽其他帖子并增加頁面停留時(shí)間的簡便方法。
始終首先考慮用戶。利用此博客設(shè)計(jì)的靈感來幫助引導(dǎo)他們?yōu)g覽您的內(nèi)容，并消除可能使他們偏離當(dāng)前目標(biāo)的任何干擾。
任何設(shè)計(jì)中最重要的部分是與特定用戶一起對其進(jìn)行測試，以確保這是他們想要的體驗(yàn)以及公司所需的體驗(yàn)。
需要出發(fā)點(diǎn)嗎？與我們討論我們的博客優(yōu)化軟件包，該軟件包 可以（并且已經(jīng)?。槲覀兊目蛻魩砹?倍的轉(zhuǎn)化和流量。
