将流行的开放式布局的设计概念应用于你的网站

如果你经常观看家装节目,可能对一个词印象深刻“开放式布局”,然而这种模式并不局限在家装领域,也可以应用于你的网站上。

“开放式”是一种有趣而实用的视觉模式,可以帮助用户更好地浏览你的网站并对视觉元素进行控制。这里将会为你讲解这个概念,并带来10组小案例。

开放式设计-基本概念

在家装节目中,所谓的开放式布局就是将多个空间聚集在一起,从而获得最大的空间,例如厨房和生活空间可以连接起来形成大型的平面空间。

在网页设计中,这个概念的作用方式也是类似的。开放式布局可以将元素用很好的方式连接起来,最大化利用空白,使用简单的元素来创造和谐感,创造简洁而平衡的视觉流。

不论用色是厚重还是轻薄,也不论页面是常州还是短轴,开放式布局都可以应用。这种方式的最佳应用场景,是在一系列的细节展示后,将用户引导到单一的号召按钮上,这也就是视觉流的作用。视图混合或匹配太多的元素,可能会导致混乱的设计。使用开放式设计概念的关键是,必须让设计流很容易被观众捕捉到,这样他们才能知道如何正确地看。

下面是10个经典的例子

GrowX

43904810 - operation, design - 将流行的开放式布局的设计概念应用于你的网站

使用白色空间、干净的图像和文本,进行巧妙地组合,加上少见的拱形标题。这一切都在同一开放空间之下。使用了分图层技术,让用户可以在元素间发现视觉流。

NooFlow

29915395 - operation, design - 将流行的开放式布局的设计概念应用于你的网站

空白不意味着白色。使用均衡的图像与文字,构筑了优美的空间。简单而明亮的调色板将空间打通,它的流程是简单的,鼓励用户浏览下去。

Open Wear

74972564 - operation, design - 将流行的开放式布局的设计概念应用于你的网站

采用了分屏,但图像具有方向性,引导用户看到内容部分。照片的选择使得开放性进一步增加。试想一下,如果左边的图片换成黑暗色调,整个设计理念和流程就会崩溃。

Brightscout

67072386 - operation, design - 将流行的开放式布局的设计概念应用于你的网站

从Logo到导航,再到文本和视觉元素,整个视觉流在一条对角线上。这里对开放式的使用类似于家装。号召性按钮很大,而且很显眼。

Duotix

24673220 - operation, design - 将流行的开放式布局的设计概念应用于你的网站

夸大地使用空间是“开放”的特征。在整个设计中,这种空间模式都被用来创建内容块之间的视觉差异,并且每个内容块都有自己的号召性用语。滚动式,白色和彩色的背景会交替出现,塑造视觉流。

PopularPays

49797629 - operation, design - 将流行的开放式布局的设计概念应用于你的网站

视差的滚动,简单的动画和大边距,在构建出功能的同时也创造了许多空间。图像和文字配合动画,吸引力十足。它使得多种趋势协同工作,现代感十足,这是通过对内容的细致规划实现的。

Abel

66022832 - operation, design - 将流行的开放式布局的设计概念应用于你的网站

这也是通过分层来创造视觉流的手法,而它将大部分空间规划在页面顶部,下方的项目重量更大。同样的模式在元素上下方的空间中被再次重复,既有开放式,又有单独的空间。

Hampshire Light

71085458 - operation, design - 将流行的开放式布局的设计概念应用于你的网站

不对称的空间和鲜艳的色彩,使得一种开放感和通透感融入进去。夸张的行距和轻细的无衬线字体看似烧钱考虑,但由于间距较小,对开放式布局的整体感有了额外贡献。

Walking Men

95726297 - operation, design - 将流行的开放式布局的设计概念应用于你的网站

通过微妙的动画、柔和的色彩和重组的空间,会让你的脑子里充满了各种可能性。简单的设计结构下,每个元素都有有趣的点击功能。虽然理论上网页是单页的,静止的,但它却给人一种开放的,从空间到空间的感觉。

Crux

89019336 - operation, design - 将流行的开放式布局的设计概念应用于你的网站

最重的元素被放在页面的边缘,而中心的标志和号召性标语是显著的焦点,其他元素因此不会显得混乱或不完整。

 

英文来源:Design Shack

英文标题:Design Trend: Open Concept Layouts

原作者:Carrie Cousins

翻译:卡米雷特

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注