美文网首页
设计基本概念——亲密性

设计基本概念——亲密性

作者: 杏子Pin_cha | 来源:发表于2018-07-20 22:55 被阅读36次

《美工的自我修养》中指出了4大基本概念:对比、重复、对齐、亲密性,几乎每一个精良的设计中都用到了这4个概念。如果做出来的设计不知道哪里出了问题,又怎么能进行修正呢?现在我们来认识下4大基本原则之一——亲密性。

明确这些原则是掌握它们的关键。

亲密性(Proximity)

彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。

物理位置的接近就意味着存在着关联。

案例:

修改后:

(把相关的元素分在一组,使它们建立更近的亲密性。)

小技巧:

1.把所有大写都变为小写,只保留合适的首字母大写,这样能留出更多空间,使标题更大、更醒目。(大小写的切换适用于英文排版,留出更多空间是因为放大了标题,小写不把画面占满而有呼吸感。)

2.把圆角变为直角,使刊头的外观更简洁,更突出。

3.将天鹅图放大,超出边线。必须让它更显眼。(天鹅图作为此设计的图形/图像元素代表,放大显示,说明其信息重要级别高;超出边界,使其摆放不那么死板。)

4.字体颜色的选择更统一,修改后的颜色更方便读者阅读。

亲密性小结


Robin亲密性原则是指:将相关的项组织在一起,移动这些项,使它们物理位置相互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。

根本目的

亲密性的根本目的是实现组织性。尽管其他原则也能达到这个目的,不过利用亲密性原则,只需简单地将相关的项分在一组建立更近的亲密性,就能自动地实现条理性和组织性。如果信息很有条理,将更容易阅读,也更容易被记住。此外还有一个很好的“副产品”,利用亲密性原则,还可以使空白(这是设计者们最喜欢的)更美观(也更有条理)。

如何实现

微微眯起眼睛,统计你的眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的项超过3~5个(当然,这取决于具体情况),就要看看哪些孤立的元素可以归在一组建立更近的亲密性,使之成为一个视觉单元。

要避免的问题

不要仅仅因为有空白就把元素放在角落或中央。

避免一个页面上有太多孤立的元素。

不要在元素之间留出同样大小的空白,除非各组同属于一个子集。

标题、子标题、图标标题、图片能否归入其相关材料?在这个问题上一定要非常清楚(哪怕只有一点含糊都要避免)。在有很近亲密性的元素之间建立关系。

不同属一组的元素之间不要建立关系!如果元素彼此无关,要把它们分开。

相关文章

  • 设计基本概念——亲密性

    《美工的自我修养》中指出了4大基本概念:对比、重复、对齐、亲密性,几乎每一个精良的设计中都用到了这4个概念。如果做...

  • 亲密性原则

    ​亲密性原则是UI设计中最基础也是必须掌握的一条设计原则。亲密性原则是设计中排版常有的原则。亲密性原则能让我们处理...

  • 如何成为一个合格的设计师?

    做设计的的人需要明白设计的四大原则:亲密性、对齐、重复和对比。 一、 亲密性 1、亲密性原则:实现组织性,将相关的...

  • 《写给大家的设计书》day1

    《写给大家的设计书》『一』——6.1 一、理论 设计四大原则: 对齐,重复,对比,亲密性(意味着存在关系, 亲密性...

  • #30天专注橙长计划#Day26

    《写给大家看的设计书》 一、设计理论4大基本原则 对比、重复、对齐和亲密性,它们相互关联,相辅相成。 二、亲密性:...

  • 做到这四点,设计也可以很简单

    文/安小暖 本文为《写给大家看的设计书》读书笔记。 四大设计基本原则: 一、亲密性 亲密性原则是指将相关的项组织在...

  • 《设计-亲密性原则》

    陆陆续续抽空,大概花了1个月的时间看完了《写给大家看的设计书》,这本书本身是非常好读的,如果大家能静下心来,一个下...

  • 读书笔记-2020.7.11

    关于设计原则 1:设计类型案例:简报,宣传册,报纸广告,明信片简历 2:设计原则:对齐,亲密性,对比,重复 3:内...

  • 《写给你们的设计书》思维导图

    设计的四个核心:亲密性、对齐、对比、重复 在开发设计中记得熟记上述四个核心!

  • 读书笔记:《写给大家看的设计书》:亲密性

    此书出自世界级设计师Robin Williams之手,阐述了设计的几大原则:亲密性、对齐、重复、对比。设计于我可能...

网友评论

      本文标题:设计基本概念——亲密性

      本文链接:https://www.haomeiwen.com/subject/gnlcmftx.html