亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁(yè) > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例

有些趨勢(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è)不同部分。

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例(圖1)

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

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例(圖2)

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),但仍然不能獲勝。

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例(圖3)

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

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例(圖4)

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è)部分。

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例(圖5)

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

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例(圖6)

5、15雀

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

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例(圖7)

6、Fru.it

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

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例(圖8)

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è)引人注目的地方。聰明的和有趣的。

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例(圖9)

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例(圖10)

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ū)域。

網(wǎng)站設(shè)計(jì)中非對(duì)稱分屏的精美設(shè)計(jì)示例(圖11)

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è)信息塊。

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)

本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/8433.html

免責(zé)聲明:部分文章信息來(lái)源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。