紧凑原则的核心点就在于紧凑二字，紧凑的意思是内容要聚合在一起不能太分散，但同样不能太挤，那样就会适得其反。
当你将紧凑原则给吃透了之后，你的ui设计排版能力将会得到质的提升，高手和普通人往往就在一念之间。
俗话说，一家人不说两家话。一个家庭如果不能把劲往一处使的话，那么这个家庭迟早都会散。将这个理论套在ui设计中，一样可以说的通。
以下方的表情为例：
如上所示，我们可以把五官代入成一个家庭。这个家庭的成员四分五散，在五官中可以理解为不美观。
但是如果整个家庭的成员依靠在一起，那么整个五官看起来就多了一些精致。两者进行对比，孰强孰弱一览无余。
这是一位学员的作业，在经过优化之后整个界面的精致度提升了很多。在优化过程中，就涉及到了紧凑原则：
在优化前两个图标就如两个家人吵架了一样，有了一些隔阂。将图标和文字之间的距离感消除，让两个人靠近并将其摆放在家庭的中心位置。
在优化后，将两人之间的隔阂消除了，你在看这整个效果是不是更精致了。
这张图和上面一样，照明亮度身为一家人之间不能有隔阂，家人没有隔夜仇。该聚就聚，该合就合，聚合。
总的来说，排版能力的紧凑原则可以理解为，聚是一团火，熠熠生辉！但切记散是满天星在这里面是行不通的。
作为设计师，要做的就是对信息进行整合，我们可以称之为信息减噪，目的就是让页面更加清晰，减少干扰。
这里我经常使用“容器整合法”来让内容更加清晰、聚焦。
当分散的内容装进一个“容器后”，就可以使内容聚焦在容器当中，让信息更加规整。而卡片就是一个很好的“容器”。
在改版腾讯动漫个人中心的时候，头部就存在信息分散不聚焦的问题，四个视觉触点（绿色圈处）分散在四个角落，形成极大干扰。
这里我就采用了”卡片容器“的方法，将信息装进容器中，减少分散信息的干扰，使界面更加清晰、工整，效果如下：
现在很多产品都在使用卡片化的布局，尤其是在信息数量、层级较多的时候，更加需要有容器将其规整起来，这样才会让界面保持不乱！
很多时候我们会觉得自己做的东西很不和谐，其中一个很重要的原因就是因为页面中没有贯穿的元素，也就是没有呼应，很常用的一个呼应的方法就是颜色呼应。
例如这个画面总看起来不够和谐，你会觉得绿色很突兀，就是因为颜色上没有呼应：
而一旦你想办法，让绿色“事出有因”，比如取自眼镜的颜色：
我们会发现，图标的颜色也是取自背景色，所以整体看起来才会如此和谐。
除了颜色呼应，还有很多呼应的方式，比如图形、图标风格等等，这里就不再举例了。
在做图标或者字体的时候，经常要讲一个原则就是“饱满”，界面上每个“不能拆分的元素”都需要尽量做到饱满，比如图标，再比如下面这个信息组件：
正文就属于不能拆分的单一原子，大家可能会问，这种信息不就是方方正正的一个信息块吗，怎么会不饱满呢，比如行间距过大：
再比如，我在优化腾讯动漫信息流的时候，发现正文出现的表情远远大于文字，如下图：
表情一旦出现，就会造成大量空隙（负形过大），导致整体不够饱满、和谐。
我们可以看下其他产品，表情和文字几乎都是一样的大小，他们都会尽量缩小负形空间（也就是空隙小大）：
从品牌出发，可以有很多方向，比如logo，图形，品牌吉祥物等，下面以品牌吉祥物为例：
在做小说阅读器的时候，有一个设置选项是选择文字的背景颜色，选择控件是圆形，而品牌形象也偏圆形，此时就可以将圆形控件与形象相互结合:
但是选择控件有两种状态，为了更加生动，就让给形象正面面对你的时候作为选择状态，而转过身作为非选择状态，大概效果如下:
以上就是界面设计的5个原则，希望对大家能有所启发与帮助。
