查看我们的最新帖子:2022年的22个网页设计趋势

但事实上，创造力是一种对话。

自从我们第一次学会在岩壁上用赭石和木炭重建我们世界的元素以来，这个对话就一直在进行。自从我们学会了把用棍子刻在粘土上的抽象标记变成充满意义的包装——也就是语言。

趋势只是那杂乱、混乱、多音的对话中的主线。无论我们选择接受还是抵制它们，我们的创造性选择都与这些趋势共存。

他们提供了上下文。因为如果不打破常规，创新又算得了什么呢?去年的趋势是什么呢?

所以，就像去年一样，我和Webflow顶尖的设计团队坐下来，请他们盯着他们的VR水晶球，看看什么将定义2018年的设计。

以下是Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero和Darin Dimitroff的看法。(当然，还有我自己的一些想法。)

1.破碎的网格布局

在设计师无休止地追求更具创造性和吸引力的布局时，我们一直依赖的网格为我们的布局带来和谐和逻辑，但网格本身却成了一种约束。

这并不是说破碎的网格布局完全抛弃了网格的概念——相反，它们允许图像和文本元素飘进和穿过排水沟，而这些排水沟通常在更严肃的布局中充当硬站点。在这里，通常谨慎的图像和文本开始重叠和融合，经常创造出美丽的位图和字母形式的并置。

2.插图成为舞台的中心

在营销数字产品的世界中，我所看到的一个更有趣的挑战是图像选择。欧宝体育在线首页我曾看到整个设计团队都在思考这个问题，结果通常是以下两种情况:

1. 欧宝体育在线首页产品UI截图和动图
2. 编辑/生活方式的摄影

前者强调产品内部的体验、特性和功能，而后者试图强调产品的人欧宝体育在线首页的维度:它对人们生活的影响。

但进入2018年，我们正在看到——并将继续看到——插画家的作品在营销和产品设计方面获得全新的突出地位。欧宝体育在线首页

为什么这一切让我着迷，我也不知道这到底是什么。也许这只是我们在时尚界长期观察到的循环——毕竟，直到60年代末左右，插图一直主导着广告业。

或者，也许Dropbox的设计团队对他们的新插画风格有这样的解释:

我们使用石墨制作草图，然后将它们与色彩斑斓的抽象形状搭配起来，使创作过程变得栩栩如生。我们的风格灵感来自于你第一次有一个想法的那一刻，并提醒你“在你做出第一个标记之前，画布是空白的”。

我是说，他们肯定知道某物通过这次重新设计……对吧?

插图也可以是非常强大的，把更抽象的概念变成生动的生活，正如你可以在Shopify的Polaris网站上看到的。通过一张图，Shopify阐明了北极星设计系统的目的是作为一个指路之光-北极星-为每个团队成员。

最后，值得注意的是，插图也可以巧妙地解决摄影带来的一些代表性挑战。

我们为各种各样的人打造我们的数字产品，但当欧宝体育在线首页你捕捉到一张真人的照片，并把它放到你网站的英雄列表中时，那人类使你的用户拟人化。并让所有其他用户都没有代表。

相比之下，Shopify北极星的英雄形象中的人类是只是一个人。诸如种族、性别、国籍以及更多的细节都没有明确定义，这使得我们中的任何一个人都更容易将自己投射到那个孤独的思考者的角色中，在指路明灯的照耀下思考创造性的可能性。

3.野兽派成为主流

2017年初，我们发表了一篇关于野兽主义兴起的文章，试图回答这个问题为什么新兴风格的:

兽性……就是打开一个空间，让设计师可以做他们想做的，而不是他们应该做的。这里创建的作品避开了所有优化建议和最佳实践列表，而是倾向于不和谐的外观和效果，有时甚至接近进攻性(无论如何，对预期而言)。

所以你可以想象我们有多惊讶，在所有的网站类型中，只有两个电子商务各大零售商纷纷加入了这一残酷的潮流:

巴黎世家

古奇

4.更加有机和倾斜的形状

大自然讨厌直线。

既肯特

多年来，网页和手机设计都被基于卡片的ui所主导。直到最近，这些卡片大多都是锋利的和直角的，以一种近乎现代主义的对网页设计材料的关注，暴露出其底层的几何形状。

这在2017年发生了很大的变化。现在，从谷歌Now到Twitter再到Facebook的所有应用程序都在吹嘘积极他们的卡上的圆角，输入框，头像等等。

不仅仅是那些基本元素形成了更有机的形状。现在的背景充斥着几乎变形虫般的颜色斑点，戏剧性的对角线，甚至现实世界的破折号几乎被渲染成卡通。

但设计师们在永不停歇地寻找打破常规的方法时，并不只是求助于有机曲线。许多人只是简单地将这些盒子的角度从通常的90°角度进行了调整，通过简单的视角变化来更新设计，就像Stripe的主页一样。

所有这些并不是说直角会像恐龙一样消失。我们也看到一些网站在直线上加倍努力，并将它们与更有机和球形的形状有效地混合在一起。

你还会注意到"闪动"或"振动的颜色。虽然这些颜色组合创造了令人难以置信的惊人效果——包括当你滚动屏幕时，幽灵般的余影似乎在你的眼睛里徘徊——但值得注意的是，它们代表了从易访问性的角度来看，这是一个不确定的领域．

虽然可访问性通常被认为是使设计对残疾人友好，但值得记住的是，即使是那些有色彩视觉的人也很难接受不和谐的颜色组合。

根据领英无障碍工程经理詹尼森·亚松森的说法，无障碍可以定义为:

设计和开发所有人(包括残疾人)都能独立使用和交互的用户界面。

那每一个人是关键。

5.甚至更普遍的互动和动画

媒介就是信息。

马歇尔·麦克卢汉

网络不是静态的媒介。尽管像贾斯汀·杰克逊这样的作品有着永恒的美和真理这是一个网页他说:“网络允许的不仅仅是在页面上打印文字。如果麦克卢汉的名言有任何意义的话，那就意味着，至少网页的一些信息——它的意义——在于它的动态和互动性:网页不仅仅是向我们展示信息，而是制造信息的能力移动更重要的是，让我们能够与这些信息互动并影响这些信息。

渐渐地，当你浏览网页时，信息不仅仅是提出了为了得到你的认可，却滑入你的意识，一点一点地引起你的注意。

显然，我们不应该去舷外在这里——动画总是有可能让原本愉快的体验变得铺天盖地，尤其是对那些有认知障碍或对动作敏感的人来说。

但如果做得好，即使是一个微妙的动画也能在正确的时间将访问者的注意力引导到正确的内容上，帮助确保他们不会错过重要的文案行或一个驱动转换的表单。

以Heco Partners为Black Sheep公司建造的这个华丽的网站为例。当你向下滚动时，“当前”行的高亮显示帮助你将注意力集中在写得非常好的文本上。然后，一系列设计大胆的工具提示开始与副本争夺你的注意力，呼吁你停止阅读，点击到另一个页面。对于构建内联导航系统的挑战，这是一个创造性的解决方案——但它也会给一些用户的体验增加不必要的紧张。

我们也看到大量工具的出现，可以简化更复杂的动画和交互的创建——这是数字设计师工具箱中的一个长期空白2.0交互Airbnb的洛蒂。

更具体地说，我们期待两种特殊的动画模式:不寻常的滚动速率和页面过渡。

意想不到的滚动利率

如今，视差可能已经过时了，但这并不意味着设计师对以有趣的方式将滚动与元素移动联系起来不感兴趣。

就拿安娜Eshwood为例。网站上的每张照片都很正常，直到你把它们滚动过去，这时它们会迅速上升，比你的滚动速度还要快。这给了网站一种有趣的空灵感，与简朴的单色照片和严肃的模特很好地搭配在一起。

随着交互和动画在我们的在线体验中变得越来越重要，我们期待看到更多意想不到的东西加入进来。

页面转换

在一个充满美丽动画的网页上，它有可能清楚地告诉我们“这个页面上有什么东西发生了变化”，从一个页面移动到另一个页面的感觉几乎是一样的，无论你在哪个网站上，这总是让人觉得有点奇怪。

一个状态变化动画可能会把你从一个页面带走，另一个在新页面上迎接你，但这些都是谨慎的，没有必要将它们连接起来。转换本身看起来就像任何其他的页面切换:页面停留一秒钟空白，然后加载新页面。没有什么幻想。

但我们开始看到越来越多的网站把这种状态的变化变得非常美丽。以代理3drops网站上的这些过渡为例:

在这里，页面过渡保持了体验的凝聚力和品牌。你不是在“导航到一个新页面”，而是在访问视图库中的另一个“视图”。这是一个以设计为中心的品牌的完美展示。

6.最大主义的出现

好的设计是尽可能少的设计

迪特尔公

多年来，你所能得到的最有力、最令人垂涎的设计反馈似乎是:“它很干净。”

这就是极简主义时代的设计世界。深受迪特尔·拉姆斯(Dieter Rams)优秀设计原则以及颇具影响力的版式论文《水晶高脚杯》(the Crystal Goblet)的影响，视觉设计师长期以来一直试图通过提供尽可能少的选择和视觉干扰来避开用户的方式。

对于一个生活在数字世界中是一种全新而罕见的体验的世界来说，这个选择非常有意义。我们需要适应这个陌生的新世界。

但今天，我们有以下网站，公平的警告，可能会导致癫痫发作:

美女杂志

h·洛伦佐

各种花里胡哨都灵

它们似乎都在努力扔东西而且从你到达的那一刻起，厨房的水槽就向你冲来。

你可以称之为野蛮主义的一种——事实上，我在上面所有的网站上都找到了野兽派的网站-但我们认为我们都可以期待看到更多的极端主义网站出现，甚至在你认为残酷的网站之外。随着我们越来越精通数字技术，一些网站对访问者的期望越来越高是很自然的。

7.衬线族把他们最好的脚向前伸

在非视网膜屏幕和糟糕的字体支持的糟糕日子里，在你的网页界面中坚持无衬线字体是很有意义的。但随着屏幕和字体渲染技术——更不用说自定义字体支持了——变得越来越强大，我们开始看到越来越多精巧的字体占据了舞台中央。或者至少是更突出的配角。

看看Kickstarter最近的重新设计吧，它的特色是在柔和的弧线衬线中设置创作者的名言:

或者是《改革集体报》醒目的大标题:

而在任何一天浏览Typewolf都会发现几个衬线抢镜:

作为一个长期的衬线粉，以及衬线能够唤起优雅、精致和文采的感觉，我热烈欢迎我们的新脚霸主。

8.浮动的导航菜单

固定导航已经成为以转换为重点(因为核心CTA可以在你滚动时始终与你保持一致)或拥有扩展菜单的网站的主流。这是一种很好的方式来简化网站的体验，保持导航控制在用户的指尖。

最近，我们看到设计师将这个想法更进一步，将导航从网站设计的其余部分中分离出来，并将其移到浏览器chrome的下方。这加强了导航是一个全局对象的感觉，并不一定是任何一个页面的一部分，而是在站点中安心地跟随你。

最明显的方法是在导航栏上添加一个投影，并将它移动到网站顶部的下方一点，就像上面Reseau的网站一样。但它也可以在一个平坦的设计，你可以在锚&轨道的网站上看到。

类似于离格设计，这允许有趣的并置自然(或有意地)发生在设计中，这提供了一个有趣的创意挑战。

9.<视频>元素

当你试图用视觉格式传达复杂的信息时，静态图像通常是行不通的。毕竟，复杂性往往会随着时间的推移而显现——一个UI的静态图像只告诉你其中有什么，而不是如何使用它。

输入

这是非常强大的，原因如下:

1. 它可以无缝地嵌入到设计中，而不像嵌入YouTube或Vimeo视频那样具有侵入性
2. 它仍然保持极高的质量，即使图像中有很多颜色、渐变和细节——这些是动图在没有指数膨胀的情况下难以做到的
3. 它可以循环，以确保副本的细节和图像的细节保持同步，并为需要它的人重复

所以我们看到视频元素在网络上如雨后春笋般涌现并不奇怪，从我们自己的主页到像条纹σ．

10.更具沉浸感的“多媒体”长格式

当我们打算发布长篇内容时，很容易就把一个很长的文本框扔到页面上，然后就结束了——特别是当我们的长篇内容由CMS提供支持时，一个单一的布局就可以完成从200字的导语到详细的短故事长度的教程等内容的繁重工作。

但一些设计师和作家正在英勇地抵制诱惑，回归到功能故事——结合定制布局和精心定制的副本，讲述引人入胜的长篇故事，用视频、声音、图表和图表、地图等丰富叙事。

公平地说，这很难说是一个“新”趋势——事实上，我把它称为围绕网络出版的长期对话的基石——但随着所有网络出版工具的出现，包括我们自己，这似乎是这个方面在2018年变得更加突出的最佳时机。

看看CNN的这则新闻全球变暖对格陵兰岛的影响——以及世界其他地方。

这个故事尽可能接近于把你带到那里。这对于一个对太多的人来说仍然显得抽象甚至不真实的问题来说是至关重要的。它还巧妙地将一个复杂的话题变成了一系列容易理解的段落。你永远不会因为大量的内容而感到不知所措，因为它本身并不会引起人们的注意。相反，你会发现自己读了每一个字，因为它太简单了，太吸引人了。

请注意,我不在此批评CMS:事实上，通过CMS传递这类体验是可能的。这只需要一点独创性——这个故事的所有视觉效果都可以通过背景图像和视频来传达——以及在你写作、设计和开发故事时，对故事一致性的仔细关注。是的，这是一种不同于标准“博客文章”的内容模式。

值得注意的是，这些更多样化的longform方法既可以使用破碎的网格，也可以使用标准的列，如《纽约时报》上面的文章所示。

11.变量的字体!

看看今天的网络，很难相信就在几年前，我们被迫依靠少数几个字体来传递我们所有的文本内容。

今天,网络丰富华丽字体的大量多样性，导致了排印、字体设计和字体消费的革命性水平。

它只会随着发行而变得更好变量的字体．这是一个由科技(和印刷术)界最大的公司——苹果、谷歌、微软和Adobe——联合开发的项目，可变字体项目实现了一种全新的字体设计形式。作为OpenType格式的官方补充，它:

允许字体设计师沿着64,000个变化轴(重量、宽度等)插入字体的整个字形集或单个字形，并将设计空间中的特定位置定义为命名实例(“粗体”、“浓缩”等)。

如果(像我一样)这句话让你有点摸不着头脑，那就看看John Hudson更直接的版本，他说可变字体是:

单个字体文件的行为类似于多个字体。

但在讨论像字母设计这样的视觉艺术时，最好还是坚持视觉:

简而言之，这就是可变字体:一个单一的字体文件，能够在短时间内从瘦到黑。无需调用CSS中的16种不同字体。

它会很大的。

12.内容中心-还是webook ?——获得酷

(需要澄清的是:内容一直都很酷。)

作为一个内容极客，我很高兴看到2017年有一堆漂亮的、以内容为中心的网站提供了大量有用的、写得很好的信息。考虑到2017年的成功，我猜2018年我们会看到更多。

同样令人着迷的是，许多领先品牌放弃了我们熟悉的PDF格式的电子书分发方式，完全利用网络的潜力来发布我喜欢称之为“webooks”的长篇内容。

我指的是什么?好:

条纹Atlas指南

Airtable宇宙。

DesignBetter.co

对讲机的书

我们自己的电子书网站。

我还需要继续吗?

13.CSS网格!

作为罗宾·伦德尔说得很有说服力在css技巧:

CSS网格是第一个真正的网页布局系统。它的设计目的是将内容组织成列和行，它最终让开发人员几乎可以像上帝一样控制我们面前的屏幕。

提示邪恶的笑声。

注意:Webflow将支持CSS网格，但还没有官方的日期。

14.对完美数字设计工具的追求

2017年是一个大深入讨论设计工具的本质，以及它们如何适合我们的工作。

Spectrum公司的布林·杰克逊提出了以下观点:

设计和工程工具之间的一种中介格式，为产品团队特别是设计人员提供更高效、更有能力的工具。欧宝体育在线首页

在一篇名为“接口他继续假设，“现在所有流行的设计工具都是为插图而优化的。”

(但值得注意的是，他将“插图”归类为任何导致“图像、图标、插图、字体、广告、印刷媒体或其他没有原生交互性的视觉传达媒介”的设计作品，这是一个有争议的主张。阅读和观看不就是一种互动吗?)

抛开插画和交互性的定义不谈，我们不难看出Jackson的观点:从根本上来说，大多数现代设计工具都专注于作品的制作欧宝体育在线首页图片,而不是接口．

设计师兼工程师亚当·米凯拉在《我是Facebook的一名设计师，这就是今天设计工具所缺少的东西在书中，他认为大多数设计师花了大量的时间来创造几乎没有有形价值的艺术品，因为它们只是代表最终的产品-数字接口欧宝体育在线首页，很快背离了所述的表示。

他以充满希望的口吻结束了这篇文章，他说:“我们有机会创造出融合(而不是桥梁)设计和实现的工具。”

这正是我们在Webflow试图建立的。就像Michela，我们设想的设计成果不是一个网站的原理图，而是是网站本身。不是接口的文档，而是接口本身。不断地与网站同步发展，但不断地生成版本的时间轴，可以查看，甚至可以通过点击一个按钮恢复。

我们还没有走到那一步，但在你们的帮助下，这是我们前进的方向。

15.多样性和包容性是设计的挑战

Webflow是一个机会均等的雇主。我们致力于建设一个不仅欢迎、而且鼓励思想和身份多样性的团队。

-我们的招聘信息

在Webflow的总部所在的美国，日益升温的政治气候推动了对多样性和包容性在设计中的作用的高度关注。

我们承认设计选择是看似小到决定在性别下拉列表中包含哪些选项——甚至是否包含性别下拉列表——都很重要深深对许多人类同胞来说。我们再一次看到，它是多么的强大错误消息传递的措辞数据验证的机制可以在人机交互的动态过程中实现。我们意识到，在广告工具中把种族作为过滤器可能会产生完全的种族主义效果，从而维护了我们许多人都希望看到颠覆的现有权力关系。

我们意识到，如果我们的团队不具有多样性和包容性，我们的设计解决方案也不可能具有多样性和包容性。

至少我们中的一些人。

另一方面，我们也看到性别偏见抬头了以明显矛盾和边缘化的方式——把我们通常认为是美德的对话，比如提供反馈，变成了双重标准的明显例子。

最终，作为用户体验(UX)专业人员，这是我们的工作每一个人，不管它们的具体情况如何，都要提供可用的、理想的愉快体验。

换句话说:我们的工作就是包容。让我们让2018年成为我们所有人专注于充分做好我们工作的一年。

16.“转向视频”的模式仍在继续

尽管我们中几乎没有人要求视频成为时下的网络出版媒介，但出版商们仍然对这一转变充满信心。

你到处都能看到它从新闻网站上几乎坚持你看视频而不是读到Snapchat、Instagram、最后是Facebook推出的短篇“故事”。当然，Excel很快就会赶上这一潮流!

但就像科技领域的大多数事情一样，这绝不是一个中性的发展。在这种从文字转向移动图像的转变中，成千上万的记者失去了工作。

而对于转型的网站来说，前景可能也不太乐观。根据哥伦比亚新闻评论：

在仅仅一年的时间里，那些转向视频的出版商就失去了大部分来之不易的本土受众，他们炮制的是千篇一律、平淡无奇、基本上是聚合在一起的“零食”视频。

独立新闻无论如何都在受苦——感谢特朗普——但转向视频并没有起到什么帮助。

一个积极的注意:根据Digiday，“视频CPM比显示CPM大得多”(CPM是“每印象成本”)。在理想的情况下，这意味着报纸可以在报道中少放广告。

当然，这不会发生。

面对这一切，我们必须牢记文本作为一种创造性和信息性媒介的优势:

1. 它的生产速度相对较快
2. 它很便宜
3. 它仍然是网络上大多数交流的主要形式

最后一点可能会让你挠头。但我建议你去主要的社交网络上浏览一下。除非你上了Instagram、Pinterest或Snapchat，否则你很有可能会看到一个写了很多东西．即使在这些视觉优先的平台上，文本仍然扮演着关键的辅助角色。

因为虽然一张图片在捕捉一个场景时可能“胜过千言万语”，但它们很少捕捉到背景——谁、什么、何时、何地、为什么以及如何使图像有意义。

这就很自然地引出了下一个问题:

17.UX写手的崛起还在继续

任何影响设计成果的人都是设计师。这包括开发人员、项目经理，甚至公司法务人员。都是设计师。

jared Spool

我在前面提到过一点去年的设计趋势但今天我想更多地关注被称为“用户体验写作”的弟子的崛起。

简单地说，UX写手专注于ui中的内容，主要是针对大型数字产品和web应用。欧宝体育在线首页现在，当我解释我为Webflow和过去的LinkedIn等公司写产品内内容时，人们欧宝体育在线首页有一个明显的倾向，那就是“什么?”

但请放心:ui是包装文字内容。这些内容通常对你的理解起着关键作用:

1. 什么你可以在UI中做
2. 如何去做那些事情
3. 什么你可能会遇到的限制和复杂性

但UX编写可以做到这一点多不止于此。界面中的文字也可以成为塑造我们喜爱的ui背后的品牌认知的强大工具。想想你在网页应用中看到的所有突出搞笑内容的推文，或者所有404页的展示，都是为了在不理想的时刻推动行动而设计的诙谐信息。

这在被称为聊天机器人的UI格式中表现得最为明显。一般来说，这些ui只包含单词。单词成为UI。聊天机器人的个性——或者说品牌——只能通过语言来表达。加上一些精心挑选的表情符号来增添情趣。

作为一名经验丰富的用户体验作者，我很高兴看到这个关键角色得到了更多它早就应该得到的认可。

我们的设计师。我们只用音节和字母。我们迫不及待地想和你合作。

18.设计。系统化。

现在，设计已经赢得了它的“位置”，对话已经从价值的断言转移到更成熟的分析，如何使设计的成功更系统化，可扩展，并在品牌的许多输出和环境中更有凝聚力。

设计系统专注于将品牌美学和功能方法转化为模块化组件，可以混合和匹配，以满足(理想的)任何UI的独特需求。当一种设计语言被系统化时，它简化了决策过程，减少了开发时间，并使设计人员能够在尚未建立设计模式的高级项目中工作。

和往常一样，品牌正处于潮流的顶端。UXPin推出了Systems，这是一个用于创建和维护设计系统的工具。Shopify推出的Polaris因其独特的内容、设计和开发指南的结合而受到好评我对它很有激情)．UX Power Tools推出了一个库，试图使Sketch成为一个可行的设计系统工具(我们将看到!)

期待看到多2018年还会有更多。

19.设计准则为前提

设计界一直沉迷于“先有鸡还是先有蛋”的争论:内容优先还是设计优先。

我一直站在内容第一的观点上。这不仅仅是因为我是一个“满足者”。对我来说，在决定如何包装它之前，先确定信息似乎是纯粹的逻辑。

但最近，当我从为特定交付物设计内容策略转向更面向系统的工作(品牌级别的内容策略)时，我开始认同这样一个观点:我们的工作不应该从设计或内容开始。

它应该从原则．

其他的一切——它看起来如何，它如何工作，它听起来如何——都应该来自并依赖于一套定义良好且明确的原则。

或者正如Shopify高级UX主管Amy Thibodeau在她的文章《定位北极星》中所说:

如果创建这个系统是为了实现真正的工作，那么它应该反映一个组织是如何生产东西的，以及它重视什么。例如，一个不包含任何原则或内容方法的设计系统，可能不会优先考虑这些事情在实际的日常生活中。

原则为所有其他决策提供了一个框架，从英雄中的副本应该多长到内容的背景是什么图像。毕竟，品牌是建立在原则之上的:使命、愿景和承诺。每一件事情都需要潜在的信念来激活它们，使它们与他人相关。

换句话说，原则提供为什么．

例如:在Webflow，我们的使命是帮助设计师、企业家和创意专业人士在网络上实现他们的想法。这一使命融入了我们所做的一切，从Ryan为我们创造的美学方法到我所设计的声音和语调标准。

正是这些标准指导着我们的初稿，告知我们相互之间的反馈，并希望贯穿于每一篇博客文章，电子邮件，营销页面等。到目前为止，这是一个很好的开始。

你认为2018年数字设计会有什么变化?

每次我把这些清单放在一起，我就会被自己有多可以讨论-以及year + 1的限制迫使我优先排序的程度。

这就是为什么我忽略了一些明显的力量，比如AR和VR我们去年提到过——迄今为止对网络的影响有限。考虑到这一点，你会在这个清单上加上什么呢?

(请注意，如果你在评论中包含链接，它们将被标记为可能的垃圾邮件。所以请随意省略链接-给我们足够的谷歌，我们应该很好。)

嘿，谢谢你的阅读。