2022 年 10 個博客佈局最佳實踐——不要讓尷尬的佈局毀了你的用戶體驗

已發表: 2022-04-30

一位睿智的用戶體驗設計師說過，“好的設計是看不見的”。換句話說，如果您或您的用戶注意到您的博客佈局或用戶體驗，則可能是糟糕的設計。

想想我們每天使用的所有網站、應用程序和平台。我們是否有意識地考慮用戶界面和體驗？

最好的用戶界面 (UI) 和用戶體驗 (UX) 不會妨礙我們實現目標，無論是評論 Instagram 帖子、瀏覽長篇博文還是將數據輸入到一個網絡應用程序。

精心設計的博客在很多方面對電子商務企業主來說都是必不可少的。例如，他們為網站帶來流量並幫助與潛在客戶建立信任。它們還有助於推廣產品和服務，從而帶來以後的增長機會。

不幸的是，如果你有一個尷尬的設計，你很快就會發現人們不太可能留下來閱讀你的內容。這意味著上面提到的好事都不太可能發生。

“媒介就是信息。” 這意味著您交付內容的方式與內容本身的質量同樣重要。

由於您的博客是營銷渠道的重要組成部分，因此良好的 UI/UX 肯定會影響回訪者和收入。

這篇博文將介紹 2022 年的一些最佳佈局實踐，這些實踐將使用戶保持參與度，回來獲取更多信息，並將您的博客推薦給其他人。

2022 年 10 個 UX 博客佈局最佳實踐

技術——包括網絡最佳實踐——似乎每週都在變化。新技術帶來了新的、令人興奮的內容消費方式。

用戶現在習慣於短時間消費內容，無論是通過社交媒體還是在手機上閱讀博客。

您的博客佈局必須適應這些變化並且易於閱讀，無論人們在何處或以何種方式使用它。

在設計博客佈局以獲得最佳用戶體驗時，請牢記以下幾點提示。

提示 #1：使用集中的“學習中心”方法

就特定主題進行大量寫作是在 Google 上建立主題權威並贏得受眾信任的好方法。

但是，如何在博客上組織這些內容與內容本身一樣重要。

假設您已經編寫了有關為非營利組織籌款的所有知識。棒極了。但是，如果相關內容未標記、未分類並散佈在一堆其他主題中，這對非營利前景有什麼好處呢？

對於想要一次性使用特定主題的所有內容的用戶來說，這並不理想。最好採用累積方法，將有關該主題的所有內容組織在一個地方——我們稱之為“學習中心”方法。

這種方法是提高參與度的好方法。它允許用戶輕鬆查找和使用您在特定主題上擁有的所有內容，而無需在您的網站上進行尋寶。它還允許您交叉推廣其他內容並增加在您的網站上花費的時間。

此外，學習中心方法可能會增加您每次會話的頁面。

這在實踐中是什麼樣的？您可以查看MatterApp 的博客以獲取很好的示例。該公司的特色是一款向工作團隊提供榮譽和反饋的應用程序，將其支柱和內容集中在一個頁面上的六個類別中。該頁麵包含用戶需要研究以了解有關其產品的更多信息。

提示 #2：利用“粘性”元素

人類是懶惰的。因此，設計的主要原則之一是增加最大價值，同時讓用戶盡可能少地工作。

使用“粘性”頁面元素是促進這一點並增加博客參與度的最佳方法之一。

當用戶向下滾動時，粘性元素在屏幕上仍然可見。這意味著它們始終可以訪問，而無需用戶向上滾動到頁面頂部。

例如，如果您有一個註冊電子郵件列表的號召性用語，則使用粘性元素將確保它始終可見且觸手可及。

你可以在 HubSpot 的博客上看到一個例子。該公司在屏幕右下角使用粘性號召性用語，鼓勵用戶註冊他們的電子郵件列表。

您可以將粘性元素用於各種其他目的，例如：

社交媒體按鈕
導航菜單
搜索欄
實時聊天小部件

適度是這裡的關鍵。太多的粘性元素會使頁面變得不堪重負和雜亂無章，最終會降低用戶體驗。

提示＃3：切入正題

擁有長篇內容對於為您的博客增加流量並在 Google 上獲得良好排名至關重要。然而，大多數讀者想要快速得到答案，不想听到你無休止地喋喋不休地談論你的產品或服務的優點。

例如，如果您的用戶只想要“什麼是博客寫作”這個問題的答案，那麼他查詢的大多數搜索結果都涉及閱讀冗長而全面的指南。儘管指南迴答了問題，但您的用戶將不得不瀏覽冗長的內容才能找到定義。

另一個例子是在 Pinterest 上瀏覽一篇冗長的博客文章以了解成分和食譜步驟。感謝烹飪專家使用鏈接將您直接帶到食譜，對嗎？

對於大多數用戶來說，這些示例無疑是耗時且令人沮喪的，這是糟糕用戶體驗的縮影。因此，請使用文章快速摘要框切入正題。

使用包含整篇文章摘要的小框非常方便，並且是節省用戶或讀者時間的好方法。雖然摘要框可以調整以適應任何地方的內容，但將它們放在文章的開頭是為讀者詳細闡述答案或內容的絕佳方式。

作為獎勵，清楚而明確地回答用戶的問題將增加谷歌將您置於他們夢寐以求的“特色片段”結果中的可能性，這是谷歌 SERP 中突出用戶問題答案的最佳結果。

提示＃4：利用博客卡設計

為了讓你的博客保持新鮮，你可能會寫很多文章——幹得好！保持。

但是，這會很快導致視覺混亂，尤其是當您嘗試在主博客頁面上一次突出顯示所有新帖子時。

那麼，在不壓倒用戶的情況下，在您的主博客頁面上展示帖子的最佳平衡是什麼？博客縮略圖和文章鏈接的大小應該是多少？

嗯，這個問題沒有簡單的答案，但我們至少知道最有效的方法是“博客卡”佈局。就具體細節而言，我們建議研究和復制知名出版網站的做法。

Medium.com提供了這種格式的一個很好的例子。

使用博客卡片設計有很多好處，包括：

它們很容易掃描和消化。
它們使我們能夠輕鬆識別、回憶和閱讀重要信息。
它們允許您在不壓倒用戶的情況下包含大量信息。
它們可以很容易地重新排列和重新排序，這對於響應式設計非常有用。
它們提供了充足的空白，使它們具有視覺吸引力並且易於導航。

但是，佈局應該有不同的字體大小和圖像，以清楚地區分最不重要和最重要的元素。這種策略使設計對讀者來說更清晰。

此外，您可以在卡片設計中包含以下元素。

特色圖片
博客作者（圖片）
類別
博客標題
社交分享鏈接
發布日期
博客摘錄
閱讀更多按鈕

記住這個列表，讓我們看看 Medium 的主頁：

注意每張“卡片”和所有相關信息。幾乎所有的博客文章都至少有以下內容：

博客標題
特色圖片
博客作者
博客作者圖片
發布日期
閱讀時間
能夠為帖子添加書籤以供以後使用

您以前可能從未註意到所有這些元素，對嗎？不過，您可能會欣賞它們的存在。這是一個完美的例子，偉大的設計是隱形的。

此外， Impact 的入站營銷專家建議在博客卡片佈局中安排文章的最佳實踐之一是將它們放在兩列或三列中。

這取決於您提供的信息，但總體而言，它最大限度地增加了同時看到的帖子數量。

提示＃5：包括閱讀時間

創建內容時，您希望人們留下來閱讀它。但是，如果您的讀者覺得他們沒有時間，他們可能會繼續前進。這就是為什麼你能做的最好的事情之一就是告訴他們你的文章需要多長時間才能閱讀。

如果您的目標受眾由總是忙碌的忙碌人士組成，則此策略尤其重要。通過給他們一個估計的閱讀時間，您已經實施了一種策略，讓讀者提前了解時間承諾，這也更有可能讓他們重新閱讀易於在短時間內消化的內容。

因此，如果您希望人們留下來閱讀您的內容，請準確告訴他們需要多長時間。這個簡單的行為將增加參與度並讓人們在您的網站上停留更長時間。

提示 #6：使用空格來發揮您的優勢

空白，也稱為負空間，是頁面上元素周圍的空間。在佈局中使用空白來激發讀者的視覺興趣並引起對特定內容的關注非常重要。

找到適當的空白平衡對於創建精心設計的佈局至關重要。太少的空白會讓頁面感覺局促和忙碌，這可能會讓用戶不知所措。另一方面，太多的空白會使頁面感覺未完成或不專業。

例如，TikTok 利用了大量的空白空間。他們使用的數量在商業網站上可能看起來很傻，但它非常適合將所有註意力集中在頁面視頻上。

一般來說，最好不要使用太多而不是太少的空白。這將有助於創造一個乾淨寬敞的外觀，讓眼睛看起來很舒服。

所以，當談到博客佈局時，空白是你的朋友。它可以幫助吸引對特定內容的關注，並使您的佈局更具視覺吸引力。

提示＃7：不要有雜亂的側邊欄

這是許多博主常犯的錯誤。他們在側邊欄塞滿了社交媒體圖標、選擇加入、廣告和其他隨機垃圾。

這種做法不僅讓一切看起來都很糟糕，而且還可能讓遊客感到困惑和不知所措。

它還給人一種印象，即您更關心銷售東西而不是為客戶增加價值，從而破壞了信息性、建立信任內容的全部目的。

不要把你的側邊欄當作垃圾抽屜。相反，請堅持基本要素，例如社交媒體圖標和選擇加入。這將有助於創建更流線型的外觀，易於導航並改善用戶體驗。

提示＃8：明智地使用排版

排版是好奇的人在物理或數字頁面上文本的外觀。它還涉及操縱字體以使書面形式在顯示時清晰易讀。

這種安排通常涉及採用設計元素，如行和字長、間距等，或點大小，並添加或操作它們以使它們令人賞心悅目並更易於消化。

為了獲得更好的效果，在佈局中明智地使用排版至關重要。當您這樣做時，您會創造視覺興趣並引起對特定內容的關注。

例如，您總是希望為標題使用較大的字體，為正文使用較小的字體。或者您可能希望完全使用不同的字體作為標題。

理想情況下，17px 到 21px 之間的字體大小被認為適合數字閱讀器。與其他字體相比，某些字體大小自然會更大。

此外，最好將您在頁面上使用的字體數量限制為最多三種。例如：

使用第一種字體樣式作為帖子標題。
使用第二種字體樣式作為側邊欄的標題。
文章正文使用第三種字體樣式。

最後一個提示，確保您的字體是網絡安全的。否則，它們可能無法在某些設備上加載。 Google Fonts 是一個免費的網絡字體存儲庫，它始終是一個安全的選擇。

提示 #9：合併相關文章

讓人們留下並閱讀您的內容的另一種方法是將相關文章合併到您的佈局中。

相關文章是指向主題或主題相似的其他博客文章（內部和外部）的鏈接。通過包含這些鏈接，您可以讓人們更長時間地參與並閱讀您的內容。

要查找相關文章，您可以使用 Yoast SEO 之類的插件。該插件將分析您的博客文章並建議您包含的相關文章。

或者您可以通過訪問 Google 並蒐索“[topic keyword] site:[yoursite.com]”進行手動搜索。只要 Google 為您的網站編制索引，就會顯示您網站上包含該關鍵字的所有頁面和帖子。

例如，如果我們想查看我們撰寫的關於博客主題的所有頁面，我會在 Google 中輸入以下搜索：“blogging site:skuvault.com”。

生成的頁面可能是鏈接的絕佳候選者。

提示 #10：使用高質量圖像

在您的博客佈局中使用高質量、非俗氣的圖像至關重要。這是因為人們是視覺動物，他們更傾向於使用圖片而不是文字。

事實上，研究表明，如果信息與圖像一起呈現，人們更有可能記住信息。

因此，在為您的博客文章選擇圖片時，請確保它們是高質量的並且與手頭的主題相關。

盡量避免使用通用的庫存照片。有時這就像對現有照片進行一些編輯以使其看起來更加個性化一樣簡單。

Pexels是尋找優雅、免費庫存照片的好地方。

提升博客用戶體驗的其他方法

除了我們列出的十個技巧之外，還有一些其他方法可以改善您博客的 UX/UI：

選擇可掃描的設計：寫博客與寫書或學術論文有很大不同。您可以通過編寫簡短而精確的部分、避免冗長的段落、用標題和相關圖像分隔文本以及使用子標題和標題組織部分來使博客佈局可掃描。
品牌化您的佈局：品牌化是營銷成功企業的關鍵，它對您的博客佈局同樣適用。您創建的博客應該反映您品牌的感覺和外觀。這意味著如果您的主頁有一個簡單的主題或設計，最好在您的博客佈局中保持相同。
使用垂直對齊：設計糟糕的元素像拇指一樣突出。例如，當圖像和文本與列的其餘部分看起來格格不入時，它會分散注意力並且看起來不專業。此外，段落和照片應具有相同的寬度以保持視覺連續性。
包括搜索欄：如果您的網站上有很多內容，人們可能很難找到他們正在尋找的內容。在您的博客佈局中包含一個搜索欄很重要。這樣，人們可以快速輕鬆地找到他們正在尋找的信息。
突出顯示您的內容的作者：如果您的博客上有多個作者，那麼突出顯示他們的名字並在他們的帖子旁邊添加一張高質量的照片是很重要的。這種方法使一切都人性化，並有助於與讀者建立信任。它還使他們可以輕鬆找到同一作者的其他內容，並幫助 Google 確定您的 EAT（專業知識、權威、信任）。
讓您的網站適合移動設備：現在是 2022 年。確保您的博客佈局適合移動設備是不可協商的。值得慶幸的是，來自知名提供商（WordPress、Squarespace、Shopify）的所有現代博客佈局都包含開箱即用的移動友好佈局。如果您沒有適合移動設備的佈局，那麼您遇到的問題超出了本文的範圍。

你有它！利用這些技巧創建一個殺手級的博客佈局，讓讀者回訪更多。

不要忘記庫存控制

如果您接受我們的建議並實施這些 UX 技巧，請為讀者群、流量和銷售量的激增做好準備（不客氣！）。

如果您是一家電子商務商店，您將需要一個良好的庫存系統來管理這種增長。

SkuVault 的存在旨在幫助各種形式和規模的企業優化和簡化與庫存控制相關的繁瑣工作。

單擊此處以獲取有關我們與企業主一起幫助他們提高底線（並保持理智）的具體方式的更多信息。