发布者网站的设计方法

什么是“数字出版商网站”？ 该网站致力于每天发布大量文章。 这是一个高于“博客”的水平。 它基本上是一个新闻网站或病毒发布平台，例如BuzzFeed。

与产品销售，业务，个人博客或任何其他类型的网站相比，此类网站的设计方法有所不同。 它的布局通常被称为“杂志”风格，在主题市场中也相当饱和。

是什么使发布者网站与众不同？

发布者网站和常规网站之间有两个主要区别。

第一个显而易见的是内容量。 当然，现在有庞大的网站，尤其是像Amazon或eBay这样的电子商务网站，它们很可能拥有更多的内容，但是这些平台是从站点用户那里获取内容的平台。 出版商拥有编辑团队，他们全职工作以按计划制作内容。 就像报纸一样。

另一个主要区别是收入来源。 像可口可乐这样的公司网站并非从该网站产生收入，而是来自其产品。 大多数公司网站的目的都是为了成为数字化存在。

知道这一点，很可能发布者的网站收入来自网站本身。 怎么样？ 广告！ 这几乎就是Google或Facebook如何产生大部分收入的方式。

广告最明确地运行在网络上，并且是许多网站的主要优先事项。 他们的内容主要是吸引尽可能多的读者，以便他们可以在其版式上看到广告。

从设计的角度来看，这是发行商和杂志网站的主要优先事项。

设计内容丰富的网站

让我们看一下像Variety这样的大型发行商：

首先看到的是顶部的大型广告。 在此之前，我们将在一秒钟之内进一步研究内容布局。 一个带有许多链接的大标题-汉堡在顶部，搜索，号召性用语，然后是更多菜单项。 目的是使访问所有类别的内容变得容易。 与许多少于10个页面（不包括博客页面）的商业网站形成了鲜明的对比。

之后–主文章的大盒子。 这是一个很好的设计决定。 它使您的访客更容易决定做什么。 如果有10个同样重要的元素，那么选择一个而不是另一个的精神压力可能会使某些用户跳出页面。 通过对重要项目至次要项目的清晰视觉层次结构，设计人员可以使用户在网页上停留的时间更长。

在右侧-另一个广告和一个“最受欢迎”小部件，这正是大多数用户希望看到的。 为了容纳如此多的内容，Variety决定将其放入可滚动区域。

这是大型出版商通常会采用的布局类型。

BuzzFeed是另一个用于处理大量文本的布局示例。 尽管这里的设计更加生动有趣，但鲜艳的色彩和引人注目的形状（如右上角的三个按钮）。

右侧趋势图上的1、2、3，“突发”新闻的鲜红色标签等等，还有更多的“排名”。 相似设计的一个主要趋势是引起用户的注意。 但是，必须将注意力集中在正确的方向上，因为您不想将其分为两个同等重要的项目。

这是一个错误方法的示例，该方法试图将所有内容都放在首位：

我们很清楚，目的是完全不同的，并且上面的网站实际上可能会带来丰厚的利润，但是它很好地说明了“一切为了吸引您的注意力”的原则

数字出版商和广告

围绕广告进行设计是发布者的另一个主要主题。 考虑到这是主要的收入来源，这也是当务之急。 设计师在这里应该考虑几件事，首先是从AdOps团队那里获得反馈或良好的信息，他们对这些广告的要求和功能非常了解。

例如广告尺寸。 有300×250、300×600，有728×90以及300×50。

• 有些可能会粘在屏幕的一侧，您可以在其中滚动浏览不同的点
• 有些人可能会留在自己的小角落，有些人会始终停留在页面顶部。
• 其他的则以两个300×250或一个720x90px成对出现。

您如何知道所有这些要求？

所以是的，第一步将是收集所有这些信息。 布局是一种更简单的查看方式。 单个帖子可以具有多个布局，具体取决于发布者的目标。 有时广告较少，有时更多。 有时，广告会针对不同的负载更改大小，而有时却保持不变。 尽管随着新趋势和新规则的出现，这一切都可能迅速改变。 经常每天！

要记住的一些重要事项是：

• 具有高度的广告可能会加载。 这意味着内容将被下推，并且为适应折叠上方的某个小部件而进行的设计将失败。
• 广告可能需要背景，这可能是围绕广告的浅灰色背景，触摸了屏幕的各个角落。
• 广告通常需要在其周围留有间距以避免意外触摸。广告之间的距离最好为20-30像素。
• 您可能希望在广告投放之前/之后添加“广告”标签，以吸引更多广告提供商。
• 不应有太多广告！ 最佳解决方案是AdOps团队将努力确定特定的发布者，特定的页面甚至特定的流量（例如Facebook，Snapchat等）

发布者网站的效果

导致效果不佳的主要原因是设置了8个以上广告的设置，试图加载大量其他脚本。 当所有这些都在代码中时，为什么这是设计师的关注点？ 开发人员不能优化它吗？ 是的，但是这几乎是一项全职工作，设计师可以提供帮助。 要了解所有这些，您首先需要对浏览器有所了解

资源

浏览器可以利用机器的CPU或GPU，具体取决于前端开发人员对某些元素进行编码的方式。 有时，动画，悬停，按下时的交互等动作会利用CPU或GPU。 例如，如果动画利用CPU，则很有可能会出现滞后，如果是GPU，则可能会获得更好的性能。 设计师的要求可能是两者之间的差异。

以下是一些一般性提示：

• 几乎没有阴影。 阴影渲染起来非常昂贵，尤其是在低端移动设备和笔记本电脑上。
• 不要使用背景滤镜或模糊（或任何滤镜），因为它们也很昂贵。
• 保持形状尽可能简单以减少额外的计算。
• 请勿请求影响布局的元素（其他元素）的动画。 尽可能多地设计。 任何重叠或弹出的窗口都是更好的选择。
• 保持图像相对较小。 这将允许开发人员加载较小尺寸的图像，从而减轻站点的重量。
• 总体上将动画保持在最低水平，尤其是在站点负载方面。 同样适用于布局转换。 应用所有JavaScript时，第一个负载是网站占用CPU最多的时间。

资源

设计优先

发布者网站上的大部分流量都来自Mobile。 因此，花在抛光所有细节上的时间最多。 在移动设备上也需要进行大多数优化，因为大多数设备不是高端旗舰产品，而是200-300美元的智能手机。

在移动设备上，您的重点是在以清晰的方式展示广告的同时保持内容的可读性。 保持所有可点击元素与广告之间的距离较大，以消除广告上的意外点击。 如果可能，请减少任何动画和叠加层，这些动画和叠加层可能会使网站不那么生动。

概要

发布商专注于大量内容和大量广告。 通常，登录页面和归档文件的优先级要比单一视图低，因为访问量通常直接来自其他广告。 作为设计师，您的重点是找到最合适的方法来投放广告，添加适当的间距，并将其与主要内容很好地分隔开，以确保所有内容可读性和可用性。

尽量减少复杂的UI元素以提高速度性能，并请求尽可能少的动画。 为了确定一切，发布商经常需要与在AdOps方面拥有丰富经验，遵循最新趋势以及业务中的技术栈（例如DevriX）的开发机构合作。