标题与分割线

一、亲密原则

在空间上接近的内容,我们更容易把他们归为一组,就是亲密原则。

如下图:

亲密原则

我们很容易就可以把唐僧、孙悟空、沙僧归为一组,而把猪八戒分离出来,因为前三者里的更近。

再比如下面这张:


示例

示例中,左边的图:我们无法去分清标题是属于上面还是属于下面的。右边的图:我们对信息进行了分类。这样的展示就更加的直观。

上述中在界面中的应用:

信息分割

我们在平时工作中也经常会遇到这种信息排版。首先我们需要清楚,上图的内容有三个:上分割线、内容区和下分割线。此时我们可以判断,内容区内的所有间距一定小于内容区与分割线的间距,因为根据亲密性原则,有关联的内容会离的更近,内容区的内容相对分割线来说,就是关联性比较强的,所以它们的间距就会相对较小。

这样的间距规律还可以让我们清晰的区分开每一条信息,不会导致信息干扰。

二、对比原则

先来看一张图:

示例2

图示例2,虽然运用了亲密原则。但是看起来,是不是显得有点混乱。

我们再来看这张图:

示例2

从示例1,和示例2的对比中我们就不难发现,如果我们把主标题与次信息的大小对比强烈一些,这样我们首先聚焦的是主信息的内容,然后才是次信息的内容,这样的话,看起来就不会那么的凌乱。界面的层次也区分来了。

那我们在工作中的应用:

示例3

在原先的版式中,主标题与内容区分不来,主要信息没有体现出来。

示例4

调整后:把主标题基础信息与名称进行了更加强烈的对比之后,我们首先聚焦的就是主要信息,然后才是内容。

而在实际应用中,分割线的使用也是要有区分。如下图:

示例5

在示例5中,我们可以看到系统配置的分割线与批量收费的分割线并没有办法给我们一个很好的信息层次划分。

示例6

示例6中,调整过后,我们把批量收费客户配置的分割线进行的弱化,这样界面中信息的主次关系就拉开了。

排版中,颜色对比、粗细对比、形状对比、疏密对比等等,每一个元素之间的一些小细节,都影响着视觉上的美观。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 引用 一天过完,不再回来。 ---哈佛校训 其实是今天自己手贱了,毕竟安装brew已经好几个月了,就突然想试试卸载...
    刘闻道阅读 8,233评论 2 6
  • 咖啡冥想 目标:18年2月15日存款增加5W 1、支付宝捐助患病孩子1元钱,回向给孩子身体早日康复和父母过上幸福的...
    暴走高跟鞋阅读 116评论 0 0
  • 好久没来简书写文章了,生活有了些小变化,人也容易累,许多原本日常坚持的事情也不得已放弃,不过最近觉得还是坚持做些事...
    豌豆苗Nicky阅读 185评论 0 0
  • 那篇《就算老公一毛钱股份都没拿到,在我心里,他依然是最牛逼的创业者》的十万+的爆文,我昨天看了一遍,今天又仔细看了...
    东方地秀阅读 401评论 5 3

友情链接更多精彩内容