习(xi)惯了一(yi)栏(lan)式的(de)设计(ji)，将屏幕一(yi)分为二的(de)设计(ji)常(chang)常(chang)会(hui)让用户(hu)感到更加(jia)新鲜。网页中(zhong)并排的(de)两(liang)栏(lan)呈(cheng)现(xian)不同(tong)的(de)信息(xi)(xi)，是(shi)分屏式设计(ji)的(de)最典型(xing)特征(zheng)，两(liang)边(bian)的(de)信息(xi)(xi)可以包(bao)含相同(tong)类型(xing)的(de)元素(su)，可以呈(cheng)现(xian)不同(tong)属性的(de)媒体(ti)内容，比如一(yi)边(bian)是(shi)图片，一(yi)边(bian)是(shi)文本。

分屏式设计完美的解决了(le)你(ni)需(xu)要(yao)同(tong)时呈现两个不同(tong)内容的需(xu)求，这种UI界面突(tu)出(chu)(chu)了(le)这两项内容的对等地(di)位，让用户自行浏览，或者作出(chu)(chu)选择。

你会发现(xian)，分屏式(shi)设计(ji)不仅仅是一种逐步流(liu)行的页面设计(ji)趋(qu)势(shi)，而且非常实(shi)际地(di)解(jie)决(jue)了需要呈(cheng)现(xian)同等重要内容(rong)、让用(yong)户(hu)选择的设计(ji)需求。这种呈(cheng)现(xian)方式(shi)看起来原(yuan)始(shi)，但(dan)是确实(shi)有着(zhe)明显的优(you)势(shi)：

引起用户对于特定区域的注意力
创造对比
非(fei)常(chang)规(gui)式的布(bu)局

此外(wai)，分屏(ping)式(shi)设计和响应式(shi)框架能够很好的结合(he)起来(lai)，这种类型的布局特别适合(he)在桌面端大屏(ping)幕(mu)和平板电脑上使用，同时还能够在小屏(ping)幕(mu)上以上下堆叠(die)式(shi)的方式(shi)呈(cheng)现出来(lai)。

分屏式设计的最佳选项

当你将屏幕(mu)划(hua)分为两块(kuai)的时候，两个(ge)区域内的内容的重要(yao)性(xing)是同等的，这(zhei)也意味着你可以在这(zhei)个(ge)界面(mian)中(zhong)传(chuan)达(da)双重重要(yao)的概念。处于两个(ge)对等区块(kuai)的元素就像阴阳鱼一样，从视觉(jue)到功能上，同等重要(yao)，互(hu)为补(bu)充。

活力四射的配(pei)色和趣味十(shi)足的排版

得(de)益于扁平化设(she)(she)计和Material Design 在设(she)(she)计领域的(de)(de)大范围(wei)普及，色彩(cai)和排(pai)版成为(wei)了目前设(she)(she)计的(de)(de)主要驱动力。鲜(xian)艳的(de)(de)色彩(cai)带来视(shi)觉刺激，而有趣的(de)(de)排(pai)版则让文本更有意思，两者的(de)(de)结合(he)能带来颇为(wei)值得(de)一看的(de)(de)设(she)(she)计。

图(tu)片(pian)和色块(kuai)的组合(he)

吸引用户注意行为召唤按钮

分屏式设(she)(she)计在视觉设(she)(she)计可(ke)(ke)以(yi)很(hen)有张力(li)(li)，这(zhei)也意味着身为(wei)设(she)(she)计师的(de)你(ni)同样可(ke)(ke)以(yi)合理地运用(yong)留白创(chuang)造视觉焦点，将(jiang)用(yong)户的(de)注意力(li)(li)吸引到特定(ding)的(de)元素(su)上，这(zhei)也是行为(wei)召(zhao)唤（CTA）按钮(niu)的(de)使用(yong)原理。

将屏幕视作一个卡片

分屏(ping)(ping)式设(she)计本(ben)质上是(shi)从卡片(pian)式设(she)计中(zhong)延伸出来的，而遵循这一(yi)设(she)计原理的网站(zhan)通常都(dou)会将屏(ping)(ping)幕视作为一(yi)个卡片(pian)，每一(yi)屏(ping)(ping)都(dou)是(shi)一(yi)个容器，每个卡片(pian)都(dou)承载一(yi)个交互和一(yi)条(tiao)信息。

屏幕的(de)左边包含一个(ge)卡(ka)片，而右边则包含了一对卡(ka)片

分屏式设计是自(zi)由的(de)(de)，它(ta)所包含的(de)(de)左(zuo)右两大块其(qi)实是还(hai)可以(yi)继(ji)续往下(xia)细分的(de)(de)，比(bi)如下(xia)面的(de)(de)Stikwood 这个网(wang)站就将右侧的(de)(de)部分划分为更(geng)小的(de)(de)区块，用来承载更(geng)多的(de)(de)内容，提(ti)供更(geng)多的(de)(de)信息(xi)入口。

小贴(tie)士(shi)：尽量让你的界面保持简单(dan)，即(ji)使(shi)要分(fen)割(ge)出更多区块，也尽量不要使(shi)用复(fu)杂的模(mo)式(shi)，否则(ze)UI界面会看起来很混乱。

构建视觉关联

虽然分屏设计模式(shi)让你可以在其(qi)中(zhong)呈现截然不(bu)同的(de)(de)元素，但是(shi)两个(ge)(ge)信息(xi)容(rong)器之间还(hai)是(shi)有关(guan)(guan)系(xi)(xi)和关(guan)(guan)联的(de)(de)。创建关(guan)(guan)联的(de)(de)方式(shi)很多，色(se)(se)彩是(shi)最(zui)常用的(de)(de)一种构(gou)建联系(xi)(xi)的(de)(de)方式(shi)。通过“共享(xiang)”最(zui)明显的(de)(de)色(se)(se)彩，让两个(ge)(ge)不(bu)同的(de)(de)屏产(chan)生联系(xi)(xi)，产(chan)生视觉(jue)流。如果(guo)这个(ge)(ge)色(se)(se)彩正好是(shi)品牌色(se)(se)的(de)(de)话，效(xiao)果(guo)尤(you)其(qi)明显：

Bump 使用品牌(pai)色来构建视觉流，让界面和(he)用户产生联系

Marka 也采用了类似的(de)技巧，色彩对(dui)比(bi)度更(geng)加强烈

另外一(yi)个(ge)值得一(yi)提的技巧，是让某个(ge)元素横(heng)跨(kua)两(liang)个(ge)区块（比如文本(ben)），让这个(ge)元素来作为两(liang)个(ge)区块的连接(jie)点：

除了文字(zi)，你还(hai)可(ke)以使用色彩叠加来连接两个部(bu)分：

这个(ge)分屏(ping)(ping)设计(ji)案例中，右侧的(de)屏(ping)(ping)幕看(kan)起(qi)来(lai)像(xiang)是左侧屏(ping)(ping)幕的(de)延伸一(yi)样。

使用动效鼓励用户交互

动效越来越多的参(can)与(yu)(yu)到我们的UI设(she)(she)计(ji)和交互(hu)中(zhong)来，使用动效来鼓励(li)用户但与(yu)(yu)到交互(hu)中(zhong)是(shi)非常合理的设(she)(she)计(ji)策(ce)略。看看下面 Chekhow is Alive 这个网站的设(she)(she)计(ji)，设(she)(she)计(ji)师通过动效展(zhan)示不同的角色，与(yu)(yu)你进行匹配。

结语

分屏式的(de)页面设(she)计非常(chang)有(you)趣，功能也足够强(qiang)大，不过你的(de)内容是(shi)否适合用来(lai)这么展示？所(suo)以，在如此设(she)计之(zhi)前，建议先问自(zi)己几个问题：

分屏式设计是否和你的网站内容相匹配？是否有足够的布局来进行分屏式设计？
你的用户是否会喜欢这样的布局？
将用(yong)户的(de)注意力(li)一分(fen)为(wei)二(er)是否合适？

不论(lun)如何，内(nei)容为(wei)王，而形(xing)式服从于内(nei)容，谨慎选择。