相比一栏式的网页布局，将全屏一分为二的设计常常会让用户觉得新颖有趣。网站首页分为两个垂直的信息块是典型的分屏式设计。在网站中使用分屏式设计，不仅可以同时呈现两项对等的内容，给用户提供充分的选择权，还能够以非常规式的布局引起用户对于特定区域的注意力。另外，分屏式设计还可以与响应式框架结合起来，同时适应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

在分屏式设计中我们不仅仅可以使用图片和文字，还可以选择使用动画效果。动效在网站上的应用越来越广泛，Checkhov is Alive这个网站就是一个栗子，在网站上提供了不同的动画特效的角色，以供用户选择。这不仅可以吸引用户的注意力，还能够在极大程度上鼓励用户与网站进行互动。

看完以上几个栗子，如果你觉得分屏式设计很有趣，也想要在自己的网站上使用，下面这3个注意事项你可得看看。

分屏式设计的3个注意事项：

1.移动友好

分屏式设计确实存在一个明显的缺点，那就是对移动设备不够友好，特别是对于那些特立独行、极具个性特点的网站，将屏幕分成大小不等的5个区块的Bose就是一个栗子。但并不是所有创新性的分屏式设计都不能和响应式很好的结合在一起，实例中的Fillet也是一个典型。因此，在进行分屏式设计时，考虑分屏设计是否适合小屏幕的设备，能否做到响应式显得尤为重要。这也意味着我们在做网站时需要多思考、多留心、掌握更多的编码知识。

2.确认必要性

虽然分屏式设计是网站设计的流行趋势，能让网站看上去更加酷炫，但这并不能成为你使用它的原因。在做分屏式设计之前，我们应该仔细分析自己的网站是否需要这种设计元素。问问自己：将分屏式设计优化成响应式是值得花功夫的吗?用户能够敏锐欣赏的了这种设计风格吗?网站上有足够的空间用于分屏设计吗?将用户的注意力一分为二更适合你的网站吗?如果你对这些的答案是否定的，最好还是不要采用这种设计。

3.充分利用负空间

还记得负空间吗?在《2017年公司logo十大流行设计趋势 》中，我们曾聊过负空间设计，负空间是物体之间的空间，在摄影中常用来表现孤立。而在分屏式设计中，从主视窗的角度来看，网站中的各项元素是偏于垂直的，元素之间是有距离的，这意味着我们可以结合负空间设计与垂直分栏方式，以更丰富的方式展现网站的内容。赶紧充分发挥你的创造力吧!

分屏式设计十分有趣，而且功能很强大，不同运用方式可以让分屏式设计发挥不同的作用。不过在紧跟网站设计潮流的同时，我们也不能盲目追随，适合自己的才是最好的。而且，内容为王，任何形式的应用都要保证内容的可读性、移动性，在此基础上在网站上发挥创意才是可取的。听了这么多，还是快点行动吗?来起飞页自助建站平台（）做一个响应式网站，采用适合的设计趋势，做出令人惊艳的效果吧!