有些趨勢(shì)會(huì)永遠(yuǎn)伴隨我們，變成經(jīng)典的解決方案。有些人消失得無(wú)影無(wú)蹤。你可能認(rèn)為所有的網(wǎng)站設(shè)計(jì)趨勢(shì)都可以分為這兩類，但這并不完全正確。還有另一類趨勢(shì)，它們的生活有起起落落和平靜的時(shí)期。這種趨勢(shì)一直在出現(xiàn)和消失，其中一個(gè)網(wǎng)站設(shè)計(jì)趨勢(shì)就是分屏的使用。

分屏幾年前在網(wǎng)絡(luò)上掀起了一陣風(fēng)暴，這在當(dāng)時(shí)非常流行。甚至還有一些基于這種方法的WordPress主題。這是一件大事。然而，慢慢地，它的巨大的受歡迎程度消失了，我們開始忘記這個(gè)有趣的主頁(yè)面區(qū)域的布局解決方案。

最近，它通過(guò)外表上的一些小變化喚醒并提醒大家它令人難以置信的魅力。不對(duì)稱分割屏幕是對(duì)舊趨勢(shì)的一種新轉(zhuǎn)變，它點(diǎn)燃了激情，并激發(fā)了Web開發(fā)人員的思想。

想看看它的實(shí)際行動(dòng)嗎？這里有一些很好的例子來(lái)說(shuō)明不對(duì)稱的分屏是如何在野外使用的。

1、滋味/金綠色

說(shuō)到不對(duì)稱，首先映入我們腦海的當(dāng)然是歡迎屏幕的不均勻劃分。滋養(yǎng)熱和金綠是兩個(gè)典型的例子。他們的主頁(yè)面區(qū)域被分成兩部分，一部分比另一部分大。

nouris熱斯使用分屏將一個(gè)普通的滑塊變成了網(wǎng)站真正的核心。注意，這不是在一組圖片中循環(huán)的傳統(tǒng)滑塊；它是一個(gè)支持頂部導(dǎo)航條的全屏導(dǎo)航。訪問(wèn)者可以同時(shí)看到門戶的兩個(gè)不同部分。

Golden Green背后的團(tuán)隊(duì)走了一條老路，使用的解決方案不是針對(duì)主頁(yè)面區(qū)域，而是針對(duì)整個(gè)網(wǎng)站。美麗的圖像出現(xiàn)在前面，吸引了整體的注意力，使信息更加引人注目。團(tuán)隊(duì)還交替使用塊來(lái)增強(qiáng)內(nèi)容流和可讀性。

2、效果實(shí)驗(yàn)室/人工智能-Cytora

另一對(duì)采用相同技術(shù)的例子是Effect Lab和人工智能- Cytora。它們都利用了較大的左側(cè)裂縫。原因很簡(jiǎn)單。左邊是用戶開始探索屏幕的地方。這是我們自然的閱讀行為模式。所以，這是一個(gè)重要的東西應(yīng)該放置的地方，比如標(biāo)志、口號(hào)等等。效應(yīng)實(shí)驗(yàn)室的團(tuán)隊(duì)正是這樣做的。

他們把標(biāo)題和行動(dòng)調(diào)用放在左邊部分，由于它的大小和大量的空白，自然吸引了注意力。而右邊則變成了一個(gè)補(bǔ)充元素，包括以博客風(fēng)格呈現(xiàn)的內(nèi)頁(yè)鏈接。由于有了生動(dòng)的背景，它們獲得了視覺(jué)上的權(quán)重，使它們能夠與相鄰的區(qū)塊競(jìng)爭(zhēng)，但仍然不能獲勝。

在Cytora的案例中，團(tuán)隊(duì)采用了分屏技術(shù)，使故事講述的體驗(yàn)更加刺激。由于主題是人工智能，這對(duì)一些人來(lái)說(shuō)可能有點(diǎn)令人生畏和討厭。所以，這個(gè)團(tuán)隊(duì)做了正確的事情。由于采用了分割式布局，他們成功地利用動(dòng)畫來(lái)吸引用戶的興趣，不會(huì)讓訪問(wèn)者感到不知所措。相反，它們作為愉快的陪伴材料。

4、Home Societe / Felix Lesouef

首頁(yè)和Felix Lesouef的個(gè)人投資組合展示了一組無(wú)縫不對(duì)稱分割屏幕在我們的收藏。雖然在前面的例子中，由于鮮明的對(duì)比，左右兩邊很容易區(qū)分，但這兩個(gè)顯示了一個(gè)微妙的，幾乎是脆弱的概念本質(zhì)。

Home Societe用干凈的表面和大量新鮮的空氣與在線觀眾見(jiàn)面。第一個(gè)塊包含歡迎圖片和垂直導(dǎo)航，而第二個(gè)塊包含所有內(nèi)容，以?About?部分開始，以?Contacts?結(jié)束。這兩個(gè)區(qū)域之間的過(guò)渡是非常無(wú)縫的:你輕輕地從一個(gè)部分流動(dòng)到另一個(gè)部分。

Felix Lesouef使最大限度地從最小的方法，不僅在內(nèi)容方面，而且設(shè)計(jì)。他的投資組合看起來(lái)并不謙遜。看起來(lái)精致而優(yōu)雅。雖然可以劃分三列，但只有兩個(gè)塊。第一個(gè)塊包括分為兩部分的導(dǎo)航。它總是靜止的。第二個(gè)塊顯示內(nèi)容，這取決于所選擇的選項(xiàng)。整潔干凈。

5、15雀

下面的示例演示了如何使用空白或重疊來(lái)讓事情變得更有趣，考慮15雀。它與前面示例中的兩個(gè)塊相同。然而，該團(tuán)隊(duì)在右側(cè)區(qū)域添加了一些生動(dòng)的空白，并讓標(biāo)題與之重疊。以這樣的方式，屏幕似乎是分開的，但在這里仍然兩個(gè)部分形成一個(gè)大的畫面。簡(jiǎn)單和優(yōu)雅。

6、Fru.it

和前面的例子很像，支持Fru的團(tuán)隊(duì)。它還使用空格來(lái)扭轉(zhuǎn)拆分屏幕的解決方案。像往常一樣，這里有兩個(gè)街區(qū)。注意，它們的寬度和高度是相同的。然而，由于圖像大小的差異以及大量的空白，左邊的塊看起來(lái)比右邊的塊小。因此，后者具有更顯著的視覺(jué)權(quán)重，更能吸引我們的眼球。

7、GQ日本/火車頭

GQ日本和機(jī)車呈現(xiàn)了一個(gè)小趨勢(shì)的滑塊，利用不對(duì)稱分割屏幕的概念。從本質(zhì)上講，該解決方案是基于傳統(tǒng)的垂直分割布局，即左側(cè)比右側(cè)大。這樣，左側(cè)就扮演了一個(gè)伴生的角色。你可以在這個(gè)區(qū)域放置導(dǎo)航，標(biāo)志，標(biāo)題等。

右邊是用來(lái)承載內(nèi)容的。這還不是全部；還有另一個(gè)街區(qū)位于兩邊的交叉口。就《GQ》雜志而言，它顯示的是一幅圖片，而機(jī)車用它來(lái)播放視頻。這個(gè)街區(qū)連接了所有的東西，同時(shí)也成為了一個(gè)引人注目的地方。聰明的和有趣的。

8、活動(dòng)拍攝-新飛行

在布局中引入不對(duì)稱的一種久經(jīng)時(shí)間驗(yàn)證的方法是使用對(duì)角線，就像拍攝活動(dòng)背后的團(tuán)隊(duì)——NewFlight所做的那樣。他們的滑塊與組合件容易從競(jìng)爭(zhēng)中分離自己，感謝它的梯形塊。

傳統(tǒng)的分割屏幕有兩個(gè)矩形塊，讓人覺(jué)得兩個(gè)矩形塊是一個(gè)接一個(gè)的，而對(duì)角線的形狀讓這兩個(gè)矩形塊看起來(lái)像拼圖中缺失的兩個(gè)部分組成了一個(gè)區(qū)域。

9、分裂原因

當(dāng)分屏在幾年前首次出現(xiàn)在網(wǎng)站設(shè)計(jì)領(lǐng)域時(shí)，它被用來(lái)同時(shí)向觀眾顯示兩個(gè)不同的信息塊。今天，情況略有不同。

現(xiàn)代的分屏被用來(lái)使布局更有趣，使內(nèi)容更生動(dòng)，并以一種創(chuàng)造性的方式呈現(xiàn)一個(gè)信息塊。