网页美工设计

网页设计领域中的开放式布局

编辑：时间：2018-01-29 14:28:34

　　开放式布局其实是一种有趣且功能强大的视觉设计模式，可以帮助用户更好地浏览网页，还能合理的规避杂乱的信息。通过下面的10个网页设计范例，来了解一下如何在网页设计的时候使用开放式布局吧!

　　关于“开放式布局”

　　在室内装修当中，开放式布局通常指的是让功能不同的空间彼此重叠在一起，达到空间最大化的利用。比如将厨房和生活空间重叠在一起，彼此打通共享。

　　“视觉流对于用户而言应该是明显而清晰的，这样他们就能清晰的知道他们该做什么。”

　　在网页设计当中，开放式布局的概念是类似的。开放式布局下不同的元素以一种清晰而通透的方式，构成极佳的视觉流程。这样的布局将最大限度地利用留白，使得元素和元素之间更加协调、平衡，创造出简单移动的视觉信息流。

　　这个过程中所使用的色彩可以大胆，也可以简约，页面可长可短。

　　开放式布局更加适合那些有着详细计划、流程，并且最终以一个清晰的行为召唤收尾的页面。试图混合和匹配太多的元素和区块，最终可能会让整个页面陷入混乱。使用开放式布局的关键点在于，打破固有的概念，使用视觉信息流将用户导向一个显而易见并且能够轻松处理的交互。

　　GrowX

　　GrowX 这个网站将网站常见的区块的概念打破了，让白色的背景、干净的图片和一个拱形的标题混合到一个共享的空间当中。当你向下滚动的时候，页面中的图片会自然地左右流动，这种效果可以很好地促进用户往下滚动浏览，也能强化视觉信息流。

　　开放式布局可能存在的问题在于，用户可能会迷失在页面当中。不过想要解决这个问题也不难，只需要合理地分层就行了。

　　NooFlow

　　值得注意的是，留白并不一定是白色的，比如Nooflow 这个网站，留白和背景就是红色的，不过这同样创造了令人惊叹的视觉效果。

　　虽然色彩饱和度很高，单是整个配色方案并不复杂。开放式的布局营造出简约高效的视觉流程，鼓励用户滚动浏览。

　　Open Wear

　　Open Wear 这个网站同样采用了分屏式的布局，不过两侧内容的轻重属性均不相同，这样的不对称使得用户会更自然地浏览右侧的内容页。

　　由于图片素材的大量运用，整个设计显得更加开放。虽然页面中元素并不少，但是整个布局设计显得足够通透开放。

　　Brightscout

　　Brightscout 这个网站的首屏采用了微妙有趣的对角线式的布局。图片和文字说明错落地分布在网站当中，这种错落而整齐的布局给人的感觉也颇为开放，滚动的过程中，缩放式的动效会让人忍不住不停滚动浏览下去。而页面最终也确实导向到了一个CTA按钮，功能显而易见。

推荐资讯

郑州平面设计培训：清新教育坚持学会为止

相关资讯

有问题需要老师在线解答？立即提问马上回复

更多 热门课程排行榜

更多 报名答疑招生问答

全部课程分类