UI設(shè)計(jì)教程之留白的意義及美學(xué)價(jià)值

時(shí)間：2023-09-05 10:30:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-05 10:30:01 來源：網(wǎng)站運(yùn)營

UI設(shè)計(jì)教程之留白的意義及美學(xué)價(jià)值：留白是指版面中沒有放置任何元素的空白處。我們在設(shè)計(jì)的時(shí)候，不能只是想“這些元素?cái)[在哪里”，同時(shí)也應(yīng)該思考“哪里應(yīng)該空出來”。

留白的設(shè)定將會(huì)大幅度改變設(shè)計(jì)所呈現(xiàn)出來的效果。把所有的元素都放置在版面的中央，版面就會(huì)產(chǎn)生均等的留白，如下圖。







如果你要讓排版產(chǎn)生“穩(wěn)定感”，就可以選擇這種辦法。

相對地，如果是讓所有元素居左或者具有對齊，就會(huì)讓密度高的部分和密度低的部分產(chǎn)生對比，如下圖，右側(cè)就留白了，這樣會(huì)給人一種“層次感”。

一、留白的美學(xué)價(jià)值

1.留白的作用

留白除了可以制造層次感，還具有整合多個(gè)元素、強(qiáng)調(diào)重點(diǎn)的作用。

如下圖，文字間均等排列，比較不容易看得出哪些元素有關(guān)聯(lián)性，哪些元素最重要。







設(shè)計(jì)中，在你想要突出的部分周圍留白，可以與其他元素產(chǎn)生對比，這樣就能起到強(qiáng)調(diào)的作用。

2.留白的大小與賦予版面的印象

看看下面這兩張圖。商品擺放密集無序，會(huì)產(chǎn)生熱鬧、繁雜、便宜的感覺;而奢侈品專柜一般陳列擺設(shè)會(huì)間隔很大，這樣可以呈現(xiàn)出高級、寬敞、舒適的感覺。







這也是留白的意義所在，留白少，版面呈現(xiàn)熱鬧、歡樂的氣氛;留白多，會(huì)給版面增加“呼吸感”，即寬敞、舒適感。

3.留白呈現(xiàn)的空間感

在設(shè)計(jì)元素比較少的時(shí)候，如果將元素放大放置在頁面中央，上下左右的留白區(qū)域均等，則頁面顯得中規(guī)中矩。如下圖左。

但如果將元素往角落稍微移一點(diǎn)，增加另一區(qū)域的留白面積，則會(huì)讓排版更加有空間感。如下圖右。







4.留白設(shè)計(jì)的基本技巧

留白的基本操作辦法是：居左、居右、居上、居下對齊，而不是常規(guī)的居中對齊。

居中對齊之所以不合適，是因?yàn)槿绻婚_始就將主要元素放置在頁面中央，均等的留白難以呈現(xiàn)空間感，也會(huì)限制其他元素的編排，難以變化出編排的樣式。

但如果是將主要元素放置在角落，剩下的空間則可以利于各種版面的編排。如上圖。

二、留白的意義

1.突出主題

留白的目的就是讓主題更加突出，留白的空間比例也是有很大的區(qū)別。







通過這兩張圖可以看出，留白是主題的領(lǐng)地，越多的留白，主題被注視的幾率越高，留白的時(shí)候不要太貪心，否則會(huì)使畫面混淆，使主題表現(xiàn)得非常模糊。適當(dāng)?shù)牧舭?，才能將主題更好地表現(xiàn)出來。

2.簡化畫面







留白的最初的意義就是使畫面簡潔，使畫面變得舒適簡單，簡而不空。

3.增強(qiáng)品質(zhì)感

在產(chǎn)品的設(shè)計(jì)中，適當(dāng)?shù)膶ζ溥M(jìn)行留白，會(huì)使畫面變得時(shí)尚。留白改善了人們視覺范疇，適當(dāng)?shù)牧舭讜?huì)使產(chǎn)品顯得高端。







以上就是我整理的UI設(shè)計(jì)中留白的意義及美學(xué)價(jià)值，希望對大家學(xué)習(xí)UI設(shè)計(jì)有所幫助！