淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美發(fā)布者：本站     時(shí)間：2021-12-29 09:12:31

隨著審美的不斷提高，越來越多的設(shè)計(jì)具有一種不對(duì)稱的美感。越來越多的設(shè)計(jì)師將視覺重點(diǎn)放置到偏離視覺中央的位置，通過不對(duì)稱性來吸引用戶注意，打造一種特殊的視覺路徑。

過于對(duì)稱的設(shè)計(jì)，無法更自然高效的組織側(cè)邊欄、導(dǎo)航條等界面元素，對(duì)稱設(shè)計(jì)提供的空間也往往有限。而非對(duì)稱性具有一種視覺上的張力，將某種特殊的感覺轉(zhuǎn)化為用戶的興趣。盡管非對(duì)稱設(shè)計(jì)在布局調(diào)整上稍有難度，而且也會(huì)造成一種不平衡的感覺。然而用非對(duì)稱性設(shè)計(jì)取代對(duì)稱性設(shè)計(jì)，利大于弊，提供了更多的”可能”。這也是網(wǎng)頁(yè)設(shè)計(jì)師的進(jìn)階之路，成為高手都會(huì)嘗試的風(fēng)格，不妨現(xiàn)在我們就來先了解一下吧。

下面，我們收集了一些很有說服力的不對(duì)稱性設(shè)計(jì)網(wǎng)站，相比對(duì)稱性設(shè)計(jì)，這些網(wǎng)站具有更好的信息傳達(dá)、更個(gè)性化的特點(diǎn)。

不對(duì)稱性網(wǎng)頁(yè)設(shè)計(jì)案例

The Enterprise

鋸齒感極強(qiáng)的線條以及不對(duì)稱的形狀，配以華麗的色彩，這種不對(duì)稱設(shè)計(jì)的視覺沖擊力絕對(duì)要比對(duì)稱性設(shè)計(jì)大。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Sjobygda

設(shè)計(jì)師很有技巧的運(yùn)用了背景圖像，采用了不對(duì)稱設(shè)計(jì)，讓背景的功能性變得更強(qiáng)，呈遞給用戶壯觀的視覺內(nèi)容。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Rock Werchter

很巧妙，很有意思。在傳統(tǒng)布局的基礎(chǔ)上，稍稍改變了右邊黃色欄中每一欄的寬度。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Mediascop

落落大方，干爽整潔，設(shè)計(jì)師采用了大道至簡(jiǎn)的設(shè)計(jì)，稍稍再加入一點(diǎn)不對(duì)稱，這個(gè)扁平化的網(wǎng)站設(shè)計(jì)的非同尋常，提供了一種巧妙的視覺對(duì)照。歪斜的側(cè)欄和導(dǎo)航元素很協(xié)調(diào)的搭配到一起，將更多的空間留給內(nèi)容。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

DesignBlvd

圖像和文本結(jié)合，內(nèi)容為主，風(fēng)格非常清新有愛。布局雖然不對(duì)稱，但是卻能達(dá)到一種大約4:6的平衡感，即使縮略圖的尺寸不同，效果也很驚嘆。選取了明亮的色彩主題以及較為柔和的圖像，讓人感覺非常的典雅正規(guī)。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Artegence

采用了偏離中心的不對(duì)稱設(shè)計(jì)，網(wǎng)格線為基礎(chǔ)的布局。設(shè)計(jì)師采用了簡(jiǎn)單的矩形以收束內(nèi)容，防止信息過于泛濫。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Timberline

風(fēng)格獨(dú)一無二，左邊的菜單分割的非常整齊，同時(shí)稍微為大圖像背景增添了一點(diǎn)趣味性。非常不拘一格、值得借鑒的導(dǎo)航設(shè)計(jì)。盡管視覺不對(duì)稱，但是感覺上非常的到位。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Valencia DMC

奢華質(zhì)感，非常有意思，僅僅改變了部分區(qū)域的透明度，就能實(shí)現(xiàn)完美劃分。透明圖像內(nèi)的文本讓人感覺十分優(yōu)雅。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

AmplifiQ

多邊形風(fēng)格，塑料黑，蜂巢一般的圖像呈遞手段。圖像、文本配合的相得益彰，看上去毫無違和感。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Sarasota Web Design

具有引爆效果的圖像，扁平化的多邊形，具有一種圖像上的韻律感，即使不對(duì)稱，也很美。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Senador Volstead

不對(duì)稱設(shè)計(jì)在這里用來打造視覺焦點(diǎn)，突出了網(wǎng)站的標(biāo)語和按鈕。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Jose Guizar

分欄很獨(dú)特，看上去很不對(duì)稱，但是具有濃郁的設(shè)計(jì)感。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

The Touch Agency

以內(nèi)容為主的頭版設(shè)計(jì)，和那些視覺沖擊力極強(qiáng)的設(shè)計(jì)不同，此設(shè)計(jì)注重一種和氣、寧?kù)o的即視感。設(shè)計(jì)師借用傳統(tǒng)的三欄布局，但是寬度不同，不對(duì)稱感應(yīng)運(yùn)而生。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Osito

圓滑锃亮的引導(dǎo)頁(yè)，圖像文本二分天下，而文本占據(jù)更多，這樣，就能凸顯標(biāo)語和Logo.

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Eggsquis

兩欄布局，一欄窄而簡(jiǎn)約——導(dǎo)航欄，另一欄占據(jù)三分之二，圖像滾動(dòng)欄。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Alcyon

Logo的切分，半透明明對(duì)立不透明，正好兩等份。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Stylist Christel Winther

這就是完全不對(duì)稱的設(shè)計(jì)，但是視覺卻非常抓人，讓人感覺很平衡。這種方式很適合用來展示視覺作品集和照片，能給用戶留下強(qiáng)烈的印象。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

M4ID

該作品集網(wǎng)頁(yè)布局緊密，瓷磚片的感覺。每一塊的寬度都不同，突出了網(wǎng)站的Logo。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Reinast

不對(duì)稱，分兩塊。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Flavorit

強(qiáng)烈的不對(duì)稱設(shè)計(jì)，起到了分割文本，突出應(yīng)用優(yōu)點(diǎn)的作用。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Kinetik

大圖背景，而右邊那華麗的切分帶來一種精致的細(xì)節(jié)感。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

Panna’s en Akka’s.

切分，給文本部分留下的充足的空間，而圖片部分非常緊密，因而視覺吸引力都很強(qiáng)。

淺談如何嘗試網(wǎng)頁(yè)設(shè)計(jì)中不對(duì)稱的美,PS教程,

結(jié)論

創(chuàng)造不對(duì)稱性設(shè)計(jì)的方法有很多。文本、分欄、圖像、留白、多邊形都能起到這種效果。

在你的自由項(xiàng)目中，不妨多想想，多練習(xí)練習(xí)，在不對(duì)稱中找到和諧感。當(dāng)你的作品被稱贊，讓客戶眼前一亮的時(shí)候時(shí)，會(huì)比循規(guī)蹈矩更有優(yōu)越感和成就感。