从时尚界的古怪美学到现代建筑的时髦极简主义，设计是一个善变的情妇。虽然设计行业的方方面面都在快速发展，但很少有设计的方方面面能像网页设计那样发展得如此之快——或者说发展得如此之糟糕。无论你是要发布一个新的博客，还是考虑重新设计一个博客，你都要确保你所实现的设计看起来是现代的，并且在各种设备上都能完美地运行。今天，我们就来看看今年到目前为止在互联网上流行的博客设计趋势。我们将分析哪些元素是受欢迎的，哪些已经失宠了。首先，让我们来看看目前数字营销中塑造博客设计的更广泛的趋势。在我们研究驱动当今互联网美学的具体设计趋势之前，我们需要重新审视一些营销人员长期以来最喜欢的数据——移动应用和浏览统计数据。在WordStream博客上，我们多年来一直在喋喋不休地谈论移动设备使用率的增长(与世界上几乎所有其他数字媒体博客一样)。
通常用于年末预测列表，移动采用统计数据可以说是设计中最重要的数据点之一。为什么?因为需求是发明之母，随着越来越多的人使用移动设备访问网络，博客和其他网站也在调整它们的外观以适应不断变化的品味。看看下面这张来自StatCounter数据的图:
从2009年10月到2016年10月，全球互联网设备使用情况
正如你所看到的，在2009年10月到2016年10月之间，桌面网络访问的下降与移动设备使用的增长几乎完全相关;随着越来越多的人使用移动设备访问互联网，依赖台式电脑的人越来越少。这种趋势还反映在每个设备所花费的时间上。根据Comscore最近发布的一份报告，使用数字设备的时间份额在每一个移动指标上都有所增加——一般在移动设备上的时间、使用移动应用程序的时间和使用智能手机应用程序的时间——而使用台式电脑的时间份额却大幅下降。
平台在数字媒体上花费的时间份额
尽管营销人员多年来一直在警告“移动第一”这个传说中的世界，但我们去年年底才刚刚进入这个范式。但这对博客设计意味着什么呢?越来越多的人使用移动设备作为他们访问网页的主要方式，这不仅从用户体验的角度来看是有趣的;它在平衡美学考虑和技术规范的非常现实的限制方面提出了独特的挑战。当我们谈到页面加载时间(一个重要的可用性指标)时，通常是在转化率优化的背景下。你的页面加载时间越长，你的访问者就越不可能停留在你的网站上并转化为你的网站。这将直接影响其他参数，如跳出率和页面停留时间。
按加载时间转换的速率(通过TruConversion)然而，从用户体验的角度来看，页面加载时间可能会产生其他后果。例如，你知道网页加载时间的延迟会导致心率增加38%吗?这和观看恐怖电影的人的心率增加是一样的。可怕的东西。
Slo手机负载时间会导致显著的认知压力(来自爱立信消费者实验室)正如史蒂夫·乔布斯的著名观点，设计不仅仅是事物的外观，它还包括事物的工作方式。理解这一点对于设计美观且有价值的网页体验至关重要。那么，现在我们已经研究了塑造现代博客设计的一些更广泛的趋势，让我们来看看目前在网页设计中掀起波澜的一些个人风格元素。既然我们已经花了这么多时间讨论移动访问的重要性，那么似乎我们要讨论的第一个设计元素就是响应式设计。什么是响应式设计?
响应式网页设计(RWD)是由著名的网页开发人员Ethan Marcotte(他写了一本关于响应式网页设计的书)首次提出的术语，描述了一种网页设计和开发的方法，以使网站在广泛的设备上可访问和功能为中心。这主要是通过使用媒体查询来实现的，这是层叠样式表(CSS) 3语言的一个特性，它允许设计者根据用户设备的分辨率或屏幕大小来指定网页的某些CSS元素的启用或禁用。早在2014年(对于网页开发来说，这已经是很久以前的事了)，响应式设计是当时的技术潮流。对自己的网站缺乏技术理解的高管们要求陷入困境的设计师们“让它有响应性”，并相信最便宜、最快的方法就是在静态的桌面网站上简单地添加CSS规则。响应式设计已经死了吗?
许多开发人员和设计人员已经放弃了响应式设计。Ethan Marcotte曾经说过:“响应式网页设计并不打算取代手机网站。”这种想法在网页设计社区中越来越普遍。由文件类型和分辨率决定的页面大小许多开发人员拒绝响应式网页设计的一个主要原因是效率低下和臃肿。根据网络安全和性能专家Guy Pordjarny的研究，实际上，Podjarny研究的每个响应式网站都交付了整个桌面网站的全部有效负载，不管用户实际请求了多少数据。这意味着要下载数百个额外的、不必要的千字节的数据，即使是最小的服务器请求。这导致了糟糕的性能、用户界面问题和其他问题。当然，响应式网页设计并不是造成这些结果的唯一原因——无论在什么设备上浏览，糟糕的网站都是糟糕的，简单明了。然而，这项研究确实强调了糟糕的设计选择会对网站产生灾难性的影响。另一个需要考虑的事实是，使用RWD设计和构建的站点总是比本地应用程序慢。如今，许多博客和网站都是专门为各种设备设计的，这是一种把用户放在首位的思维转变。一开始可能需要做更多的工作，但从长远来看是值得的。响应式Web应用程序在网页设计社区中可能有些两极分化，但很少有设计师或开发人员能与之争辩的一个趋势是，渐进式Web应用程序令人难以置信的流行。进步的web应用程序看起来和感觉上都像原生应用程序，并提供许多相同的功能，包括“添加到主屏幕”功能。渐进式网络应用是指在外观、感觉和功能上都与为移动设备开发的应用类似的网站，并在他们的浏览器中为用户提供类似应用的体验。这包括推送通知、从移动主屏幕访问、离线模式、如果你用过手机上的应用，你会对其他元素很熟悉。尽管进步的网络应用的细微差别超出了本文的范围，但这是一个迷人的网络技术领域(如果你是一个像我一样的书呆子)，绝对值得进一步阅读。我建议你在谷歌开发者资源中心查看关于进步web应用程序的内容。随着带宽的增加(以及移动设备的处理能力)，我们已经看到了从密集的、文本密集的博客向更视觉化的、有大而多彩的图片的网站的稳步迁移。博客图像设计中最显著的趋势之一就是越来越流行的巨型“英雄”图像——至少在可预见的未来，这一趋势很可能会持续下去。
许多博客和网站都很好地使用了这种技术。把这个例子从美食伴侣网站迷恋:
你可能已经见过无数这样的例子技术动作当你浏览网页的时候。很容易理解为什么英雄形象的使用在近年来急剧增加。它们引人注目，视觉上引人注目，可以作为整个设计的基础，特别是具有长滚动深度的单页网站和依靠华丽的高分辨率图像的网站——比如美食博客。当然，英雄图像也不是没有缺点。选择使用这种设计元素的网站必须确保他们的图像是严格优化的技术考虑因素，如页面加载时间，还有独特的可访问性问题，如alt文本和其他元数据字段的正确使用。尽管许多网站在设计中坚定地采用了大而大胆的图片，但也有一些网站在悄悄地推进另一种截然不同的设计美学——一种完全避免图片的真正的极简主义方法。
流行的博客和网络发布平台Medium(属于Twitter)一直是这种设计美学的驱动力之一。是的，Medium确实支持图像，而且一些Medium博主使用它们达到了很好的效果。然而，绝大多数的Medium出版商根本不使用图片，这一趋势被其他一些博客抓住了。对于某些类型的内容，极简的博客设计是非常有效的。也许毫不奇怪，这种审美在作家中很受欢迎，但我们也看到一些主流博客采用了图像轻的设计。对于某些类型的博客文章，例如基于观点的文章，这种格式可以非常有效。对于其他的——例如WordStream发布的教学内容——就没有那么多了。
颜色是你可以使用的最重要的设计元素之一，今年，我们看到许多博客和网站继续采用强烈、大胆的配色方案。就具体的趋势而言，多色调配色的使用仍然很流行。有些网站喜欢使用两种直接互补的颜色，很少有网站比音乐流媒体服务Spotify在推动这一趋势方面做得更多:
Spotify已经支持互补的多色调方案有一段时间了，这一设计趋势在该网站和Spotify的营销活动中占据显著地位。上图就是一个很好的例子，说明了这种简单却引人注目的技巧是如何发挥巨大作用的，特别是当与强大的、极简的类型相搭配时。是的，从技术上讲，这里有不止两种颜色，但你可以看到他们想要的效果。
多色调配色方案是令人难以置信的多功能和高效的，尽管在发挥有限的颜色数量。有许多方法可以使用多色调配色方案你的博客，所以在决定最后的选择之前一定要探索不同的方案。
各种配色方案及其关系，如色轮上所示。通过Shopify形象。现在的网页可能比以前更加视觉化了，但对于大多数网站来说，文本仍然是游戏的主角，这使得字体设计成为任何网站最重要的设计元素之一。除了大胆的英雄图像和多色调配色方案，我们还看到在许多博客和网站上，强烈的无衬线字体的持续使用和日益流行。这个来自技术培训提供商General Assembly的例子说明了强大的字体如何增强即使是最简单的设计，这个主题贯穿于General Assembly的整个品牌:
General Assembly的网站设计使用了独特的粗体字体
字体配对
字体设计中最有效的技术之一是在单一设计中结合两种截然不同但又互补的字体。这一趋势贯穿了整个今年，看起来至少要在阳光下多待一段时间。
字体配对通过Mimpy and Co。就像图形和网页设计的许多方面一样，字体配对看起来比实际要简单得多。而且，就像最好的设计的许多元素一样，成功的字体搭配看起来毫不费力，正是因为其中的技巧和思想。Canva的设计学院为字体搭配提供了有用的指导，解释了每种组合的工作原理。我们很容易关注大胆的配色方案或醒目的字体等元素，但今年整个博客圈最流行的趋势之一是干净、简单的布局继续流行。
侧边栏塞满了按钮、徽章、广告和杂乱的东西，这些东西早就从许多博客中消失了。这有几个原因。首先，随着用户体验(UX)设计方法渗透到设计的其他领域，重点已经从把尽可能多的垃圾塞进你的博客侧边栏(blogrols，有人吗?)转移到更干净、更精简的博客布局上。这些原则也被应用到网页设计的其他方面，如网站结构和导航，这也有助于SEO和发现，并减少技术开销。其次，向移动端的转变使得新的博客设计方法变得有必要，这些设计方法注重速度和性能——这两者都可能受到诸如密集的侧边栏等无关的功能的负面影响——设计看起来和感觉都很好，即使是在较小的屏幕上。在这一点上值得注意的是，到目前为止我们介绍的许多技巧和技术都适用于大多数网站。也就是说，B2B网站所有者必须考虑到B2C网站可能不需要考虑的一些明显的因素。第一个是颜色。有没有想过为什么这么多公司网站主要使用蓝色配色方案?这是因为蓝色象征着力量和信任——这两种品质是许多B2B发布者渴望培养的。在下图中，您会注意到许多大型技术公司在其标识中使用蓝色方案来传达这一信息:
B2B网站在其博客设计决策中也必须考虑到有形的商业目标。例如，许多媒体和新闻机构使用侧边栏内容来推广其他相关内容——考虑基于主题或博客标签的个性化内容推荐。这是许多网站上常见的设计元素，鼓励读者留在网站上浏览其他内容，降低了跳出率。
有限公司把它删减到WordStream的侧边栏。下图是WordStream网站主博客页面的截图，你会注意到我们最突出的行动号召更加直接;它鼓励读者用AdWords性能评分器给他们的AdWords账户打分。
再往下滚动，你会看到另一个边栏元素，推广WordStream的免费学习资源PPC University。这两种行为都与商业目标直接相关，这些目标推动了销售和销售，也为各种培养途径提供了养分。同样值得注意的是，这些边栏元素并不是针对每个用户显示的——在某个分辨率阈值以下，边栏广告会消失，取而代之的是内容的单列或双列布局。现实情况是，B2B博客和网站经常受制于B2C发布者可能没有的要求，如上面的例子所示。然而，这并不意味着企业B2B博客不能采用本文概述的一些技术——您只是需要稍微努力一点，以说服您的执行团队对某些设计选择。丹·舍万(Dan Shewan)来自英国，是一名记者和网络内容专家，现在生活和写作在新英格兰。丹的作品出现在许多出版物的印刷版和网络版上，包括《卫报》、《每日野兽》、《太平洋标准》杂志、《独立报》、《麦克斯威尼的互联网趋势》和许多其他媒体。
参见Dan Shewan
的其他文章，更多像这样的文章:用门控内容产生线索的7个步骤(+例子)
利用最简单、最具成本效益的方法为您的业务生成线索。
没有内容的市场营销真的很难进行。也就是说，没有它你就不能营销。Hubspot的数据显示，82%的营销人员都明白这一点。另外18%的人(即10%的人不使用内容营销，8%的人不知道)真的不知道他们错过了什么。但是执行一个成功的内容营销策略是[…]
118个创意博客文章的商业想法(有例子和模板!)把思考的帽子放在架子上。你不会再需要它了。永远。
评论
评论前请阅读我们的评论政策。
