标题和内容如何表达从属关系？

• 本文只讨论文字标题和文字内容，不考虑图形，图片，组件等。

• 不考虑竖向排版的情况。

价值

UE和 UI 设计师的一个主要工作是，把界面的内容进行组织，排列，赋予合适的形式。其中，文字标题和文字内容，是常见的处理对象。因此，总结他们的常用处理办法是能提高界面设计的工作效率。

定义

文字标题和文字内容，是具有从属关系的文字。标题是对内容的，概括，总结，引领。

处理办法

1.运用上下位置

在横向排版中，用“上下位置”来表达从属关系是最简单的办法。

上下的位置

但是，界面中的信息之间，不一定存在很强的“从属关系”。有时候，它们之间可以理解为“相关关系”，此时可以不硬性使用统领的信息在上，被统领的信息在下的方式。可以采取左右，或者下上的方式灵活处理。

不同的思路

2.上下的间距，和内容的对齐方式

间距和对齐.jpg

3.标题的样式

标题和内容的样式做区别：字号，字色，字体

标题样式

要注意的是，平面设计或者 web 设计里，会要求“强化”标题。但是，到了移动端，这个思路就不统一了。现在强调突出内容本身。所以，有的设计中会“弱化”标题，因为有时候标题不是一个很重要的内容，甚至算不上内容。

弱化样式对比

至于为什么会产生这样的变化，个人认为，是因为信息容器和使用场景的变化导致的，具体的分析这里就不展开了。

4.加入其他元素

实际工作项目中，为了把段文字表达清楚，需要把标题和内容的所属关系表达得更清晰一点。或者视觉设计师，基于规范的限制，视觉表现力要求，需要使用更加丰富的“设计语言”。以下的方法就可以备选。

线

未封闭的矩形

小三角

项目符号、图形和数字

mark ：最近想到冒号也能起到区分标题和内容的作用，有时间补充一下