有哪些玩轉(zhuǎn)分屏布局的優(yōu)秀網(wǎng)站示例

時(shí)間：2023-09-07 16:00:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-07 16:00:01 來源：網(wǎng)站運(yùn)營

有哪些玩轉(zhuǎn)分屏布局的優(yōu)秀網(wǎng)站示例： 分屏(Split Screen)，其實(shí)并不是一種新技術(shù)。事實(shí)上，默片時(shí)代的一些早期作品就已經(jīng)開始采用，以此在一個(gè)屏幕內(nèi)呈現(xiàn)兩種動(dòng)作或信息內(nèi)容。在網(wǎng)頁或UI設(shè)計(jì)中，分屏布局現(xiàn)在也變得越來越突出。今天，我們就來看看，有哪些玩轉(zhuǎn)分屏布局的優(yōu)秀示例，大家可以直接去對應(yīng)的網(wǎng)址看一下。

一、Pandora

官網(wǎng)：https://pandoraweproduce.com/

在包含視頻內(nèi)容的分屏布局中，其中一個(gè)出色示例便是Pandora。它創(chuàng)造了一種極致的全屏體驗(yàn)，并將兩個(gè)視頻在分屏滑塊的每一側(cè)都可以進(jìn)行獨(dú)立播放。

整個(gè)網(wǎng)頁是由項(xiàng)目和視頻拼接而成的，且在滾動(dòng)時(shí)會(huì)發(fā)生變化，即：一側(cè)向上移動(dòng)，而另一側(cè)則會(huì)向下滑動(dòng)?；瑝K動(dòng)畫的流暢移動(dòng)以及視頻內(nèi)容本身就創(chuàng)造了一個(gè)動(dòng)態(tài)且引人注目的環(huán)境，同時(shí)這也有助于訪問者更深入地了解Pandora公司的創(chuàng)意愿景。

Pandora的整體頁面布局十分簡約。除了全屏分屏滑塊外，頂部還設(shè)有幾個(gè)導(dǎo)航鏈接。此外也包含了關(guān)于項(xiàng)目的簡單闡述。在單擊時(shí)，導(dǎo)航鏈接也會(huì)在分屏中打開，與此同時(shí)新的內(nèi)容將占據(jù)一側(cè)，而另一側(cè)則將繼續(xù)播放視頻。這種方法不僅有助于聚焦重點(diǎn)，而且也確保了整個(gè)網(wǎng)站的平衡和一致的氛圍。

二、Capsul’in

官網(wǎng)：https://aluminium.index.studio/

Capsul’in是沉浸式交互式網(wǎng)頁設(shè)計(jì)中最令人印象深刻的例子之一。它是一個(gè)為法國同名鋁咖啡膠囊制造商創(chuàng)建的網(wǎng)站，并涵蓋了包括設(shè)計(jì)、工程、定制、體驗(yàn)、規(guī)范和聯(lián)系在內(nèi)的六個(gè)敘事單元。

網(wǎng)頁的交互效果是在滾動(dòng)時(shí)以完美且平滑的過渡序列觸發(fā)的。每次的滾動(dòng)移動(dòng)都會(huì)提示將有新的內(nèi)容呈現(xiàn)，而這些內(nèi)容會(huì)以幾何形式進(jìn)入視口，并且在顏色方面可以做到完美同步。

雖然有些分屏布局實(shí)際上只是用于過渡或裝飾目的，但它還是占據(jù)了主導(dǎo)地位，同時(shí)展現(xiàn)了與其所在章節(jié)相關(guān)的內(nèi)容信息。當(dāng)我們在滾動(dòng)界面時(shí)，兩個(gè)分屏的部分會(huì)在重疊、合并、滑入和滑出、放大和縮小中，展現(xiàn)出令人驚嘆的視覺敘事效果。

三、Penumbra

官網(wǎng)：https://penumbra.qodeinteractive.com/landing/

在Qode Interactive中，經(jīng)常會(huì)使用一種特殊的滑塊布局，其中最有名的就是Penumbra主題的登陸頁面。它可以在深色與淺色這兩種模式或背景中使用。整個(gè)頁面呈現(xiàn)了一個(gè)整齊劃分的分屏，并提供了兩種模式的預(yù)覽，同時(shí)提示兩者中存在的一些獨(dú)特設(shè)計(jì)元素，即：網(wǎng)格線以及彩色極簡主義和大膽、明亮且樂觀色彩的結(jié)合。

四、Letter

官網(wǎng)：https://letter.craftedbygc.com/

高端金融服務(wù)值得高端的網(wǎng)頁UI設(shè)計(jì)，而這也正是銀行與金融服務(wù)平臺Letter所想構(gòu)建的網(wǎng)頁效果。Letter以一個(gè)醒目的分屏布局開頭。一側(cè)為白色背景，其中包含了文本信息；另一側(cè)為深色背景，主要呈現(xiàn)了一個(gè)包含在銳利虹彩棱鏡中的信用卡圖像。

整個(gè)網(wǎng)頁所傳達(dá)的不是奢華而是階級與財(cái)富，同時(shí)帶有一絲科技美學(xué)。通過滑動(dòng)，棱鏡被分成了十幾個(gè)小塊。而通過釋放卡片所啟動(dòng)的動(dòng)畫則將右側(cè)部分變?yōu)槿珜?。設(shè)計(jì)師巧妙地將這部分設(shè)計(jì)變成了一個(gè)用戶觸發(fā)動(dòng)畫，以此產(chǎn)生了更佳的效果。

五、Geoff Levy

官網(wǎng)：https://www.geofflevy.com/

分屏布局對于電影和視頻相關(guān)的網(wǎng)站來說是一個(gè)特別好的選擇，因?yàn)樗峁┝松砼R其境的動(dòng)態(tài)體驗(yàn)，并且可以給人留下深刻的印象。其中一個(gè)很好的示例就是Geoff Levy的作品集網(wǎng)站。他是一位屢獲殊榮的古巴裔美國電影和視頻導(dǎo)演。Geoff Levy將網(wǎng)站以完美的全屏分屏打開。其中一側(cè)為靜態(tài)攝影作品，而另一側(cè)則是視頻動(dòng)畫及其電影項(xiàng)目的鏈接。

這種劃分并不是固定不變的，它的比例會(huì)根據(jù)光標(biāo)的移動(dòng)而產(chǎn)生變化。如果我們向左傾斜，那么攝影作品的部分將會(huì)擴(kuò)大，以此占用更多的空間并顯示相關(guān)的作品鏈接。同樣右側(cè)也是如此。而對于那些喜歡更傳統(tǒng)的用戶體驗(yàn)的人群來說，只需通過訪問放置在分割線頂部的簡單圖表，這類頁面也可以實(shí)現(xiàn)在網(wǎng)格布局中的使用。

六、MaximAksenov

官網(wǎng)：https://maximaksenov.com/

Maxim Aksenov是來自俄羅斯的多學(xué)科設(shè)計(jì)師和藝術(shù)總監(jiān)，他主要從事UX/UI、交互和視覺識別相關(guān)的設(shè)計(jì)工作。Maxim Aksenov的作品集網(wǎng)站展示了其最重要的項(xiàng)目，而該網(wǎng)站本身也是一件精美的網(wǎng)頁設(shè)計(jì)。

該網(wǎng)站以”About”部分打開，然后進(jìn)入”Work”部分。從邏輯層面上講，它占據(jù)了大部分頁面。整個(gè)頁面被一條清晰且細(xì)的分割線整齊地劃分開來，以此完成分屏布局。屏幕的左邊是Aksenov的一張模煳的個(gè)人照片，而右邊則是他的簡單介紹。

隨后，我們可以進(jìn)一步滑動(dòng)頁面并發(fā)現(xiàn)相關(guān)特色項(xiàng)目。這些項(xiàng)目也以二元方式進(jìn)行了呈現(xiàn)。左邊一側(cè)是作品照片，而右邊一側(cè)則是空白背景，這就為頁面的整體視覺效果提供了必要的喘息空間。其中偶爾也會(huì)出現(xiàn)有關(guān)項(xiàng)目的簡短文字介紹。

七、Leandro Farina

官網(wǎng)：http://leandrofarina.com/

Leandro Farina是一位英國攝影師和藝術(shù)總監(jiān)，他的作品曾出現(xiàn)在Vogue、Dazed、New Yoker等知名雜志和出版物中。他的個(gè)人網(wǎng)站也是一種視覺二元性的驚人展示。

該網(wǎng)站以極簡主義分屏打開，左側(cè)僅包含一個(gè)切換器，用戶可以在其中選擇查看社論或作品；右側(cè)則顯示了Leandro Farina的作品。通過垂直滾動(dòng)，右側(cè)的圖像背景采用了精心排列的顏色，同時(shí)左側(cè)保持靜止?fàn)顟B(tài)。而當(dāng)我們切換查看作品時(shí)，垂直圖像模塊將移至左側(cè)。

文章來源：優(yōu)漫動(dòng)游