分屏設(shè)計的歷史
分屏的歷史可以追溯到1903年，是Edwin S. Porter 在《美國救火員的生活》首次使用的。電影的開場是一個救火員在想一個女人和一個孩子。導演在這個電影的開場鏡頭使用了分屏。
從那時起，很多電影制作人開始使用分鏡的概念。但是這個概念用到設(shè)計上就很久以后的事情啦。
直到2013年，才逐漸成為潮流。但實際上實在2016年中期的時候這種趨勢才開始回流，到現(xiàn)在成為一個大問題，越來越多的網(wǎng)站開始使用這個種設(shè)計模式——垂直放置兩個面板。
分屏設(shè)計是具有邏輯的設(shè)計，也是一種將兩個截然不同元素放在一起的解決方案。
什么時候使用分屏設(shè)計
1.當你不知道這兩個功能元素哪個重量級高時
2.當網(wǎng)頁中羅列兩個完全相反的類別。分屏就是一個很好的設(shè)計方案，因為用戶通常是從左側(cè)到右的選擇，網(wǎng)站展示兩個無用的的選項是浪費時間的。
3.當你無法避免同一個網(wǎng)站上需要兩個CTA的時候
4.在兩部分內(nèi)容中建立鏈接
為什么設(shè)計師這么青睞分屏
分屏設(shè)計是非常有趣的、功能性極強的、同時也是響應(yīng)式設(shè)計的一種方式。這是幾個設(shè)計師為什么喜歡分屏設(shè)計的幾個原因：
1.他可以保證內(nèi)容的多樣性
2.分屏可以在不增加左右用戶的同時增加兩類的視覺重量
3.通過自然系統(tǒng)賦予美感
如何做好分屏設(shè)計
這種設(shè)計適用于大屏或者平板上，但是設(shè)計師也會把他應(yīng)用在移動設(shè)備上。那后來設(shè)計師怎么橫夸屏幕完美實現(xiàn)分屏設(shè)計的？
1.運用對比
這是分屏設(shè)計中我最喜歡的一個建議。這是我們作為設(shè)計師最有趣的地方啦，我們可以把兩個對比的東西和諧的放在一起。將兩個截然相反的元素放在一起，對比的顏色，不同的尺寸，字體和相異的自然圖像等等。
2.保證重要的信息始終清晰可見
當你了解用戶需要對某個特定信息的持續(xù)的提醒，然后智能移動這些內(nèi)容。當然如果有一個貼合的CTA或者頂部貼合是一個不錯的選擇，但是頂部的空間是十分有限的。在頂部防治相關(guān)圖片或者描述是不切實際的。
Cam Strobel在分屏設(shè)計中使用相同技巧。
3.統(tǒng)一導航
最好只頂部保留一個統(tǒng)一的導航，這對分屏的兩部分來說都非常清晰。
4.一邊內(nèi)容一邊圖片
全屏寬度的“頭部”設(shè)計仍然很常見—這是種趨勢，當然也是理所應(yīng)當?shù)摹Ｈ欢苌儆袡C會使用大膽的圖片，由于缺少文字后，會表意不明（我們通常會模糊圖片或者添加顏色遮罩）。分屏布局就能解決這些問題。
通過文字和圖片各占一半的做法，我們刻意使用更多彩、更大膽的更具深意的圖片。而且不用降低圖片的可視性。
Studio Meta就是個很好的例子
5.不要在內(nèi)容較多的頁面使用這種布局
分屏設(shè)計不會隨內(nèi)容的增長而擴展，所以，不要在內(nèi)容多的頁面內(nèi)使用這種布局。
6.在“屏幕”之間創(chuàng)建視覺流
盡管分屏設(shè)計模式能夠明確不同的元素，在內(nèi)容容器之間存在聯(lián)系。最常見的建立聯(lián)系方的方式是使用顏色。通過使用相同的顏色建立兩個屏幕之間的視覺流。這對于明亮的色彩和對比度比較高的色相這種設(shè)計方案特別有效。
7.不需要遵循五五分
分屏并不一定要由五五分元素構(gòu)成——Bose在這方面站在先列，盡管我沒注意到這個網(wǎng)站在小屏上的效果如何。盡管這樣的布局很美觀，響應(yīng)設(shè)計時你需要考慮的，所以分屏設(shè)計在小屏幕上是很難使用的。
組合使用斜向的形狀，這個網(wǎng)站針很引人注目。
結(jié)論：
正確的使用分屏，分屏布局會為用戶打造魔幻的視覺體驗。
