2022 年 10 个博客布局最佳实践——不要让尴尬的布局毁了你的用户体验

一位睿智的用户体验设计师说过，“好的设计是看不见的”。 换句话说，如果您或您的用户注意到您的博客布局或用户体验，则可能是糟糕的设计。

想想我们每天使用的所有网站、应用程序和平台。 我们是否有意识地考虑用户界面和体验？

最好的用户界面 (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 之间的字体大小被认为适合数字阅读器。 与其他字体相比，某些字体大小自然会更大。

此外，最好将您在页面上使用的字体数量限制为最多三种。 例如：

1. 使用第一种字体样式作为帖子标题。
2. 使用第二种字体样式作为侧边栏的标题。
3. 文章正文使用第三种字体样式。

最后一个提示，确保您的字体是网络安全的。 否则，它们可能无法在某些设备上加载。 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 的存在旨在帮助各种形式和规模的企业优化和简化与库存控制相关的繁琐工作。

单击此处以获取有关我们与企业主一起帮助他们提高底线（并保持理智）的具体方式的更多信息。