淺談留白在UI設計中的應用

鄧何琴（西南民族大學，四川 成都 610041）

一、什么是留白

留白是頁面元素與元素之間，以及元素周圍的空間。當設計師談論留白時，實際上說的是負空間，術語“負空間”起源于傳統藝術形式，它讓我們更準確地捕獲物體的形狀。"留白"，是我國傳統藝術的重要表現手法之一，被廣泛用于研究中國繪畫、陶瓷、詩詞等領域中。留白就是在作品中留下相應的空白，在文學作品、繪畫和話劇上都有留白。在中國古代水墨畫中，畫師們運用不同的繪畫技巧來營造層次豐富的留白，以此來表達畫面的主次和空間感等，而這正是中國水墨畫最為巧妙獨特的地方，也可以稱為“中國特色”。如果細細分析中國水墨畫中的留白技法，那可就得追溯久遠了。

如果只是從字面上來解讀“留白”的話，那么非常多人都容易很片面的的去理解留白，他們認為留白就是什么都沒有的空白，是不著一筆的絕對空白，這是不對的。道理很簡單，說道中國水墨畫和西方素描畫的區別，其中很大的一點就是中國水墨畫最重要的是一個“意”，它不像西方繪畫那樣的寫實，但是卻可以用各種不同的繪畫手法和技巧來表達畫面的氣韻，就像著名的《潑墨仙人圖》，畫面上幾乎沒有對人物做嚴謹工致的細節刻畫，通體都以潑灑般的淋漓水墨抒寫，那渾重而清秀、粗闊而含蓄的大片潑墨，還有畫面上大片的留白，以一種無實際物相的方式去表達畫面中的意境，可謂筆簡神具、自然瀟灑，絕妙地表現出仙人既洞察世事又難得糊涂的精神狀態和性格特征。用一句話來描述就是 “言有盡而意無窮”。而這“意”就是留白。同理，在現代的UI設計中，留白也同樣發揮著這樣重要的作用。

二、留白的困難

在現代UI設計中，不論是手機端還是PC端，要想有一個客流量高的瀏覽數據，那么在排版上是不得不下功夫的。很多人以為留白就是絕對的空白，其實不然，留白的關鍵在于意蘊，留白等同于負空間但它和完全空白是沒有什么聯系的。只要在一個空間范圍內，沒有任何的文字和圖像，即使被填充了任何顏色，這也算是一個留白。

正因為很多人混淆了留白的概念，所以造成了一旦要運用留白技法時就不知所措，一般來說容易出現兩種現象：

(1)造成界面空間簡單

很多人知曉留白的重要但是卻無法適當運用，以為六百就是一昧的空白，所以在設計界面的時候不敢運用太多元素和顏色，導致了界面的空洞和顏色的寡淡。通常甲方公司都會覺得付了錢就需要得到一個很豐富，內容很全面的頁面，而當我們提交的是這樣一份寡淡的設計時肯定不能夠讓老板滿意，所以這是一個很常犯的關于留白的錯誤。

（2）無法塑造具有企業或產品風格的設計

因為需要留白的可以留白，就無法根據一個企業或產品的特色去設計一個滿意的獨特的頁面。俗話說“巧婦難為無米之炊”，在一個頁面設計中該有的元素是必須要有的，強迫的留白不僅導致了頁面的空洞也使得它缺少自身特色，無法體現出主題內容。

三、留白的技法

正確的留白技法可以使頁面層級清晰，給予設計呼吸的空間，提供了布局上的平衡。用戶在瀏覽網頁時也會更加的專注于內容，留白是一個好設計的基本要素，在所有優秀的用戶界面里，從頂部到底部，頁面中所有的元素都有適當的留白。小留白是文本和網格之間的空白，它有助于內容的可讀性。大留白是頁面上主要元素之間的空白，與小留白不同，大留白是整體設計的容器：

（1）制造視覺焦點

制造視覺焦點這個留白技法有一個很明顯的例子就是百度，打開百度的搜索頁面，你不會看到多復雜的內容，只有一個搜索框一些相關信息和一個非常醒目的藍色百度的LOGO讓你第一眼就能夠注意到這是百度的頁面，牢牢地抓住視覺焦點。

（2）分組相關元素

在現在最流行的社交軟件微信中我們可以看到一個最常見的聊天列表界面，每個窗口之間用淺色橫線來區隔，這是最常見的一種區隔方式，但是用留白來做區隔的話我們能得到更加簡潔清晰的頁面而它依舊具備區隔的能力。

（3）導向性留白

在界面設計中常常要去引導讀者的閱讀順序，通過留白的方式，比如字距、行距、甚至段與段之間不同的距離，還有圖片與圖片之間的留白，這些都是能夠影響讀者閱讀順序的關鍵。

（4）營造高端的設計風格

適當地留白可以使頁面干凈整潔，在很多大牌網站中也能體現出來，做的最好的是蘋果網站，模仿的最好的是衛龍。早期的衛龍不過是五毛錢一包的辣條，但是在重新改版了網站之后整個品牌風格都走起了高端路線，對比前網站和現網站來說最大的區別就是現網站運用了大量的留白，雖然留白經常被看作是改善用戶體驗的技巧，但它也可以被用于純粹的審美目的，大量留白的網站能反映出極簡和奢華感。留白有助于提高整體設計的基調——通過把更多的焦點放在產品本身，使產品看上去更有價值。

四、結語

如果你在瀏覽網站，當布局太糟糕時，你會很費力的才能確定信息內容；那么這個網站的用戶體驗肯定是很差的。留白不是一個空白的畫布，而是一個強大的設計工具，但是這個工具很難掌握，如何使用留白來創建良好的布局需要實踐。留白給了字體和作品足夠的空間，總而言之，留白是在UI設計中不可或缺的一種設計方法。

[1]原研哉，設計中的設計{M},廣西大學出版社，2010年

[2]田中一光，設計的覺醒{M},廣西師范大學大學出版社，2009年

[3]侯明勇，原研哉設計的生態啟示{J}，包裝工程，2013年，34(10):23-26

[4] 麥阿德，簡約主義[M].楊瑋娣，譯.北京：中國輕工業出版社，2002