发布者网站的设计方法

已发表: 2020-12-17

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

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

buzzfeed屏幕截图

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

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

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

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

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

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

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

设计内容丰富的网站

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

各种首页

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

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

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

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

buzzfeed主页

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)的开发机构合作。