千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > UI設計教程之留白的意義及美學價值

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

來源:千鋒教育
發布人:千鋒老師
時間: 2018-12-24 16:41:00 1545640860

  留白是指版面中沒有放置任何元素的空白處。

  我們在設計的時候,不能只是想“這些元素擺在哪里”,同時也應該思考“哪里應該空出來”。

  留白的設定將會大幅度改變設計所呈現出來的效果。

  把所有的元素都放置在版面的中央,版面就會產生均等的留白,如下圖。

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

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

圖片1

  一、留白的美學價值

  1.留白的作用

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

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

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

圖片2

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

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

圖片3

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

  3.留白呈現的空間感

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

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

圖片4

  4.留白設計的基本技巧

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

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

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

  二、留白的意義

  1.突出主題

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

QQ截圖20181224164023

  通過這兩張圖可以看出,留白是主題的領地,越多的留白,主題被注視的幾率越

  高,留白的時候不要太貪心,否則會使畫面混淆,使主題表現得非常模糊。適當

  的留白,才能將主題更好地表現出來。

  2.簡化畫面

圖片5

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

  3.增強品質感

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

圖片6

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
久久亚洲中文字幕精品一区四,亚洲日本另类欧美一区二区,久久久久久久这里只有免费费精品,高清国产激情视频在线观看
婷婷丁香亚洲综合素 | 夜色福利院在线观看免费 | 亚洲中文字幕久久电影 | 日韩精品92午夜福利免视频 | 香蕉国产精品偷在看视频 | 精品久久洲久久久久护士 |