Date 2026-07-02 21:11:46
以前的视觉系统简要提到了传统平面布局的四个原则：亲密性、对比度、重复性和对齐性。界面布局的原则是什么？今天，菜欣将用一个例子来分享界面布局中需要注意的原则。
视觉自学系统回顾:新年自学计划！为UI设计新人写知识系统指南
欢迎关注作者微信微信官方账号:「菜心设计铺」
大纲如下：
一、亲密原则
二、比较原则
三、平衡原则
四、相似原则
五、简洁原则
六、封闭原则
七、情感原则
由于篇幅原因，今天先来介绍一下前四条原则，剩下的我们下次再分享。
我们更容易将接近空间的内容分为一组，这就是我们所说的亲密原则。
如下图：
由于前三者更近，我们很容易将唐僧、孙悟空、沙僧分成一组，将猪八戒分开。
让我们来看看下图：
你能区分标题是上面还是下面吗？
当你理解亲密关系的原则时，你就会知道为什么你不能区分它，这就是为什么我们学习理论知识。当我们看到错误的设计时，我们可以说出错误的地方，而不是感觉。
如何将这一原则应用到我们的界面设计中？
看下图：
上图是简单书籍和文章列表中的一个，我们经常在日常工作中遇到这种信息排版。首先，我们需要清楚的是，上图有三个内容：上分割线、内容区和下分割线。此时，我们可以判断内容区域的所有间距必须小于内容区域和分割线之间的间距，因为根据亲密原则，相关内容将更接近，内容区域的内容相对于分割线，相关性相对较强，因此间距相对较小。
这种间距规律也能让我们在不造成信息干扰的情况下，清晰地区分每一条信息。
亲密原则是界面排版中最常用的原则之一。我们必须牢牢记住和实践它，为我们以后的排版设计奠定坚实的基础！
我们经常遇到界面看起来很混乱，但我们不知道为什么。事实上，大多数情况是由于界面内容对比不明显造成的。
例如下图：
虽然上图符合亲密原则，但看起来还是有点乱。一个非常重要的原因是界面信息内容的对比度不够强，我们不知道该看哪里！
让我们来看看今日头条的信息排版：
你会发现重要信息和次要信息之间的对比非常强烈，所以我们专注于主要信息（标题），这样它就不会那么分散了。
读完这个排版后，解决上述分散的问题会更容易吗？你不妨试着自己安排，这会让你印象更深刻。
我们通常需要研究更多的排版，好的排版你需要分析为什么好，坏的排版你需要分析为什么不好，你可以安排得更好，只有通过这样不断的故意练习，你才能取得坚实的进步。
回到正题，其实对比的方式远不止大小，还有颜色对比、厚度对比、形状对比、密度对比等。所以在对比排版的时候，不妨多维度考虑，找到合适的解决方案。
平衡原则是界面布局的主要原则，从整个官方网站到图形，我们需要很好地控制视觉平衡。
几个例子：
看上图，我们可以发现图片下面的文字是左对齐的。为了实现视觉平衡，设计师使用VIP 图片右侧放置图标和更新集数。
再来看下图：
我们会觉得整个页面都很奇怪，好像我们向右上角倾斜，因为我们不遵循平衡原则，当我们向右移动下面的按钮时，如下图所示：
整个页面看起来会平衡很多。
这里需要注意的是，一些艺术海报排版为了达到一定的效果，可能会故意打破平衡，但这是一个特殊的平面艺术设计，对于我们的UI设计，在界面排版中，大多数情况或遵循平衡原则，让用户感觉整个界面更加协调、舒适。
我们需要给相似的内容相同的属性，比如同一级别的标题文本大小相同，可以点击相同颜色(如蓝色等)的字体。).
例如下图：
上图中有两个地方是蓝色的，蓝色使它们有一定的相似性，我们需要将相似性的内容赋予相同的属性：可以单击。
相反，让我们看下图：
虽然设计师为了统一和强调，将电话和地址变成蓝色，但如果电话可以点击，地址不能点击，就会给用户带来麻烦，导致整个页面的交互存在一定的问题。这也是我们必须注意的，在设计时不要犯这个低级错误。
当然，类似原则的因素不仅包括文本颜色，还包括背景颜色、方向、大小等。感兴趣的学生可以总结和积累更多，并一起交流。
以上是今天共享的界面排版的前四个原则。下一期将是后面的内部完整的补充。
我希望你能多练习，完善你的排版知识体系，尽快成为一名合格的高级视觉设计师。
欢迎关注作者微信微信官方账号:「菜心设计铺」
【优设网 原创文章 投稿邮箱：yuan@uisdc.com】
================优设网==============.com“它是中国最受欢迎的网页设计师学习平台，专注于分享网页设计、无线终端设计和PS教程。设计师需要阅读的100本书：历史上最完整的设计师图书导航：http://hao.uisdc.com/book/.设计微博:拥有180万粉丝的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源，下载顶级设计材料。设计导航：推荐世界顶级设计网站，设计师必须导航：http://hao.uisdc.com