旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > UI設(shè)計中負(fù)空間的使用小技巧

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

時間:2020-10-21來源:m.lb577.com點(diǎn)擊量:作者:Arya
時間:2020-10-21點(diǎn)擊量:作者:Arya

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

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

 

  什么是負(fù)空間?
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  舉個例子
 

  01
 

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

 

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

  02
 

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

 

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

  03
 

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

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

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

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.lb577.com 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖