分屏网页设计是一种有趣、实用且响应迅速的设计方式,当用户习惯了一栏式的网页设计,将屏幕一分为二的分屏网页设计可以更加吸引人们的眼球。网页设计中并排两栏的模块呈现不同的信息,是分屏网页设计的最典型特征。用户访问网页只需大概三秒钟的时间如果你想降低跳出率,让你的网页设计布局友好充满吸引力,分屏网页设计可以帮助你做到这一点。

1. 分屏网页设计的好处

分屏技术在电影业中早已为人所知,早期的例子可以追溯到20世纪初的无声电影时代,今天它仍然是电影和电视中流行的设计方式。然而,对于网页设计行业来说,这是一个相对较新的方式。分屏网页设计排版在2016年年中左右才开始流行,现在我们有越来越多的网站使用分屏网页设计模式这种分屏网页设计模式如此流行有几个原因

  • 视觉美感度高非常规式的精美布局,能快速引起人们的关注。

很适用于响应式框架分屏设计可以适用于各种屏幕尺寸,甚至是小屏尺寸。Pixso平台的响应式布局功能可以很便捷的完成响应式分屏网页设计

  • 帮助导航使用简单的设计技巧,就可以将用户的注意力吸引到屏幕的特定区域,或者引导点击。

企业分屏网页设计模板

分屏网页设计应用场景

当你的网页需要同时呈现两项内容的时候,分屏网页设计特别合适。这种排版方式突出了两项内容的同等权重,使得用户可以在第一时间同时浏览两个信息,并在它们之间快速选择。

分屏网页设计虽好,但也并不是适用所有场景,对于内容较为丰富的布局不建议使用。保持分屏网页设计的整洁可读很重要,不合时宜的分屏网页设计,会让本身内容充实的UI看起来信息过载,所以分屏网页设计布局更适合简约风格的网站。

如果你正在衡量你的的网站上是否要用分屏设计时,建议对照以下几个问题进行思考:

  • 你想要呈现的内容是否需要用到分屏网页设计

  • 你的页面是否会有足够的负空间让分屏网页设计布局发挥作用?

  • 你的用户会喜欢这种分屏网页设计布局吗?还是会为分屏网页设计布局感到困扰?

分屏结账网页设计模板

怎么做好分屏网页设计

遵循以下4种分屏网页设计手法,可以轻松高效的制作分屏网页设计:

搭配鲜明的色彩和生动的排版

由于扁平化设计和材料设计语言的大范围普及,鲜艳的颜色和戏剧性的分屏网页设计排版是现在的大趋势。鲜艳的色彩具有视觉刺激性,戏剧性的分屏网页设计排版增强了文本内容。只要将两者结合起来,你就可以创造出有趣的视觉设计。

吸引用户注意的CTA号召性按钮

分屏网页设计不仅仅是一个简单的设计趋势,将屏幕一分为二提供了一种引导用户浏览内容的独特方式。当你想制造一个更为显眼的行动号召焦点时,分屏网页设计是一个不错的选择。设计师可以合理地运用留白创造视觉焦点,将用户的注意力吸引到特定的元素上,这也是行为召唤CTA按钮的使用原理。在下图Pixso资源社区的案例中,可以看到网站利用了分屏网页设计留白设计,增加了页面排版趣味,并凸显了CTA按钮。

分屏式账号登录页设计模板

构建“屏幕”之间的视觉关联

虽然分屏网页设计模式让你可以在其中呈现截然不同的元素,但是两个信息容器之间还是需要保持关联性的,在画面容器之间建立联系很重要。创建关联的方式很多,一种方法是利用色彩搭配加强两个内容之间的联系,通过共享显眼的色彩,来建立两个屏幕之间的视觉流,这种分屏网页设计方法特别适用于对比强烈的品牌颜色或色调,例如下图来自Pixso资源社区的案例:

分屏网页设计素材

或简单的使用色彩叠加,来建立两个部分关联性:

还有一种可行方法是将单个元素分层,例如跨屏幕的文本排版或元素共用。

分屏注册页设计模板

使用动效来鼓励用户交互

动效越来越多的参与到我们的UI设计和交互中来,使用动效来鼓励用户但与到交互中是非常合理的设计策略。动效加上分屏设计的结合,能很大程度的提升页面趣味性。

推荐使用专业网页UI设计工具Pixso

分屏网页设计是一个非常值得一试的排版方式,对于企业和设计团队来说,好的分屏网页设计技巧与网页设计工具,能够帮助其突破组织与制度的局限性。在线协同网页设计工具Pixso是一款功能齐全+易于上手+团队功能强大的免费网页设计工具,不论是个人设计还是团队设计都非常合适。从一经推出到现在,短短的时间内,Pixso就凭借满满的诚意和不容置疑的实力,成为了国内最具发展潜力的在免费网页设计工具,我们有理由相信Pixso未来可期。

  • 智能UI设计工具,快速上手专业技能

传统产品,往往要多个工具协作才能预期效果。而Pixso自带组件变体、自动布局等专业设计工具,支持UI/UX设计和原型播放,一体化完成高保真产品设计,对于网页的分屏设计来说非常合适。

  • 实时协作,让所有人聚焦同一个目标

当面对一个复杂的设计项目时,通过链接邀请团队成员,进行多人云端协作设计,实时同步字号、边框、颜色等各种细节。

  • 高保真原型,交互式动画演示

在设计过程中可视化、智能化预知用户体验, 支持添加页面交互和原型播放,模拟产品最终形态,助力团队规避无效投入,快速提升产品核心价值。

  • 链接交付,构建清晰直观的工作流

Pixso具备全栈原型、设计、交付能力,团队上游一键发送链接交付,下游成员打开浏览器即可完成审查。支持切图一键导出,设计标注和代码在线生成与交付。

  • 海量设计资源库

集成腾讯、阿里、字节、蚂蚁设计等众多大厂设计系统;组件素材直接拖拽复用,团队成员还可以将样式和组件发布到团队库,让团队成员快速复用,省去大量重复劳动;产品设计软件Pixso设计资源每月更新,创意快人一步!

分屏网页设计形式多种多样,一分为二只是其中基础且好操作的一种,在丰富多样的数字设计时代,有更多的方式等待我们去尝试和创新,Pixso也会与时俱进,不断为设计师提供更好用的功能和更丰富的分屏网页设计设计资源,快去 Pixso 试试吧。