两屏式网页设计 第1篇
遵循以下4种分屏网页设计手法，可以轻松高效的制作分屏网页设计：
搭配鲜明的色彩和生动的排版
由于扁平化设计和材料设计语言的大范围普及，鲜艳的颜色和戏剧性的分屏网页设计排版是现在的大趋势。鲜艳的色彩具有视觉刺激性，戏剧性的分屏网页设计排版增强了文本内容。只要将两者结合起来，你就可以创造出有趣的视觉设计。
吸引用户注意的CTA号召性按钮
分屏网页设计不仅仅是一个简单的设计趋势，将屏幕一分为二提供了一种引导用户浏览内容的独特方式。当你想制造一个更为显眼的行动号召焦点时，分屏网页设计是一个不错的选择。设计师可以合理地运用留白创造视觉焦点，将用户的注意力吸引到特定的元素上，这也是行为召唤CTA按钮的使用原理。在下图Pixso资源社区的案例中，可以看到网站利用了分屏网页设计留白设计，增加了页面排版趣味，并凸显了CTA按钮。
构建“屏幕”之间的视觉关联
虽然分屏网页设计模式让你可以在其中呈现截然不同的元素，但是两个信息容器之间还是需要保持关联性的，在画面容器之间建立联系很重要。创建关联的方式很多，一种方法是利用色彩搭配加强两个内容之间的联系，通过共享显眼的色彩，来建立两个屏幕之间的视觉流，这种分屏网页设计方法特别适用于对比强烈的品牌颜色或色调，例如下图来自Pixso资源社区的案例：
或简单的使用色彩叠加，来建立两个部分关联性：
还有一种可行方法是将单个元素分层，例如跨屏幕的文本排版或元素共用。
使用动效来鼓励用户交互
动效越来越多的参与到我们的UI设计和交互中来，使用动效来鼓励用户但与到交互中是非常合理的设计策略。动效加上分屏设计的结合，能很大程度的提升页面趣味性。
分屏网页设计是一个非常值得一试的排版方式，对于企业和设计团队来说，好的分屏网页设计技巧与网页设计工具，能够帮助其突破组织与制度的局限性。在线协同网页设计工具，是一款功能齐全+易于上手+团队功能强大的免费网页设计工具，不论是个人设计还是团队设计都非常合适。从一经推出到现在，短短的时间内，Pixso就凭借满满的诚意和不容置疑的实力，成为了国内最具发展潜力的在免费网页设计工具，我们有理由相信Pixso未来可期。
智能UI设计工具，快速上手专业技能
传统产品，往往要多个工具协作才能预期效果。而Pixso自带组件变体、自动布局等专业设计工具，支持UI/UX设计和原型播放，一体化完成高保真产品设计，对于网页的分屏设计来说非常合适。
实时协作，让所有人聚焦同一个目标
当面对一个复杂的设计项目时，通过链接邀请团队成员，进行多人云端协作设计，实时同步字号、边框、颜色等各种细节。
高保真原型，交互式动画演示
在设计过程中可视化、智能化预知用户体验， 支持添加页面交互和原型播放，模拟产品最终形态，助力团队规避无效投入，快速提升产品核心价值。
链接交付，构建清晰直观的工作流
Pixso具备全栈原型、设计、交付能力，团队上游一键发送链接交付，下游成员打开浏览器即可完成审查。支持切图一键导出，设计标注和代码在线生成与交付。
海量设计资源库
集成腾讯、阿里、字节、蚂蚁设计等众多大厂设计系统；组件素材直接拖拽复用，团队成员还可以将样式和组件发布到团队库，让团队成员快速复用，省去大量重复劳动；产品设计软件Pixso设计资源每月更新，创意快人一步！
分屏网页设计形式多种多样，一分为二只是其中基础且好操作的一种，在丰富多样的数字设计时代，有更多的方式等待我们去尝试和创新，Pixso也会与时俱进，不断为设计师提供更好用的功能和更丰富的分屏网页设计设计资源，快去 试试吧。
两屏式网页设计 第2篇
把 屏 幕 看 作 是 卡 片
牢记 'One Card，One Concept'
这种垂直分割屏幕的设计其实正是来源于“卡片式”设计风格，卡片式设计让我们能够更好地划分内容，让多重的信息更规整清晰地呈现，重点就在于它遵循“一张卡片只包含一个主题”的原则。
优秀的分屏设计同样需要遵循这一点。你可以在划分出来的区块里放置多种元素（图片，标题，文本，按钮等），但这些元素最好都指向同一个主题。
基本的分屏设计用一个屏幕呈现两条同等重要的信息，但分屏设计并非只能一分为二。在上面这个例子中，整个屏幕就被分成了三张“卡片”，独立传达不同的信息，同时在视觉上统一为一体，层次感清楚，简洁又优雅。
两屏式网页设计 第3篇
分屏技术在电影业中早已为人所知，早期的例子可以追溯到20世纪初的无声电影时代，今天它仍然是电影和电视中流行的设计方式。然而，对于网页设计行业来说，这是一个相对较新的方式。分屏网页设计排版在2016年年中左右才开始流行，现在我们有越来越多的网站使用分屏网页设计模式，这种分屏网页设计模式如此流行有几个原因：
视觉美感度高，非常规式的精美布局，能快速引起人们的关注。
很适用于响应式框架，分屏设计可以适用于各种屏幕尺寸，甚至是小屏尺寸。Pixso平台的功能，可以很便捷的完成响应式分屏网页设计。
两屏式网页设计 第4篇
鲜 亮 的 颜 色 & 特 别 的 字 体
让 它 们 在 一 起 吧 ～
一对鲜亮的颜色总是很提神～而有趣大胆的字体能强调突出内容，如果能把它们融洽地运用在一起，就能营造出简单而又充满吸引力的视觉画面。
对配色不太自信？没关系，这个叫ColorHunt的网站里全是新鲜清亮的配色，刚好能用上 |•'-'•)و✧ （Seeseed每日一粒第9期推荐过）
:point_right:
两屏式网页设计 第5篇
用 你 的 设 计 为 视 线 “ 搭 桥 ”
让 目 光 顺 畅 地 流 动 起 来～
之前已经提到过，我们的眼睛习惯在相邻的区块上寻找视觉联系，顺畅的浏览会让我们感到舒服。为两块分割开的界面建立联系，一方面能提升视觉体验，更主要的是，更好地突出页面信息的重点。
要做到这点，需要设计师用心于细节之处，不着痕迹地留下某种可以被视线所捕捉的路线，引导它最终落到整个页面上最重要的那一点。:eyes:
比如，用颜色。
在上面这个页面中，产品的红色就是负责引导视线的“桥”。它让我们的视线首先被左边的大幅产品照片所吸引，之后就能自然地落在右边的“预定”按钮上。干净利落:thumbsup:。
利用鲜明的撞色，引导视线从一半页面转向另一半。
除了颜色，也可以使用横跨左右区域的元素，比如文字：
或者通过改变颜色透明度，进行覆盖叠加，将左右两个屏幕联系起来：