浅谈留白在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