什么是数字出版商网站,它与常规商业网站或博客有何不同?
实际上有相当多的不同。
数字出版物是一种每天发布大量文章的网站。它基本上是在线报纸或杂志,或者像 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 方面拥有良好经验、遵循最新趋势和业务技术堆栈的开发机构合作。