Date 2026-07-02 20:59:33
习惯了一栏设计，把屏幕分成两个设计往往会让用户感觉更新鲜。网页并排的两栏呈现不同的信息，是分屏设计最典型的特征。两侧的信息可以包含相同类型的元素，呈现不同属性的媒体内容，如图片和文本。
分屏设计完美地解决了您需要同时呈现两个不同内容的需求。这个UI界面突出了这两个内容的平等状态，允许用户浏览或做出选择。
你会发现，分屏设计不仅是一种逐渐流行的页面设计趋势，而且非常实际地解决了用户需要呈现同样重要的内容和选择的设计需求。这种呈现方式看起来很原始，但确实有明显的优势：
·吸引用户对特定区域的注意力·创造比较·非常规布局
此外，分屏设计和响应框架可以很好地结合在一起。这种类型的布局特别适合在桌面上的大屏幕和平板电脑上使用，也可以在小屏幕上上上下堆叠。
在今天之前，优化设计也预测了过度屏幕设计的流行：“查漏补缺！三种有趣的网页设计趋势很可能被低估
当你把屏幕分成两部分时，两个区域内容的重要性是相同的，这意味着你可以在这个界面中传达双重重要的概念。两个对等区块的元素就像阴阳鱼，在视觉和功能上同样重要，相互补充。
充满活力的配色和有趣的排版
由于扁平化设计和Materialial Design 随着设计领域的广泛普及，色彩和排版已成为当前设计的主要驱动力。明亮的颜色带来视觉刺激，而有趣的排版使文本更有趣，两者的结合可以带来相当值得一看的设计。
色彩与排版的结合
图片与色块的组合
视觉设计中的分屏设计可以非常紧张，这也意味着作为一名设计师，你也可以合理地使用空白来创建视觉焦点，吸引用户的注意力到特定的元素，这也是一个行为召唤（CTA）按钮的使用原理。
分屏设计本质上是从卡片设计中延伸出来的，遵循这一设计原则的网站通常将屏幕视为卡片，每个屏幕都是容器，每个卡片都承载着交互和信息。
屏幕左侧有一张卡片，右侧有一对卡片
分屏设计是自由的，它包含的左右两大块其实是可以继续细分的，比如下面的Stikwod 该网站将右侧的部分划分为更小的块，以承载更多的内容并提供更多的信息入口。
小贴士:尽量保持界面简单，尽量不要使用复杂的模式，即使你想分割更多的块，否则UI界面看起来会很混乱。
虽然分屏设计模式允许您呈现完全不同的元素，但两个信息容器之间仍然存在关系和关联。创建联系的方式有很多，颜色是建立联系最常用的方式。通过“共享”最明显的颜色，两个不同的屏幕可以连接和产生视觉流。如果颜色只是品牌颜色，效果特别明显：
Bump 利用品牌色构建视觉流，让界面与用户联系
Marka 也采用了类似的技巧，色彩对比度更强
另一个值得一提的技巧是让一个元素跨越两个块（如文本），并将这个元素作为两个块的连接点：
除文字外，您还可以使用颜色叠加来连接两部分：
在这个分屏设计案例中，右边的屏幕看起来像是左边屏幕的延伸。
动态效应越来越多地参与到我们的UI设计和交互中，使用动态效应来鼓励用户，但它是一种非常合理的交互设计策略。看看下面 Chekhow is Alive 在这个网站的设计中，设计师通过动态效果展示不同的角色来匹配你。
分屏页面设计非常有趣，功能足够强大，但您的内容是否适合这样显示？因此，在设计这种设计之前，建议问自己几个问题：
·分屏设计是否与您的网站内容相匹配？分屏设计是否有足够的布局？·您的用户会喜欢这种布局吗？·将用户的注意力分为两个是否合适？
无论如何，内容为王，形式服从内容，选择谨慎。
[要做好网页设计，我们必须谈论太多]
“实例教学！如何将极简主义风格的原则应用到网站设计中？”“实战干货！如何在网页设计中使用方框/方形元素？”“网页设计中常见的图片使用技巧是什么？”2017年，这五种网页设计风格可能成为主流趋势原地址：uxplanet原作者：Nick Babich优设译文：@陈子木
本文由优设网原创翻译。请尊重版权和译者的成果。请附上优设链接进行转移，违者将被调查。感谢编辑们的合作。
【优设网 原创文章 投稿邮箱：yuan@uisdc.com】
================优设网==============.com“它是中国最受欢迎的网页设计师学习平台，专注于分享网页设计、无线终端设计和PS教程。设计师需要阅读的100本书:历史上最完整的设计师图书导航:http://hao.uisdc.com/book/.设计微博:拥有180万粉丝的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源，下载顶级设计材料。设计导航：推荐世界顶级设计网站，设计师必须导航：http://hao.uisdc.com