2021年的21种现代网页设计趋势
以下是21种网页设计趋势，这些趋势也将有助于使2021年更加光明。
1.复古字体
我们已经看到许多旧事物再次变得很酷，然后变得更加不酷。考虑一下车把的胡须和妈妈的牛仔裤。具有讽刺意味的是保质期短。
复古字体在流行中也经历了同样的潮起潮落，许多具有复古字体的设计都还没有老化。
但是，回退版式已经重新流行了一点。我们没有看到同样疲倦的字体。相反，样式化和一些艺术性正在重新构想什么是复古字体。
我们在Spotify的嘉年华促销页面上看到了新旧合并。他们没有经过陈旧和陈词滥调，而是通过一些实验为传统的粗体字体注入了新的活力。这是采用传统字体并在保持可读性的同时给它们带来酷炫和现代感的一个很好的例子。
Spotify的狂欢节促销页面将时髦的字体与抽象的字母组合在一起，并具有鲜艳的色彩和有趣的纹理。
活动策划公司Goliath Entertainment的网站上充满复古感。大胆的字体向过去的人们致敬，同时仍然使人感到当下。
Goliath Entertainment的网站使用大胆的复古字体和同样大胆的颜色。
随着2021年的到来，我们期待看到更多富有创意的版式重塑。
2.视差滚动动画
多年来，视差滚动效果一直是网站设计中的一种趋势，我们希望在2021年看到更多关于视差可以实现的微妙和创造性的探索。
请记住，视差效应中的过多运动可能会对前庭疾病患者造成伤害，因为深度和运动的错觉可能会导致迷失方向和头昏眼花。以下是一些指导原则，我们希望更多的设计人员能够考虑到这些原则，以确保他们最小化视差且不会造成伤害：
不要让视差效应分散重要信息的注意力
不要让用户更难完成重要任务
保持视差效果的数量最少
最小化每个实例中的视差移动量
将视差效果限制在屏幕的一小部分内
包括供用户关闭视差效果的选项
爱丽丝·李（Alice Lee）的作品集网站使用视差效果来响应鼠标的位置，从而使她的插图栩栩如生。移动量很小，并且包含在英雄的范围内。这是将视差与约束和意图结合使用的一个很好的例子。
爱丽丝·李（Alice Lee）的主页使用微妙的视差滚动将她的插图之一生动起来。
并非每个视差动画都必须在屏幕上做出宏大的手势。我们还看到了更多微妙的应用程序。在Green Meadow的此网页设计中，几乎可以完全忽略此效果。但是，文本的这种柔和的展示创造了足够的并置性，以引起人们对出现的每个文本块的注意。
Green Meadow的网站使用视差动画来逐步显示文本的不同部分。
明年，我们很高兴看到视差滚动被巧妙地使用，不是为了浮华效果，而是作为强调或突出显示内容的工具。
3.水平滚动
以前被认为是网页设计的仿制品，水平滚动正在卷土重来。
我们看到越来越多的网页设计师继续尝试水平滚动。做到最好的人不是为了与众不同而打破了格局，而是像在图库中一样，逐渐地公开了次级信息的一种实用方法。
在2021年成功采用水平滚动的设计人员将牢记以下注意事项：
不要强迫用户浏览水平内容：允许使用其他导航方式，例如带有清晰标签的箭头按钮
使用清晰的视觉提示来指示内容在何处使用水平滚动，并且不要将这些提示隐藏在悬停之后
考虑一下在水平滚动条中显示哪些内容会带来好处-画廊是一个很好的竞争者，因为水平滚动条会向用户显示一个小的预览，并允许他们选择查看更多内容或继续向下移动页面
避免要求水平滚动显示需要阅读的文本
在我们自己的Designer功能页面上，我们使用了少量的水平滚动来放大大图像，并以更大的尺寸显示图像的更多相关部分，以伴随相关内容。
Webflow的Designer功能页面将水平滚动应用于Webflow Designer的大图像，以更好地显示UI的详细信息。
时代报设计工作室的主页包括一个明确的提示旁边的主键也作为一个链接，慢慢滑动您在点击精选作品。滚动动作节奏合理，且时间不要太长，让特色图像显得光彩照人。
Momento Design Studio使用水平滚动来展示其各个项目的大图像。
McBride Design使用水平滚动条来展示其工作的大型照片，而不会占用页面上过多的空间。它们还在右下角包含一个清晰的指示器，用于设置页面水平滚动的期望。
McBride Design Studio使用水平滚动显示节省几乎全高的图像，以节省页面空间。
4.到处都有3D视觉效果
随着高分辨率屏幕的出现，3D设计已经从Geocities的块状和斜角边缘走了很长一段路。我们一直在看到高质量3D视觉效果无缝编织到网页设计中。他们不是在分散注意力，而是在增加整体用户体验。
创意代理商Sennep在其整个网站上都加入了3D元素的深度标记。所有设计元素之间都有一种很好的和谐感。这是一个完美的示例，说明了在更简约的布局中3D可以如何给人留下更大的印象。
Sennep的主页英雄以蓝色钢琴的3D插图为特色。
Yaya制作了这个古怪而酷炫的英雄动画，将对3D的热爱放在了首页的正面和中央。
Yaya的首页英雄强调了一个详细的3D插图，描绘了一个人与一台未来派制造机器进行交互。
在下面的演示软件公司Pitch的示例中，它们的彩色布局充满了三维形状，阴影，渐变和分层元素。这些3D设计元素使这种设计栩栩如生。
Pitch的网站英雄展示了他们的产品，并加入了一些抽象的3D元素以增加视觉吸引力。
3D元素可为任何网页增添独特感和立体感。
5.多媒体经验
随着大多数人可以使用更快的互联网速度，多媒体Web体验随处可见。将视觉效果，文本，视频和音频融合在一起，可以提供丰富的用户体验。
2021年成功的设计将结合多媒体体验来使用约束：
优先考虑简单性，例如在组合运动和音频时。太多的事情可能会使认知障碍患者分心或不知所措。
考虑周到地使用不同的媒体格式，以使内容的可访问性最大化。
包括所有预先录制的多媒体的隐藏式字幕和字幕。
包括图像的替代文本，并在复杂的图像中添加较长的描述性文本。
确保所有文本都是用HTML制作的，而不是在图像内部渲染的。
避免自动播放视频或运动内容：相反，提供一个清晰的“播放”按钮，使用户可以选择播放和暂停内容。
有效且可访问地使用多媒体是应对多种因素的责任。以下是有关视频可访问性的更多资源。
Nicolas Errera的网站包括用于播放精美背景视频的播放控件：单击即可播放，也可以暂停。它还结合了微妙的动画，可以指示您到视频的距离。
尼古拉斯·埃雷拉（Nicolas Errera）的网站英雄融合了精美的全幅视频以及完整的用户播放控件。
多媒体体验可在许多不同领域中发挥作用。在下面的示例中，我们看到了Black Yearbook的屏幕截图。这是一本由Adraint Bereal和他的朋友们共同编写的众筹书，展示了成为一名以白人为主的非裔美国学生的感受。完整的播放控件在所有视频上清晰可见。在设计之初，拍摄精美的电影就从一个场景切换到下一个场景，并在背景中播放催眠配乐，感觉非常像电影的预告片。简介的背后有一种热情，使您想进一步了解这本书及其背后的动向。
《黑色年鉴》包括具有完整播放控件和精美摄影效果的视频。
对于非同寻常的事情，我们将使用MSCHF来完善这份多媒体示例列表，MSCHF是许多基于病毒的基于Web的drop背后的臭名昭著的公司。MSCHF的野外设计跨越了野蛮主义，几乎荒谬的设计将鲜明的字体，SMS文本消息和其他元素结合在一起。
6.增强现实（AR）体验
借助多媒体体验，我们不要忘记使用增强现实（AR）带来的所有令人惊叹的沉浸式体验。AR的意义不仅限于在您的Apple或Android移动设备上寻找Pokémon。Wayfair Technologies生产的WebXR API和软件等新技术几乎为每个人打开了这个领域。
Jeep在此“ Build＆Price a Jeep ”页面上利用了AR 。对于那些讨厌踏入汽车经销店的人，这将带来轻轻松松而无压力的体验。越来越多的零售和电子商务网站正在利用AR的功能来帮助销售其产品，并在购买过程中增强潜在客户的能力。
吉普牧马人拥有身临其境的增强现实体验，可以展示汽车内饰的各个方面。
7.注重谷物
刚性网格和纯色扁平块确实可以从网页设计中抽出个性。粒状纹理可以使它们更自然。
我们可以在Studio Gusto的网站上看到粒状的美丽。它使用lo-fi设计元素来提供更粗糙的用户体验，比许多网页设计中常见的圆滑完美感觉更自然。
Studio Gusto的主页将柔和的靛蓝颜色与明亮的粉红色字体配对，并添加了颗粒效果，以增加趣味性。
8.专注于柔和的色彩
就像谷物可以给设计带来更自然的感觉一样，柔和的色彩也可以。
Magic Theatre Studio使用浅色调色板和深色绿色块，使此Web设计的各个部分之间形成鲜明的对比。这些柔和的颜色是手绘样式的文字和插图的理想背景。在背景中，几乎没有什么模糊的嗡嗡声，并且在明亮和黑暗的背景下有细微的扭曲，使设计感觉非常生动。
Magic Theatre Studio的网站将中性奶油色与简单的黑色图形配对，以达到镇定效果。
以下是Bobby Rowe的营销组合，以庆祝色彩为特色，并提供有关他所做工作的翔实而有趣的文字。创建一个完美的网页设计可能很难，但是Bobby Rowe随此网页设计而来。柔和的颜色以及大胆的颜色都有很多。
鲍比·罗（Bobby Rowe）的主页使用橙色粗体显示以下格言：“席琳·迪翁（Celine Dion）仅以手势语与家人说话，为舞台节省了礼物。”
9.基于偏好的设计
Web开发在提供更多个性化体验方面取得了长足的进步。从包括在暗/亮模式之间切换以及更改网站的外观和导航的其他方法到提供根据用户喜好定制的内容（例如Spotify生成的定制播放列表），它可以是任何东西。
新的设计实践和算法使Internet不再具有被动的用户体验，而更加以用户为中心。未来将把更多的精力放在满足那些浏览网站的需求，欲望和品味上。
10.高斯模糊
高斯模糊效果非常好，可以为图像和渐变提供柔和的漩涡。这种效果已经存在了一段时间，但是设计人员已经在网页设计中更突出的空间中使用了这种效果。
Moment House的首页并非以英雄形象开头，而是以令人愉悦的高斯色彩模糊开头。这给人一种大气的感觉，并直接与紧随其后的洛杉矶城市景观照片联系在一起。它完美地捕捉了透过洛杉矶观看的金色光芒和阴霾的镜头。
Moment House的主人公具有令人愉悦的紫色，黄色和橙色高斯模糊效果。
在专着传播的背景下，我们看到了高斯的模糊。红色，紫色和蓝色的蓬松混合，在直线和覆盖它的粗体字体之间形成了鲜明的对比。
Monograph Communication的网站将风格化版式与整页背景高斯模糊相结合。
我是塔玛拉（UX）的UX产品组合采用了相同的方法，将一些高斯模糊添加到背景中。
我是塔玛拉（Tamara）的投资组合网站，使用非常微妙的桃高斯模糊来增加质感和趣味性。
Goodbooks整合了高斯模糊的蒸气状气??泡。下面的屏幕抓图并不能真正做到这一点，但感觉就像是隐藏在白色屏幕后面的东西。我们看到了形状的变化和旋转，但从未完全看到它的形状。这使它成为了一个绝佳的视觉主播，并引起了人们对其下方的号召性用语的关注，以查看他们推荐的前12本书籍。
Goobooks.io的主页英雄使用紫色和黄色的高斯模糊作为视觉焦点。
我们喜欢看到永远存在的事物（例如高斯模糊）在以新颖有趣的方式使用它们的设计师手中越来越流行。
11.滚动讲故事
我们已经看到设计师通过网络体验讲故事的趋势正在增长。这就是滚动叙事的源头-视觉叙事可以增强故事的色彩并将您吸引到其叙事中。
限制滚动练习的最佳应用：
将运动保持在较小的区域内。
以用户的名义提供互动：提供明显的播放控件来播放/暂停/停止互动和动作。
确保所有讲故事的元素有助于强调故事，而不是分散重要文本的注意力。
我们自己的Web设计艺术历史网站使用小巧的动画和精美的插图来支持有关艺术历史如何指导网页设计的故事。
12.暗模式
提起AC DC的“黑色回归”，是因为2021年黑暗模式将出现在更多的屏幕上，越来越多的设计师开始接受黑暗模式的美学，黑色提供了完美的黑暗背景，使设计元素从屏幕上弹出。
在下面的示例中，Obys Agency设计了向时装设计师Peter Lindbergh致敬的产品，将细腻质感的黑色背景与漂亮的衬线字体配对。
返回列表
24小时咨询热线：139 3387 1212
E-mail：9196389@qq.com 
QQ咨询：9196389 
石家庄市鸿锐大厦2-820（裕华路与解放南大街交叉口东南角）