分屏设计：不断发展的趋势

具有分屏风格的网站设计是一种正在流行并不断发展的趋势。 分屏设计产生的初衷可能有很多原因，包括为了适应移动端的兼容性和友好的用户体验。 此外，使用这种风格的网站，许多设计看起来都非常棒！

趋势的不断更新和变化表明，有许多不同的方法可以创建一个用户喜欢的有效分屏设计。 你或许是时候思考，如何使用一个用户会喜欢或者想要参与的分屏设计，来不断更新和调整你的网站设计！

分屏设计的好处



分屏设计之所以越来越受欢迎的一个很大的因素是——它们非常有效。 当用户需要立即看到两个内容时，它们可以很好的发挥它们的效果。 同样的想法适用于需要用户做出选择以继续进行的内容。

设计师正在使用分屏设计，因为它们很有效。 使用分屏设计的主要原因是：

· 鼓励用户做出选择 - 选择这个或那个；

· 突出显示垂直图像；

· 在桌面和移动设备上创建共同体验；

· 建立独特的视觉流程（利于行动规划）；

· 建立与其他设计技术和趋势一致的设计模式；

· 创建一个从全屏主页中脱颖而出的视觉效果，或利于区分网站上的内容类型。

分屏设计的好处在于它们能够很好地处理响应式类型的网站设计。 你可以在移动设备屏幕上获得同桌面展示的一样的堆叠内容。 无论设备如何，用户都不会因为使用的设备类型而错过任何内容。



“经典”分屏设计



将分屏设计称为“经典”可能有点太早了，但考虑到网站设计趋势的更新速度，这就显得并不为时过早了。

这就是为什么我们喜欢这种风格的原因：

· 分屏设计是响应式框架的理想选择。 在较大的屏幕上，设计是分开的，当涉及较小的屏幕时，面板可以堆叠。

· 在动画和效果方面很容易，可以根据提供的内容鼓励用户完成点击行动。

· 两个对称的面板可以轻松地为整个网站设计创建模块化轮廓，并组织块内的内容。



不断发展的分屏


虽然分屏设计看起来相当简单，而且足够对称，但这并不代表这种设计风格的全部。 设计人员仍然需要使用一些权重分割的技巧，使得设计在细节上也足够吸引用户，并可以在整体中发挥效果。

比如，使用一些带有更多棱角或边线的图形、基于网格的分割（想想四分之三和四分之一的屏幕）或者分割具有不相等内容权重的版块。 还有一个就是在处理极简风格设计的分屏上，也需要很好的把控。

分屏设计的目的往往很重要，因为它旨在让用户通过适当的内容进行接下来的流程，内容需要帮助他们到达目的地。 现在，这种选择正在偏向于更加精简（甚至有一些分屏设计使用视觉模式而不设置这个或那个的选择，例如上面的例子）。



具有多个点击区域的分屏



分屏设计趋势的最大变化之一是在设计中存在多个点击区域。 最初分屏的每个屏幕有两个CTA，这些分割通常包含其他信息。

上面的示例显示了采用具有视觉冲击力的大图和消息传递与链接配对的分屏。 它在桌面上看起来很棒——用大图像吸引你，并在手机上叠加一个漂亮的，带来更愉快的购物体验。



不那么明显的分屏


并非所有分屏设计都非常明显（这点其实跟用户体验的细节设置是一样——不起眼的惊喜）。

在极简风格的设计概要中，可以使用网格建立分屏，但没有颜色或图像，“屏幕”看起来就像是一个整体。 上面的Owl Studios做得很好。在屏幕的上方，它看起来像单屏幕设计，在滚动下方和移动设备上，分割变得更加明显。

这种分屏设计非常漂亮，可在所有设备上使用。 这正是你应该尝试通过此网页设计趋势实现的目标。



一些注意事项


使用垂直分屏可以创建一些令人惊叹的用户体验，但同时你需要注意水平分割。 这些可能会变得尴尬，并迅速是设计的整体变得有点乱！

上面的例子实际上是一个不错的网站，并使用分屏原则，但前两个“屏幕”不足。 几乎没有太多的空白空间，也没有足够的信息来鼓励滚动，而且缺乏移动用户体验。 这里的设计可以更好地使用垂直分屏，保持白色空间和CTA与旁边的视频在相应的位置上各自发挥作用。

水平分屏通常会使你的图像具有不高的宽图像区域。 这是一种难以在移动屏幕上工作的宽高比。 虽然你可以使用一些计划和不同的技巧来进行调整，但它实际上带来的是两种不同的用户体验。

大多数用户希望所有设备都可以使用相同的网站设计。 如果你计划创建不同的体验，即使只是图像或文本，这是项目的最佳设计选择。



5个分屏设计参考






总结

你能联想到在你的项目中使用分屏设计吗？ 如果内容类型合适的话，这可能是一种非常有效的设计技术。 并且有很多不同的方法可以使它发挥作用。 最后，祝你好运！