分享界面设计的一些原则：

• 紧凑原则
• 容器原则
• 呼应原则
• 饱满原则
• 品牌原则

01 紧凑原则‍‍

紧凑原则的核心点就在于紧凑二字，紧凑的意思是内容要聚合在一起不能太分散，但同样不能太挤，那样就会适得其反。

当你将紧凑原则给吃透了之后，你的UI设计排版能力将会得到质的提升，高手和普通人往往就在一念之间。

聚是一团火

俗话说，一家人不说两家话。一个家庭如果不能把劲往一处使的话，那么这个家庭迟早都会散。将这个理论套在ui设计中，一样可以说的通。

以下方的表情为例：

如上所示，我们可以把五官代入成一个家庭。这个家庭的成员四分五散，在五官中可以理解为不美观。

但是如果整个家庭的成员依靠在一起，那么整个五官看起来就多了一些精致。两者进行对比，孰强孰弱一览无余。

以下方界面为例：

在经过优化之后整个界面的精致度提升了很多。在优化过程中，就涉及到了紧凑原则：

大家看一下这个控件，有没有看出其中的一些问题？

在优化前两个图标就如两个家人吵架了一样，有了一些隔阂。将图标和文字之间的距离感消除，让两个人靠近并将其摆放在家庭的中心位置。

在优化后，将两人之间的隔阂消除了，你在看这整个效果是不是更精致了。

这张图和上面一样，照明亮度身为一家人之间不能有隔阂，家人没有隔夜仇。该聚就聚，该合就合，聚合。

总的来说，排版能力的紧凑原则可以理解为，聚是一团火，熠熠生辉！但切记散是满天星在这里面是行不通的。

02 容器原则

作为设计师，要做的就是对信息进行整合，我们可以称之为信息减噪，目的就是让页面更加清晰，减少干扰。

这里我经常使用“容器整合法”来让内容更加清晰、聚焦。

当分散的内容装进一个“容器后”，就可以使内容聚焦在容器当中，让信息更加规整。而卡片就是一个很好的“容器”。

实际案例：

在改版腾讯动漫个人中心的时候，头部就存在信息分散不聚焦的问题，四个视觉触点（绿色圈处）分散在四个角落，形成极大干扰。

这里我就采用了”卡片容器“的方法，将信息装进容器中，减少分散信息的干扰，使界面更加清晰、工整，效果如下：

现在很多产品都在使用卡片化的布局，尤其是在信息数量、层级较多的时候，更加需要有容器将其规整起来，这样才会让界面保持不乱！

03 呼应原则

很多时候我们会觉得自己做的东西很不和谐，其中一个很重要的原因就是因为页面中没有贯穿的元素，也就是没有呼应，很常用的一个呼应的方法就是颜色呼应。

例如这个画面总看起来不够和谐，你会觉得绿色很突兀，就是因为颜色上没有呼应：

而一旦你想办法，让绿色“事出有因”，比如取自眼镜的颜色：

那么，突兀的问题解决了，和谐的目标也就实现了。

而刚才那个人中心的界面：

我们会发现，图标的颜色也是取自背景色，所以整体看起来才会如此和谐。

除了颜色呼应，还有很多呼应的方式，比如图形、图标风格等等，这里就不再举例了。 

04 饱满原则

在做图标或者字体的时候，经常要讲一个原则就是“饱满”，界面上每个“不能拆分的元素”都需要尽量做到饱满，比如图标，再比如下面这个信息组件：

正文就属于不能拆分的单一原子，大家可能会问，这种信息不就是方方正正的一个信息块吗，怎么会不饱满呢，比如行间距过大：

再比如，我在优化腾讯动漫信息流的时候，发现正文出现的表情远远大于文字，如下图：

表情一旦出现，就会造成大量空隙（负形过大），导致整体不够饱满、和谐。

我们可以看下其他产品，表情和文字几乎都是一样的大小，他们都会尽量缩小负形空间（也就是空隙小大）：

在这样的原则之下，优化后的效果如下：

以上是关于界面局部饱满的小知识点。

05 品牌原则

从品牌出发，可以有很多方向，比如logo，图形，品牌吉祥物等，下面以品牌吉祥物为例：

在做小说阅读器的时候，有一个设置选项是选择文字的背景颜色，选择控件是圆形，而品牌形象也偏圆形，此时就可以将圆形控件与形象相互结合:

但是选择控件有两种状态，为了更加生动，就让给形象正面面对你的时候作为选择状态，而转过身作为非选择状态，大概效果如下:

此创意已在腾讯动漫小说落地实现。

以上就是界面设计的5个原则，希望对大家能有所启发与帮助。

以上内容来源于：小脑府设计团队‍‍

站酷链接：https://www.zcool.com.cn/article/ZMTYzMTM2NA==.html

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。