非對稱的設計是我們在工作中經(jīng)常遇到的重要概念之一,這種方法有趣而又耐人尋味接校,十分的吸引人猛频。
這種方法使用起來可能是非常的棘手,這也是為什么有些設計師不選擇非對稱設計的原因蛛勉,不過我們其實大可不必規(guī)避鹿寻,因為非對稱的設計,每個設計師都是可以做到的诽凌,只是需要多花些時間認真規(guī)劃毡熏。
在開始之初,最先需要考慮的是結(jié)構(gòu)和設計項目中對于對稱和非對稱的匹配關(guān)系的概念意識侣诵,如果打破常規(guī)的設計模式痢法,并且分解成更小的設計組成部分狱窘,那么這里面就會包含各種不同類型的平衡關(guān)系。(想想有視差滾動的網(wǎng)站或在設計面板中的畫布區(qū)域的圖像)
想想為什么我們正在使用的這種非對稱比較好财搁?如果明確知道自己想要的視覺效果蘸炸,將有助于確定如何通過技術(shù)手段來實現(xiàn)這種效果。另外非對稱性設計是非常吸引用戶注意力的妇拯,盡管有些不平衡幻馁,但是我們可以通過一些簡單的手段使得更加自然。不過要說明的是越锈,在畫布上的東西應該相信自己直覺的仗嗦,但是要確定是:看起來真的好,還只是一種自己的感覺甘凭。
在兩者之間神奇的實現(xiàn)一種平衡稀拐,良好的非對稱設計中是包括平衡的,使用這種設計方式會導致整體感有失平衡丹弱,這個時候就需要通過在一定的空間里面使用補償元素德撬,創(chuàng)造和運動的中心點,了解元素之間的視覺重量躲胳,加入焦點顏色和視覺引導線以及通過一些網(wǎng)格來創(chuàng)建這種平衡蜓洪。
使用空間
非對稱的設計是極簡主義設計未來的一個趨勢。使用這么大的空間設計坯苹,很容易平衡簡單的對象元素或圖像隆檀,特別是對于一個較大的白色或黑色背景。在設計中的留白和使用負空間粹湃,來保持元素之間的平衡事恐仑,應該使用足夠的對比度。這將直接穿過用戶的視線而達到設計的目的为鳄。
例如上面的網(wǎng)站“Ike Kligerman Barkley”裳仆,就采用對角線的平衡關(guān)系使得用戶在圖像和左上角的導航欄之間形成平衡關(guān)系,這種方式比較大膽孤钦,但是正是這種極簡風格歧斟,導致用戶很希望點擊左上角的菜單欄以及相關(guān)鏈接。
強調(diào)運動
想象一下一個輪胎滾向山腳下偏形,我們的腦海中立馬就很形象的浮現(xiàn)這樣的場景静袖。因此,當我們在設計一種非對稱設計時壳猜,也要考慮到其一定的運動規(guī)律勾徽。
1滑凉、視線會習慣性的對屏幕的左上角開始统扳,并且橫向移動的區(qū)域較大喘帚。
2、視線會遵循一定的方向提示咒钟,例如我們使用箭頭來指向特定的方向吹由,就會明顯感覺到。
3朱嘴、視線會隨著屏幕中圖片的內(nèi)容指向倾鲫,而保持一致性及指向同一個方向。
4萍嬉、由于視線是從左到右的順序乌昔,所以要想改變這種瀏覽模式就必須要有一個更加強有力的方向指向來指向另一個方向。
例如“Leen Heyne Fine Jewelry”就是使用運動來吸引眼球到特定的產(chǎn)品上壤追。而幾何的形狀是將視線指向正確的方向磕道,同時創(chuàng)造一種感覺:手環(huán)和戒指在屏幕上有很自然的滾動趨勢,而這種方向行的指示又會影響到其他的元素以及指向下一步行冰,例如導航欄和移動到下一頁的箭頭溺蕉。
添加焦點顏色
對于非對稱的彩色圖案,通常是對比度和色彩上都有較高的飽和度和明度悼做。想象一下黑色的背景上或是頂部有大量的白色疯特,然后涂抹上一個色調(diào)鮮明的顏色。高對比度的色彩將會用來作為聚焦和視覺重量平衡的一個重要組成部分肛走。
非對稱的色彩組合漓雅,可以使用色輪來創(chuàng)建。選擇的色彩一定要落在傳統(tǒng)的非對稱的彩色模式之上羹与,想想看故硅,有顏色就會產(chǎn)生影響,此時使用顏色來強調(diào)和突出非對稱的輪廓以及其他元素纵搁,所以顏色也可以是非常好的設計元素吃衅,例如幾何形狀、排版以及作為下一步的聯(lián)絡節(jié)點腾誉,從而使得整體達到平衡背景的作用徘层。
例如“HLK Agency”利用白色的文字并采取幾乎對稱的排版,讓我們再看看下面藍色的下劃線和按鈕利职,此時就產(chǎn)生了一個簡單的焦點以及變成非對稱趣效,并于頂部的漢堡式菜單和logo相對應。
網(wǎng)格的使用
盡管有時候我們不會使用網(wǎng)格猪贪,但是這仍然是設計中很重要的一部分跷敬。使用網(wǎng)格來創(chuàng)建非對稱性的設計,將會幫助我們實現(xiàn)元素組織之間的平衡關(guān)系热押。
當我們考慮到在網(wǎng)格上的每個元素時西傀,就會一同考慮相關(guān)元素與之形成的關(guān)系斤寇。設計時就會明白他們以一定的水平或垂直的方向上存在著,就可能會感知到在畫布中兩者之間的視覺重量是否有相互抵消:從左到右拥褂,從上到下娘锁。
想一想當我們在網(wǎng)格的一端添加元素的時候就會在與之相對應的地方添加一個元素,與之相互抵消饺鹃。而要建立很明顯的非對稱設計莫秆,那就考慮使用奇數(shù)列的網(wǎng)格,或者是在網(wǎng)格中一側(cè)是另一側(cè)視覺重量的一倍悔详。
例如“BrightByte Studio”就是采用這種垂直的模式來保持一致镊屎,并且使對稱元素和非對稱元素之間相互混合。(我們看到網(wǎng)站上第一眼是左邊兩行左對齊的文字茄螃,這種對齊是創(chuàng)建元素之間平衡關(guān)系的基礎(chǔ)杯道,另外我們還會注意到頂部的logo和底部的導航欄也是與之左對齊的,整體上符合視線運動規(guī)律责蝠。)
創(chuàng)建重量
非對稱設計的存在根本在于“重量”党巾,因為我們首先會被“較重”的元素吸引。我們可以確定的是圖片本身就帶有一定的視覺重量霜医。它可以是真實的圖片齿拂,也可能是空白等。
通過一個焦點元素來平衡并突出較重的元素肴敛,而實現(xiàn)這種效果可以是多種多樣的方式署海。當使用上面提到的方法之后,可以采用加權(quán)的方式判斷哪種情況下效果最好医男,并進一步加強這種效果砸狞。
例如“Cranes of Cambridge”就使用了一個引人入勝的照片作為設計“權(quán)重”,另外是兩個我們第一眼不會注意的兩種元素:較輕的文字和圖案相比于照片顯然輕很多镀梭。另外我們可以從照片中人物的視線中看向右邊文字(眼睛也是一種指示方向的隱含運動)刀森,而且導航欄也使用垂直的方式布局,幫助我們更快速回到屏幕內(nèi)容區(qū)域报账。
結(jié)論
非對稱可以是一種完美又和諧的設計科學研底,雖然近幾年的發(fā)展趨勢主要集中在大量的對稱設計上,但是在不久之后相信還是會有很多的非對稱中平衡設計的出現(xiàn)透罢,因為它們在視覺上更加引人入勝的榜晦,并通過一些精妙的設計結(jié)構(gòu)與用戶直接進行溝通。
作者:Carrie Cousins
http://designshack.net/articles/layouts/asymmetrical-design-creating-beautiful-balanced-layouts/