在網(wǎng)頁設(shè)計中，分屏布局在過去五年左右變得越來越突出，尤其是對于網(wǎng)站首頁部分。分屏絕不是一種新技術(shù)。事實上，默片時代的一些早期作品就采用了這種技術(shù)，用于在一個屏幕內(nèi)呈現(xiàn)兩個動作或兩種情況，垂直分割、水平分割，甚至對角分割。

首先，分屏是同時傳達(dá)兩條信息的絕佳方式。當(dāng)用于首頁的英雄版塊時，分屏是用戶最先看到的，也是第一印象最強烈的。因此，您希望將最重要的信息（文本和視覺信息）放在那里。分屏由兩部分組成，可以幫助您傳達(dá)兩種信息，而不是一條信息，還可以將視覺敘事與純文本結(jié)合起來。這種部分結(jié)構(gòu)還有助于為頁面引入流線型的模塊化布局，將內(nèi)容組織成塊或部分以便于查看。此外，可以對分屏部分進(jìn)行動畫處理，以增加動態(tài)性并增加內(nèi)容的參與度。

從嚴(yán)格的視覺角度來看，分屏具有內(nèi)在的二元性，在兩個并置的部分之間產(chǎn)生一種積極的張力，當(dāng)這些部分經(jīng)過仔細(xì)校準(zhǔn)和匹配時，它們可以創(chuàng)造出真正與品牌相得益彰的出色設(shè)計風(fēng)格和審美?，F(xiàn)在有很多方法可以設(shè)計分屏部分。它可以是動畫的或靜態(tài)的、對稱的或不對稱的、直線的或傾斜的、簡單的或分層的。它可以包含視頻、交互式元素、CTA、數(shù)字藝術(shù)對象或只是簡單的圖像。內(nèi)容的選擇取決于該部分所使用的網(wǎng)站類型、上下文、內(nèi)容和預(yù)期效果。

要真正清楚地了解如何使用分屏以及它可以創(chuàng)建什么樣的效果，最好檢查一些實際使用中的這種布局示例。這就是為什么我們編制了這份具有不同類型分屏功能并以最佳方式展示其多功能性的網(wǎng)站列表的原因。

Empty State是一個設(shè)計工作室，或者更確切地說是一個品牌，它創(chuàng)造了可配置的照明，由總部位于倫敦的 Cameron Design House 開發(fā)。該網(wǎng)站以看似靜態(tài)的由圖像和文本組成的英雄部分打開，然而，一旦我們開始滾動，它就會顯示為一個分屏部分，或者更確切地說是一個分屏滑塊，左右部分在相反的方向. 總共有五張幻燈片，一旦我們?yōu)g覽完所有幻燈片，我們就會返回第一個，從中我們可以進(jìn)一步瀏覽和探索產(chǎn)品，了解工作室或通過聯(lián)系頁面聯(lián)系。調(diào)色板定義整齊，由溫暖的灰色粉彩和大膽的海軍藍(lán)色組成。顏色的二元性與分屏滑塊提供的平衡及其對稱性非常吻合，因此網(wǎng)站的整體色調(diào)是一種衡量和技巧。

Visionnaire是一個位于圖盧茲的休閑服裝品牌，具有鮮明的年輕和現(xiàn)代特色。他們的在線商店以現(xiàn)代、多彩的方式展示可用物品，并以分屏英雄部分開始，介紹當(dāng)前系列。事實上，整個網(wǎng)站被整齊地劃分——最上面的部分是為新聞行情保留的，然后是一個突出的標(biāo)題菜單，在頁面的下方，產(chǎn)品類別以緊湊且對稱排列的全屏部分介紹。調(diào)色板的強度和密集排列的圖像被這種分裂或雙重排列的內(nèi)容所產(chǎn)生的秩序感所抵消，平衡了整個布局。

Compassion 是一家澳大利亞基督教慈善機構(gòu)，負(fù)責(zé)組織兒童贊助計劃和其他慈善和外展活動。去年，他們推出了Restore Hope Appeal，這是一個專門為全球受災(zāi)地區(qū)籌集資金的網(wǎng)站。該網(wǎng)站以一個介紹頁面打開，該頁面由一個分屏和兩個完全相反的部分組成——一個是美麗的天藍(lán)色，傳達(dá)希望和同情，配備捐贈按鈕，另一個是黑暗、嚴(yán)肅、受災(zāi)地區(qū)的毀滅性圖像，還有一個大圓圈邀請我們了解更多信息。這個出色的獨立頁面包含我們獲取信息和進(jìn)行捐贈所需的一切，它的視覺吸引力可能比我們從慈善機構(gòu)和捐贈組織所習(xí)慣的更加精致。