留白對于設計的價值,已經得到相當廣泛的認可了。留白的存在讓其中的元素得到更好的凸顯,有了留白才有強調,它們從來都是一體兩面,焦不離孟。今天的文章,我們來聊一下留白的使用技巧和最佳實踐。
留白本身通常還被稱為負空間,它們可以在網頁布局中各個元素之間,還可以在特定 UI元素的內部。留白賦予了頁面呼吸感,而它本身并不一定非得是白色的空白區域。留白界定了 UI元素本身的空間邊界,而借助格式塔原理,它還可以創造視覺上的聯系。
因此,留白是一種重要的、功能強大的設計元素,它對于創造積極的用戶體驗有著重大的影響。 交互設計基金會的 Mads Soegaard 是這么說的:“留白就像一塊畫布,它是將不同設計元素融合到一起的背景,又讓這些元素通過對比襯托脫穎而出。”
在諸多的平面設計領域當中,負空間都發揮著無法替代的作用。無論是設計LOGO、平面插畫還是字體的時候,留白的使用關系著整個設計的表現力。就像下面的博客插圖,負空間的運用讓整個畫面顯得更加生動。
無論是在網站設計還是 UI設計當中,設計師都需要借助留白來提升界面和導航的可用性。布局元素周圍的留白或者負空間通常被稱為宏空間,而它們之間的留白和內部的負空間,則被稱為微空間。
留白和負空間雖然是兩個不同的說法,但是兩者表述的是同一個東西。之所以有兩個不同的說法,是因為兩個名稱是來源于不同的兩個領域。
留白是來自排版印刷設計領域,因為頁面的背景通常是白色的,而文本和圖片周圍的區域也多是白色的空白,因此有留白之說。而負空間這個說法是源自于攝影,吸引人注意的視覺主體被稱為正空間,而相應的留白就成了負空間。
需要注意的是,留白并不一定非得是白色的,可以是其他的顏色,甚至是其他的圖案。
當你進入一個擠滿各種物品和人的房間,到處都是東西和人,找到特定的東西肯定是一個非常艱難的事情。相應的,在干凈的地面上,擺放的唯一的物品肯定是非常醒目的,你不需要花費任何力氣就能注意到它。這也是留白發揮作用的原理所在。
雖然客戶可能會要求設計師在頁面上盡可能多地塞滿各種元素和功能,這樣可以節省空間。但是,實際上這是一個最常見的錯誤的做法:用戶并不需要在網頁上一次完成全部的工作。更重要的是,太多的元素會分散用戶的注意力,用戶會難以找到真正想要的信息。正如同 Aarron Walter 所說:“你想讓用戶注意到所有事情的時候,他們會感知不到任何東西的。”
對于設計而言,負空間的價值是非常高的,我們隨便總結一下,都有很多:
它讓頁面的可閱讀性得到了提升;
它增強了視覺層次;
它使得元素和元素之間的關系更加清晰,更容易被感知,而不需要借助表格、框架這樣的附加手段;
它為頁面增加了呼吸感,而不至于導致混亂;
它讓用戶更容易將注意力集中到核心元素上,減少分心;
它提升了頁面的風格,讓設計更加優雅。
看看這個城市指南的著陸頁吧,負空間在背景中扮演了非常重要的角色,更重要的是,圖片中的元素和前景的文本標題之間有所互動,這也同樣是借助負空間的方式來呈現,呈現出一種和諧而有趣的設計效果。