关注度UP！一次掌握这种大热的网页设计趋势！
时间：2022-08-22 12:15:02 | 来源：网站运营
时间：2022-08-22 12:15:02 来源：网站运营
Split-screen Design，一个屏幕对半分，分隔开的每一边都能各自独立包含不同的元素，例如文本框，照片，插画，按钮，等等。这种网页设计风格你一定见过了。
越来越多的网页开始追逐这种热潮，也许你也在考虑尝试。
这篇文章帮你梳理，好的Split-screen Design应该怎么做。为什么要分割屏幕？
- 更有效地将用户的注意力集中到网页的某一具体部分
- 设计师可以更大胆地尝试撞色、对比元素
- 提供一种新鲜的浏览体验的同时，能让用户更快地、自行作出选择
分割屏幕不是简单地制造一种视觉效果，它其实是一种基本的、引导用户进入和使用网站的方式。
分屏设计的最基本目的是：
一个 屏 幕 ，传 达 两条 信 息
要注意的是，
即使我们有意区分展示两条不同的信息，但人眼会不由自主地在视线范围内的两块相邻区域寻找视觉上的联系，因此设计的时候也不要忽略这种视觉习惯。
既有大胆鲜明的冲撞，又不乏细微之处的呼应和联结，会让你的用户感到新奇又愉快。
除此之外，还有这些重要的Tips：
1. 鲜 亮 的 颜 色 & 特 别 的 字 体 让 它 们 在 一 起 ～一对鲜亮的颜色总是很提神～而有趣大胆的字体能强调突出内容，如果能把它们融洽地运用在一起，就能营造出简单而又充满吸引力的视觉画面。
对配色不太自信？没关系，Seeseed每日一粒Vol.09推荐过的ColorHunt里全是新鲜清亮的配色，刚好能用上 |•'-'•) ✧
?
http://www.colorhunt.co/2. Call To Action 的 绝 好 时 机 ！ 用 设 计 抓 住 它！分割屏幕的方式给了我们设计一个更大的CTA按钮的自由。
将
垂直分明的隔断与留白的结合放入你的设计中，就能制造一个吸引关注的强烈聚焦区域！
3. 把 屏 幕 看 作 是 卡 片 牢记 'One Card，One Concept' 这种垂直分割屏幕的设计其实正是来源于“卡片式”设计风格，卡片式设计让我们能够更好地划分内容，让多重的信息更规整清晰地呈现，重点就在于它遵循“一张卡片只包含一个主题”的原则。
优秀的分屏设计同样需要遵循这一点。你可以在划分出来的区块里放置多种元素（图片，标题，文本，按钮等），但这些元素最好都指向同一个主题。
基本的分屏设计用一个屏幕呈现两条同等重要的信息，但分屏设计并非只能一分为二。在上面这个例子中，整个屏幕就被分成了三张“卡片”，独立传达不同的信息，同时在视觉上统一为一体，层次感清楚，简洁又优雅。
4. 用 你 的 设 计 为 视 线 “ 搭 桥 ” 让 目 光 顺 畅 地 流 动 起 来～之前已经提到过，我们的眼睛习惯在相邻的区块上寻找视觉联系，顺畅的浏览会让我们感到舒服。
为两块分割开的界面建立联系，一方面能提升视觉体验，更主要的是，更好地突出页面信息的重点。要做到这点，需要设计师用心于细节之处，不着痕迹地留下某种可以被视线所捕捉的路线，引导它最终落到整个页面上最重要的那一点。?
比如，用颜色。
在上面这个页面中，产品的
红色就是负责引导视线的“桥”。它让我们的视线首先被左边的大幅产品照片所吸引，之后就能自然地落在右边的“预定”按钮上。干净利落?。
利用鲜明的撞色，引导视线从一半页面转向另一半。
除了颜色，也可以使用横跨左右区域的元素，比如文字：
或者通过改变颜色透明度，进行覆盖叠加，将左右两个屏幕联系起来：
5. 好 的 动 画 总 能 增 添 魅 力 记 得 保 持 幽 默 和 克 制 有趣的动画能提高用户点击的兴趣，这一点同样适用于分屏设计中。结合你的产品调性做一些简单有意思的小动画，让人从第一眼就感到轻松愉快，Call to action才能水到渠成。
6. 最 后 你 的 网 站 真 的 适 合 用 分 屏 设 计 吗 ...不可否认，分屏设计是一种具有强烈的视觉效果和功能性的风格，运用得当的话，它能让你的网站非常出彩。
但它并非适用于所有网页内容。在决定对你的网页进行分屏设计之前，最好先考虑：
- 我的内容适合用分屏设计吗，我的页面能有足够多的留白来体现分屏设计的价值吗
- 我的目标用户能够理解和欣赏这种对比强烈的风格吗，会不会让他们摸不着头脑？
- 我真的需要将用户的注意力一分为二吗？
最后的最后，内容永远是最重要的部分，分屏设计只是帮助我们传达网页内容的一种方式。如果你相信它就是你的网页所需要的，那就不要犹豫，大胆尝试吧！
在线咨询
