到底要怎么留白？MICU设计创始人为你解答界面设计的版率问题！|163

在平面设计中我们常常讨论版式相关问题，通常会考虑留白和版率，除了文字，还有图片或者插图等视觉直观性更强的内容，这些视觉要素所占面积与整体页面的之间比率的就是界面版率。

不同的界面版率对于页面的整体效果和其内容的易读性会产生巨大的影响。

在UI设计中也是一样，我们会根据不同的情况，为界面搭配不同的界面版率。说到这里就有人想问，具体什么情况呢？下面数艺君就给大家分享一些界面版率的相关技巧吧！

界面版率

设计界面的时候，因为内容和页面都比较多，为了保证页面与页面的统一性，首先需要设定页面内容四周的留白。设定完页面的间距后，相应的内容图标和图片等的安排可以确定下来。这样的设计顺序可以使调整出来的页面更加有条理。例如下图，红色的部分就是内容，在页面上方有导航，那么内容区的版面就是从导航下面开始计算的。

设定页面内容四周的留白

在界面四周增加留白，可以很容易地将用户视线集中到少数的内容上去，这样便于突出焦点，整体给人一种典雅高级的感受。

突出画面焦点图

反之，减少留白或者不留白，页面会显得更丰富，更充满活力，同时图片的展示空间会扩大，冲击感会增强，让界面更富有张力，如图所示。根据页面内容和功能点的不同，适当调整界面周边的留白非常重要，如果图片本身比较有意境，可以直接采用“出血”的方式，不留白或者少留白。

减少留白

单色块填充

将一个或多个功能点作为主信息，提取到首页中进行设计，可以达到意想不到的视觉效果。这样处理后的界面不仅能显得大气有张力，而且展现出来的信息聚合度很高。

在缺少图像素材的情况下，如何让界面显得更有张力，同时又能呈现出很高的版面率呢？

背景为单色相，同时有大量留白，但却凸显出了主要信息。这种设计要求图标或文字相对简洁，能够很好地和背景色融为一体。当然，这种效果还可以通过利用线条和规则的图形来分割留白区域，增强界面的层次感来达到，如图所示。注意，做好这些的前提是设计师要明确主次信息，以及它们之间的关系。

单色相的大量留白图

用规则的线条分割留白区域

另外，结合产品的特点巧妙运用大色块，将不同的信息用颜色区分出来，可以让用户最直观地感知到信息的变化，如图所示。

用大色块区分信息

多色块组合

多色块的背景不仅能够加强版面的使用率，还可以很好的丰富画面。当遇到的页面以功能分类为主、且用实物照片也表达不清楚时，就可以利用多色块组合进行设计。在用多色块组合进行设计时，可以利用邻近色进行过渡排布，让数量比较多的分类能统一在一个画面中，如图所示。

用邻近色块进行组合设计

另外，一定不要选择对比太强的颜色来划分区域，不然割裂感太强会导致页面显得花且乱，如图所示。

选择对比较弱的颜色划分区域

穿插填充

横向和纵向分割可以让界面显得整齐、稳定，而斜向分割则可以让界面更具冲击感。使用不同的构图方式，将少量的图片穿插整合在构图的形状中，能让界面富有活跃性，如图所示。这样的表现方式还能将产品的气质融入进去，且淋漓尽致地展现出来。有节奏感的设计可以更为取巧地加强版面的使用率。在界面设计中，图文的穿插可以引导用户的视线，让原本简单的内容变得生动有趣，同时，也可以区分内容的主次层次，让阅读变得更加轻松。

穿插填充版面

关键词图形化

现在人们越来越认同扁平化，一方面是因为扁平化的图标看上去清新简洁，用户理解起来更快；另一方面是因为扁平化设计中与图标搭配的背景更加单纯，要么留白，要么炫简，能减少给用户在视觉上的干扰。好的扁平化图标不是简单地删减细节，而是着重凸显有效的信息。图标是最为直接的表达方式，简单明了的图形，能让用户通过对图标的认识快速找到想要的功能和需求点，如图所示。

关键词图形化

图标与文案的搭配有效地降低了阅读时的疲劳感，加强了界面内容的节奏。用图标与大字号的文案、序号或数字等进行表达，不仅可以提高版面的使用率，还可以在很大程度上提高视觉的丰富性和趣味性，如图所示。

用图标与大字号设计

有趣的图标设计不仅能有效地区分功能点，同时也能将软件的特性和品牌展现出来，如图所示。

用趣味性图标进行设计

把图形融入界面中，不仅可以让内容显得更为丰富，还能让层次显得更加分明，如图所示。

将图形融入界面

放大文字

如图，从这一组对比图中我们可以看出，放大重点文字的作用主要有两点：一是能够强化重点，让用户在最短的时间内获取到最需要的信息，从而引导用户准确操作；二是能够让本来空荡的页面显得更为饱满，提高版面的使用率。

大文字设计与小文字设计对比

在界面设计中，我们经常会将数字进行放大，因为数字可以最直白地体现高低信息。另外，放大数字也能让整个页面显得更为智能，如图所示。

用放大的数字设计界面