拆分屏幕布局是分為兩個(或更多)相等垂直列的全屏 Web 元件。然而,儘管分屏佈局是時尚,這是一個大膽的風格決定,如果沒有一個合理的邏輯,可以傷害多用户體驗。當正確執行它可以為多用户提供美妙的觀看體驗。優秀 WooCommerce 獨立站網頁設計如何使用分屏佈局?

  為什麼要使用分屏佈局?

  分割屏幕元件在極簡主義的 WooCommerce 獨立站網頁設計中效果最好,因為負空間與粗體垂直分隔相結合,在重要區域增加了最高的重點。除了這些優點之外,分屏佈局的益處遠遠超出視覺美觀; 它們對於使用兩個並排可選選項來著陸網頁特別有效。

  一些明顯的例子包括:

  ·登入和登錄檔單

  ·付費和免費訂閲

  ·交替顏色的產品

  拆分屏幕元件的很好示例

  首先,讓我們看看一些了不起的例子,並討論為什麼他們的工作這麼好的用例。 拆分屏幕布局可以以許多不同的方式使用,因此各個站點之間的優勢各不相同,這取決於網站要實現的目標。

  Cam Strobel

  並非每個 WordPress 網站設計都需要訪問整個水平視口。 使用超小的設計,如 Cam Strobel 的網站,將屏幕分成兩個垂直列意味著所有的內容可以在摺疊,完全不需要多用户滾動。

  Studio meta

  全寬 “大標題” 設計仍然很常見 – 這是一個巨大的趨勢,然而,很少有機會使用大膽的影像,由於缺乏文字可讀性(我們通常需要模糊的影像顏色疊加)。 拆分屏幕布局解決了這一點,Studio meta 向我們展示這種效果。通過使影像和內容並排,我們可以使用更加豐富多彩,更勇敢,更深刻的意義的影像,因為我們不必以任何方式遮蔽影像。

  Bose

  分割屏幕不必由兩個 50 個元件組成 – Bose 使這一趨勢達到極限,該網站甚至沒有嘗試適應較小的屏幕。 無論這個外觀多麼漂亮,響應式設計是您必須考慮的事情,可能很難適應分屏佈局到更小的裝置。除此之外,這是我最喜歡的分屏示例,因為佈局允許 Bose 通過使用不同的顏色顯示具有獨特個性。 結合前衞的對角形狀,這個網站真的抓住了我的眼睛。

  設計分屏佈局時需要注意的事項

  如果您正在考慮為您的網站使用分屏元件,那麼在設計時應當牢記這三個提示。

  ·移動友好

  拆分屏幕元件確實有一個優點:它們不太適合移動裝置。很難讓他們做出響應並適應更小的屏幕,您幾乎肯定不得不縮小到更温和的東西,可能需要比平常更多的代碼,所以請確保您採取移動優先的方法。

  ·沒有好的原因,不分割屏幕

  您應該首先考慮您的網站是否需要一個分屏元件。當然,它是’ 趨勢’,它看起來很酷,但單是沒有足夠的理由還是不要輕易嘗試它。

  ·是否值得額外的工作使元件響應?

  您的多用户有足夠的趨勢意識來欣賞佈局,還是會混淆它們?是否有足夠的負空間使佈局工作?您是否有可能將您的多用户的注意力分成兩半,更單一的焦點會是一個更好的結果嗎?如果任何這些答案是否定的,那麼您應該投票反對這個想法。

  利用負空間

  桌面網站水平顯示,但是當使用分屏佈局時,每個元件在主視口中成為一種垂直視口。因此,有更多的機會來探索顯示內容的新方法。 這絕對是一個有創意的機會,所以堅持您的創意上限!跨飛獨立站,專業 WordPress 外貿獨立站網站建設、 WordPress 站羣網站優化、 logo 設計、品牌設計、印刷、 WordPress APP/WordPress 微信開發等產品服務,新上線企業 VI 設計套餐和 WordPress 站羣網站營銷推廣系統(強),歡迎新老顧客前來諮詢!

  結論

  分割屏幕布局是有吸引力的,正如我們從示例中看到的,趨勢的好處取決於網站的設置實現; 它們可以用於為每個列定義不同的標識,或者它們可以用於更簡單的原因:將最小網站中的所有內容保留在不需要視口的整個寬度的最小網站上。如果您以前沒有嘗試設計分屏佈局,什麼誘使您現在嘗試? 它是視覺美學,還是試驗新方法來顯示內容的機會?歡迎評論!