市场营销副总裁，超过10年的销售和营销经验，超过12年的开发经验，超过14年的项目管理专业知识
石家庄裕华区网站建设公司
2017年 7 月5日 7 分钟阅读
我们都知道内容对任何营销活动都非常重要。
例如，博客已成为任何成功网站的基石。引导用户提供具有针对性，相关性和吸引力的内容，并最终使他们感到高兴，他们转化并订阅以获取更多。
但是，如果您的博客设计缺少商标怎么办？
事实是，通过您的博客文章进入您的网站（并找到您的品牌）的用户比您的主页要多，因此 您的博客设计应使您“尽力而为”。
这是我们创建Blog优化包的主要原因之一，以快速为您提供修改Blog和优化用户体验的功能。
在博客设计方面，需要考虑多种因素，包括字体大小，层次结构，号召性用语和文本宽度等。
考虑到太多的事情，采用新的博客设计可能会很烦人（但是，当然，我们可以为您提供帮助）。
这就是为什么我要汇编一些以用户为中心的博客设计灵感的出色示例，以帮助您最好地交付您的内容并让您的读者回头阅读更多！
作者的注释：所有这些博客都在13英寸的Macbook Pro上进行查看。您查看的内容可能会根据屏幕大小而改变。但！屏幕应该是一致的用户体验。
1. Wistia
为用户设计博客时，我可以提供的最大建议是 是使 它可读。
那是什么意思 简而言之，易读易懂。使用干净的字体，标题，并将重点放在内容上。
Wistia在其博客上做了出色的工作。
blog-design-inspiration-wistia.png
介绍了新作品和特色作品的简要概述，以及简短的特定主题列表。
请注意，共有4个主题，而不是25个。这可以简化用户体验，并为他们提供他们最关心的内容，并且使您无需进行导航。
我无法告诉您我去过博客多少次，只是被一个博客帖子中的大量类别所吸引。为什么？一定有更好的方法！
通过GIPHY
Wistia还为您提供了在单击之前评估帖子所需的所有信息-类别，清晰的标题以及摘录，使您想要阅读更多。
它还突出显示了作者及其出版时间，这看似很小，但实际上非常重要。用户想知道他们正在阅读的内容并不是过时的，并且是由专家编写的。
在我的书中，使Wistia的列表页面更加出色的最后一件是其上下文特征图像。这些视觉效果确实使摘录栩栩如生，引人注目。
向克里斯·拉维尼（Chris Lavigne）喊叫，获得精美的精选图片和文章（实际上非常有用，请查看！）
Wistia的文章设计也非常简洁清晰，将重点放在内容和内容上。
使用字体层次结构将各部分分开可以使浏览更加容易，并且缺少侧边栏确实有助于访问者对内容进行归零，而不会分散注意力。
2. 漂移
Drift的博客设计绝对是另一个醒目的标记。
blog-design-inspiration-drift.png
它的列表页面是一个最小的单列，带有大而漂亮的图像，可以真正激发用户的兴趣并使他们阅读。
IMPACT Plus
估计读取时间的增加是被遗忘的，但是对您的用户而言绝对是至关重要的。
您是否曾经遇到过您真正想阅读但又觉得自己没有足够的时间却从未做过的文章？为用户需要付出的努力提供一些指导，这是提高读者数量的好方法。这使用户知道何时应该为文章添加书签，而不是阅读四分之一并跳至其他内容而未完成。
Drift的实际文章设计也令人印象深刻。
同样，遵循单列路线并消除干扰是鼓励读者完成完整博客文章并最终达到策略性放置在末尾或应该放置的转换点的好方法。
该团队非常擅长使用全列图像来分解帖子，因此用户不会遇到可怕的“文字墙”。
阻止某人阅读您的内容没有比让它看起来像令人生畏的体验更快的方法。用适当的标题和出色的视觉效果来分解长篇文章，是提高读者人数和可读性的不二之选。
这就是为什么我不得不将Drift当作一个以用户为中心的博客设计灵感的例子的原因。
3. Sigstr
在Sigstr上可以看到另一个很棒的博客列表布局。
电子邮件签名公司使用“卡片”样式的布局，这种布局可以做得很好（在这种情况下），也可以做得很差。
通常，您会看到三栏式卡片清单页面，这会使内容难以理解。 但是，Sigstr团队选择了两列布局，这限制了手头的选项数量，并避免了一次发送太多消息。
blog-design-inspiration-sigstr.png
特色图片的使用有助于突出显示每张卡片，并使用户想要滚动浏览所有内容以查看他们还能学到什么。
我唯一建议您进行的更新是延长文章摘录的长度，以使用户对文章的内容有更多的了解。通过这种调整，您将获得真正的赢家！
查看内部文章的设计，将其很好地组合在一起，并专注于用户的可读性。
该页面的字体系列和大小选择非常方便，可帮助您向下浏览页面。
我之所以要在博客设计灵感列表中加入Sigstr的主要原因之一是由于在他们的博客中大量使用了适当的线条高度 字形。使用错误的行高（无论行高还是过小）都会严重影响您的可读性。内容太大，内容感到抽筋且难以阅读；太小了，杂乱无章，变成了一块实心的文本。
通过实现吸引人的线条高度，您将为内容提供一个需要吸收和保留的呼吸空间。
4. 视觉
InVision的博客确实做得很好。
对我来说，最大的好处就是使用了描述性标题。在内部，这消除了对完整文章摘录的需求，而该摘要摘录可与精选的文章滑块很好地配合使用。
blog-design-inspiration-invision.png
通常，我反对使用滑块或旋转木马，但为此，它与博客标题和背景中的大型精选图像配合使用效果很好。
在功能强大的帖子滑块下方，inVision还使用3列布局，其中包含简短而甜美的摘录，几乎都是一线描述。
对空白空间的策略性使用使每个帖子都可以“呼吸”，并帮助用户专注于找到他们关心的内容，而不是一次被太多选项轰炸-这是三栏式外观??的常见现象。
与其他博客设计灵感网站一样，实际的文章设计是 简单 和单列。
blog-design-inspiration-invision2.png
InVision最喜欢做的事情是使用其社交共享按钮和主要的号召性用语（CTA），并将它们放置在导航栏中，当用户滚动时，导航栏中的导航条会停留在屏幕底部。
这是保持他们的头脑和易于访问而又不引起人们注意力的一种好方法。
5. DigitalMarketer
可以在DigitalMarketer上找到更多博客设计灵感。
培训机构选择了与InVision类似的布局，但没有滑块/转盘。因为布局的顶部不是您通常的博客列表页面，所以它肯定会激起用户的兴趣并使他们阅读。
blog-design-inspiration-digitalmarketer.png
DigitalMarketer还在第一部分中突出显示了其特色文章，该文章与该列表中的其他文章一样，利用描述性标题来吸引用户并使他们阅读更多内容。
我最喜欢的部分是如何在英雄下方显示四个最新帖子，并用数字对它们进行排序。它吸引眼球，给人以方向感，让您几乎立即阅读标题。
在此“特色部分”下方，您将获得更传统的博客布局，左侧的帖子供稿，右侧的侧边栏。帖子供稿使用摘录来帮助用户为文章提供更多背景信息，并包括一个不容错过的醒目的“更多阅读”按钮。
总体而言，DigitalMarketer所做的出色工作不会使广告或CTAs的侧边栏混乱。
团队选择包括一个简单的博客搜索，其最受欢迎的帖子以及一个可追踪您的有价值的CTA。
6. 新芽社交
接下来是Sprout Social。我将其称为“全角”卡布局；它被屏蔽了，但每个单独的博客帖子在用户眼中都没有争取关注。
blog-design-inspiration-sprout.png
该博客的精选大图像给人以极大的视觉兴趣，并引导读者注意标题。通过这种布局，您可以滚动或滑动查看大量文章，以了解其他内容。
布局的版式和字体层次结构也非常简洁，与其他示例一样，它使浏览和实际消化内容变得容易，从而有助于保持读者的注意力。
值得一提的是，Sprout Social和其他产品表现良好，是因为字体颜色不使用全黑。
我发现白色背景上的纯黑色可能会使您的眼睛疲劳，因此将颜色更改为深灰色或木炭会大大提高可读性。
我真正喜欢的是Sprout Social如何淡化阅读时跟随您的社交共享图标。
这可以消除干扰因素的影响，但仍可以使用户能够根据需要进行共享。
7. 石家庄裕华区网站建设公司帮助侦察员
最后但并非最不重要的一点是，Help Scout的博客使用了另一种“卡片”样式，但是这次使用了一个粗体的3列。
blog-design-inspiration-helpsout.png
它从一个大而漂亮的精选文章栏开始，该节立即在插图中吸引用户，然后在各列中显示大量内容。
如前所述，三列布局很容易让人分心，但是Help Scout的作品却是如此。这些卡片没有大的描述，它们使用更大，更生动的图像吸引眼球并吸引他们。
Help Scout还巧妙地将“广告”与其实际内容文章结合在一起。
现在，我所说的广告不是付费横幅，而是相关的内部促销项目，例如2017年客户支持薪酬研究。
这是一种明智的方法，可让您关注优质内容的提供，而不会变得过于冒进或垃圾邮件。
文章内部的设计使用了很高的行高和内边距，以确保内容可以呼吸并且阅读时不会感到太费力。
我还是“额外阅读”部分的忠实拥护者。这是继续用户继续浏览其他帖子并增加页面停留时间的简便方法。
始终首先考虑用户。利用此博客设计的灵感来帮助引导他们浏览您的内容，并消除可能使他们偏离当前目标的任何干扰。
任何设计中最重要的部分是与特定用户一起对其进行测试，以确保这是他们想要的体验以及公司所需的体验。
需要出发点吗？与我们讨论我们的博客优化软件包，该软件包 可以（并且已经！）为我们的客户带来了3倍的转化和流量。
