内容繁重的网站设计：数字出版商网站的方法

什么是数字出版商网站，它与常规商业网站或博客有何不同？
实际上有相当多的不同。
数字出版物是一种每天发布大量文章的网站。它基本上是在线报纸或杂志，或者像 BuzzFeed 这样的病毒式发布平台。
这些类型的网站通常内容繁重且文本丰富，因此，与电子商务商店、商业网站、个人博客或任何其他类型的网站相比，它们需要不同的设计方法。
这种数字解决方案中使用的布局通常称为杂志样式。
虽然在WordPress主题市场中有相当多的此类设计，但在选择解决方案之前，数字出版商应该了解在线杂志和报纸设计的基础知识。

高性能网站定制开发

以WordPress为基础的网站已经占据互联网网站的42%，总数量达几亿个网站。我们已经为超过300个网站主提供服务。本服务以高性能的WordPress技术栈和几百款高级WordPress主题和插件为基础，为你定制开发独立网站和商城。

了解更多

在本文中，我们将讨论如何设计内容繁重的网站以提高可用性和用户体验。

目录  隐藏 

是什么让发布商网站与众不同？

如何设计内容重的网站

数字出版商和广告

数字出版商网站性能

设计的优先级

数字出版商网站概括

是什么让发布商网站与众不同？

数字出版商网站和常规网站之间有两个主要区别。
第一个明显的就是内容的数量。
数字出版物是内容繁重的网站，可能有数万页。此外，它们具有丰富的文本，通常具有大量图像，并具有许多战略定位的广告空间。
当然，现在还有其他类型的大型网站，尤其是像亚马逊或 eBay 这样的电子商务网站，它们很可能拥有更多的内容。但是，这些平台从网站用户那里获取内容，而不是自己生成内容。
出版商拥有全职工作的编辑团队，按计划制作原创内容——他们研究主题、调查故事、发布突发新闻等等。就像报纸一样。
这也是已发布网站与内容联合和新闻聚合平台的区别——原创内容。
另一个主要区别是收入来源。
像可口可乐这样的公司网站不是从网站产生收入，而是来自其产品。大多数公司网站都有知名度和品牌推广目的，并作为公司数字形象的一部分。
但是，数字出版商的收入来自网站本身。
广告！
（这几乎就是谷歌和Facebook产生大部分收入的方式。）
广告无疑是网络运行的，并且是许多网站的主要优先事项。他们的内容专注于吸引尽可能多的读者，以便他们可以看到页面上的广告并点击它们。
这就是发布商和广告商赚钱的方式。
这就是为什么从设计的角度来看，广告布局是在线报纸和杂志网站的主要优先事项之一。

如何设计内容重的网站

让我们来看看一些大型出版商的内容重网站，比如Variety：
我们先来说说内容布局。
带有许多链接的大标题 – 顶部的汉堡标志、搜索、号召性用语，然后是更多菜单项。目标是让用户轻松访问所有类别的内容。这与许多少于 10 个页面（不包括博客页面）的商业网站形成鲜明对比。
之后 – 一个大盒子用于主要文章。这是一个很好的设计决策。它使您的访问者更容易决定要做什么。如果有 10 个同样重要的元素，那么选择一个而不是另一个的心理压力可能会让一些用户跳出页面。设计师可以通过清晰的视觉层次来区分重要到次要的项目，从而使用户在网页上停留的时间更长。
右侧——一个广告和一个“最受欢迎”小部件，这正是大多数用户希望看到的。为了适应这么多的内容，Variety 决定将其变成一个可滚动的区域。
这是您与大型出版商合作的主要布局类型。
BuzzFeed是另一个适用于文本繁重网站设计的布局示例。
不过，这里的设计更有趣，色彩鲜艳，形状引人注目（如右上角的三个按钮）。
还有更多的“排名”，如右侧趋势中的 1、2、3，“突发”新闻的鲜红色标签等等。
类似设计的一个主要趋势是引起用户的注意。但是，这种注意力必须得到很好的引导，因为您不希望将它分成两个同样重要的项目。
这是一个错误方法的示例，其中所有内容都试图位于顶部：
我们很清楚，目的完全不同，上面的网站实际上可能会带来丰厚的利润，但它很好地说明了“一切都试图引起你的注意”的原则。

数字出版商和广告

如前所述，围绕广告进行设计是出版商的另一个主要话题。
考虑到它是主要的收入来源，它也是重中之重。
然而，对于出版商来说，在收入和用户体验之间取得平衡至关重要。否则他们可能会把读者赶走。
为了避免这种情况，设计师应该考虑一些事情，首先是从非常了解这些广告的要求和功能的 AdOps 团队那里获得反馈或好的信息。
例如，广告尺寸。有300×250、300×600、728×90、300×50。

• 有些可能会粘在屏幕的一侧，您可以在其中滚动过去不同的点。
• 有些人可能会呆在自己的小角落里，有些人会一直呆在页面的顶部。
• 其他人会成对出现，两个 300×250 或一个 720×90 像素。

你怎么知道这一切以及有什么要求？
所以，第一步是收集所有这些信息。
查看它的更简单方法是根据布局。根据发布者的目标，单个帖子可以有多种布局。有时广告少，有时广告多。有时广告会针对不同的负载改变尺寸，有时它们保持不变。然而，随着新趋势和规则的出现，一切都会迅速改变。经常是每天！
例如，谷歌倾向于更新其广告密度和插页式广告规则以适应用户体验。
要记住的一些重要事项是：

• 具有高度的广告可能会加载。这意味着内容将被下推，并且为适合折叠上方的某个小部件而设计的设计将失败。
• 广告可能需要背景。这可能是广告周围的浅灰色背景，触摸屏幕的角落。
• 广告通常需要在它们周围留出间距以避免意外触摸。20-30 像素是广告之间的良好距离。
• 您可能希望在之前/之后添加“广告”标签，以吸引更多广告提供商，并告知用户广告框中的内容由第三方提供并具有促销目的。
• 广告不应该太多！对此，AdOps 团队将努力找出特定发布者、特定页面甚至特定流量（如 Facebook、Snapchat 等）以及 Google 的最新规则的最佳点。

数字出版商网站性能

导致性能不佳的一个主要原因是设置有 8 个以上的广告试图加载大量其他脚本。
这可能会损害页面的核心网络生命力和广告密度，并导致主要的用户体验和搜索引擎优化问题。
当这一切都在代码中时，为什么这是设计师的关注点？开发者就不能优化吗？
嗯，是的，但这几乎是一份全职工作，设计师可以提供帮助。要了解这一切，您首先需要了解一点浏览器的工作原理。
浏览器可以根据前端开发人员对某个元素的编码方式来利用机器的 CPU 或 GPU。
有时，悬停或按下时的动画和交互等动作会使用 CPU 或 GPU。例如，如果一个动画使用CPU，很可能会有延迟，如果是GPU，那么就有可能获得更好的性能。设计师的要求可能是两者之间的差异。
以下是一些提高内容密集型网站性能的一般技巧：

• 使用很少或不使用阴影。阴影的渲染成本非常高，尤其是在低端移动设备和笔记本电脑上。
• 不要使用背景滤镜或模糊（或任何滤镜），因为它们也非常昂贵。
• 尽可能保持形状简单，以减少额外的计算。
• 不要请求影响布局的元素（其他元素）的动画。尽可能围绕这一点进行设计。任何重叠或弹出窗口都是更好的选择（不过，请注意弹出窗口可能如何影响用户体验）。
• 保持图像相对较小。这将允许开发人员加载较小尺寸的图像，从而减轻网站的重量。
• 通常，将动画保持在最低限度，尤其是在站点负载时。这同样适用于布局变化。当应用所有 JavaScript 时，第一次加载是网站最占用 CPU 的时间。

设计的优先级

发布商网站上的大部分流量来自移动设备。因此，花在打磨所有细节上的时间最多的应该是那里。
此外，不仅布局和整体设计需要针对移动设备进行优化，内容也应该适合移动设备。
您的重点是保持信息的可读性，同时以清晰的方式展示广告。保持任何可点击元素之间的距离，使广告关闭按钮大且易于移除，并减少意外点击广告的机会。如果可能，请避免任何可能使网站感觉不那么活泼的动画和覆盖。
简而言之，尽可能地投资于整体移动优化。

数字出版商网站概括

数字出版商网站内容繁重且带有广告，因此具有特殊的设计需求。
一般来说，着陆页面和档案的优先级低于单一视图，因为流量通常直接来自其他广告的文章。作为设计师，您的重点是找到最佳的广告定位方式，添加适当的间距，并将它们与主要内容分开，以保持所有内容的可读性和可用性。
将复杂的 UI 元素保持在最低限度，以提高速度性能并尽可能少地请求动画。
为了搞定一切，发布商通常需要与在 AdOps 方面拥有良好经验、遵循最新趋势和业务技术堆栈的开发机构合作。