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

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

分屏設(shè)計的好處



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

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

· 鼓勵用戶做出選擇 - 選擇這個或那個；

· 突出顯示垂直圖像；

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

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

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

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

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



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



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

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

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

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

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



不斷發(fā)展的分屏


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

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

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



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



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

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



不那么明顯的分屏


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

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

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



一些注意事項


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

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

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

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



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






總結(jié)

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