相比一栏式的网页布局，将全屏一分为二的设计常常会让用户觉得新颖有趣。网站首页分为两个垂直的信息块是典型的分屏式设计。在网站中使用分屏式设计，不仅可以同时呈现两项对等的内容，给用户提供充分的选择权，还能够以非常规式的布局引起用户对于特定区域的注意力。另外，分屏式设计还可以与响应式框架结合起来，同时适应PC端和移动端。所以说，如果我们可以在网站中恰当的使用这种设计趋势，能够给用户展现奇妙的视觉效果，带来良好的浏览体验。

　　但是，如果我们的网站并不适合这种类型设计，或是网站的内容安排不够对等、没有逻辑性，分屏式设计可能是一个冒险的决定，因为它会对网站产生负面的影响。怎样才能做好分屏式设计?小飞今天就来分享一些分屏式设计的好栗子，顺便探讨一下分屏式设计的优点，使用情景以及在使用过程中的注意事项。快来一起看看吧!

　　为什么使用分屏式设计?

　　分屏式设计其实是卡片式设计概念的一种延伸，一般情况下分屏式设计只有两大信息块(左右两栏也可以往下细分)，可以用来呈现相同类型的元素，也能够展示不同属性的媒体内容，比如图片和文本。开篇小飞已经介绍了不少分屏式设计的优点，比如新鲜感，响应式，良好的视觉效果等。除此以外，分屏设计还能与极简主义网站组成"最佳拍档"，这是因为极简主义的负空间概念可以与垂直分割方式很好的结合在一起，能突出网站的亮点，给用户留下深刻印象。

　　在网站中，分屏式设计尤其适合有两个可选项的着陆页，比如登录和注册页面、付费订阅和免费订阅界面、颜色交替的两种产品。事实上，分屏式设计的使用情景绝不仅限于这几种，在不同的网站上它有着不同的应用，因此它的优势也各有差异，主要还是取决于站长想要实现的目的。接下来就来看看下面这些分屏式设计的实例吧，看看这些网站是怎么成功发挥分屏式设计的最大效用。

　　分屏式设计的实例：

　　Cam Strobel

　　并不是所有网站都必须具备水平的导航菜单。Cam Strobel就是一个很好的栗子，将屏幕分成两个垂直的信息栏，左边一栏放置图片、slogan和行为引导按钮，右边一栏使用迷你型的设计包含各种导航菜单。这样的网站不仅足够新颖，而且网站内容都一目了然，用户不需要进行任何页面滚动就可以轻松找到想要的信息。是不是很方便?

　　Studio Meta

　　由于扁平化设计和Material design(Google推出的全新设计语言，旨在为各种设备提供更一致、更广泛的外观和感觉)在网站设计领域的风行，色彩和排版在当前设计中占据十分重要的位置。Studio Meta就很好的展现了这一点，有质感的图片满足用户视觉需求，有趣的排版让文本可读性更强，两者的结合带来了值得一看的设计。

　　虽然两栏呈现截然不同的两种元素(图片和文本)，这两个信息块之间还是有着一定联系的。在Studio Meta这个网站中，两个信息块之间的关联是由色彩和文本一起实现的，共享"薄荷绿色"以及使用顶部的文本，让两个屏产生视觉流，保证网站整体的协调一致，让用户感到赏心悦目。通常，我们在做分屏式设计师可以只使用一个元素(色彩或文本)作为两个区块的连接点，如果色彩刚好是品牌的颜色，用来创造视觉联系还有助于打响品牌的知名度。

　　Bose

　　分屏设计并不一定就是将屏幕五五分成两栏，Bose将这种趋势做到了极致。在Bose这个网站上，它使用不同的颜色展示不同产品的个性化特征，再加上独特的对角线，实在太惊艳。不过这个网站有一个致命的缺点，那就是没有考虑到响应式的设计，这种设计在PC端很适合，但是如果在小屏幕设备上进行展示时，弊端就暴露出来了。不过除了这点以外，Bose在分屏式设计领域绝对独树一帜。

　　Fillet

　　Fillet也是不好好做分屏式设计的一个代表。与屏幕分为垂直的两栏不同，Fillet这个网站将全屏等分成3个信息区块，每个区块展现不同的艺术元素，简单大方。不过与Bose网站相反的是，这3个垂直的信息卡片却很适合移动设备，因为它在小屏幕上可以以上下堆叠的形式呈现出来。

　　Chekhov is Alive