分屏(Split Screen)，其实并不是一种新技术。事实上，默片时代的一些早期作品就已经开始采用，以此在一个屏幕内呈现两种动作或信息内容。在网页或UI设计中，分屏布局现在也变得越来越突出。今天，我们就来看看，有哪些玩转分屏布局的优秀示例，大家可以直接去对应的网址看一下。

　　UI设计中如何玩转分屏布局？

　　一、Pandora

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

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

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

　　二、Capsul’in

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

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

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

　　三、Penumbra

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

　　四、Letter

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

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

　　五、MaximAksenov

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

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

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

Powered by Froala Editor