UI設計教程之留白的意義及美學價值

2021-09-25 22:27:44 字數 1759 閱讀 2004

留白是指版面中沒有放置任何元素的空白處。我們在設計的時候,不能只是想「這些元素擺在**」,同時也應該思考「**應該空出來」。

留白的設定將會大幅度改變設計所呈現出來的效果。把所有的元素都放置在版面的**,版面就會產生均等的留白,如下圖。

如果你要讓排版產生「穩定感」,就可以選擇這種辦法。

相對地,如果是讓所有元素居左或者具有對齊,就會讓密度高的部分和密度低的部分產生對比,如下圖,右側就留白了,這樣會給人一種「層次感」。

一、留白的美學價值

1.留白的作用

留白除了可以製造層次感,還具有整合多個元素、強調重點的作用。

如下圖,文字間均等排列,比較不容易看得出哪些元素有關聯性,哪些元素最重要。

設計中,在你想要突出的部分周圍留白,可以與其他元素產生對比,這樣就能起到強調的作用。

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

看看下面這兩張圖。商品擺放密集無序,會產生熱鬧、繁雜、便宜的感覺;而奢侈品專櫃一般陳列擺設會間隔很大,這樣可以呈現出高階、寬敞、舒適的感覺。

這也是留白的意義所在,留白少,版面呈現熱鬧、歡樂的氣氛;留白多,會給版面增加「呼吸感」,即寬敞、舒適感。

3.留白呈現的空間感

在設計元素比較少的時候,如果將元素放大放置在頁面**,上下左右的留白區域均等,則頁面顯得中規中矩。如下圖左。

但如果將元素往角落稍微移一點,增加另一區域的留白面積,則會讓排版更加有空間感。如下圖右。

4.留白設計的基本技巧

留白的基本操作辦法是:居左、居右、居上、居下對齊,而不是常規的居中對齊。

居中對齊之所以不合適,是因為如果一開始就將主要元素放置在頁面**,均等的留白難以呈現空間感,也會限制其他元素的編排,難以變化出編排的樣式。

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

二、留白的意義

1.突出主題

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

通過這兩張圖可以看出,留白是主題的領地,越多的留白,主題被注視的機率越高,留白的時候不要太貪心,否則會使畫面混淆,使主題表現得非常模糊。適當的留白,才能將主題更好地表現出來。

2.簡化畫面

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

3.增強品質感

在產品的設計中,適當的對其進行留白,會使畫面變得時尚。留白改善了人們視覺範疇,適當的留白會使產品顯得高階。

網頁設計中的留白

在設計中,留白並非只是說在畫面中留出一塊白色或者某個顏色,留白的真正含義其實是指留出空間感,去除多餘的裝飾,簡化畫面,使整體看起來是簡約的。留出空間感,留白可以使畫面的空間感大大的增強,留的白越多,主體就越突出。如下圖,我相信每個人第一眼看到的都會是那個人和柱子的存在,這就是留出空間感的意義 留出呼...

ui設計現狀與意義 UI設計存在的意義

介面設計 ui design 互動設計 interactive design 可用性研究 usability research 人力因素 human factors 資訊結構工程師 information architect 工作職位的區分並不是很容易。也許不同的公司有不同的職位名稱和工作重點,但是...

ui設計現狀與意義 UI設計的現狀如何?

ui 設計的發展,一直跟整個行業密切相關。隨著移動網際網路的起步,ui 設計圈子整體也經歷了同步的飛速提公升,然後在到需求相對平穩的乙個狀態。近五年,基本上已經從 ui 設計師供不應求的狀態進入了乙個需求減少,而加速了優勝劣汰的階段。跟前幾年相比,ui 設計的整體待遇相比較其他崗位來說,平均水平還是...