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

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

　　什么是負(fù)空間?
 

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

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

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

　　答案很簡(jiǎn)單: 沒(méi)有區(qū)別 。這些術(shù)語(yǔ)完全可以互換。
 

　　術(shù)語(yǔ)“空白”來(lái)自于印刷設(shè)計(jì)，因?yàn)槟菚r(shí)的頁(yè)面大多是白色的，所以空白指的是周?chē)囊磺?，包括字母或符?hào)之間和內(nèi)部以及插圖周?chē)囊磺小＝裉?，?dāng)我們?cè)谠O(shè)計(jì)中使用這個(gè)詞時(shí)，它和白色沒(méi)有任何關(guān)系:它指的是空白區(qū)域，而不是顏色

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

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

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

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

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

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

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

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

　　4)它為頁(yè)面提供了 足夠的空間 ，用戶不會(huì)感覺(jué)雜亂
 

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

　　舉個(gè)例子
 

　　01
 

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

　　02
 

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

　　03
 

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

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