如何在UI中玩转分屏布局?

分屏 (Split Screen)，其实并不是一种新技术。事实上，默片时代的一些早期作品就已经开始采用，以此在一个屏幕内呈现两种动作或信息内容。在网页或UI设计中，分屏布局现在也变得越来越突出。

今天，我们就来看看，有哪些玩转分屏布局的优秀示例。

Letter

官网：https://letter.craftedbygc.com/

首页截图

高端金融服务值得高端的网页UI设计，而这也正是银行与金融服务平台Letter所想构建的网页效果。Letter以一个醒目的分屏布局开头。一侧为白色背景，其中包含了文本信息；另一侧为深色背景，主要呈现了一个包含在锐利虹彩棱镜中的信用卡图像。

整个网页所传达的不是奢华而是阶级与财富，同时带有一丝科技美学。通过滑动，棱镜被分成了十几个小块。而通过释放卡片所启动的动画则将右侧部分变为全宽。设计师巧妙地将这部分设计变成了一个用户触发动画，以此产生了更佳的效果。

用户触发动画

Geoff Levy

官网：https://www.geofflevy.com/

首页截图

分屏布局对于电影和视频相关的网站来说是一个特别好的选择，因为它提供了身临其境的动态体验，并且可以给人留下深刻的印象。其中一个很好的示例就是Geoff Levy的作品集网站。他是一位屡获殊荣的古巴裔美国电影和视频导演。Geoff Levy将网站以完美的全屏分屏打开。其中一侧为静态摄影作品，而另一侧则是视频动画及其电影项目的链接。

这种划分并不是固定不变的，它的比例会根据光标的移动而产生变化。如果我们向左倾斜，那么摄影作品的部分将会扩大，以此占用更多的空间并显示相关的作品链接。同样右侧也是如此。而对于那些喜欢更传统的用户体验的人群来说，只需通过访问放置在分割线顶部的简单图表，这类页面也可以实现在网格布局中的使用。

左侧为静态摄影作品；右侧为视频电影

光标向左倾斜，则摄影作品部分所占用空间将扩大

Maxim Aksenov

官网：https://maximaksenov.com/

首页截图

Maxim Aksenov是来自俄罗斯的多学科设计师和艺术总监，他主要从事UX/UI、交互和视觉识别相关的设计工作。Maxim Aksenov的作品集网站展示了其最重要的项目，而该网站本身也是一件精美的网页设计。

该网站以"About"部分打开，然后进入"Work"部分。从逻辑层面上讲，它占据了大部分页面。整个页面被一条清晰且细的分割线整齐地划分开来，以此完成分屏布局。屏幕的左边是Aksenov的一张模糊的个人照片，而右边则是他的简单介绍。

随后，我们可以进一步滑动页面并发现相关特色项目。这些项目也以二元方式进行了呈现。左边一侧是作品照片，而右边一侧则是空白背景，这就为页面的整体视觉效果提供了必要的喘息空间。其中偶尔也会出现有关项目的简短文字介绍。

左侧为项目图像，右侧则是空白页面

项目的简短介绍

Pandora

官网：https://pandoraweproduce.com/

首页截图

在包含视频内容的分屏布局中，其中一个出色示例便是Pandora。它创造了一种极致的全屏体验，并将两个视频在分屏滑块的每一侧都可以进行独立播放。

整个网页是由项目和视频拼接而成的，且在滚动时会发生变化，即：一侧向上移动，而另一侧则会向下滑动。滑块动画的流畅移动以及视频内容本身就创造了一个动态且引人注目的环境，同时这也有助于访问者更深入地了解Pandora公司的创意愿景。

Pandora的整体页面布局十分简约。除了全屏分屏滑块外，顶部还设有几个导航链接。此外也包含了关于项目的简单阐述。在单击时，导航链接也会在分屏中打开，与此同时新的内容将占据一侧，而另一侧则将继续播放视频。这种方法不仅有助于聚焦重点，而且也确保了整个网站的平衡和一致的氛围。

滚动时页面发生的变化

单击"work"导航链接后的页面变化

Capsul' in

官网：https://aluminium.index.studio/

首页截图

Capsul' in是沉浸式交互式网页设计中最令人印象深刻的例子之一。它是一个为法国同名铝咖啡胶囊制造商创建的网站，并涵盖了包括设计、工程、定制、体验、规范和联系在内的六个叙事单元。

网页的交互效果是在滚动时以完美且平滑的过渡序列触发的。每次的滚动移动都会提示将有新的内容呈现，而这些内容会以几何形式进入视口，并且在颜色方面可以做到完美同步。

虽然有些分屏布局实际上只是用于过渡或装饰目的，但它还是占据了主导地位，同时展现了与其所在章节相关的内容信息。当我们在滚动界面时，两个分屏的部分会在重叠、合并、滑入和滑出、放大和缩小中，展现出令人惊叹的视觉叙事效果。

Penumbra

官网：https://penumbra.qodeinteractive.com/landing/

首页截图

在Qode Interactive中，经常会使用一种特殊的滑块布局，其中最有名的就是Penumbra主题的登陆页面。它可以在深色与浅色这两种模式或背景中使用。整个页面呈现了一个整齐划分的分屏，并提供了两种模式的预览，同时提示两者中存在的一些独特设计元素，即：网格线以及彩色极简主义和大胆、明亮且乐观色彩的结合。