分享一篇Nick babich的2月25日的新文，原文点击此处，翻译不当之处请指出。

---

分屏设计

越来越多的网站使用的设计模式：将一个屏幕分成两部分，包括并列放置两个垂直面板。分割屏幕设计遵循了一些简单规则：

一个屏幕，两部分信息。

每个部分都以单独包含的元素为特征，如照片、文本域或插图。

当你有两件事要跟进，分屏尤其好用。这种方法可以让你突出两者的区别，并使用户快速从他们之间做出选择。

分屏不仅仅是一个简单的图解趋势，而是一个原始的方法向用户提供了两种不同的路径来引导用户进入您的网站。仔细一看，你会发现以下优点：

• 吸引用户对特殊部分的关注。
• 显示了强烈的对比。
• 提供了一种非常规的格式。

这也是一个很好的选择响应框架。这种布局特别适合于大屏幕或平板电脑上的导航，也可以用于移动设备：当他变成较小的屏幕，面板可以堆叠。

分屏的好处在于，几乎所有的设计组合都会成为可能。在这篇文章中，你会找到如何充分利用这种设计趋势的方法。

分屏设计内容的最佳选择

当你使用分屏布局作为你的设计方案，你可以给予这两个元素同等的重要性，同时，允许用户在他们之间迅速做出选择。这意味着你可以轻松地传达出其双重重要性。更重要的是能让用户明白这两个成对的元素之间的视觉连接。所以你应该将其视为一对“阴”“阳”概念来运用。

成对的充满活力的颜色以及醒目的排版

得益于平面和材质设计的增强，颜色和字体是现在的大趋势。充满活力的色彩视觉刺激和醒目的排版提升了文本内容。结合这两点，你最终可以落实于有趣的视觉设计。

明亮的颜色和有趣的排版对可以增加趣味性。图片引用来自Baesman 一个强大的彩色图像和内容并排的组合。

吸引用户注意到动作按钮

分屏是设计一个视觉主题时是很好的选择，可以创建一个更大的焦点来引发更多用户行为。周围的反衬空间（negative space）与醒目的垂直分割相结合，增强了对重点或关键元素的最大的注意力。

设计有助于吸引用户对于左屏的注意力。

将屏幕视为卡片

分屏设计是来源于流行的卡片式设计的一种模式。遵循这一趋势的网站基于卡片式设计的概念：屏幕基本上只是超大的卡片，每一屏就是一个容器，包含一组信息和一个用户行为。

在Si Le solei的设计中，左边的面板就是一张“卡片”在右面板包含一对“卡片”。

堆叠模式可能会有所不同。例如，在Stikwood的设计中，下图例中就是以划分为更小部分为特征的，这样给更多用户提供了进入的“点”。

可以考虑使用马赛克或砖块这样的堆叠元素模式。

提醒：（虽然堆叠可以用，但还是需要）保持你的屏幕简单，因为复杂的分屏会使界面UI看起来凌乱。

在“屏幕”之间创建视觉流

虽然分屏设计模式可以给你留下明显不同的元素，但内容之间必须有连接。建立连接的一种可能的方法是通过颜色。复制一个独特的颜色，建立视觉流从一个“屏”到另一个。这被很好地运用于一个品牌的颜色或色调通过一系列的对比来进行强调：

bump复制了品牌的一个颜色，建立一个视觉流从产品左到预购右屏。 Marka复制了一个高对比度的颜色，建立了从一个屏幕到另一个屏幕的视觉流程。

另一种实现技术是在屏幕上分层单个元素（例如：文本样式的复制）。这个元素可以提升额外的凝聚力：

分屏元素同样可以重叠。图像引用来自Sewage Free Seas

还有，你可以使用一个彩色的叠加：

在Nathan Riley网站中，右屏被设计为左屏的延续。

使用动画，鼓励用户采取行动

优良的动画和交互效果会鼓励用户点击。看下图中“Chekhow is Alive”网站的设计用。它会使你点击，找到你的角色。

图像引用来自Google

总结

分屏设计是一种有趣的、功能性强的和响应的方式来创建的引人入胜的设计。然而，当涉及到内容，拆分布局可能是艰难的。如果你正在考虑为你的网站分屏，我建议你问自己这几个问题：

1. 它适合你的内容吗？会有足够的反衬空间（negative space）使其布局吗？
2. 你的用户会欣赏这一布局还是会混淆他们呢（你分开的内容是不是清晰的）？
3. 你的划分方式把用户的注意力分成一半可以吗？成功了吗？

请记住，内容为王和分屏应该一种将你的信息传递给人们的简单的方式（而不是让用户更难分别的）。

以上，感谢阅读！与君共勉！