除了家居领域,【开放式布局】还要在2018年霸屏网页设计?

发布日期:2018-01-24
浏览次数:172
  
undefined
 
如果你看过《交换空间》、《梦想改造家》这样的家装类节目,你会发现节目里面的设计师经常提到"开放式布局"。其实,开放式布局这个概念不仅在家装领域盛行,它还正凭借其有趣的形式和强大的功能逐渐在网页设计领域占有一席之地。为什么越来越多的设计师选择在网页中使用开放式设计?这有两个原因,其一,它可以让网页显得更整洁,在视觉呈现上更具美感。其二,它能有效组织各种信息元素,让它们更容易为用户所理解。那么,在网页中究竟应该如何使用开放式布局?快来和小飞一起看看吧!
 
 
 

什么是开放式布局?

在家居设计中,开放式布局主要是指多个空间的互通有无。简单来说,它是指不同的区域比如厨房和客厅之间没有墙或玻璃门的硬质分隔,整个空间是完全统一的,这种设计会让房间在视觉上显得更加干净、宽敞。网页设计中的开放式布局也差不多是这个道理,通过使用留白和负空间有效组织各项视觉内容,打破不同区块元素之间的隔阂和界限,实现整个设计的和谐统一。不过,这种类型的布局在设计时往往并不轻松。由于开放式布局中没有明显的区域分割,各种信息很容易被杂乱的堆叠在一起。另外,如何建立有效的视觉信息流,帮助引导用户进行浏览也是一个难题。
 
 
 

开放式布局设计的10个实例:

为了让大家对开放式布局的应用有更加直观的认识,小飞特地整理了10个实例:
 
 

GrowX

GrowX在开放空间中很好地结合了留白、简单图片、文本以及一个有趣的元素(拱形标题)。这里拱形标题和图片的叠加是开放式布局中一种常见的设计技巧,因为在开放式布局中用户很有可能会迷失在浑然一体的设计之中,而叠层或分层效果的使用就能有效避免这一点,它们可以将用户的视线从一个元素有效转移到另一个元素上,让用户沿着我们既定的轨迹前进。
 
undefined
 
 

NooFlow

一提到开放式布局,大家可能会第一时间联想到大片的白色空间。但留白其实并不一定非要是白色的,其他颜色的留白有时可以带来非同寻常的视觉效果,NooFlow就是一个典型。这个网站混合了多种元素并使用了鲜亮的配色,但看上去并不杂乱,反而十分简洁(红色留白的作用可想而知)。清晰的信息框架(从标题、描述到CTA按钮)也能有效鼓舞用户在网站进行探索。
 
undefined
 
 

Open Wear

乍一看,Open War是分屏式设计的典型。但仔细观察一下,你会发现尽管这个网站的布局是一分为二的,但左右两个区域间却没有棱角分明的线条作切割,取而代之的是充分的留白,这正是开放式设计的一种体现。在Open War中,图片素材的安排是实现开放式网站布局的关键:左侧大图色调柔和,让网站轮廓看上去更通透(假设将这张图片换成暗黑系的,网站格调和感觉都会大不相同);右侧图片是有斜度的,且和文本信息搭配使用,信息层次较多,可以有效吸引用户进行浏览。
 
undefined
 
 

Brightscout

Brightscout在网站使用了有趣的对角线式设计,从Logo、导航菜单、到文本元素,再到图片,各种元素错落有致地分布在页面不同的位置。当然,这个顺序也可以反过来,主要取决于你的视线首先落在哪个地方。除了别致的布局,网页中线条、缩放式的动效使用也为用户下一步进行什么样的操作指明了方向,CTA按钮样式的设计同样十分显眼。整个设计既考虑了网页美感,也兼顾了实用性。
 
undefined
 
 

Duotix

当谈到开放式布局时,充分留白的使用是不可避免的。因为它可以用来规划不同元素的内容范畴,告诉用户某个元素从哪里开始,到哪里结束。Duotix就在设计中充分使用了留白,将它当做不同内容区块之间的视觉界限。而当你滚动页面时,白色和彩色的背景还会交替出现,吸引你进行下一步操作。
 
undefined
 
 

PopularPays

通过视差滚动、简单动效和充分留白,PopularPays将网站中的图片素材按不同主题划分为不同区块。再加上醒目的标题设计,整个网站吸引力十足,特别是和动效结合起来使用时。这还能让用户不自觉的向下进行滚动浏览。PopularPays最大的一个特点还在于它证明了多种流行趋势是可以结合起来的,它们可以创造出现代感十足、风格鲜明的设计。当然,要想多种不同流行趋势的"混搭"呈现良好的效果,内容上的删减和"瘦身"也是必不可少的。
 
undefined
 
 

Abel

Abel也使用了叠层效果来引导用户进行元素浏览。在网站主页上,当你滚动鼠标时,左右两侧的图片会逐渐叠加到中间图片上,这种动效可以有效转移用户视线。网站的其他区块也沿用了类似的布局。相比其他商城网站来说,Abel并没有在产品页面放置很多图片或描述,反而给留白留足了空间,但它同样是十分有效的。
 
undefined
 
 

Hampshire Light

Hampshire Light的精彩之处在于它使用开放式的网页布局来展示开放式的家居产品。非对称式的布局、明亮的配色,以及网站上的其他元素(比如黄色的阴影、图片上的透明字体、Logo上的"h")都给人以轻松和愉悦之感。除此以外,网站还使用了较大的间距,原本无衬线字体的可见性比较差,但文本长度和间距的良好控制不仅弥补了这一缺陷,也更加符合开放式设计的理念。
 
undefined
 
 

Walking Men

微妙的动画、柔和的配色、充分的留白,Walking Men呈现出了一种独特的简约美感。当你点击向下箭头,可以进入网站详细页面,网站整体结构也比较简单,每个页面都有自己特定的主题。开放式布局能够轻松容纳多种元素的特质在这个网站中体现得淋漓尽致。
 
undefined
 
 

Crux

Crux可以说是开放式设计的典型。网站中首页上各种元素围绕着中心平铺展开,页面中心的Logo和CTA按钮是十分明显的视觉聚焦点。当你点击按钮时,网站导航会一直置于页面底部,如同视频剪辑工具中的进度条一样为用户说明所处的位置。想要让网站有趣随性到这个程度,恐怕只有开放式布局才能做得到。
 
undefined
 
 
开放式布局的概念十分广泛,没准你在网站中已或多或少使用过这种设计趋势了。你对这种趋势有什么看法?快来起飞页自助建站平台搭建一个属于自己的响应式网站吧!

登录后即可发表评论,立即登录.