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

Date 2024-06-06 09:23:09

  分屏(Split Screen),事实上,这不是一项新技术。事实上,默片时代的一些早期作品已经开始在一个屏幕上展示两个动作或信息内容。在网页或UI设计中,分屏布局变得越来越突出。今天,让我们来看看玩分屏布局的优秀例子。您可以直接访问相应的网站。


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

  一、Pandora

  官网:https://pandoraweproduce.com/

  在包含视频内容的分屏布局中,一个很好的例子就是Pandora。它创造了一个极端的全屏体验,两个视频可以在分屏滑块的每一侧独立播放。

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

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

  二、Capsul’in

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

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

  网页的互动效果是由滚动时完美平滑的过渡序列触发的。每次滚动都会提示新内容呈现,这些内容会以几何形式进入视野,颜色可以完美同步。

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

 三、Penumbra

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

  在Qode 在Interactive中,经常使用特殊的滑块布局,其中最著名的是Penumbra主题登录页面。它可用于两种模式或背景:深色和浅色。整个页面呈现了一个整洁的分割屏幕,并提供了两种模式的预览,并提示了一些独特的设计元素,即网格线、极简主义和大胆、明亮和乐观的颜色。

 四、Letter

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

  高端金融服务值得高端网页用户界面设计,这正是银行和金融服务平台Letter想要构建的网页效果。Letter以一个引人注目的分屏布局开始。一边是白色背景,包含文本信息;另一边是深色背景,主要是一个包含在锐利彩虹棱镜中的信用卡图像。

  整个网页传达的不是奢华,而是阶级和财富,同时也有一丝科技美学。棱镜滑动时被分成十几个小块。发布卡片的动画将右侧部分变为全宽。设计师巧妙地将这部分设计变成用户触发动画,从而产生更好的效果。


  五、MaximAksenov

  官网:https://maximaksenov.com/

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

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

  然后,我们可以进一步滑动页面并找到相关的特征项目。这些项目也以二元的方式呈现。左边是工作照片,右边是空白背景,为页面的整体视觉效果提供了必要的呼吸空间。偶尔会有一个简短的文本介绍。


  六、Geoff Levy

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

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

  这种划分不是固定的,它的比例会根据光标的运动而变化。假如我们向左倾斜,那么摄影作品的部分就会扩大,从而占用更多的空间,并显示相关作品的链接。右边也是如此。对于那些喜欢更传统用户体验的人来说,他们只需要访问放置在分界线顶部的简单图表,这些图表也可以用于网格布局。


  七、Leandro Farina

  官网:http://leandrofarina.com/

  Leandro Farina是英国摄影师和艺术总监,他的作品出现在vogue上、Dazed、New Yoker和其他著名杂志和出版物。他的个人网站也是一个惊人的视觉二元展示。

  该网站以极简主义分屏打开,左侧只包含一个切换器,用户可以选择查看社论或作品;Leandroro显示在右侧 Farina的作品。右侧的图像背景通过垂直滚动精心排列,左侧保持静止。当我们切换查看作品时,垂直图像模块将移动到左侧。


以上是小编今天与大家分享的内容如何在用户界面设计中玩分屏布局?我希望这篇文章能帮助那些想要零基础学习用户界面设计的人。学习是一个漫长的过程。如果你想更快地学习用户界面设计,你可以参加优秀的用户界面设计培训课程,这样你就可以更快地掌握用户界面设计技术,并有7天的免费试用体验。

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计