網(wǎng)站設(shè)計(jì)中非對稱分屏的精美設(shè)計(jì)示例
有些趨勢會永遠(yuǎn)伴隨我們,變成經(jīng)典的解決方案。有些人消失得無影無蹤。你可能認(rèn)為所有的網(wǎng)站設(shè)計(jì)趨勢都可以分為這兩類,但這并不完全正確。還有另一類趨勢,它們的生活有起起落落和平靜的時(shí)期。這種趨勢一直在出現(xiàn)和消失,其中一個(gè)網(wǎng)站設(shè)計(jì)趨勢就是分屏的使用。
分屏幾年前在網(wǎng)絡(luò)上掀起了一陣風(fēng)暴,這在當(dāng)時(shí)非常流行。甚至還有一些基于這種方法的WordPress主題。這是一件大事。然而,慢慢地,它的巨大的受歡迎程度消失了,我們開始忘記這個(gè)有趣的主頁面區(qū)域的布局解決方案。
最近,它通過外表上的一些小變化喚醒并提醒大家它令人難以置信的魅力。不對稱分割屏幕是對舊趨勢的一種新轉(zhuǎn)變,它點(diǎn)燃了激情,并激發(fā)了Web開發(fā)人員的思想。
想看看它的實(shí)際行動嗎?這里有一些很好的例子來說明不對稱的分屏是如何在野外使用的。
1、滋味/金綠色
說到不對稱,首先映入我們腦海的當(dāng)然是歡迎屏幕的不均勻劃分。滋養(yǎng)熱和金綠是兩個(gè)典型的例子。他們的主頁面區(qū)域被分成兩部分,一部分比另一部分大。
nouris熱斯使用分屏將一個(gè)普通的滑塊變成了網(wǎng)站真正的核心。注意,這不是在一組圖片中循環(huán)的傳統(tǒng)滑塊;它是一個(gè)支持頂部導(dǎo)航條的全屏導(dǎo)航。訪問者可以同時(shí)看到門戶的兩個(gè)不同部分。
Golden Green背后的團(tuán)隊(duì)走了一條老路,使用的解決方案不是針對主頁面區(qū)域,而是針對整個(gè)網(wǎng)站。美麗的圖像出現(xiàn)在前面,吸引了整體的注意力,使信息更加引人注目。團(tuán)隊(duì)還交替使用塊來增強(qiáng)內(nèi)容流和可讀性。
2、效果實(shí)驗(yàn)室/人工智能-Cytora
另一對采用相同技術(shù)的例子是Effect Lab和人工智能- Cytora。它們都利用了較大的左側(cè)裂縫。原因很簡單。左邊是用戶開始探索屏幕的地方。這是我們自然的閱讀行為模式。所以,這是一個(gè)重要的東西應(yīng)該放置的地方,比如標(biāo)志、口號等等。效應(yīng)實(shí)驗(yàn)室的團(tuán)隊(duì)正是這樣做的。
他們把標(biāo)題和行動調(diào)用放在左邊部分,由于它的大小和大量的空白,自然吸引了注意力。而右邊則變成了一個(gè)補(bǔ)充元素,包括以博客風(fēng)格呈現(xiàn)的內(nèi)頁鏈接。由于有了生動的背景,它們獲得了視覺上的權(quán)重,使它們能夠與相鄰的區(qū)塊競爭,但仍然不能獲勝。
在Cytora的案例中,團(tuán)隊(duì)采用了分屏技術(shù),使故事講述的體驗(yàn)更加刺激。由于主題是人工智能,這對一些人來說可能有點(diǎn)令人生畏和討厭。所以,這個(gè)團(tuán)隊(duì)做了正確的事情。由于采用了分割式布局,他們成功地利用動畫來吸引用戶的興趣,不會讓訪問者感到不知所措。相反,它們作為愉快的陪伴材料。
4、Home Societe / Felix Lesouef
首頁和Felix Lesouef的個(gè)人投資組合展示了一組無縫不對稱分割屏幕在我們的收藏。雖然在前面的例子中,由于鮮明的對比,左右兩邊很容易區(qū)分,但這兩個(gè)顯示了一個(gè)微妙的,幾乎是脆弱的概念本質(zhì)。
Home Societe用干凈的表面和大量新鮮的空氣與在線觀眾見面。第一個(gè)塊包含歡迎圖片和垂直導(dǎo)航,而第二個(gè)塊包含所有內(nèi)容,以?About?部分開始,以?Contacts?結(jié)束。這兩個(gè)區(qū)域之間的過渡是非常無縫的:你輕輕地從一個(gè)部分流動到另一個(gè)部分。
Felix Lesouef使最大限度地從最小的方法,不僅在內(nèi)容方面,而且設(shè)計(jì)。他的投資組合看起來并不謙遜。看起來精致而優(yōu)雅。雖然可以劃分三列,但只有兩個(gè)塊。第一個(gè)塊包括分為兩部分的導(dǎo)航。它總是靜止的。第二個(gè)塊顯示內(nèi)容,這取決于所選擇的選項(xiàng)。整潔干凈。
5、15雀
下面的示例演示了如何使用空白或重疊來讓事情變得更有趣,考慮15雀。它與前面示例中的兩個(gè)塊相同。然而,該團(tuán)隊(duì)在右側(cè)區(qū)域添加了一些生動的空白,并讓標(biāo)題與之重疊。以這樣的方式,屏幕似乎是分開的,但在這里仍然兩個(gè)部分形成一個(gè)大的畫面。簡單和優(yōu)雅。
6、Fru.it
和前面的例子很像,支持Fru的團(tuán)隊(duì)。它還使用空格來扭轉(zhuǎn)拆分屏幕的解決方案。像往常一樣,這里有兩個(gè)街區(qū)。注意,它們的寬度和高度是相同的。然而,由于圖像大小的差異以及大量的空白,左邊的塊看起來比右邊的塊小。因此,后者具有更顯著的視覺權(quán)重,更能吸引我們的眼球。
7、GQ日本/火車頭
GQ日本和機(jī)車呈現(xiàn)了一個(gè)小趨勢的滑塊,利用不對稱分割屏幕的概念。從本質(zhì)上講,該解決方案是基于傳統(tǒng)的垂直分割布局,即左側(cè)比右側(cè)大。這樣,左側(cè)就扮演了一個(gè)伴生的角色。你可以在這個(gè)區(qū)域放置導(dǎo)航,標(biāo)志,標(biāo)題等。
右邊是用來承載內(nèi)容的。這還不是全部;還有另一個(gè)街區(qū)位于兩邊的交叉口。就《GQ》雜志而言,它顯示的是一幅圖片,而機(jī)車用它來播放視頻。這個(gè)街區(qū)連接了所有的東西,同時(shí)也成為了一個(gè)引人注目的地方。聰明的和有趣的。
8、活動拍攝-新飛行
在布局中引入不對稱的一種久經(jīng)時(shí)間驗(yàn)證的方法是使用對角線,就像拍攝活動背后的團(tuán)隊(duì)——NewFlight所做的那樣。他們的滑塊與組合件容易從競爭中分離自己,感謝它的梯形塊。
傳統(tǒng)的分割屏幕有兩個(gè)矩形塊,讓人覺得兩個(gè)矩形塊是一個(gè)接一個(gè)的,而對角線的形狀讓這兩個(gè)矩形塊看起來像拼圖中缺失的兩個(gè)部分組成了一個(gè)區(qū)域。
9、分裂原因
當(dāng)分屏在幾年前首次出現(xiàn)在網(wǎng)站設(shè)計(jì)領(lǐng)域時(shí),它被用來同時(shí)向觀眾顯示兩個(gè)不同的信息塊。今天,情況略有不同。
現(xiàn)代的分屏被用來使布局更有趣,使內(nèi)容更生動,并以一種創(chuàng)造性的方式呈現(xiàn)一個(gè)信息塊。
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請?jiān)L問:網(wǎng)站技術(shù)