发布者网站的设计方法

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

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

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

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

另一个主要区别是收入来源。 像可口可乐这样的公司网站不会产生收入 从网站上， 相反，它来自其产品。 大多数公司网站的目的只是为了成为数字化存在。

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

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

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

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

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

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

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

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

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

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

这是一个错误方法的示例，其中所有内容都试图放在顶部：

我们很清楚，目的是完全不同的，并且上面的网站实际上可能会带来可观的利润， 但它很好地说明了“凡事引起您的注意”的原则

围绕广告进行设计是发布者的另一个主要主题。 考虑到它是主要的收入来源， 这也是当务之急。 设计师在这里应该考虑几件事， 首先是从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之类的业务中的技术堆栈。

也许是时候重新设计您的网站了。 DevriX可以帮助您根据技术规范构建定制的定制解决方案。 提交您的提案或请求一个完整的发现会话，以确定您的要求并评估您的业务需求。

DevriX的创意主管和前端开发人员
亚历克斯（Alex）的热情在于学习新的网络技术， 探索创新的方法来优化网站性能并改善用户体验。 亚历克斯（Alex）喜欢骑自行车和数字艺术，最近开始在ELSYS技术学校教授设计。