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

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

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

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

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

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

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

當(dāng)前標(biāo)題：巧用不對稱設(shè)計打造有趣的網(wǎng)站頁面
分享地址：http://www.rwnh.cn/news/167642.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站策劃、品牌網(wǎng)站制作、網(wǎng)站改版、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)

廣告

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