总结10个官方网站新闻博客样式，打造用户体验

您企业的新闻博客是吸引新用户访问您网站的主要工具，这些是新用户寻求知识和对他们所提问题的答案。

为了帮助塑造和优化内容的可读性，您需要新闻设计来促进它的出现，该设计能够吸引客户成为头条新闻，吸引互动，优化转化并创造持久的印象。

将您的内容整理到学习中心

如果您像北京永灿一样，并且已经创建内容多年，那么您可能已经积累了许多不同类型的内容。

自然，您可能已经完成了许多其他组织所做的工作，并将内容分为多个不同的领域。例如，视频在视频库中生活，资源中心中的博客文章，白皮书和电子书，您就会明白。

从内容类型的角度来看，这可以很好地组织所有内容，但您的用户并不一定总是只想观看视频或只看新闻博客内容。

假设用户是您，您就在探索关于特定主题的更多信息的过程中。

您是希望在站​​点的不同部分之间跳转，以查看可用于该主题的内容，还是希望您拥有一个可以查看该主题的所有内容的位置，无论是博客，视频，支柱还是可下载的内容？

我的猜测是后者。

除了轻松之外，这种方法还使您的用户更有可能在您的网站上花费更多的时间，因为发现他们想要的东西的障碍已大大减少。这也可能导致每个会话的页面数增加。

那么，这个学习中心应该是什么样的？

好吧，有几种方法可以解决这个问题。

一种方法是北京永灿的客户之一Aquila Commercial如何做到这一点。

他们有一页，其中包含他们创建的所有可能内容的提要。

在这里，您可以使用左侧菜单按不同的角色，主题或内容类型进行过滤。在这里，您可以按最新帖子或最受欢迎的帖子进行排序。

如果您仍然找不到想要的东西，那么这里还有一个搜索栏。

最后，有一个由最新组织的博客文章和播客的提要，随着新文章的出现而自动更新。

总体而言，这种方法都可以实现相似的目标-使您的用户获得最相关的内容。根据当前内容的组织方式以及网站的构建方式，一种方法可能会比另一种更好。

因此，在进入此项目之前，请确保与您的开发团队进行内部讨论，或者，如果您没有团队，请随时与我们联系并聊天，以便我们讨论如何实现这一目标。

缩小网格范围以获取博客内容

开始使用简洁，有组织的设计的最简单方法之一就是利用网格系统，该技术已在报纸和杂志的整个印刷版面中得到广泛使用。

此技术已应用于网站设计，以帮助在各种屏幕尺寸上为用户提供一致的体验。

想象一下，您有一张8.5 x 11英寸的打印纸，前面有一篇打字稿。在当前状态下，它很容易阅读。但是，如果将纸张拉伸到18英寸宽会发生什么？

逐行阅读变得更具挑战性。这就是为什么您看到报纸和杂志采用更窄列格式的原因。

新闻博客也是如此。如果您新闻博客的网格宽度太大（尤其是用户在大屏幕上），则会给用户带来可读性问题。

这有可能使他们在逐行阅读时失去自己的位置，同时也使您的内容显得更短且间隔不佳。

由于绝大多数用户使用的显示器的宽度为1200px-1300px（笔记本电脑大小），因此您博客的网格宽度应在900px-1100px之间，最好是1024px。

一家在网站上做得很好的公司是Helpscout，请注意他们是如何利用网格使博客内容易于辨认和吸引人的。

此技术还可以在整个博客中为您提供一定数量的空白。使用网格可帮助用户将整个博客中的元素（侧栏，标题/正文，图像，共享图标）区分开。

网格在组织博客信息方面的有效性是保持内容受控的基础。

使用博客卡布局

我们许多人都投入了很多内容。根据您是每周一次还是每天两次写博客，到年底，您在网站上可能已经有多达600多个博客帖子。

有那么多帖子，您如何最好地利用网站的资源来整理这些文章，以便一次显示最多的信息，而不会给访问者带来过多的信息？

基于卡的设计是解决此问题的最适合UX的布局之一。

众所周知，物理牌（棒球/篮球，口袋妖怪，历史牌）已经存在了很长一段时间，并且可以作为直观显示和组织信息的简便方法。

卡片的体系结构帮助我们轻松地识别，回忆和阅读重要的信息。

卡设计现已应用于整个网络。诸如Pinterest，Twitter和Google之类的大型公司已经将其根深蒂固地放在了用户体验中：

像这些家伙一样，保持您的博客卡片简单。

使用不同的图像和字体大小来表示卡片中最重要到最不重要的元素，会使阅读它们的人更容易理解。

另外，请确保将重点放在将这些元素合并到卡中（粗体是必不可少的）：

• 特色图片
• 博客标题
• 博客作者（和图片，如果有的话）
• 博客摘录
• 发布日期
• 类别
• 社交分享链接
• 阅读更多按钮

牢记这一清单，让我们以Zenefits的名片设计为例，看看他们如何应用这些元素。

在卡片布局中，他们突出显示特色图像和标题作为最突出的元素。

摘录不仅可以帮助用户确定文章是否适合他们，还可以诱使用户单击标题，如果标题仍然令人难以置信。

通过日期，用户可以识别文章是新文章还是最新文章，同时让作者（带有图片！）可以使您的帖子更具个性-并帮助建立作者的思想领导力。

在您的文章列表页面上，根据卡片中信息的排列方式，将这些卡片排列在2或3列中，以最大程度地一次显示多少张卡片。

选择大尺寸，精美的精选图片

许多博客的当前趋势之一是为每个博客卡和内部博客帖子合并大型的，不笨拙的英雄图像。

这种设计选择并非没有道理。以对讲机的内部博客模板为例。

尽管他们的特色图片看起来很大，以至于压低了内容，但它还是一个引人注目的元素，可以帮助用户在阅读标题或作者以外的内容之前将其连接到文章。

在层次结构方面，它还在页面顶部添加了一个不错的锚点，使用户可以轻松识别文章的起点。

尽管不必像对讲机一样大，但重要的是让您的特色图像尺寸足够大，这样它就具有足够的视觉重量，可以从与其紧邻的元素中脱颖而出。

随意调整布局尽管Intercom之类的公司选择全幅显示图像，而Drift等其他博客则将其图像保留在网格中，这使您可以查看内容。

在所有设备上使用清晰的字体

并非所有访问您网站的人都具有20/20的视野，而那些仍然不愿阅读您12pt字体的人。仅因为较小的字体会缩短所有内容，并不一定会使您的读者想要继续阅读。

我无法数出我的父母和朋友访问博客文章的次数，只是发现自己只是为了阅读页面上的内容而放大。

听起来很荒谬，对吧？

您希望网站的字体大小，尤其是博客上的字体大小，成为用户抱怨的最后一件事。

那么问题来了– 我应该使用哪种字体大小？

当涉及到身体字体时，我的经验使我说出介于17像素到21像素之间的某个位置，具体取决于您使用的是哪种字体（某些字体自然大于其他字体）。

对于您的标题大小以及对这一切为何重要的更深入的分析，我建议您阅读本文。它提供了完整的图表，其中包含从台式机到移动设备的标头标记的一些最常用尺寸。

如果您正在寻找一些掌握网站排版和大小的网站示例，建议您访问以下公司：

有线

包括文章快速摘要框

为了使竞争关键字的排名更好并吸引您的网站访问量，我们撰写的大多数文章都可能需要一两个句子来回答，而最终以1500个词的形式发布。

虽然写内容的长度正是Google想要您做的，但对于寻求快速解答的用户而言，这并不完全直观。

例如，考虑一下“什么是内容营销”查询。

与此类关键字相关的大多数搜索结果都是综合指南，可为您提供有关该主题的所有信息。

但是，如果您只是在寻找内容营销的定义，那么浏览一下4000字的文章以发现它可能有点乏味。这是简短的摘要框非常方便的地方。

传统上，这些框放在博客文章的开头，您可以在其中添加对文章所涉及的较大问题的简短答案。如下例所示，其文章中进行了此操作。

除了获得更快的用户答案之外，这还有另一个优势。Google经常将这些框中的内容用于精选片段。

这意味着您将显示为SERP中的第一篇文章，从而增加了文章的点击率。

并非所有博客文章都必须使用此框。它应该主要用于文章中那些可能带有特色片段的频繁搜索的问题将从较短的答案中受益的文章。

使用简短的描述性副标题

谈到寻找问题的快速答案...

您应该练习的另一个重要特征是编写简短明了的标题以将您的文章分成几部分，以方便读者使用。

通常，人们浏览这些文章的目的是浏览它们，直到找到可以回答问题的部分。

考虑到这一点，您需要确保您有清晰的标题以区分文章，以便读者可以完成此操作。我不是在说“第1节”，也不是在说“为什么”和“如何”之类的通用词。

您需要标题来准确定义读者在文章的这些分组段落中将学到的内容。

如果您觉得自己的博客文章甚至做不到，建议您在此处查看一些写作技巧，以帮助您井井有条。

您需要编写子标题，以提高写作质量，并帮助您的文章吸引访问者，尤其是第一次访问者。Copyhackers在这方面做得非常出色。

在这篇博客文章“ 如何通过复制吸引Instagram追随者，使他们喜欢您的品牌并购买您的产品”中，每一点都有清晰简洁的标题，方便读者对其进行扫描。

如果您正在寻找有关如何编写子标题的技巧，或者甚至给它们加了些香料，请使用Copyblogger的这篇文章来指导您。

使社交共享可在所有设备上访问

如今，大多数博客都使用社交共享来允许用户轻松共享博客文章。但是，许多网站并没有为平板电脑和移动用户提供相同的体验。

皮尤（Pew）的一项调查发现，现在至少有一部分时间，美国85％的成年人通过移动设备接收新闻，包括65岁以上的成年人。

这些人也在他们的移动设备上浏览社交平台，因此您可以打赌他们也愿意在移动设备上共享内容（只要他们发现该内容知识丰富并且可以轻松地做到这一点）。

但是，您应该在哪里放置社交按钮？由于较小的设备上的空间有限，所以很多人都不知道将它们放在哪里。

在Mashable的博客上，社交按钮位于导航的右侧，并在您滚动页面时与您保持一致，从而使用户可以随时共享。

NBC采取了类似的方法，将其共享选项也放置在固定的顶部栏中，一旦用户滚动到页面上的某个点，该顶部就会出现。

有策略地放置您的表单

我们中的许多人发现自己的流量非常健康，但是却难以获得所需的订阅者数量或转化次数。在这里，非常需要使用诱人且美观的表单。

如果您不熟悉该术语，那么表达是用户无法接受的以交换特定联系信息的不可抗拒的报价。

理想情况下，您希望表单能够与目标受众产生共鸣，从而将合格的铅吸引到系统中。

尽管许多人在整个博客中都将表单用作独立产品，但更具战略意义的用途是当人们订阅您的博客时收到的产品。

这样，您不仅在增加订户数量，而且在转换方面！

确定了最适合您的受众的报价后，您现在需要使其在视觉上具有说服力。

在北京永灿的客户博客中，我们以两种不同的方式使用此技术。

第一个是在博客文章页面上（您的用户可以在其中看到您发布的所有文章）。

用户滚动浏览列出的几篇文章后，将放置号召性用语以下载指南或订阅。

第二种方法是通过弹出窗口每天向未订阅网站博客的用户显示一次。

表单的两种情况都需要以下元素才能使其发挥最佳性能：

• 要约或图片的封面，因此用户可以直观地看到要约的内容
• 标题，可帮助用户了解报价是什么
• 子标题可帮助用户理解为什么他们需要特定的报价以及对他们有什么价值
• 一种按钮颜色，与您网站的调色板分开，因此非常容易识别。

保持直插式磁铁的侵入性稍小。无需动画或强制交互。

它应该舒适地适合您的列表页面，同时使用不同的布局和颜色变化来与文章区分开，例如以下所示的Armstrong Transport的文章。

对于弹出窗口，请确保它易于区分。

例如，使背景变暗并创建白色容器可以帮助强调弹出窗口，并防止用户被黑色覆盖下的博客分散注意力。

10.突出显示您的作者

您的作者在创建博客内容上花费了大量时间和精力，您应该通过将其发布为各自文章的作者来庆祝。

不仅如此，您还应该给他们提供简短的履历，出现在文章的底部，以便您的用户能够区分谁在您的博客上写了什么。更好的是，有单独的作者页面可以显示他们撰写的所有帖子。

这有助于博客的UX，因此用户可以更轻松地搜索自己喜欢的作者的文章，同时还为您的作者提供了一个展示他们在各个主题上提供的所有见解的地方。

下一步

您越早将这些设计原则实施到博客上，就越早开始看到更多的转换和流量。

如果您觉得这对您有所帮助，那么该做了。在内部与您的团队合作，提出可以与上述至少4个项目相关联的新设计，并逐步开发出博客的完整更新版本。

如果您认为仍需要有关博客其他方面需要改进的指导，请考虑将您的网站提交给免费的网站评论。在10分钟内，您将走出可行且个性化的待办事项，以帮助改善从消息传递到SEO和设计的所有内容。