UI設(shè)計中負(fù)空間的使用小技巧

　　正確使用UI設(shè)計中的負(fù)空間，能為你的作品帶來更大的提升，今天AAA教育郭老師就針對UI設(shè)計中的負(fù)空間使用技巧進(jìn)行簡單的分享。
 

　　什么是負(fù)空間?
 

　　基本上，負(fù)空間是版式中保留為空白的區(qū)域。它可能不僅放置在對象周圍，也可能在它們之間和內(nèi)部。負(fù)空間是頁面或屏幕上所有對象的呼吸空間。它不僅定義了對象的界限，而且根據(jù)格式塔原理在對象之間建立了必要的聯(lián)系，并達(dá)到了一定的視覺效果。
 

　　因此，留白是一種合理的設(shè)計元素，會對用戶體驗(yàn)產(chǎn)生重大影響?；釉O(shè)計基金會(IDF)的Mads說： “空白 就像一塊畫布，它是將設(shè)計中的元素結(jié)合在一起的背景，使它們脫穎而出” 。
 

　　空白空間和負(fù)空間有什么區(qū)別?
 

　　答案很簡單: 沒有區(qū)別 。這些術(shù)語完全可以互換。
 

　　術(shù)語“空白”來自于印刷設(shè)計，因?yàn)槟菚r的頁面大多是白色的，所以空白指的是周圍的一切，包括字母或符號之間和內(nèi)部以及插圖周圍的一切。今天，當(dāng)我們在設(shè)計中使用這個詞時，它和白色沒有任何關(guān)系:它指的是空白區(qū)域，而不是顏色

　　重要的是要記住，網(wǎng)頁設(shè)計中的負(fù)空間 不必僅是白色 -您可以使用任何顏色，紋理，甚至圖案或背景圖像。
 

　　負(fù)空間為什么重要?
 

　　想象自己走進(jìn)一個堆滿東西的房間。書架、箱子、袋子、成堆的書和衣服，桌子上堆滿了各種各樣的東西。你能集中精力在這種情況下嗎?這和用戶打開頁面或屏幕時的感覺是一樣的。
 

　　客戶和一些設(shè)計師可能都希望在一個頁面或屏幕上放置盡可能多的元素和功能，他們認(rèn)為這樣可以對客戶有幫助。但這是錯誤的:實(shí)際上，用戶并不需要一次性得到所有東西。更重要的是，過多的元素堆積會極大分散用戶的注意力。正如Aarron Walter所提到的 “如果所有的東西都在大喊大叫吸引觀眾的注意力，那么他們什么也聽不到”
 

　　關(guān)于負(fù)空間，我們經(jīng)常提到以下幾點(diǎn)：
 

　　1)它提升了頁面的 易瀏覽性
 

　　2)它增強(qiáng)了 UI視覺層次
 

　　3)它使 元素之間的聯(lián)系 清晰可見，而不需要額外的手段，如框架，箭頭等
 

　　4)它為頁面提供了 足夠的空間 ，用戶不會感覺雜亂
 

　　5)它將用戶的注意力集中在 核心元素 上，不易分散注意力。
 

　　舉個例子
 

　　01
 

　　圖形設(shè)計中的負(fù)空間通常出現(xiàn)在Logo，插圖，海報和創(chuàng)意字體上，它們成為UI視覺演示中的活躍部分，從而使關(guān)鍵對象更具表現(xiàn)力。例如，在下面的插圖中，我們可以看到負(fù)空間元素(月球)如何起到與背景形成對比的作用，使宇航員看起來更加生動有活力。
 

　　02
 

　　UI設(shè)計負(fù)空間也有好壞之分，讓我們看看優(yōu)秀的例子，《大城市指南》的登陸頁。這里設(shè)計師運(yùn)用了背景照片，景深起到了負(fù)空間的作用。更重要的是，照片的元素和文字是相互關(guān)聯(lián)的:它使負(fù)空間成為設(shè)計的活躍元素，并給頁面一個統(tǒng)一和諧的外觀。
 

　　03
 

　　手機(jī)應(yīng)用程序Upper app，這里的負(fù)空間是全黑的，與界面的核心元素形成強(qiáng)烈的對比。只使用一條直線，然而，所有的布局看起來有組織和高可讀性，因?yàn)橛凶銐虻牧舭缀蜎]有干擾。它還支持設(shè)計師極簡的優(yōu)雅風(fēng)格，達(dá)到審美的滿足。
 

　　上述這些例子可以很容易地應(yīng)用到你UI設(shè)計或創(chuàng)造的任何東西上， 不必走極端就能很好地利用負(fù)空間。如果現(xiàn)在沒有使用留白的習(xí)慣，嘗試使用更多的留白，即使只是在項(xiàng)目的小細(xì)節(jié)部分(比如照片周圍的間距或其他UI元素)。你將得到極大的提升。這些小知識您學(xué)會了嗎？想學(xué)會更多實(shí)用的ui設(shè)計技術(shù)，還請您持續(xù)關(guān)注AAA教育。