返回  

设计趋势:开放式概念布局

2018/1/18 10:02:43 来源:深圳网站建设公司Clh

如果你是一个“家装达人”,并比较关注相关的电视节目的话,你可能会经常听到“开放式概念布局”这一概念,不过,你知道你也可以在网站设计中使用开放式的概念布局吗?这种设计趋势不仅仅只是家装理念。


开放式概念是一种有趣的、功能直观的模式,可以帮助用户浏览网站,同时控制过多的干扰。下面是10个案例,希望对你可以有所启发!


什么是开放式概念布局?

在家居设计中,开放的概念设计指的是一种将多个空间整合在一起,形成一个流量最大化空间的设计概念,如将厨房和生活区域融合在一个空间的一个大的平面图。

在网页设计中,这个概念非常相似。一个开放的概念布局创造了各种元素之间的流动。该设计理念将最大限度地利用白色空间和使用简单的元素来创建大量和谐,平衡和简单的视觉流程。

颜色的使用可以是大胆或偏向柔和的,页面的布局可以是长页面或者短页面。

这些布局通常对设计中较为详细计划和流程最为有效,因为设计强调的是在同一个空间中的统一,所以试图混合和匹配太多的元素会导致设计上的混乱。当使用开放概念设计趋势时要记住的关键是,视觉流必须对用户来说是显而易见的,这样他们才知道如何处理设计以及如何在各个页面中切换。


1.GrowX

growx-webdesign

GrowX在其网站的设计中使用了一个巧妙的结合,通过将白色空间、干净的图像和文本混合放置在同一个开放的空间,拱形的标题成为了页面一个有趣的特点。

这里所使用的文本和图像的分层效果是一种常见的开放概念设计技巧。使用分层可以帮助用户从一个元素过渡到下一个元素,并保持视觉流移动。

开放式概念设计的细节之处在于,用户不会在空间中迷失方向,通过这些聪明的“伎俩”和分层元素,用户知道在这个网站上该怎么来查看。


2.NooFlow

nooflow-webdesign

最放的观念可能让你马上想到的回事白色空间,NooFlow证明了使用不一样的颜色同样可以达到惊人的效果。

该设计将各个元素、文字和图像平衡的混合在一个几乎分裂的屏幕中。但是通过明亮,简单的调色板又将它们关联和组合在一起。通过消除其他不必要的干扰色,开放式设计给人一种简单、舒服的感觉,这同时鼓励用户在设计中继续移动。


3.Open Wear

openwear-webdesign

Open Wear使用了一个完整的开放式设计概念,通过定向图像将用户推向内容的方向。

由于对照片的选择,是的这个设计看起来更加开放了。这里的内容于白色背景中的图像达到了一种平衡,总的来说,即使页面中有很多元素和视觉入口点,但是在整体上给人的感觉却很清新。

同一个设计发挥你的想象,若果左边的照片大多是黑色的呢?这将改变整个设计理念和流程。


4.Brightscout

brightscout-webdesign

brightscout创建了一个从logo到导航到文本元素再到图像的完整的形成对角的视觉流。

这里的开放式概念在视觉上以及实际的作用上都非常类似于家装设计——有明确的切入点与假想的线告诉用户下一步应该去哪里。

而行动呼吁的口号与一个大且鲜艳的按钮在这个页面上变得显而易见。


5.Duotix

duotix-webdesign

对于开放式概念,夸张地使用空间是一个常见的技巧。空间可以给用户传递一个信息:这是摸个事件(或内容)的结束,以及另一事件(或内容)的开始。

Duotix使用这个模式在同一个空间中创建内容块与视觉设计之间的区别,使得每个元素或内容都用自己的行动。此外,在滚动页面的时候,白色和彩色背景交替,以帮助保持用户移动。


6.PopularPays

popular-pays-webdesign

视差滚动,简单的动画和极端的边缘空间,PopularPays在其网站设计中通过创建空间而建立独特的视觉体验。

图像和文本的组合方式已经足够吸引人了,特别是当与动画效果搭配时。

这种设计的好处在于它显示通过恰到好处的组合多种趋势,它们依然可以协同工作,并创造出一种不具压倒性的而是具有明显现代感的东西。使用不同的趋势来设计一个设计的内容是很合适的,一般来说简单的内容计划最有效。


7.Abel

abel-webdesign

像其他例子一样,Abel使用元素来保持眼睛从一个元素移动到另一个元素上。这个开放式概念的优点在于,大部分空间位于页面顶部,而底部则是在感觉上较重的的内容。

通过滚动,空间上方和下方的元素保持一致的视觉主题,以通过开放式的概念设计创建单独的空间。

这个例子表明,并非所有涉及电子商务的网站设计都必须有堆满内容以及给人一种混乱的感觉才能有效。


8.Hampshire Light

hampshire-webdesign

Hampshire Light在其网页设计中的优秀之处在于它采用了开放式的概念,通过网络布局为家庭产品设计提供了舒适的视觉体验。

使得这种设计工作的原理是利用不对称的空间和明亮的色彩,这个页面在整体给人一种开放和舒适的感觉,从黄色的主色调到透明的文字图像再到开放的“H标志。

这个设计的另一个关键细节是夸张的行距。无衬线字体可能是一个危险的选择,但由于文字的间距足够大,它有助于在设计的整体感觉上保持一致。


9.Walking Men

walking-men-webdesign

通过微妙的动画、柔和的色彩和充足的空间,Walking Men可能会让你想象到天花板的无数可能性。简单的设计结构包括通过在每页中只给定一个内容元素和一个有趣的点击滚动功能。

视觉上是开放的,平衡的,用户有一种从空间到空间的感觉,即使他们静止在同一个页面中。


10.Crux

crux-webdesign

Crux可能体现了一个概念——将最重的设计元素推向外部边缘。

位于视觉中点的logo和动作的调用提供了一个明显的焦点,这样使得其他元素不会显得凌乱或不合适。向下的页面导航把这一切作为一个路线图组合在一起,这对于某些用户来说可能会有点困难,因为几乎没有明显的入口或出口点。


总结

很有可能你已经把一些开放的概念融入到你的设计中了。这是你喜欢的趋势吗?

我们把开放式概念设计的趋势视为在将来很长一段时间都不会减弱或消失的趋势,因为它植根于设计理论。使用空间的布局永远不会过时(尽管我们称之为“随时间变化”)。




----图文来自:design shack 

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