返回  

设计趋势:多层级设计

2022/7/4 9:10:58 来源:深圳网站建设公司Clh

您是否已经注意到网站设计中的这种趋势:多层级设计?我一直感觉最近总是在很多地方可以看到这种趋势的使用,不过说实话,这是一个很容易两极分化的趋势!

这是一种设计技术,从视觉效果和可用性方面往往要么让人印象深刻,要么就是一场视觉灾难。很明显,同其他趋势一样,它也有一个中间地带,而很多时候我们可能往往走得太远了

今天,我们将看看一些最有效地使用它的方法,以及更多关于这种设计趋势的内容。


识别设计趋势(Identifying the Design Trend)

Identifying the Design Trend

Identifying the Design Trend

以这种趋势为特色的网站设计往往包括多个层次,这些层次结合在一起共同形成一个有趣的视觉并“诉说故事”。图层通常是交互式的,包括动画或滚动效果,但并非总是如此(有时这些设计是静态的,具有分层外观)。

三个层次是大多数使用这种趋势的标准,一般包括:

· 背景:通常是图像、纹理或静态图层

· 中间层:通常是某种类型的图像或交互元素

· 前景:通常包括文案或图像(中间层和前景层有时一起(或相反)工作以创建完整的设计)


主要特征(Key Characteristics)

Key Characteristics

同它的名称一样,这些设计往往有很多活动组件。滚动动作通常有助于使图层更加栩栩如生,以便你可以看到每个图层的差异以及它们如何组合在一起工作。

滚动交互性是这些项目的重要组成部分,无论是帮助元素协同工作还是让用户在设计中找到更多层次的内容。并非所有这些项目都明显地从主页上体现了这种设计趋势,有时它位于滚动下方,甚至在网站的更深处。

让它运作良好的诀窍是将感觉和谐的设计元素结合在一起。这包括从颜色到大小到形状和比例的所有内容。如果层看起来就不和谐并不能一起发挥作用,它可能会产生可用性问题,从而使设计失效。

关于这些项目,你会注意到的另一件事是,它们中的许多似乎都具有带有卡片样式元素的图层。这种设计技术已经流行了一段时间,并且继续与这种趋势保持一致。


使用此网页设计趋势的提示(Tips for Using this Web Design Trend)

Tips for Using this Web Design Trend

使用这种风格和趋势的每个网站设计的整体可能会有很大的不同,因为它与颜色、排版或图像等元素无关。

但是这些元素中的每一个都会产生影响。你需要考虑如何将它们放在一起使用,来创建一个引人入胜并充分利用每一层的视觉故事。

使用这种设计趋势时,最重要的考虑因素是考虑图层之间的交互方式。使用滚动动作或其他动作,元素有什么作用?理想情况下,你希望图层以某种感觉和看起来有目的的方式进行交互。

在上面的 Lost Mechanics Interactive Studio 示例中,有一个黑色背景层、一个文本层、一个与文本层合并的图像层,以及位于所有内容之上的第四个层,以完成这个时髦的视频效果。

各个层级的元素包括文本、图像甚至卡片元素等,它们相互堆叠当彼此和谐。虽然设计看起来比较复杂,但它可以无缝运行,并且一切都易于使用和理解。内容是有组织的,这是如何有效使用多个图层的比较好的案例。


需要注意的事项(Things to Be Aware Of)

使用这种设计趋势需要小心和有效的规划。并且使用一种有效的前端动画技术并不一定容易。

需要注意的两个关键事项包括:

· 图层如何交互和重叠

· 响应性

这些要素密切相关。交互需要以这样一种方式设计,即使有层,网站上的所有内容也都需要易于理解和阅读。这是这种设计趋势的最大挑战,也是许多使用它的项目都存在的败笔。尤其是可读性,成为许多此类项目的关注点。

响应性始终是网页设计的考虑因素,但是一旦你以一种尺寸正确地设置图层,它们在其他方面的工作方式可能会有所不同。对于这么多移动的组件,响应性可能会非常棘手。


3个我们喜欢的例子(3 Examples We Love)

有一些网站设计很好的在他们的作品中使用了这种趋势,为如何将这些项目组合在一起提供了灵感。


Shipwreck Survey

3 Examples We Love

Shipwreck Survey 优雅地使用图层,具有一致的配色方案和背景图像以及与前景文案之间的照片插图,增加了额外的层次感受。设计师继续在整个滚动中使用带有图像元素的图层,以帮助将完整的视觉感觉融合在一起。小图像的另一个作用是,增加你对这个网站的好奇心,这些小图像是主要的视觉吸引点,分层效果有助于将更多的图像融入设计中。


Sirup

3 Examples We Love

Sirup 使用大量的动画、时髦的字体、图像,甚至是视频等元素来共同组合为一个引人入胜且有趣的分层包。滚动效果也处理得很好,为主图像增加了三维感觉。这里图层元素使用得别有用心的关键之一是透明度的暗示,将它们结合在一起。


Elegant Seagulls

3 Examples We Love

Elegant Seagulls 以一种在不那么显眼的方式使用多个层次,给人的感觉上像是在同用户玩“躲猫猫”。背景是鸟类的视频,中间层是纯白色飞溅元素,稍后还有一个交互式顶部,随鼠标移动的圆形号召性用语按钮。视频背景统一且有效地用于设计的多个位置(还请确保单击菜单以获得带有卡片的漂亮小设计效果)。


结论

虽然这种设计趋势并不容易做的出彩,但如果做得好,它可以具有高度的视觉和交互性。为了充分利用它,当你也有比较丰富的内容层时,请考虑这种设计技术。

将内容与设计美学相互结合是创建一个优秀的网站设计以及提高用户粘性的最佳方式。









----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务