在您的網頁設計中充分利用對稱和不對稱的平衡

網站的視覺平衡對用戶體驗具有即時（通常是本能）影響。 平衡的構圖感覺正確，用戶往往會立即接受。 對稱和不對稱的使用是視覺平衡的基礎。

在您的網頁設計中實現對稱和不對稱的平衡非常簡單——理論上——但每次都需要實踐才能做到正確。 在這篇文章中，我們將看看設計中的對稱和不對稱原則，以更好地了解它們如何協同工作以實現視覺平衡。

讓我們開始吧！

什麼是平衡組合？

視覺平衡使人們在看到它時感覺良好。 視覺平衡和視覺失衡之間的區別是舒適和滿足的感覺與厭惡和不適的感覺。 當某物具有良好的視覺平衡時，它立即變得有意義。 它給人的感覺是沒有什麼不合適的，並且構圖就像它應該的那樣。

對稱和不對稱是設計師用來在構圖中實現視覺平衡的兩種設計技術。 對稱和不對稱是反義詞，因此對稱和不對稱平衡是相反的。

讓我們更深入地了解每個術語的定義。

什麼是對稱

對稱性是一種視覺數學規則，它指出，如果一條線穿過圖像的中心，則兩側即使不相同也會非常相似。 這條線可以水平、垂直或對角線繪製，因此導致水平對稱、垂直對稱和對角對稱。 這三個被認為是“反射對稱”，因為它就像圖像反射自身。

此外，還有其他三種對稱類型： 徑向、橫切和引導反射。 您可以使用這四種對稱風格中的任何一種來實現平衡的構圖。

反射對稱

最常見的對稱類型是反射對稱。 這個想法是分界線的每一邊幾乎與另一邊相同。 例如，切成兩半的蘋果或張開翅膀的蝴蝶。

圖片來自 korkeng/shutterstock.com

徑向對稱

徑向對稱圍繞圓形或徑向形狀重複。 例如，曼荼羅和圓形徽章。

圖片來自 Devi108/shutterstock.com

平移對稱

平移對稱是指形狀在視覺空間中一遍又一遍地重複。 例如，無縫模式。

圖片來自andrykay/shutterstock.com

引導反射對稱

引導反射對稱類似於反射對稱，但在軸上滑動。 例如，腳印。

圖片來自 Mark Rademaker/shutterstock.com

什麼是不對稱

不對稱本質上是對稱的對立面。 在視覺上，構圖的每一面都與另一面不同。 與從一開始就是一種平衡的視覺技術的對稱不同，不對稱更難平衡。 了解不對稱平衡如何工作的最好方法是使用岩石平衡藝術。 在下圖中，您可以看到一組平衡石。 即使岩石看起來完美平衡，成分也不對稱。 即使兩側不相等，構圖仍能喚起和諧和視覺平衡。

圖片來自 Vladnik/shutterstock.com

由於不對稱平衡更難實現，因此它也比常規對稱平衡更令人愉悅。 這就是為什麼這麼多網站和雜誌使用不對稱佈局來創建平衡構圖也就不足為奇了。

網頁設計中對稱平衡的例子

現在我們知道什麼是對稱和不對稱，以及這些技術如何幫助您實現視覺平衡。 讓我們將這些知識應用到網頁設計中，並通過一些示例來激發您自己的創作靈感。

Polugar俄羅斯麵包酒

Polugar 網站的登陸使用反射對稱來展示他們的產品風格。 一個瓶子出現在中心，並在其兩側形成漩渦形狀。 稍後，當您滾動時，對稱性會隨著三個瓶子填滿屏幕而擴展，底部的三個廣告詞可幫助您導航。 產品頁面遵循三列對稱網格，非常賞心悅目。

Max Shkret 藝術家組合

Max Shkret 的這個設計作品集網站也以稍微不同的方式具有反射對稱性。 對稱性一直擴展到邊緣。 網站的其餘部分是對稱的，但不如加載頁面完美。

Olivier Ouendeno 網頁設計作品集

設計師 Olivier Ouendeno 的這個作品集網站是引導反射對稱的一個很好的例子。 它是水平和垂直的，實現了一種獨特的視覺平衡，幾乎看起來像有序的混亂。

網頁設計中不對稱平衡的例子

就像我上面提到的，非對稱平衡不像對稱平衡那麼容易實現。 然而，當網頁設計師管理不對稱的平衡時，結果是光榮的。 讓我們來看看網頁設計中不對稱平衡的一些例子。 這些肯定會激發您的創造性思維。

主頁 Societe Designer 網站

當您第一次登陸 Home Societe 網站時，您會看到看起來像是雜誌傳播的一部分。 左側的全高圖像構成一個垂直菜單。 右邊是一個短語的部分是瘦襯線字體。 這個網站乍一看還不錯，但是當您使用水平滾動條時，它變得栩栩如生。 整個站點始終具有完美的不對稱平衡。

Headery CBD 油

Headery CBD Oil 的這個網站乍一看可能是對稱的，但它實際上是最微妙的不對稱平衡。 產品標題位於屏幕中央，形成初始對稱，但滴管瓶在左側。 這會在右側留下更多空白空間。 奇怪的是，黃色的聊天按鈕創造了平衡。

輔助資本網站

Adjuvant Capital 的網站使用對角線不對稱平衡，當屏幕更小時看起來更好。 右邊的三角形是一個視頻，它平衡了左上角的文本塊。

具有對稱和非對稱平衡的 Divi 佈局

你怎麼認為？ 哪種技術更適合視覺平衡，對稱還是不對稱？ 我認為兩者都非常了不起。 在看了一些靈感之後，你一定想自己嘗試一下這些視覺平衡技巧。 值得慶幸的是，Divi 庫有很多佈局可以幫助您入門。

讓我們來看看。

加密貨幣佈局 – 對稱平衡

Cryptocurrency Consulting 佈局具有很好的反射對稱平衡。 右側的白色按鈕在藍色背景上非常突出，因為它迫使整體對稱的視覺不對稱。

Okape Juice Shop – 對稱平衡

Divi 的另一個精美對稱佈局是 Okape Juice Shop 佈局。 三個瓶子以屏幕為中心，形成主要的對稱性。 佈局的其餘部分保持了微妙的引導反射對稱性。

脊椎按摩療法服務 – 不對稱平衡

新的脊椎按摩療法佈局具有美麗的不對稱平衡。 它的左側有一個大圖像，右側有一個橙色按鈕，與橙色圖像框陰影相平衡。 佈局的每個部分都設置了不對稱的平衡，但是當您滾動整個內容時，它也感覺像是引導反射對稱。

觀光旅遊——不對稱平衡

觀光旅遊的這種佈局是一種不對稱的平衡，看起來像美麗的混亂。 由於盒子的直線與照片的模糊和波濤洶湧的邊緣交織在一起，視覺平衡很有吸引力。

輪到您進行視覺平衡設計

有了所有這些視覺靈感，輪到您將對稱和不對稱應用到您的設計中。 記住對稱和不對稱的規則以及如何實現平衡的構圖。 確保您的用戶希望留在您的網站上並使用這些技術進行導航。

精選圖片來自平面藝術/shutterstock.com