一個元素足夠吸引用戶的注意力,往往需要通過周圍的留白來襯托,這樣的設計所營造的用戶體驗更為優雅。
在極簡主義風格是主流的今天,「少即是多」是設計師奉為圭臬的準則??刂婆渖桨傅臄盗?,限制視覺元素的數量,在清晰的層級之下,呈現最核心的元素,抓人眼球,直擊核心。
這樣的設計對于留白極為依賴,因此,留白很重要。
留白并不一定必須是白色的,它可以是其他的任何顏色,而留白的另外一個名字是「負空間」。留白能夠襯托和凸顯視覺主體,這也是它發揮作用的主要途徑。
盡管留白看起來不復雜,但是在復雜多變的設計環境之下,往往并不是一件簡單的事情。優秀的留白設計能夠在簡約的風格和功能的可用性之間達到平衡,而要做到這一點,需要相當的實踐和積累。
在什么地方用留白
必須承認,并非每個設計都需要大量的留白。留白的使用一定是有范圍,且有留白會對設計中下列因素產生影響:
排版布局
影像圖片
功能控件
文本內容
邊距間隙
Mark Boulton 將留白劃分為大小兩種。
小留白是在較小的元素之間小間隙,比如下面的元素周圍的留白就是小留白:
鏈接
列表
圖標
按鈕
文本段落
相反,在處理相對較大的元素的時候,周圍的負空間是大留白。
正確使用留白能夠為整個設計帶來平衡感。對于文本內容,你會發現易讀性的高低和其中的小留白的控制有著密切的關聯,這對于內容的呈現有著重要的影響。
使用留白的好處還有很多:
留白能夠增加內容的可理解性。
留白能夠凸顯特定的 UI 元素,CTA 元素大都如此。
可以讓設計更加整潔、友好。
Bear Creek Distillery
充滿形式感和沖擊力的圖片搭配上令人眼前一亮的文案,Bear Creek Distillery 可以輕松地從同類網站中脫穎而出。為了突出他們作為酒類供應商的核心競爭力「蒸餾技術」,設計師盡可能地降低可能讓人分心的因素,從而將信息精準直接地傳遞給訪客。
Squarespace
在保證用戶能夠獲取足夠的信息的前提下,Squarespace 的設計師盡量限制了界面上使用 UI 元素的數量。搜索框讓用戶能夠輕松找到他們想要的信息,而文案設計上的獨特性使得品牌的調性得到了放大。文本的字體色彩選用了黑色,和淺色的背景構成了強烈的對比,讓閱讀和信息的獲取都無比的輕松。
Progressive Punctuation
如何使用標點符號來傳達復雜的情緒?Progressive Punctuation 這個網站將這些「全新」的標點符號都展示了出來。
和其他的頁面不同的地方在于,頁面需要承載多個不同的非標準標點符號,為了將信息準確的傳達,設計師巧妙地使用留白來控制符號之間的間距,確保整體的優雅性,又保證了信息的傳達。
Apple
關于留白的設計,很難繞過蘋果這么經典的案例。雖然他們不是先驅,但是蘋果將這一技巧的運用在自家的產品設計和網站設計上,體現的淋漓盡致。
在他們的網站上,你會看到清晰的視覺脈絡,頁面的每個部分都有清晰的視覺焦點,主次分明,用戶永遠不會在這里迷失和分心。