不對稱網(wǎng)頁設(shè)計:創(chuàng)建美麗,平衡的布局

2022-06-14    分類: 網(wǎng)站建設(shè)

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

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


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

分享名稱:不對稱網(wǎng)頁設(shè)計:創(chuàng)建美麗,平衡的布局
當前網(wǎng)址:http://www.muchs.cn/news14/166964.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、用戶體驗、服務(wù)器托管、動態(tài)網(wǎng)站ChatGPT、網(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)

商城網(wǎng)站建設(shè)