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

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

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

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

The Enterprise

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Sjobygda

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Rock Werchter

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Mediascop

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

DesignBlvd

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Artegence

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Timberline

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Valencia DMC

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

AmplifiQ

多邊形風(fēng)格,塑料黑,蜂巢一般的圖像呈遞手段。圖像、文本配合的相得益彰,看上去毫無違和感。高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Sarasota Web Design

具有引爆效果的圖像,扁平化的多邊形,具有一種圖像上的韻律感,即使不對稱,也很美。高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Senador Volstead

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Jose Guizar

分欄很獨特,看上去很不對稱,但是具有濃郁的設(shè)計感。

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

The Touch Agency

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Osito

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Eggsquis

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Alcyon

Logo的切分,半透明明對立不透明,正好兩等份。

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Stylist Christel Winther

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

M4ID

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Reinast

不對稱,分兩塊。

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Flavorit

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

Kinetik

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

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

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美

結(jié)論

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

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

原文地址:http://designmodo.com/asymmetrical-website-designs/
優(yōu)設(shè)網(wǎng)翻譯:@MartinRGB
轉(zhuǎn)摘請注明優(yōu)設(shè)網(wǎng)譯文出處,謝謝各位小編。

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計講座:每月邀請國內(nèi)互聯(lián)網(wǎng)公司設(shè)計前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音(YY頻道:156982)分享實戰(zhàn)經(jīng)驗。
設(shè)計微博:擁有粉絲量49萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ,歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航:全球頂尖設(shè)計網(wǎng)站推薦,設(shè)計師必備導(dǎo)航:http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎?
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號:【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加:

高手之路:嘗試網(wǎng)頁設(shè)計中不對稱的美
 

收藏 1
點贊 1

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。