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

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

分屏設計的好處



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

設計師正在使用分屏設計，因為它們很有效。 使用分屏設計的主要原因是：

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

· 突出顯示垂直圖像；

· 在桌面和移動設備上創建共同體驗；

· 建立獨特的視覺流程（利于行動規劃）；

· 建立與其他設計技術和趨勢一致的設計模式；

· 創建一個從全屏主頁中脫穎而出的視覺效果，或利于區分網站上的內容類型。

分屏設計的好處在于它們能夠很好地處理響應式類型的網站設計。 你可以在移動設備屏幕上獲得同桌面展示的一樣的堆疊內容。 無論設備如何，用戶都不會因為使用的設備類型而錯過任何內容。



“經典”分屏設計



將分屏設計稱為“經典”可能有點太早了，但考慮到網站設計趨勢的更新速度，這就顯得并不為時過早了。

這就是為什么我們喜歡這種風格的原因：

· 分屏設計是響應式框架的理想選擇。 在較大的屏幕上，設計是分開的，當涉及較小的屏幕時，面板可以堆疊。

· 在動畫和效果方面很容易，可以根據提供的內容鼓勵用戶完成點擊行動。

· 兩個對稱的面板可以輕松地為整個網站設計創建模塊化輪廓，并組織塊內的內容。



不斷發展的分屏


雖然分屏設計看起來相當簡單，而且足夠對稱，但這并不代表這種設計風格的全部。 設計人員仍然需要使用一些權重分割的技巧，使得設計在細節上也足夠吸引用戶，并可以在整體中發揮效果。

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

分屏設計的目的往往很重要，因為它旨在讓用戶通過適當的內容進行接下來的流程，內容需要幫助他們到達目的地。 現在，這種選擇正在偏向于更加精簡（甚至有一些分屏設計使用視覺模式而不設置這個或那個的選擇，例如上面的例子）。



具有多個點擊區域的分屏



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

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



不那么明顯的分屏


并非所有分屏設計都非常明顯（這點其實跟用戶體驗的細節設置是一樣——不起眼的驚喜）。

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

這種分屏設計非常漂亮，可在所有設備上使用。 這正是你應該嘗試通過此網頁設計趨勢實現的目標。



一些注意事項


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

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

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

大多數用戶希望所有設備都可以使用相同的網站設計。 如果你計劃創建不同的體驗，即使只是圖像或文本，這是項目的最佳設計選擇。



5個分屏設計參考






總結

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