會留白,才能做出好設計

來源:中國設計在線    時間:2020-04-28    站內收藏

留白,可以讓設計效果更有呼吸感,使界面干凈有序,同時還能讓用戶更專注于我們要凸顯的內容。

音樂家Frank Zappa說過:

“一個好的音樂,音符之間一定需要足夠的空間,這樣音樂才能在空氣中發揮作用!

試想一下,如果你聽到一首歌,都是同樣的節奏,以至于每個音符之間沒有區別,那么這首歌就不會動聽。

設計中的留白亦是如此,留白可以說是隱形的,但卻是設計中很重要的因素,那么如何在界面中使用空間留白制造呼吸感,使界面有干凈有序呢?

01

留白很多叫法,有的叫呼吸感,有的叫空間,有的叫負形,簡單字面理解就是一個頁面中的空白區域,包括文字和文字之間區域,它可以用在元素周圍,也可以運用到元素和元素之間,它的目的是讓元素更加突出,在視覺設計中,這個空間一般指的頁面中,文字段落,圖片,按鈕,圖標,之間的間距。

雖然叫留白,但留白不一定是白色的,它可以是任何顏色,紋理,圖案,或背景。

留白可以是一張圖片背景,也可以是商品的照片

留白也可以是一張渲染氛圍的照片

留白也可以是一個帶顏色的, 不一定是白色的

留白也可以是一個紋理圖案,運用到我們的設計中,空間就像我們生活中必不可少的空氣一樣,空氣對于我們來說重要性不言而喻,那么設計中的空氣是什么,就是空間,留白等。

02

想象一下,我們進入一個菜市場,里面各種箱子,貨架,到處擺滿了東西,在這種條件下你能專注么?能快速找到你想要的東西么?這和我們用戶體驗一樣,當用戶打開頁面的時候,到處是各種的功能,用戶很容易迷失在里面!

早期的word帶給用戶太多的信息,雜亂的內容完全找不到你需要的功能,用戶其實并不想看這么多功能。

早期的國內新聞門戶,展現給用戶內容太多

包括上圖這些,我們平時經常用到注冊登錄頁面,這么多冗余的信息。

所以設計里面空間很重要,沒有足夠的空間和留白會大大分散用戶的關注力,超載的信息和太多干擾的元素,我們需要給用戶足夠多的空氣,凸現最重要的內容給到頁面中。

03

1. 區隔內容

還記得之前分享的格式塔原理么,當元素位置靠在一起時候,會認為是一個組或者一個元素。間距過散(如圖上)會導致頁面缺乏清晰的結構,元素之間很混亂,需要通過空間幫助我們組織信息。

上面這兩個案例留白空間感很足,就是運用空間來分組內容,讓用戶更加明確每個模塊有什么內容。

2. 聚焦

蘋果網站,通過留白,通過空間來強調新的手機,一個頁面就只有一個焦點內容就是這部手機。

Airmax官方, 通過一雙鞋來強調新款的鞋很輕,很輕量,很科技感。

OKINAWA官方網站,只有一個主頁面以及一把刀子,強調這是一個廚房用品的網站。

韓國電商29CM App,每個頁面都是聚焦頭部大的圖片區域,來強調今日推薦主題或推薦單品。

APP STORE ,只聚焦一個產品,凸顯今日推薦。

3. 提高易讀性

通過留白,更聚焦內容,同時信息更加簡單,用戶理解成本低。

留白很好的區分了每個模塊和模塊之間的關系,形成了很好的視覺引導。

左側的設計很擁擠,缺少呼吸空間感,給眼睛帶來了很大壓力,右邊設計良好空間感,提升了設計的閱讀性。

當標簽接近與其相關的字段時候,傳遞的信息更加明確,好的空間感,讓信息閱讀性更好。

04

1. 負留白

這個留白主要是負形留白,直接決定了設計的整體美感,不僅是美感,同時也是引導關注內容,只有四周有足夠的負形留白空間,才能引起關注。

圖中白色負形空間,能夠增加頁面的可掃描性,同時很好的增加了視覺層次。

這個案例中設計師很好的運用照片作為背景,同時充當著負形的角度,最重要的是,照片元素和內容是互相關聯的,負形設計成為了一個元素,同時整體也很和諧。

負形同時能很好的為頁面提供呼吸感,不會感覺到亂,同時將用戶注意力放到核心元素上了。

2. 正留白

與負留白相反就是正留白,它不僅僅考慮元素四周的空間和留白,同時還考慮元素本身的大小,通過改本元素本身大小,是控制畫面層次結構很好的方法。

負留白通過尺寸大小,粗細對比,產生的對比度,是很多驚艷的設計和普通設計之間的最大差異,我們經?匆娨粋好的設計一定是對于正空間,負空間運用的恰到好處。

通過正留白的大小和周圍的空間對比,創建畫面感,同時創造規則。

正留白在界面中是很重要的一點,很多新手設計師在設計時候,很容易把正留白設計的太大,太大顯得山寨感,太小顯得看不清楚,設計時候一定要整體考慮正負形留白。

3. 內部留白

內部留白就是容器里面的留白,也就是我們每天工作中經常運用到的,文字和文字之間間距,圖片和文字間距,按鈕四周間距等等,這種留白靈活性大,但是也是最難把控的,要么處理的很緊湊,要么處理的很松散。

關于內部留白,也叫間距,在界面中也很重要,關于內容空間一定要注意一致性的規則,前期一定需要定義好間距規則,行間距規則,讓我們的界面都在一整套的體系內,也要注意不要讓規則歸于復雜,過于復雜執行難度會比較大。

#作者#

Sky,微信公眾號:我們的設計日記(ID:helloskys),設計交流可加微信:hellosky678,人人都是產品經理專欄作家。原支付寶體驗設計專家,阿里巴巴天貓設計專家;10年知名互聯網公司設計經驗,對于產品從0到1、品牌定位、金融產品、設計規范、運營規范、大促等有豐富實戰經驗。


本文來源:中國設計在線

上一篇:返回列表
關鍵詞: 留白 設計 
編輯:cdo
相關閱讀
    正在加載...
安卓有什么赚钱app 新手怎么开始买股票 体彩浙江6 1开奖结果查询 青海十一选和值开奖结果 两码中特期期准免费2码公开 股票推荐排名 泳坛夺金技巧组三 河南22选五开什么号 极速11选5开奖官网 股票如何看涨跌图解 江西快3技巧