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