界面你就做成这样，还想进大厂？
乐活
2024-07-01 08:20
甘肃
![]()
界面设计作为一个APP的门面，至关重要。想要设计出一个好的界面，则需要足够扎实的排版能力，而我们在排版的时候，必须遵循一些原则。
今天就给大家分享排版能力原则中的紧凑原则。
紧凑原则：
紧凑原则的核心点就在于紧凑二字，紧凑的意思是内容要聚合在一起不能太分散，但同样不能太挤，那样就会适得其反。
当你将紧凑原则给吃透了之后，你的ui设计排版能力将会得到质的提升，高手和普通人往往就在一念之间。
01.聚是一团火
俗话说，一家人不说两家话。一个家庭如果不能把劲往一处使的话，那么这个家庭迟早都会散。将这个理论套在ui设计中，一样可以说的通。
以下方的表情为例：
如上所示，我们可以把五官代入成一个家庭。这个家庭的成员四分五散，在五官中可以理解为不美观。
但是如果整个家庭的成员依靠在一起，那么整个五官看起来就多了一些精致。两者进行对比，孰强孰弱一览无余。
这是一位学员的作业，在经过优化之后整个界面的精致度提升了很多。在优化过程中，就涉及到了紧凑原则：
在优化前两个图标就如两个家人吵架了一样，有了一些隔阂。将图标和文字之间的距离感消除，让两个人靠近并将其摆放在家庭的中心位置。
在优化后，将两人之间的隔阂消除了，你在看这整个效果是不是更精致了。
这张图和上面一样，照明亮度身为一家人之间不能有隔阂，家人没有隔夜仇。该聚就聚，该合就合，聚合。
总的来说，排版能力的紧凑原则可以理解为，聚是一团火，熠熠生辉！但切记散是满天星在这里面是行不通的。
02.距离感
俗话又说，人以类聚物以群分，不是一家人不进一家门。那如果不是一家人的话，就不要硬往一起凑。
首先从第一眼我们就可以看出来图中三人的关系，很明显的左边的两个小人在谈恋爱，而右边则是一个正在吃狗粮的路人。
如果其中一个小人的位置发生了变化，那么关系就变的扑朔迷离了。所以，两个有关联的一定要凑在一起，而没有关系的则要保持一点距离感。
在实际操作中，这个问题经常出现。我们看下方这个案例：
上述的图中，可以看出，里面包含的信息可以分为三部分。而中间的信息像个迷路的孩子，找不到家的方向了。
如果我们改变一下中间信息的位置，这样一来，马上就帮它找到了家，让它和家人待在了一起。
在回过头来看这里，总的来说就是有关系(照明和亮度）的就往一起靠，没关系的就保持一些距离感。
认真学习的时间总是过的很快，本次课程到这里也就接近尾声了。本次课程主要就是讲述紧凑原则，后续课程将会继续为大家带来后面的原则。
你离成为顶级ui设计师之间，只差了一个关注我！![]()
加 “星标” ⭐ 精彩文章不错过
![]()
![]()
觉得好看点击“在看”↓↓
UI范
让设计更有范·汇聚全国优秀设计师共同关注！
