美文网首页设计攻略工具癖
90%的设计来自这段剧情,空白部分请自行脑补

90%的设计来自这段剧情,空白部分请自行脑补

作者: 创客贴设计 | 来源:发表于2017-04-01 15:16 被阅读583次

    我们的眼睛和大脑在观察事物、接收影像刺激的时候,会有一些特别的倾向。这些倾向常常可以帮助我们快速的辨别事物,有时候也会产生所谓的「错觉」。完形心理学重要的概念便是「整体不等于个体的总合」,举例来说:当我们在观察另一个人的时候,并不是先看到他的手、脚、头、眼睛、耳朵、鼻子,然后把这些视觉特徵组合成一个称为「人」的组合。我们是直接的观察到人这个「整体」,而不是其他器官的「个体的总合」。

    完形心理学由心理学家 Max Wertheimer 等人于 20 世纪初发展出来,影响了非常多其他的心理学派。完形心理学的视觉法则, 主要有下面几项特性:

    1. 虚中有实,实中有虚

    我们在观察事物的时候,倾向将许多个独立的元素,视为一个封闭的图案。我们的大脑会自动填补元素和元素间的空白部分,形成一段不存在的线段。我们可以发现,虽然上图中的几组线条没有完全闭合,但是我们依然能看出他们是圆、三角形、方,我们的大脑会自动填补元素与元素间的空白部分,形成一段不存在的线段,这就是格式塔性理学中所说的封闭性原理。

    如上图所示,我们可以将一连串的圆点看成一个较大的圆环,也可以将一个不连串的线段看成一个完整的圆,这种视觉特性称为封闭性

    用一根线条来组成一个图形,我们可以称之为简笔画或者速写,可以看出线条的成形能力,就算线条并没有完全闭合,也可以自我完形,也即所谓的“脑补”

    来看看另一个例子

    唯一两个字给人一种很单纯的感觉,因此,在设计的过程中我去除了一些比较繁琐的笔画结构,让笔画更简单。中国有“一生二,二生三,三生万物”之说,我们通过视觉自动补偿缺失笔画来达到这一效果,增加了文字内涵。

    我们将“唯”字中倾斜的两笔摆正,使笔画更统一

    接下来我们尝试几种方式来省略字体笔画,第一个结构很乱,节奏掌握的不到位;第二个整体不错,那一点起到了“暗示”的作用,让视觉自动将笔画补全;第三个没有暗示的笔画,看不出是“唯“字;第四个和第三个类似,看不出是图形还是文字,笔画省略太过头。

    利用这种原理,我们可以将一些复杂的字体简单化,与此同时还让他更加美观和富有设计感。不失为一种logo设计的灵感,下图就是我在创客贴中设计的“唯一”logo,点击图片即可使用

    点击图片使用模板

    2. 物以类聚

    在视觉领域中,我们的眼睛很容易就会发现那些相同的元素,并“自动”地将它们联结在一起,尽管这些相似元素的距离远近不一。相似的形状、颜色或其它特性让我们将它们看成是一个组合

    相似的形状可以将元素对象联系在一起,相似度越高,关联性就越强

    在下图这张介绍城市绿化植物的设计中,圆圈就象一块磁石,在视觉上告诉读者“看我这里”,同时与右侧较大的圆圈形成一种强烈的联结,这不仅仅是形状在发挥作用,其相同的线条及相同的图片同样强化了这种联结。

    形状越是相似,则联结性越强:

    3. 距离产生美

    我们倾向把相似的事物看成一体,如上图所示,当一连串方块和一连串的圆形并排时,我们会看成两列方块和两列圆形,而不会看成直排。这是因为相似性让我们的眼睛和大脑更容易组织相似的事物,例如下面左图。

    但是很有趣的,一旦距离拉开之后,我们便倾向将靠近的事物看成一体,而非相似的事物,此时我们将两个方块和两个圆形看成一个直排。由此可以猜测接近性的权重可能大于相似性。接近性在使用者介面中是常常被大量运用的一种特性,例如右图:相近的按钮我们会将其看成一个群组。

    如下图左,我们将信息位置分散摆放,虽然整体画面较有 均衡感,但是四笔信息没有区分出重要性,甚至使用者在阅读的时候会无所适从,不知道该从哪一笔信息开始读起。而当我们归纳出版面上最重要的信息,并将其独立出来后,版面信息的重心被提升出来了,并且很容易的就可以了解版面信息阅读的顺序:

    可以发现的是,虽然每项信息的视觉强度跟比重都一样,但是由于信息摆放时的「留白」较多,因而在阅读的时候反而更为显眼突出留白是指画面上没有配置重要视觉元素的区域,在一般的逻辑中,这是「多余的」、「浪费掉的」区域,但是在视觉设计中,留白是一个很重要的视觉元素。

    另外,将属性相似的对象做归类摆放也一个是很重要的提升画面阅读性的技巧,如上图右,由于底部信息被摆放得更接近了,在阅读上就更容易将其归类为同 一个的区块,将这些具有相同属性的信息摆放在一起,也可以提升使用者的阅读效率。这是由于人在看到一项信息时,并不会将其当成独立的要素,而是将其认为是 某个更大整体中的一个小部分

    最常见使用这个方法归类信息的例子就是名片了。如下图,在编排名片时,就必须考虑将性质相近的元素编排的靠近一些,例如姓名跟职称会归类在一起,而电话、传真、手机号码等则是区分为另外一组归类,如此来不仅版面上的信息得到了明确的整理与归类,版面视觉也简洁了许多。

    点击图片使用此模板

    除非注明,网站文章均为原创,转载请标明本文地址:转载自创客贴博客

    本文链接地址:90%的设计来自这段剧情,空白部分请自行脑补

    相关文章

      网友评论

        本文标题:90%的设计来自这段剧情,空白部分请自行脑补

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