不對稱的設計:創(chuàng)造完美的平衡格局

非對稱的設計是我們在工作中經(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/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末羽圃,一起剝皮案震驚了整個濱河市乾胶,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖识窿,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件牙躺,死亡現(xiàn)場離奇詭異,居然都是意外死亡腕扶,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門吨掌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來半抱,“玉大人,你說我怎么就攤上這事膜宋×蓿” “怎么了?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵秋茫,是天一觀的道長史简。 經(jīng)常有香客問我,道長肛著,這世上最難降的妖魔是什么圆兵? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮枢贿,結(jié)果婚禮上殉农,老公的妹妹穿的比我還像新娘。我一直安慰自己局荚,他們只是感情好超凳,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著耀态,像睡著了一般轮傍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上首装,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天创夜,我揣著相機與錄音,去河邊找鬼仙逻。 笑死挥下,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的桨醋。 我是一名探鬼主播棚瘟,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼喜最!你這毒婦竟也來了偎蘸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎迷雪,沒想到半個月后限书,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡章咧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年倦西,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赁严。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡扰柠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出疼约,到底是詐尸還是另有隱情卤档,我是刑警寧澤,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布程剥,位于F島的核電站劝枣,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏织鲸。R本人自食惡果不足惜舔腾,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望搂擦。 院中可真熱鬧琢唾,春花似錦、人聲如沸盾饮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丘损。三九已至普办,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間徘钥,已是汗流浹背衔蹲。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留呈础,地道東北人舆驶。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像而钞,于是被迫代替她去往敵國和親沙廉。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容