国产爽视频在线观看视频_国产手机在线αv片无码_偷拍视频无码专区_久久韩国三级日本三级-国产一区二区午夜啪啪啪-欧美成人黄色免费在线网站-久久久亚洲精品久久仙-

首頁 客戶案例 品牌營銷網(wǎng)站建設 微信小程序開發(fā) 網(wǎng)絡營銷 APP開發(fā) 終端形象 動態(tài) 聯(lián)系

1對1定制服務,PC端+手機端+小程序多端應用

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

2021年01月27日瀏覽:

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


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


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


想看看它的實際行動嗎?這里有一些很好的例子來說明不對稱的分屏是如何在野外使用的。


滋味/金綠色


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


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



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




效果實驗室/人工智能-Cytora


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


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




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




Home Societe / Felix Lesouef


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


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




Felix Lesouef使最大限度地從最小的方法,不僅在內(nèi)容方面,而且設計。他的投資組合看起來并不謙遜??雌饋砭露鴥?yōu)雅。雖然可以劃分三列,但只有兩個塊。第一個塊包括分為兩部分的導航。它總是靜止的。第二個塊顯示內(nèi)容,這取決于所選擇的選項。整潔干凈。




15雀


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




Fru.it


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




GQ日本/火車頭


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


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





活動拍攝-新飛行


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


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




分裂原因


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


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


在線提交您的需求

*我們會在24小時內(nèi)回復您,節(jié)假日除外。
線上服務咨詢微信二維碼 13880656240獲取解決方案