高端响应式模板免费下载

响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

什么是响应式网页设计?

2024年网页设计超现实法(合集7篇)

网页设计超现实法 第1篇

相似性与接近性原理密切相关的原因,是相似分组对象之间共享属性的质量。无论是颜色、形状、形态、大小、方向或任何其他属性,当这些属性中的一个或多个在邻近对象_享时,相似性将占上风。

即使正空间的元素看起来没有明显的联系,由于相似性原理,它们也会与负空间元素区分开。

看看这些 UrbanDecay 的商品列表:

虽然上面的商品各不相同,但在位置、色彩、产品布局、表现方式等方面却有一定的相似性。唯一不同的是左上角的眼影广告,在同类产品中独树一帜。这显然是一种营销策略,目的是在不损害页面整体对称和美观的情况下吸引注意力。这里要考虑的另一点是,尺寸上的相似性使其他图像与相似的产品类别区分开来。

除了产品展示之外,正空间可以与相似度结合使用,也可以与负空间结合使用。

让我们来看看 influenster 的着陆页:

上面例子中对齐的边框也运用了相似性原理。虽然每个正空间元素是不同的,但是相似的感觉是通过整个页面中一致的文本字段来传达的。风格、布局和主题都是相似的,因此带来了统一的视觉效果。

网页设计超现实法 第2篇

你是否曾经遇到过这样一幅画面,看上去是闭合的,但实际上是开放的?这是由于它采用封闭性原理。我们的大脑倾向于「脑补」不完整物体的空白,并利用我们的视觉感知来使图形完整化。

正空间和负空间一起构成一个整体。最好的案例就是负空间中隐藏的形状和形式,这要求对正空间中要传达的信息进行精确评估。在封闭空间创造性地使用着正负空间,可以产生有趣但简单的设计。

下面是 Magu Kambucha 的设计图:

在这个案例中,可以看到封闭性和图形-背景关系的平衡。瓶子和后面的粗体文字构成对比,背景则是和两者都构成对比的柔粉色。

封闭性体现在哪里?看到瓶子后面的文字了吗?

虽然你不能完全看到它,但仍然知道它是「Kambucha」。除了第一个「K」和最后一个「A」,其他字母都是半隐藏的,这些字母都是凭观者的直觉自动完成的,整个形式开始成形,意义也随之成形。

下面是 Cult 的截图:

即使文本没有写得很清楚,我们的头脑可以很容易地读到 CULT 这个词。即使单词不完整,文本的排列和对齐也可以使其易于辨认。

网页设计超现实法 第3篇

我们可以在网上看到很多垂直分屏的网站布局设计,这种布局的设计趋势正在上升,将在2024年成为最值得关注的网页设计趋势之一。在网站设计中,分屏布局设计能够给人一种现代化的视觉感受且在创造力方面有很大的展现空间。通过这种分屏布局设计,设计师可以在同一页面分别呈现不同的内容或消息,让用户能够更快的获取自己想要的信息,节省用户的时间。此外,使用这种方法也可以有效地展示不对称设计和交互对象。

网页设计超现实法 第4篇

最后,根据一般格式塔原则,连续性遵循模式,即引导实现遵循一致的路径,建立从一个对象到另一个对象的线性模式。

在上面的图片中,尽管圆形色块的颜色变淡了,但是观者更倾向于将中间的间隙其看作一条直线,这使我们相信连续性的原理比色彩的力量更能引导用户的视觉感知。当我们借助负空间在视觉元素中画出路径,我们的眼睛倾向于优先感知正负空间之间的界限。

脑补出来的这条连续的线条是我们在设计中更应该引入的视觉线索。

让我们来看看 Crypton Trading 网站中的视觉线索设计:

看到页面右半部分设计的完美延续了吗?不管背景的明暗色调如何变化,图案在页面上的变化都非常显著。当你向下滚动时,你会看到图案和颜色是如何以连续和无缝的运动变化的。在这里,色调的变化是可以忽略的,我们所看到的是一个连续的线和点的模式。

另一个很好的例子是 OscilloScope 网站:

该网站借用连续性法则,将网站用户引入到工作室的 360 度视角中,他们可以在导航中选择所需的子栏目。

影片《Cargo》的着陆页也使用了连续性法则:滚动式的导航,以线性运动的方式让文本漂浮在网站上。由于 LOGO 是垂直展现的,所以用户必须向下滚动才能看到它的全貌。当页面向下滚动时,静态 LOGO 开始与并行的文本块一起浮动。导航引导用户经历不同层次的体验,而不会干扰隐藏在下面的内容。

由于我们的眼睛通常遵循最平滑的路径,设计师可以使用这样的方式来创建引导路径。

在这篇文章中,我们讨论了格式塔原则与网站 UI 的正负空间之间的关系。通过一些真实的案例,让大家清楚地知道如何运用简单有效的方法来改变设计的观感。关键是使用这些原理来设计的时候,可以达到 1 + 1 > 2 的效果。

人类是根据感知来思考的——主要是基于视觉。根据格式塔原理,我们倾向于看到更大的整体性图景,而不是第一眼看到的某一单个元素。

正负空间帮助我们区分、回忆、感知并识别理解。在格式塔原理的引导下,我们能够更好地在网页设计中利用不同元素来创造吸引人的作品。因为空间对于任何设计师来说都是一件复杂的事情,所以最好的方法就是保持格式塔原则的完整性。只有这样才能真正认识到空间在设计中的重要性、有效性,继而使自己成为网页设计领域的佼佼者。

相关引用:

网页设计超现实法 第5篇

在当今日益数字化的时代下,企业越来越追求更加酷炫与迷人的网页设计效果去吸引用户,这让网页的可访问性对于用户而言变得至关重要,促使其成为2024年值得关注的网页设计趋势之一。

网站的可访问性包含多种功能,包括添加替代文本、响应式设计、网站的配色等。关注可访问性的网站,只需要以很小的努力就可对企业的业务产生巨大的影响。作为一名网页设计师,我们在进行网站设计时,必须要充分理解并实施可访问性的网页设计指南与趋势,确保网站具备足够良好的包容性,让所有人都能够从中获得好处。

网页设计超现实法 第6篇

随着chatgpt等聊天机器人的兴起,无疑通过探索实施人工智能来提升网站的潜在优势以促进业务增长将成为2024年的重要网页设计趋势。通过聊天机器人的应用,网站能够更好的服务其用户的个性化需求,并提供更高的访问效率。比如使用AI生成大量通用的产品描述、生成文本,以增强网站的可访问性。根据个人用户的独特偏好定制网站内容、结构和网页设计。让AI担任客服给用户提供更好的购物指导。

网页设计超现实法 第7篇

接近性是指页面中元素之间的接近程度。网页中的不同元素可以组合在一起,不同的接近程度会带来不同的关联属性。除了视觉特征上的接近性之外,这些元素与其他页面元素之间的距离接近度也会自动地在观众的脑海中产生关联感。

从图像到文本、导航栏到网页表单,这种接近性原则在网页设计中适用范围非常广。将类似的内容组合在一起时,它将在元素之间创建关联,为观者提供更好的视觉体验。

以下是 Mashable 网站导航显示的运用接近度的案例:

在上方的截图中,我们可以清楚地看到如何将相同类别的元素放在一起,以显示它们与主菜单的关系。由于颜色和文本大小的选择,使观者的目光自动被吸引到主标题下的子栏目上。

除了导航栏外,基于网格的内容也符合黄金比例的接近性,亚马逊的产品列表就是最好的例子:

这个案例体现的是接近性还是相似性还有待讨论。如你所见,具备视觉接近性的同类产品使用狭窄的留白进行分组和分隔。这种接近性会指示用户在类似的产品列表中,对其目标产品基于购买偏好进行排序。此外,封闭性原则也在类似项目的清单中发挥了作用。

现在,我们来仔细看看 Basecamp 的网页表单设计,它在网页设计中显示了另一种接近性的理想情况:

可以看到上图中的表单是被划分为两个主要部分的:个人信息和 ID 生成两个部分。第一部分被暗示为最重要的字段,第二部分则是一个次要的需求。这两个部分的标题都因颜色和字体大小的不同而产生区别。在这个网页表单中,接近度是一个重要指标,它将网页中呈现的信息按优先级排列。

猜你喜欢