中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、Letter

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

首頁截圖

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

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

用戶觸發(fā)動畫

二、Geoff Levy

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

首頁截圖

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

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

左側(cè)為靜態(tài)攝影作品；右側(cè)為視頻電影

光標向左傾斜，則攝影作品部分所占用空間將擴大

三、MaximAksenov

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

首頁截圖

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

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

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

左側(cè)為項目圖像，右側(cè)則是空白頁面

項目的簡短介紹

四、Pandora

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

首頁截圖

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

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

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

滾動時頁面發(fā)生的變化

單擊”work”導航鏈接后的頁面變化

五、Capsul’ in

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

首頁截圖

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

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

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

六、Penumbra

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

首頁截圖

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

在單擊時，每一側(cè)都會展開，但卻又不會完全推出另一側(cè)。這就使得用戶在選擇一種模式并開始探索之前，這種鮮明的對比可以保持得更持久一些。

單擊后的頁面變化

七、Leandro Farina

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

首頁截圖

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

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

垂直滾動頁面

八、PenzGidroMash

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

首頁截圖

盡管分屏設計在作品集網(wǎng)站中經(jīng)常出現(xiàn)，但它也已經(jīng)在所有行業(yè)和市場中得到廣泛使用，包括科技、制造等領域。其中一個例子便是俄羅斯公司PenzGidroMash的網(wǎng)站。

當我們進入網(wǎng)站后，便可以看到在屏幕左側(cè)引入了藍色作為品牌的主色調(diào)，另一側(cè)則是一個大型工業(yè)罐。在整個背景變成深灰色之前，頁面便已經(jīng)通過依次輪流呈現(xiàn)內(nèi)容的方式，傳達了所有必要的品牌信息。同時也介紹了有關公司及其活動和產(chǎn)品的更多信息。

而在滾動的過程中，工業(yè)罐將一直存在，并通過動畫來改變它的位置。整個頁面呈現(xiàn)出精確、現(xiàn)代且易于導航的特點。此外，它在傳達品牌標識方面也做得很好。

通過滾動不僅顯示了主要信息，且使工業(yè)罐不斷地變換位置

九、F.Miller

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

首頁截圖

F. Miller是一系列植物護膚產(chǎn)品，它的網(wǎng)站設計秉持了其品牌原則，即：有效、實用且必需，并尤其突出了“實用”這一特點。整個網(wǎng)站頁面通過精致的淺色調(diào)，呈現(xiàn)出了絕對的極簡主義。

其布局特點便是細而銳利的線條。這些線條將頁面分成了頁眉和頁腳這兩部分。值得注意的是，分屏部分的一側(cè)是圖像，另一側(cè)則為文本信息。這些線條使布局看起來干凈而嚴肅，同時也突出了頁面的極簡主義特征。此外，產(chǎn)品圖像也排列在分屏部分之中，使得網(wǎng)站有一種雜志感，而干凈的幾何元素貫穿始終。

通過線條將頁面進行了劃分

左側(cè)為文字介紹，右側(cè)為產(chǎn)品圖像

TAKEAWAYS

分屏布局是同時傳達兩條信息的絕佳方式。通過分屏所呈現(xiàn)的內(nèi)容一定是用戶最先看到的信息，也是第一印象最強烈的。因此，我們可以將最重要的信息，例如文本和視覺信息，通過分屏布局的方式進行呈現(xiàn)。

而正如以上所舉示例一樣，分屏可以使得沉悶的設計活躍起來，并為頁面添加個性。此外，它也十分適合極簡設計，因為分屏內(nèi)容若顯得繁重的話，則會使整個屏幕顯得混亂，進而丟失一些重要信息。

以上，就是關于分屏布局 (Split Screen)的相關示例和介紹，感興趣的同學可以嘗試在自己的設計中學著應用一下。

作者：YAN；公眾號：交互設計小站

原文鏈接：https://mp.weixin.qq.com/s/gTZoOaaVMCsrHp9DKR6aCw

本文由 @交互設計小站 授權發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議