具有分屏風(fēng)格的網(wǎng)站設(shè)計(jì)是一種正在流行并不斷發(fā)展的趨勢(shì)。 分屏設(shè)計(jì)產(chǎn)生的初衷可能有很多原因，包括為了適應(yīng)移動(dòng)端的兼容性和友好的用戶體驗(yàn)。 此外，使用這種風(fēng)格的網(wǎng)站，許多設(shè)計(jì)看起來(lái)都非常棒！

趨勢(shì)的不斷更新和變化表明，有許多不同的方法可以創(chuàng)建一個(gè)用戶喜歡的有效分屏設(shè)計(jì)。 你或許是時(shí)候思考，如何使用一個(gè)用戶會(huì)喜歡或者想要參與的分屏設(shè)計(jì)，來(lái)不斷更新和調(diào)整你的網(wǎng)站設(shè)計(jì)！

分屏設(shè)計(jì)的好處



分屏設(shè)計(jì)之所以越來(lái)越受歡迎的一個(gè)很大的因素是——它們非常有效。 當(dāng)用戶需要立即看到兩個(gè)內(nèi)容時(shí)，它們可以很好的發(fā)揮它們的效果。 同樣的想法適用于需要用戶做出選擇以繼續(xù)進(jìn)行的內(nèi)容。

設(shè)計(jì)師正在使用分屏設(shè)計(jì)，因?yàn)樗鼈兒苡行А?使用分屏設(shè)計(jì)的主要原因是：

· 鼓勵(lì)用戶做出選擇 - 選擇這個(gè)或那個(gè)；

· 突出顯示垂直圖像；

· 在桌面和移動(dòng)設(shè)備上創(chuàng)建共同體驗(yàn)；

· 建立獨(dú)特的視覺(jué)流程（利于行動(dòng)規(guī)劃）；

· 建立與其他設(shè)計(jì)技術(shù)和趨勢(shì)一致的設(shè)計(jì)模式；

· 創(chuàng)建一個(gè)從全屏主頁(yè)中脫穎而出的視覺(jué)效果，或利于區(qū)分網(wǎng)站上的內(nèi)容類型。

分屏設(shè)計(jì)的好處在于它們能夠很好地處理響應(yīng)式類型的網(wǎng)站設(shè)計(jì)。 你可以在移動(dòng)設(shè)備屏幕上獲得同桌面展示的一樣的堆疊內(nèi)容。 無(wú)論設(shè)備如何，用戶都不會(huì)因?yàn)槭褂玫脑O(shè)備類型而錯(cuò)過(guò)任何內(nèi)容。



“經(jīng)典”分屏設(shè)計(jì)



將分屏設(shè)計(jì)稱為“經(jīng)典”可能有點(diǎn)太早了，但考慮到網(wǎng)站設(shè)計(jì)趨勢(shì)的更新速度，這就顯得并不為時(shí)過(guò)早了。

這就是為什么我們喜歡這種風(fēng)格的原因：

· 分屏設(shè)計(jì)是響應(yīng)式框架的理想選擇。 在較大的屏幕上，設(shè)計(jì)是分開(kāi)的，當(dāng)涉及較小的屏幕時(shí)，面板可以堆疊。

· 在動(dòng)畫(huà)和效果方面很容易，可以根據(jù)提供的內(nèi)容鼓勵(lì)用戶完成點(diǎn)擊行動(dòng)。

· 兩個(gè)對(duì)稱的面板可以輕松地為整個(gè)網(wǎng)站設(shè)計(jì)創(chuàng)建模塊化輪廓，并組織塊內(nèi)的內(nèi)容。



不斷發(fā)展的分屏


雖然分屏設(shè)計(jì)看起來(lái)相當(dāng)簡(jiǎn)單，而且足夠?qū)ΨQ，但這并不代表這種設(shè)計(jì)風(fēng)格的全部。 設(shè)計(jì)人員仍然需要使用一些權(quán)重分割的技巧，使得設(shè)計(jì)在細(xì)節(jié)上也足夠吸引用戶，并可以在整體中發(fā)揮效果。

比如，使用一些帶有更多棱角或邊線的圖形、基于網(wǎng)格的分割（想想四分之三和四分之一的屏幕）或者分割具有不相等內(nèi)容權(quán)重的版塊。 還有一個(gè)就是在處理極簡(jiǎn)風(fēng)格設(shè)計(jì)的分屏上，也需要很好的把控。

分屏設(shè)計(jì)的目的往往很重要，因?yàn)樗荚谧層脩敉ㄟ^(guò)適當(dāng)?shù)膬?nèi)容進(jìn)行接下來(lái)的流程，內(nèi)容需要幫助他們到達(dá)目的地。 現(xiàn)在，這種選擇正在偏向于更加精簡(jiǎn)（甚至有一些分屏設(shè)計(jì)使用視覺(jué)模式而不設(shè)置這個(gè)或那個(gè)的選擇，例如上面的例子）。



具有多個(gè)點(diǎn)擊區(qū)域的分屏



分屏設(shè)計(jì)趨勢(shì)的最大變化之一是在設(shè)計(jì)中存在多個(gè)點(diǎn)擊區(qū)域。 最初分屏的每個(gè)屏幕有兩個(gè)CTA，這些分割通常包含其他信息。

上面的示例顯示了采用具有視覺(jué)沖擊力的大圖和消息傳遞與鏈接配對(duì)的分屏。 它在桌面上看起來(lái)很棒——用大圖像吸引你，并在手機(jī)上疊加一個(gè)漂亮的，帶來(lái)更愉快的購(gòu)物體驗(yàn)。



不那么明顯的分屏


并非所有分屏設(shè)計(jì)都非常明顯（這點(diǎn)其實(shí)跟用戶體驗(yàn)的細(xì)節(jié)設(shè)置是一樣——不起眼的驚喜）。

在極簡(jiǎn)風(fēng)格的設(shè)計(jì)概要中，可以使用網(wǎng)格建立分屏，但沒(méi)有顏色或圖像，“屏幕”看起來(lái)就像是一個(gè)整體。 上面的Owl Studios做得很好。在屏幕的上方，它看起來(lái)像單屏幕設(shè)計(jì)，在滾動(dòng)下方和移動(dòng)設(shè)備上，分割變得更加明顯。

這種分屏設(shè)計(jì)非常漂亮，可在所有設(shè)備上使用。 這正是你應(yīng)該嘗試通過(guò)此網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)實(shí)現(xiàn)的目標(biāo)。



一些注意事項(xiàng)


使用垂直分屏可以創(chuàng)建一些令人驚嘆的用戶體驗(yàn)，但同時(shí)你需要注意水平分割。 這些可能會(huì)變得尷尬，并迅速是設(shè)計(jì)的整體變得有點(diǎn)亂！

上面的例子實(shí)際上是一個(gè)不錯(cuò)的網(wǎng)站，并使用分屏原則，但前兩個(gè)“屏幕”不足。 幾乎沒(méi)有太多的空白空間，也沒(méi)有足夠的信息來(lái)鼓勵(lì)滾動(dòng)，而且缺乏移動(dòng)用戶體驗(yàn)。 這里的設(shè)計(jì)可以更好地使用垂直分屏，保持白色空間和CTA與旁邊的視頻在相應(yīng)的位置上各自發(fā)揮作用。

水平分屏通常會(huì)使你的圖像具有不高的寬圖像區(qū)域。 這是一種難以在移動(dòng)屏幕上工作的寬高比。 雖然你可以使用一些計(jì)劃和不同的技巧來(lái)進(jìn)行調(diào)整，但它實(shí)際上帶來(lái)的是兩種不同的用戶體驗(yàn)。

大多數(shù)用戶希望所有設(shè)備都可以使用相同的網(wǎng)站設(shè)計(jì)。 如果你計(jì)劃創(chuàng)建不同的體驗(yàn)，即使只是圖像或文本，這是項(xiàng)目的最佳設(shè)計(jì)選擇。



5個(gè)分屏設(shè)計(jì)參考






總結(jié)

你能聯(lián)想到在你的項(xiàng)目中使用分屏設(shè)計(jì)嗎？ 如果內(nèi)容類型合適的話，這可能是一種非常有效的設(shè)計(jì)技術(shù)。 并且有很多不同的方法可以使它發(fā)揮作用。 最后，祝你好運(yùn)！