设计趋势|2021年21个网页设计趋势一览（1）

关键词

潮流就是个圈，以前被嫌弃过时的东西再次被注入当代的精髓，重新强势登陆人们的视觉眼球。复古字体就是典型的例子，它在流行的过程中经历了同样的潮起潮落，虽然有一小部分字体过于老化，但是大部分都经得住时间的考验。

▲图:Spotify狂欢节促销页面

我们在Spotify的狂欢节促销页面上看到了字体的新旧合并。这些复古字体并不是一尘不变，而是实验性的为他们注入了新的活力。这是采用传统字体并在保持可读性的同时给它们带来酷炫和现代感的一个很好的例子。

▲图:活动策划公司宣传网页

活动策划公司Goliath Entertainment的网页宣传有一种复古主义的感觉。大胆的字体在向过去的经典致敬的同时又不失现代潮流。

多年来，视差滚动效果一直是网站设计中的一种趋势，我们希望在2021年看到更多关于视差效果创造性的探索。但这种效果不是为了浮夸而浮夸，而是作为强调或突出显示内容的工具。

▲图:Alice Lee网页

爱丽丝·李（Alice Lee）的图片网站使用视差效果来响应鼠标的位置，从而使插图生动起来。虽然图片动作量很小但却将视差与约束的意图结合得很好的一个例子。

▲图:Green Meadow网页

并非每个视差动画都必须在屏幕上做出宏大的效果。 现在我们还看到了更多巧妙的应用程序。在针对Green Meadow的网页设计中，几乎可以完全忽略这种效果。但是文本与字体柔和的展示并创造了足够的并置性，足以引起人们对网页弹出的每个文本块的注意。

如今我们看到越来越多的网页设计师继续尝试水平滚动。做到最好的人不是为了与众不同而打破了现有的格局，而是像在图库中一样，依次公开信息，为观者创造一个更好的阅读观感。

▲图:webflow网页

在webflow的Designer功能页面上，设计师使用了少量的水平滚动来放大大图像，并以更大的尺寸显示更多的图像相关部分。

▲图:McBride Design网页

▲图:McBride Design网页

McBride Design使用水平滚动来展示其工作的大型照片，而不会占用页面上过多的空间。它们还在右下角设计了一个清晰的指示器，用于调节页面水平滚动的范围。

此外，我们在设计水平滚动时应该注意以下几个要点：

• 不要强迫用户浏览水平内容：允许使用其他导航方式，例如带有清晰标签的箭头按钮。

• 使用清晰的视觉提示来提示用户在何处使用水平滚动，且不要将这些提示隐藏在悬停之后

• 需要考虑在水平滚动条中显示哪些内容会带来较好的效果-相册是一个很好的选择，因为水平滚动条会向用户显示一个小的预览，并允许他们选择查看更多内容或继续向下移动页面

• 避免用水平滚动显示需要阅读的文本

随着更高分辨率屏幕的出现，3D设计已从Geocities的块状和斜角边缘发展到了现在。我们一直在网页设计中有看到高质量的3D视觉效果。它们不是在分散人们的注意力，而是增加了整体用户体验。

▲图:Sennep网页

创意机构Sennep在其整个网站上都加入了3D元素。 此外所有设计元素之间都很和谐。这便是3D效果在简约的布局中产生更好效果的完美示例。

▲图:Yaya网页

Yaya制作了这个古怪而酷炫的英雄动画，将对3D的热爱放在了网站首页的正中央。

▲图:Pitch网页

在下面的演示软件公司Pitch的示例中，它们的彩色布局多数采用了三维形状，阴影，渐变和分层元素。这些3D元素使这种设计栩栩如生。

随着大多数人可以享受更快的互联网速度，多媒体网页的体验随处可见。设计师们可以将视觉效果，文本，视频和音频融合在一起，借此提供丰富的用户体验。

▲图:Nicolas Errera网页

尼古拉斯·埃雷拉（Nicolas Errera）的网站包含用于播放精美背景视频的播放控件：点击即可播放，也可以暂停。它还结合了微妙的动画，可以指示您离视频的距离。

▲图:Black Yearbook网页

多媒体体验可在许多不同领域中发挥作用。在上面的示例中，我们看到了Black Yearbook的屏幕截图。这是Adraint Bereal和他的朋友们共同筹集的一本书，展示了一名在非裔美国学生在以白人为主的学校就读的感受。完整的播放控件在所有视频上清晰可见。这个简洁通过优美的配乐与巧妙的转场镜头让观者能够体会到创作者的热情，使观者想进一步了解这本书及其背后的故事。

AR的意义不仅限于在您的Apple或Android移动设备上寻找Pokémon。它是一种能提供给观者沉浸式体验的好方法。Wayfair Technologies生产的WebXR API和软件等新技术几乎为每个人打开了这个领域。

▲图:Jeeo吉普网页

吉普在“体验与售价”页面中使用了AR。 对于那些懒得踏入汽车经销店的人来说，这将带来无比轻松且无压力的体验。 越来越多的零售和电子商务网站正在利用AR的力量来帮助销售其产品，并在购买过程中增强潜在客户的能力。

刚性网格和纯色扁平体块可以让网页的风格独树一帜。 此外粒状纹理可以使它们更加自然。

▲图:Studio Gusto网页

我们在Studio Gusto网站上可以看到这些美丽的纹理。它使用lo-fi设计元素以此为用户提供更粗狂更自然的观感，这比许多网页设计中常见的圆滑完美感觉更自然。

就像网格可以给设计带来更自然的感觉一样，柔和的色彩也可以。

▲图:Magic Theatre Studio网页

Magic Theatre Studio使用浅色和深绿色两种基色，使此网页设计的各个部分之间形成鲜明的对比。这些柔和的颜色是手绘样式的文字和插图的理想背景。 

▲图:Bobby Rowe网页

上面是Bobby Rowe推出的营销网页，以柔和且明亮的色彩为特色，并用有趣的文字准确又生动的表达出了他的意图。

Web开发时需要考虑提供更多个性化的体验，比如从暗/亮模式之间切换以及更改网站外观和导航的其他方式，到提供根据用户喜好定制内容（例如Spotify生成的自定义播放列表）。新的设计和算法使网络更加以用户为中心。

高斯模糊效果非常好，可以为图像和渐变提供柔和的过度。这种效果在网页设计中已经运用了一段时间。

▲图:Moment House网页

Moment House的首页并非以英雄形象开头，而是以令人愉悦的高斯色彩模糊开头。这给人一种大气的感觉，并与紧随其后的洛杉矶城市景观照片直接联系在一起。它完美地表达了在镜头下充满阳光或者阴霾的洛杉矶。

▲图:Monograph communications网页

Monograph communications网站首页使用了高斯模糊。红色，紫色和蓝色的自然混合，让直线和粗体字体之间形成了鲜明的对比。

▲图:I am Tamara网页

I am Tamara 网站采用了相同的方法，将一些高斯模糊添加到背景中。

▲图:Goodbooks网页

Goodbooks整合了高斯模糊的蒸气状气泡,给人一种有东西隐藏在白屏后的感觉。我们可以看到形状的变化和旋转，但却不能完全看到它的形状。这是一个绝佳的视觉锚点，并引起了人们对其下方的号召性用语的关注，以查看他们推荐的前12本书籍。