Date 2026-01-11 22:09:05
布局设计注重文字与图像在设计中的位置关系。 如何放置这些元素，它们与整体设计理念的关系，会影响用户对内容的识别和接收，以及他们对内容的情感反应。使用亲密原则和对齐可以促进用户接收页面中显示的信息。
什么是对齐：指垂直层和水平层页面上的文本或图片的位置。
以下是一些常见的对齐方法：
1. 垂直对齐
文本的垂直对齐可以是中间对齐、上对齐或底部对齐
2. 水平对齐
文字或图片的水平对齐可以是左对齐、右对齐、中对齐或两端对齐。
对齐决定了整个画面的流畅性，在日常需求中有对齐意识，但为什么设计的页面很奇怪呢？对齐的合理使用主要体现在视觉维度上，我们通常只考虑物理对齐。
以下是我解决视觉对齐问题的几个需求案例：
3. 对齐视觉边界线
上面的案例似乎没有问题，但灰色背景在上半部分的列表中起着两端对齐的作用。事实上，文本的视觉重量大于背景，这将导致整个页面的视觉重量不平等，视觉导线变形。
在下图中，列表数据在两端对齐，使整个画面大方得体，视觉重量趋于一致，浏览阅读舒适。
总结:对齐边缘以视觉导线为准。
4. 视觉流对齐
正常情况下，我们会从上到下，从左到右这样浏览阅读信息，所以在设计页面时也要考虑一下。
上图两张卡的操作区域分别采用左右对齐，看起来没有问题。但考虑到视觉流向，会发现第二个操作区位置更合理，也是视觉距离更近的方案。
总结:在页面的一个区块中，重要元素或操作区域往往会随着视觉流动而布局。
5. 多属性对齐原则
上图案例以左对齐的形式列出标题和内容，形成不规则的边缘，视觉不均匀，大大降低了操作流畅性。
上图显示了优化版本，单独划分列表标题和内容的对齐，用户可以在浏览过程中快速识别和区分信息。
总结:同一对齐可用于同一属性。
然后，通过解决这些常见问题，我们会发现对齐原则不仅满足了物理对齐原则，而且在视觉上也考虑了它适合哪种对齐方法，以及元素之间的对齐。
首先，通过一组物品来感受亲密原则。
我们会觉得这张照片中的四个不同类别的物品是一个整体。
当我们移动物体的位置时，我们会觉得左边的三个物体属于一个区域。
我们把同一组物品分成不同的颜色，左边的三个物品看起来像一个区域
通过以上案例，我们可以得出结论：如果距离更近，我们会觉得它们之间有一定的关系，属于同一个整体。
因此，我们可以知道，亲密原则是界面设计中相对接近的元素，它们之间会有联系。
所以在需求中，我会用两种方法来实现和调整亲密度:
在上面的设计图中，我们会觉得日期、评论、喜欢和下面的章节是一个区块，在浏览时会造成很大的麻烦。
而且经过优化后，将三个信息点之间的距离拉近成一个块，层次关系一目了然。
总结:当信息容易产生误解时，要注意间距的控制
除了控制间距外，我们还将在处理亲密关系时使用一些辅助元素。以下是两种常用的方法。
卡片工具
分割工具
摘要：根据不同的页面风格和强度，工具的使用也会有所不同，适合页面调性选择使用。
欢迎关注「TCD设计中心」公众号：
