在推送通知和永无休止的打开标签不断争夺我们注意力的时候,今年的到来可能并不令人惊讶,霍邱网页设计都是关于直觉和清晰的使用。在一个充斥着信息和刺激的环境中,今天的网站需要更加清晰地传递信息,才能脱颖而出。
以下的2020年网页设计趋势是为了确保网站的清晰和整洁,同时仍然有丰富的内容和视觉效果。最重要的是,这些惊人的趋势可以帮助你创建一个网站这是完美的时尚和最新的:
2020年十大网页设计趋势
尺寸过大的类型和元素
分割屏幕内容
实色块
大量的空白
暴露网格和窗口
荧光3D数码艺术品
重叠层
运动和交互作用
全屏表格
剪裁插图
01.尺寸过大的类型和元素
为了清晰、即时地进行交流,网站偏爱大而突出的元素。这种大小的设计适用于网页上的任何内容,从大的、大胆的排版到全屏图像和视频,甚至超大。网站菜单图标。
扩大的元素,如这些是引人注目的,并帮助网站访问者了解网站的所有有关的一切,立即。更不用说,它们在任何屏幕尺寸上都很好看。为了使这一趋势真正发光,减少每个页面上的设计元素的数量。请记住,太多的伟大的特点,在一次可能是压倒性和适得其反。
作为这一趋势的一部分,越来越多的网站选择在他们的第一个折叠的全屏幕图像或视频,与大的配对。排版。这种布局可以清晰有效地传递信息,确保最重要的信息不仅能够被传递,而且能够真正地与站点访问者注册并产生共鸣。
02.分割屏幕内容
有一个以上的想法要传达,但仍然想保持一个整洁的外观?考虑把你的屏幕从中间分开,让两边在聚光灯下有一个相等的位置。
这种迷人的网页设计趋势打破了矩形模具二。对于一些额外的刺激,你可以使每一半屏幕的行为略有不同。例如,在混合中加入一些令人惊讶的不对称滚动效应使双方以不同的速度前进。
若要将视觉层次结构注入到此分区设计中,请在屏幕中心放置一个额外的元素,两个部分在其中相遇。这些元素,可能是你徽标打电话到行动(Cta)按钮或菜单标题,将作为焦点和平衡屏幕。
03.实色块
继续分割屏幕的趋势,一些网站将其内容分解成更多的部分,导致一系列不同大小的方块和矩形被颜色分隔开来。这种外观可以同时表达多个信息,以有序和连贯的方式。
在每个部分放置一张照片或几行简短的文本,网站访问者可以很容易地跟踪这些小块信息。为了使作品更有吸引力,一定要把正方形涂成不同的颜色。网站配色方案.
而这一趋势是关于在视觉上引人注目地显示一组项目。网站布局,最终的结果应该远离杂乱无章的拼贴工作。颜色块应该结合在一起,形成一个一致的组成,使设计直观和易于理解。确保颜色块彼此整齐地对齐(网格在这里可以派上用场),并且所有不同的视觉效果都是相互补充的。
04.大量的空白
空格(或负空格)是指设计元素之间的空白区域。它给任何网页或屏幕一个宽敞,良好平衡的感觉。虽然最常见的白色,空白也可以由任何其他背景颜色。它包括文本的行或列之间的间距、每个视觉效果周围的空间或页面周围的边距。
由于空白是为了使区域空置,所以它可以被看作是对空间的低效浪费。事实上,空白为我们提供了新鲜的空气。它可以增加可读性,突出重要的设计元素,如号召行动,分开独立的部分,并创造一个整体整洁和令人愉快的外观。
而空白一直是一个重要的设计原则,到2020年,我们将看到空白变得越来越大和更突出-以及它的相邻图像和类型。我们看到和谐的设计与干净,熟练执行的排版,和图像,似乎是自由漂浮在空间。随后的外观是原始的,但远没有极简主义,因为其余的视觉是大,大胆,和丰富多彩的。
05.暴露网格和窗口
最近,霍邱Web设计正从技术本身中找到灵感。通过引用我们从操作系统和应用程序中非常熟悉的图标,网站可以表现出一种当代的、略带嘲讽意味的外观。
矩形和笔画,或细线条,将我们的屏幕分成几个部分,引导我们的眼睛朝着理想的阅读方向前进(这是一种伟大的实践。在线浏览读入g)。网格及其指导原则(这两种设计约定通常都是为幕后工作保留的)现在公开了,如网站设计师突出显示屏幕及其构建块的分段。
使人联想起弹出式窗口或浏览器窗口的形状,现在已成为页面本身的无缝部分。这种外观可以是细微的,温和地暗示着熟悉的形式,或更明确的设计,巧妙地参考早期的计算机。
06.荧光3D数码艺术品
提供超凡脱俗的解释,熟悉的材料,这些数字3D图像点缀我们的网站发光,霓虹灯色的阴影。像这样的艺术品是吸引游客注意力的诱人的小糖果,与干净和最小的布局形成对比。
数码渲染的3D艺术品的使用本身并不是什么新鲜事,但它们现在正变得越来越广泛。这也许可以追溯到这样一个事实:3D建模程序现在比以前更容易访问。结合荧光颜色,结果是未来主义和精力充沛,注入任何网站的个性。
请注意,这一网页设计趋势应在适度使用。尝试将荧光颜色分散在网页上,作为您的网页中的补充或次要的颜色。调色板。为了平衡这些,选择中性色调作为原色,如白色、黑色和灰色。
07.重叠层
在网页中分层元素是一个诱人的方式来增加我们的2D屏幕的深度,培养了一种感觉,在我们的屏幕的四个角落比眼睛看到的更多。分层效果可以通过将元素放在另一个之上,从而使其部分被从视图中模糊,或者允许其他内容在单击后弹出到视图中来实现。
虽然这是丰富的视觉效果,实际上是堆叠在一起,如果做得好,最终的构图将保持有序和容易辨认。这是通过在元素(如上所述)和层次结构周围使用空格来实现的,某些元素比其他元素更大、更突出。
这个外观可以用灯箱..视差滚动效果,或通过巧妙地将图像或文本放在另一个之上。
08.运动和交互作用
视频和动画远远不是网络上的一种新现象。毕竟,运动是一种吸引人的,当然是吸引网站访问者兴趣的方法,特别是当面向注意力减少的受众的设计。我们的眼睛几乎本能地被任何移动的元素吸引,这是一个生物学的事实,可以用来控制访问者感知某一页面的方式。
在网页设计中,目前有各种各样的运动形式:从提供反馈的微动画到屏幕上运行的字体,再到全屏幕视频标题或动画,在我们悬停或点击元素时提供反馈。
为了使这一趋势为你工作,想一想,你想吸引最关注的领域在你的网站。请记住,当被滥用时,运动可能会分散注意力,所以一定要只在战略位置应用它,以一种支持您网站的故事讲述的方式。
09.全屏表格
今年的总体设计主题是由大量空白包围的大型元素。因此,这一趋势很自然地进入了更普通的网页设计领域,比如在线表格.
在线表单在我们的网络交互中扮演着不可或缺的角色,从注册到服务,再到在网上商店,还有更多。然而,有时,他们觉得这是一项乏味的杂务,用户往往不愿填写这些内容。简单的扩展表单,使其在页面上占据更多的空间,使其更有吸引力地与之交互。因此,全屏窗体可以改善用户体验.
另一个可以增加用户填写和提交表单的可能性的功能是实时响应用户行为的微观交互,引导用户完成整个过程。例如,细微的设计更改可以表示某个字段已被填充,而反馈消息可以标记一个成功的表单提交。
10.量身定制的插图
网站利用大量的视觉工具来讲述一个引人入胜的故事。任何东西,从插图到图标和照片,视觉不再仅仅是占位符,只是添加一些颜色的网页。相反,web设计是有意使用图像的,利用可视化来支持消息和制作一个品牌认同.
事实上,正确的位置插图会有很大的不同。举个例子,想想一家滑板店的网站,里面充满了街头艺术启发的图形。相比之下,非营利网站他们的感觉良好的视觉带来了一种乐观的感觉,发出了不同的信息。
要形成一个连贯的视觉语言,封装您的品牌的愿景,浏览矢量艺术收藏独特的插图,图标和徽章。另外,投资时间通过优质媒体特色找到完全符合你的品牌特殊需求的形象