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

  • 本文只讨论文字标题和文字内容,不考虑图形,图片,组件等。
  • 不考虑竖向排版的情况。

价值

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

定义

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

处理办法

1.运用上下位置

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

上下的位置

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

不同的思路

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

间距和对齐.jpg

3.标题的样式

标题和内容的样式做区别:字号,字色,字体

标题样式

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

弱化样式对比

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

4.加入其他元素

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


线

未封闭的矩形
小三角

项目符号、图形和数字

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,930评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,853评论 18 139
  • 今天周日,现在已经凌晨一点了。 两个星期前我毅然从仅呆了两个月的新公司离职,加入到了现在这家创业公司,原因无它,我...
    也么哥阅读 331评论 3 3
  • Harvard . 纵观芸芸众生,朋友晒旅惬...
    夜咖阅读 568评论 0 0
  • 来成都快半个月,今天还是第一次自己出门,为了见深爱已久的偶像,虽然,这并不是第一见他,虽然遇上下雨天,还因为不会坐...
    蓝梦星辰阅读 858评论 4 3