當一個元素在設計上使用不對稱的空間設計技巧時，與其他周圍的元素相比，它看起來能更加的突出或者說特別，在視覺上它可能看起來會更加活躍，如果你正在考慮在你的網(wǎng)頁設計中添加一個鏈接/按鈕，而它剛好需要比其他相同的元素獲得更多的關注（或者簡單一點說，它是所有元素里面最重要的），這將是特別有用的。
今天，創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作通過案例，我們將仔細觀察通過對比度、間距和圖層這些常見的設計技巧所表現(xiàn)的不對稱性。我們將考慮可觀察的對比度，以及空間的不同使用是如何引起用戶的注意的。
不對稱并不總是與邊框，填充或溝槽的外部關系關聯(lián)。
不對稱也可以涉及圖像縮放或文本對齊方式等內(nèi)部關系。例如，圖片集可能顯示5個縮略圖，其中位于中間的可以略大于其他的縮略圖，這樣就分清了主次，是中間的那張圖在網(wǎng)頁設計上主要負責用于捕獲用戶的注意。不對稱對于將注意力引導到頁面上特定區(qū)域或頁面中的特定元素是非常好用的一個技巧。
在apple-mac的介紹網(wǎng)頁設計中你可以很清楚的找到這種不對稱布局
而且，正如我們在免費電子書Web UI Design for the Human Eye中所描述的那樣——有時不對稱就只是為了不對稱是很有用的。
我們來看看如何通過對比度，間距和圖層來表示不對稱性。
1.可觀察對比度
通過消除干擾，你可以做到“強制”用戶只關注你想讓他們立即看到的內(nèi)容。
怎么做呢？
你可以將主要的設計效果應用于這些對于你來說重要的區(qū)域里，如使用背景漸變甚至是jQuery動畫。這些效果可以用于一個或兩個元素，使它們脫穎而出。
當你在欣賞Sketch的網(wǎng)站設計時你可以參考很多不對稱的設計方法尤其是在按鈕方面
對于這一條來說，我最喜歡的例子之一是Sketch by Bohemian Coding的主頁。你可以看到，在它的網(wǎng)頁設計上混合了深色和淺色的顏色搭配，它們原本可能是沖突的，但是在這個設計上卻沒有，它們將對比度混合成一個統(tǒng)一的布局。
在它的標題部分，你會注意到有兩個按鈕：一個用于免費試用，另一個則用于購買。兩個按鈕都是藍色的并且占用相同的空間。然而，免費試用按鈕使用了通常被稱為“幽靈按鈕”的“空”背景。通過分層放置在深色背景上面，看起來免費試用按鈕似乎落后于背景。
相反，購買按鈕因為使用淺藍色背景和白色文字，使得它在黑暗的背景下顯得異常突出和搶眼。當你的眼睛在標題上面快速瀏覽的時候，很明顯，購買按鈕幾乎是立即就能吸引你的注意。這是由顏色引起的，也是由元素之間添加的空白空間引起的。

使用垂直或水平的空白空間，可以使按鈕與標題文本分離開。由于一個按鈕比另一個按鈕更亮，使它的空間感更強從而避免了其他元素的干擾，它自然而然地就捕獲了用戶的注意力。

你可以在同一個網(wǎng)站的底部看到類似的按鈕樣式：
你會注意到Sketch的網(wǎng)頁設計在很多元素的應用和設計上都帶有不對稱基因
在這種情況下，用戶只能選擇提交電子郵件或保留信息。

由于Sketch想要在用戶輸入信息后能盡快提交電子郵件，因此輸入字段和提交按鈕之間的距離更加緊密。 這利用了菲茨定律，因為你減小了距離（和大小保持固定），會加快你在元素之間移動所花費的時間，這樣就能減少你再次考慮是否有必要性的時間了，這是一種策略。

最后，請注意，與“提交”按鈕相比，輸入欄的不對稱尺寸也會吸引你的眼睛到頁面的那一部分，這正是Sketch所需要的。
為了在某些頁面元素上吸引用戶的注意力，你可以使用空白的空間。要通過實驗以發(fā)現(xiàn)最有效的方法，你可以嘗試使用不同的A / B測試方法對不同的間距值進行測試。
以下是Sketch的網(wǎng)站上收集的一般注意事項：
· 對比度并不總是指顏色。 它還可以指與頁面上的其他元素的空間，大小和位置的對比元素；
· 取決于上下文，空白空間可能是明顯的或不顯眼的；
· 周圍元素在其他元素的自然可見度中發(fā)揮重要作用；
· 對稱創(chuàng)造記憶和和諧，而不對稱則引起注意。 相應地平衡。
2.空間利用注意
你可以在Procreate的網(wǎng)頁設計上找到一個稍微不同的示例，這是iPad介紹其數(shù)字繪圖和繪畫工具。通過屏蔽頁面中的其他不相關的元素，你會注意到整個頁站設計的布局是黑色的，并且具有超大的頁面元素。
Ipad的網(wǎng)頁設計在空間的應用上通過使用大背景來制造不對稱
這種網(wǎng)站設計像我們展示了如何在非常大的頁面上將焦點吸引到單個元素或者捉我們想給客戶看的主要內(nèi)容。正如上面的案例一樣，你可以看到插圖，演示繪畫和功能說明都占有自己的部分。
在空間的利用上，白色空間分隔文本和視覺內(nèi)容。設計在使用顏色來區(qū)分文本標題（較高的對比度）和一般頁面文本（較低的對比度），這個特別值得注意。
不對稱空間格局在不同的網(wǎng)頁設計上表現(xiàn)也可能不盡相同
通過將頁面分割成幾個部分，你將創(chuàng)建一個自然的內(nèi)容層次結構，然后將這些部分用獨特的風格（全屏幕背景，超大型排版，應用圖例等）分割，這些部分將變得更加明顯。
不過，請記住，并不是所有的網(wǎng)站設計都可以從這種大格局的樣式中受益，但這似乎是設計師們非常受歡迎的趨勢。當你應用適當時，它會使你的整體網(wǎng)頁設計看起來很棒。
3.交替布局
表面上，交替的內(nèi)容可能看起來并不會給你產(chǎn)生多少好感，因為這么做意味著你需要強迫讀者的注意力跟著你變化的布局跳轉。但是，正是由于內(nèi)容間隔得如此之好，使得讀取Z-Pattern比你先想象中要容易得多。
這種模式還迫使訪客停留在底部，因為設計不應該是填鴨式的展示信息。當然，這種模式唯一可能適用的場景，是通過以雅致的白色空間來雕刻出瀏覽路徑的方式。
看看上面的Wunderlist的APP網(wǎng)頁設計，我們可以看到在白色空間中出現(xiàn)的這種不對稱模式。認真考慮和應用不對稱間距，使其看起來很恰到好處，而不是激怒你的用戶。
我們可以從Wunderlist使用間距的設計模式中學到很多東西：
· 僅在你期望訪客注意頁面中的某些區(qū)域時使用，因為不對稱應該是有其目的；
· 重復圖案中的不對稱性使其變?yōu)閷ΨQ性；
· 文本或圖形之間的空間格局也將顯示為一個較大的圖案；

· 白色空間應該使瀏覽內(nèi)容更容易，更可預測。

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)
標簽：成都網(wǎng)頁設計,做網(wǎng)站公司, 企業(yè)網(wǎng)頁制作, 專業(yè)網(wǎng)站制作

本文題目：巧用不對稱設計打造有趣的網(wǎng)站頁面
當前路徑：http://aaarwkj.com/news42/167642.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、網(wǎng)站策劃、靜態(tài)網(wǎng)站、軟件開發(fā)、微信小程序、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)