分割式網頁設計技巧

網站設計趨勢之一是將螢幕一分為二。越來越多的Web項目使用此布局選項，其中兩個垂直面板並排放置。分割式設計遵循一個非常簡單的經驗法則：一個螢幕，兩條消息。每一面都包含一個單獨的元素：照片、文本塊或插圖。該方法特別適用於需要同時將某人的注意力集中在兩件事上的情況。因此，訪問者可以立即在它們之間進行選擇。

分割式設計不僅是一種流行趨勢，也是一種非常新穎的網站導航方式。仔細觀察，您可以看到以下好處：

1.它提請注意特定的事物。

2.玩對比。

3.使用非模板格式。

在使用響應式框架時，它也是一個不錯的選擇。這種類型的設計非常適合在大型顯示器或平板電腦上導航，但行動裝置也不例外：面板可以一個接一個地垂直排列。

但分割式的偉大之處在於幾乎無限數量的設計組合。

 

什麼時候應該避免分割式設計

分割式設計不會隨著內容的增長而很好地擴展，因此不建議將它們應用於內容密集的布局。保持螢幕簡單很重要，因為複雜的分割會使UI看起來訊息過多。因此，如果您有很多內容要顯示，它們將不會有多大用處。 

這就是為什麼分割式布局非常適合極簡網站設計的原因。畢竟，整個技術的目的是創造一種易於感知的簡單外觀。當您使用不必要的訊息使設計過載時，您將完全抹去分割布局的好處。

 

如何確定分割式是否適合您

在開始設計分割式網站設計之前，您必須確保此技術符合您的數字業務目標、滿足客戶需求並提供人們真正想要的東西。在很多情況下，分割式設計看起來是一種漂亮的趨勢，但並不能滿足品牌的要求。在這裡，我們提供有關該問題的快速建議。

 

如果您正在考慮為您的網站使用分割技術，我建議您問自己幾個問題：

1.它適合您的內容嗎？

2.是否有足夠的負空間使布局起作用？

3.您的用戶會喜歡這種布局還是會讓他們感到困惑？

4.將用戶的注意力分成兩半可以嗎？

5.要記住的最重要的事情是內容為王，分割式應該是一種向人們傳遞訊息的簡單方式。

著陸頁是分割式優勢的一個很好的例子。分割式最常用於建立有效且時尚的登錄頁面，這對於營銷目的非常有用。當涉及控制訪問者的焦點並將其定位到特定組件時，此技術非常有用。 

這對於提升整體用戶體驗也非常有幫助。例如，您可以在一側放置一些主題產品，而另一側將描述它們的主要特徵，或者提供比較等。

 

正確實施技術的關鍵點

在進行設計之前，正確的技術實現有幾個關鍵點，例如：

始終將可視內容縮放到不同的大小和密度，以便與行動裝置兼容設計。

採用主控新模式；例如，在拆分設計中，製作選單而不是導航欄。

使UI適應新的布局。例如，如果在橫向模式下在兩個部分之一上顯示影片，則它應該只保留一半，即使用戶將設備旋轉到縱向模式也是如此。

 

最佳分體式設計選項

通過在您的網站上使用分割式，您可以平等地強調兩個元素的重要性，同時允許訪問者立即在它們之間進行選擇。因此，出現在螢幕上的內容變得加倍重要。應該理解的是，用戶將尋找分隔塊之間的視覺連結，因此將它們視為類似於陰陽概念的東西。以下是實現分割式設計的一些技巧。

 

結合豐富的色彩和大膽的排版

隨著對平面和材料設計的需求增加，顏色和排版現在已經成為潮流引領者。豐富的色彩刺激視覺感知，大膽的排版強調文本內容。把它們放在一起，你就有了一個視覺上吸引人的有趣的布局。

 

鮮艷的色彩和有趣的排版的組合可以吸引注意力。

 

生動的彩色圖像和文字並排放置。

 

強調用戶對行動呼籲按鈕的關注

分割式2是設計視覺主題的絕佳方式，可讓您的行動呼籲更加明顯。負空間與獨特的垂直條相結合，有助於將項目受眾集中在重要區域和關鍵元素上。

 

上面的示例螢幕截圖側重於螢幕左側的行動呼籲。在開發許多人建議的登陸頁面設計時，這是一個很好的舉措。

 

把螢幕想像成一張卡片

分體式設計是由於「卡片」的流行而出現的一種模式。而所有遵循這種設計趨勢的網站，其實都支持這樣的理念：螢幕是一張大尺寸的卡片，同時每個區塊都是一個容器，為訪問者提供一個訊息和一個動作。

 

Si Le Solei設計的左側面板是一張卡片，而右側面板是一對。

元素的位置可能因這些對象而異。例如，在下圖中，右側被分成幾個較小的部分。

 

馬賽克形式的圖片排列的一種變體。

提示：儘量使塊儘可能簡單：在雜亂的螢幕上，用戶界面似乎非常過載。

 

在螢幕之間建立視覺過渡

儘管分割式設計中的模板在元素的多樣性上可能會有驚人的不同，但它們所在的容器之間必須存在某種聯繫。建立這種聯繫的一種可能方法是使用顏色。複製獨特的顏色，從一個部分到另一個部分進行視覺過渡。這對於品牌顏色或對比強烈的色調特別有效：

 

例如，在這裡，我們複製了品牌顏色，以在視覺上從帶有產品的圖片過渡到帶有該產品預購的螢幕。

另一種方法是在兩個螢幕上疊加一個元素（例如文本）。這可以提供額外的連結：

 

分割式設計中的細節可以重疊兩者。插圖 提供 網站無 污水海洋。

 

使用動畫來推動人們採取行動

高品質的動畫和互動效果鼓勵人們點擊按鈕。看看下圖中的Chekhov Alive網站。類似的技術只是要求您按一個按鈕來找到您的角色。

 

結論

分割式設計是一種有趣、實用且響應迅速的方式，可以建立有吸引力的外觀。然而，當談到它的實現時，它就沒有那麼簡單了。如果您打算在您的網站上使用分割，我們建議您問自己以下問題：

這種方法適合我的項目嗎？它的實施是否有足夠的負空間？

觀眾會欣賞這個決定，還是會讓人感到困惑？

將參觀者的注意力一分為二，會不會導致負面結果？