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

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

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

开放式设计-基本概念

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

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

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

下面是10个经典的例子

GrowX

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

NooFlow

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

Open Wear

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

Brightscout

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

Duotix

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

PopularPays

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

Abel

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

Hampshire Light

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

Walking Men

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

Crux

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

英文来源：Design Shack

英文标题：Design Trend: Open Concept Layouts

原作者：Carrie Cousins

翻译：卡米雷特