最后修改：
2020/05/11
阅读时间：
观点
什么是“数字出版商网站”？” 这是一个致力于每天发布大量文章的网站。 这是一个高于“博客”的水平。 它基本上是一个新闻站点或病毒发布平台，例如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技术学校教授设计。
咨 询 客 服