不對(duì)稱網(wǎng)頁設(shè)計(jì)：創(chuàng)建美麗，平衡的布局

你對(duì)不對(duì)稱網(wǎng)頁設(shè)計(jì)的感覺如何？這個(gè)簡單的問題有時(shí)可能會(huì)引起設(shè)計(jì)師的激烈的討論。不對(duì)稱的網(wǎng)頁設(shè)計(jì)可能是設(shè)計(jì)趨勢中比較復(fù)雜以及難應(yīng)用的技術(shù)之一，但是當(dāng)你使用的好的情況下，你可以使用它們創(chuàng)建一個(gè)好、引人注目的網(wǎng)頁設(shè)計(jì)。
雖然不對(duì)稱的通常定義是兩元素之間缺乏對(duì)稱性或平等性，它并不是缺乏平衡。一個(gè)精明的設(shè)計(jì)人員可以使用不對(duì)稱來創(chuàng)造平衡和和諧，即使設(shè)計(jì)的兩面不相互反映。以下是如何使用的方法。
1.為什么是不對(duì)稱？
不對(duì)稱可能是你設(shè)計(jì)的設(shè)計(jì)技巧中最具影響力的概念之一。這是一個(gè)有趣和發(fā)人深省的技巧。
對(duì)于它的使用有時(shí)可能會(huì)是棘手的，這就是為什么一些設(shè)計(jì)師會(huì)選擇在它們的網(wǎng)站設(shè)計(jì)項(xiàng)目中遠(yuǎn)離完全不對(duì)稱。但你不必?fù)?dān)心，使用不對(duì)稱是每個(gè)設(shè)計(jì)師都可以做的事情，它只是需要計(jì)劃。
對(duì)于不對(duì)稱的使用，最好的開始是通過在你的網(wǎng)站設(shè)計(jì)項(xiàng)目中混合和匹配對(duì)稱和不對(duì)稱的概念。如果你將設(shè)計(jì)拆分成較小的部分，則會(huì)出現(xiàn)包含不同類型的零件（想想視差滾動(dòng)網(wǎng)站中的面板或畫布中圖像的設(shè)計(jì)）。
仔細(xì)想想你為什么會(huì)在你的設(shè)計(jì)中使用不對(duì)稱？了提前解你想要表現(xiàn)的視覺效果將有助于確定如何最好地使用技術(shù)來實(shí)現(xiàn)它和完成它。不對(duì)稱是活躍的，能夠產(chǎn)生足夠的吸引力來引起用戶的注意，它在視覺上可能表現(xiàn)的形式很強(qiáng)烈，但是對(duì)于整體的網(wǎng)頁設(shè)計(jì)來說卻很自然。一旦在你的設(shè)計(jì)中有不對(duì)稱的元素存在，相信你的直覺，它看起來是正確的還是你對(duì)它毫無感覺？
平衡的實(shí)現(xiàn)是很神奇的一個(gè)過程。一個(gè)優(yōu)秀的不對(duì)稱設(shè)計(jì)應(yīng)該包括平衡，這樣可以使得項(xiàng)目的一部分對(duì)于其余部分來說不至于太強(qiáng)烈。你可以通過用空間來抵消元素來創(chuàng)建平衡，通過運(yùn)動(dòng)創(chuàng)建重點(diǎn)，使用顏色添加焦點(diǎn)，并使用網(wǎng)格進(jìn)行對(duì)齊和組織。
2.使用空間
不對(duì)稱性真正開始發(fā)展的起始點(diǎn)就是極簡主義的設(shè)計(jì)趨勢。相對(duì)于其他類型的網(wǎng)頁設(shè)計(jì)，設(shè)計(jì)師使用更多的空間，很容易將簡單的對(duì)象或圖像在較大的白色或深色背景之間進(jìn)行平衡。
白色或負(fù)面空間與設(shè)計(jì)元素之間的平衡行為應(yīng)該會(huì)形成對(duì)比。這將引導(dǎo)眼睛在網(wǎng)站設(shè)計(jì)中的有目的的瀏覽。
示例：在上面Ike Kligerman Barkley的網(wǎng)頁設(shè)計(jì)中，在設(shè)計(jì)上使用了高度的不對(duì)稱平衡來吸引用戶。屏幕底部的圖像與對(duì)角的品牌名稱和導(dǎo)航元素之間的拉鋸，幾乎讓你的注意力不得不聚焦在頁面上。該圖像讓你明白進(jìn)入該網(wǎng)站你是為了什么，并且通過最小框架的呈現(xiàn)可以鼓勵(lì)點(diǎn)擊鏈接。
3.強(qiáng)調(diào)動(dòng)作
想象一個(gè)輪胎滾下山坡，你可以馬上就在你的腦海中感覺到相對(duì)應(yīng)的動(dòng)作。當(dāng)你以不對(duì)稱的方式設(shè)計(jì)此動(dòng)作時(shí)，也會(huì)發(fā)生這種情況。
· 注意力將自然地從屏幕較大，較重的部分移動(dòng)到較輕的部分；
· 注意力將遵循方向上的提示，所以你可以使用指向特定方向的箭頭或形狀；
· 用戶的注意力將按照屏幕中圖像形成的路徑瀏覽，以便用戶瀏覽的方向和網(wǎng)頁設(shè)計(jì)中的是一樣的；
· 除非有一個(gè)作用力很強(qiáng)的元素拉向另一個(gè)方向，用戶的注意力將根據(jù)習(xí)慣從左向右依次過渡。
示例：Leen Heyne Fine Jewelry的網(wǎng)站設(shè)計(jì)使用動(dòng)作將眼睛吸引到它們的產(chǎn)品中。通過幾何形狀引導(dǎo)用戶按照正確的方向進(jìn)行逐一瀏覽，同時(shí)創(chuàng)造一種可以自然地滾動(dòng)頁面的感覺。這種方向性也會(huì)影響其他事情——它將使用導(dǎo)航箭頭移動(dòng)到下一頁。
4.通過顏色添加焦點(diǎn)
不對(duì)稱的顏色或圖案通常在對(duì)比度和顏色的組合上都比較強(qiáng)烈。試著想象在黑色的背景上使用明亮色調(diào)，或者在網(wǎng)頁設(shè)計(jì)的頂部大膽的白色圖片。具有較強(qiáng)烈色彩的對(duì)比度將增加在你設(shè)計(jì)中某一特定部分作為焦點(diǎn)或增強(qiáng)其視覺重量。
你可以使用色輪來創(chuàng)建不對(duì)稱的顏色組合。選擇不符合傳統(tǒng)顏色規(guī)則的顏色配對(duì)和組合，以獲得不對(duì)稱感?？紤]那些很少用于強(qiáng)調(diào)的顏色，使用顏色突出顯示并強(qiáng)調(diào)不對(duì)稱輪廓中的其他元素。作為實(shí)現(xiàn)平衡的次要焦點(diǎn)，顏色與幾何形狀，排版等元素甚至背景中的元素需要盡可能的相似。
示例：HLK Agency在其網(wǎng)頁設(shè)計(jì)中使用顏色進(jìn)行幾乎對(duì)稱的設(shè)計(jì)布局。藍(lán)色的下劃線和按鈕創(chuàng)建了一個(gè)簡單的不平衡焦點(diǎn)，但是通過微妙的漢堡包菜單和在左上角的品牌圖標(biāo)有使頁面在一定程度上保持了平衡。
5.不要忘記網(wǎng)格
雖然你可能沒有使用網(wǎng)格來創(chuàng)建對(duì)稱效果，但它在你的設(shè)計(jì)過程中仍然是重要的組成部分。使用網(wǎng)格創(chuàng)建不對(duì)稱將有助于實(shí)現(xiàn)平衡和使你的網(wǎng)頁設(shè)計(jì)有組織感。
考慮網(wǎng)格上的每個(gè)元素，這在任何其他設(shè)計(jì)項(xiàng)目中都是一樣的。它們以某種方式水平和垂直的方式放置嗎？在頁面上是否存在哪一個(gè)邊或元素偏重了？
將網(wǎng)格視為一種參考——對(duì)于你添加在一邊的每個(gè)元素，另一邊需要以適當(dāng)?shù)姆绞降窒蛘哒f使兩邊保持重量上的平衡。如果你需要在你的網(wǎng)站設(shè)計(jì)中創(chuàng)建明顯的不對(duì)稱，請(qǐng)考慮使用奇數(shù)列的列網(wǎng)格，在網(wǎng)格的一邊創(chuàng)建等于列寬度的元素，另外一個(gè)是它的兩倍。
示例：BrightByte Studio使用柱狀網(wǎng)格，將元素對(duì)齊并組織成對(duì)稱和非對(duì)稱的兩種元素，但是你看到的第一個(gè)可能是屏幕中間的左對(duì)齊文本，以這種方式使用網(wǎng)格會(huì)在元素之間創(chuàng)建一個(gè)固有的平衡。請(qǐng)注意頁面底部的導(dǎo)航鏈接和頂部頁面鏈接如何使用下滑線作為主要文本和導(dǎo)航元素的區(qū)分。
6.創(chuàng)造重量
不對(duì)稱概念的根源在于，在頁面上存在的某種元素如此“沉重”，以至于它可以馬上被你觀察到并擠在腦中。所以，在進(jìn)行這一部分的應(yīng)用時(shí)，先要確定在你的網(wǎng)頁設(shè)計(jì)中的圖像的哪一部分將承載主要的視覺重量。它可以是以圖像或排版，甚至是空格的方式實(shí)現(xiàn)。
通過對(duì)比度可以平衡頁面中重的元素——使用一個(gè)較輕的元素，以不同的方式吸引用戶的注意力。重量與上述其他技術(shù)結(jié)合的使用效果。
例如：Cranes of Cambridge的網(wǎng)站設(shè)計(jì)使用一張引人注目的照片作為設(shè)計(jì)中“重”的元素。在頁面中它被兩個(gè)元素平衡掉——其中一個(gè)你可能在最開始不會(huì)注意到，在重量上，擁有更輕感覺的文字和標(biāo)志。它同時(shí)也被一個(gè)側(cè)邊的柱狀導(dǎo)航所抵消，這樣做也有助于你查看整屏的內(nèi)容。
總結(jié)
不對(duì)稱設(shè)計(jì)是一種結(jié)合視覺以及和諧的設(shè)計(jì)技術(shù)。雖然設(shè)計(jì)趨勢最近集中在很多對(duì)稱性的網(wǎng)頁設(shè)計(jì)布局上，但是很有可能在一些時(shí)候或一些特殊的情況下需要這種“不平衡”來均衡你的設(shè)計(jì)。這不僅在視覺上是有趣的，同時(shí)它能以微妙的方式幫助用戶理解和瀏覽你的網(wǎng)頁設(shè)計(jì)。

對(duì)于那些需要對(duì)稱設(shè)計(jì)的完整項(xiàng)目來說，不對(duì)稱設(shè)計(jì)也有一定的影響，以及也能發(fā)揮一定程度的作用。所以，為什么不現(xiàn)在就嘗試在你的設(shè)計(jì)中使用這種技術(shù)呢？

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

分享名稱：不對(duì)稱網(wǎng)頁設(shè)計(jì)：創(chuàng)建美麗，平衡的布局
當(dāng)前網(wǎng)址：http://www.bm7419.com/news14/166964.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、用戶體驗(yàn)、服務(wù)器托管、動(dòng)態(tài)網(wǎng)站、ChatGPT、網(wǎng)站建設(shè)

廣告

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