1为什么要使用栅格系统?——邻近原则与简化
设计的特点是设计可以自然的被人感知和认识,我们具有与生俱来的审美能力。当一个设计作品出现在我们眼前时,我们的感官可以自然的判定设计的好坏。无论是针对虚拟世界的设计,一个网站,还是针对实在世界的设计,工业设计的一个产品,或者建筑设计面对的一栋楼房,我们都可以直观的评判出设计是否富于美感,当接触和使用之后,会判断出是否易于使用。
那么感知到的好的设计,好的感觉的原理是什么?如果可以认识和说明这些,就可以合理的指导我们的设计。从苹果早期的图形界面开始,界面设计的重要性日渐突出,而相应的设计理论却存在滞后,本书的目的就是期望在这一方面提供新的视角。那么就从基本的设计原理入手,分享笔者在其中的思考。从界面设计的基础工具栅格系统开始,说一说栅格的意义。
栅格系统,有一种定义为“以规则的网格阵列来指导和规范网页中的版面布局以及信息分布”,笔者认为这是一个抽象的恰当的定义。

栅格系统源自平面设计行业,而界面设计中从业的视觉设计师的本科专业也大都是视觉传达专业。界面设计和平面设计的关联性,设计师身份的关联性使界面设计中自然引入了原来用于书籍装帧设计和平面排版的栅格系统,也取得了良好的效果。
栅格的妙用和原理是什么?

如果仅仅回答『看上去更整齐啊』这样除了显得不专业和无知之外,更大的问题是当我们不能很好的解释原理的时候,就不能主动的运用原理。
让我们回到问题,为什么要对齐?首先确实是『看上去更整齐啊』,我们把这句话拆解开,“看上去”,“整齐”,那么这个问题其实就是“事物看上去为啥是那个样子?”,“整齐为什么会使人舒服?”
1 事物看上去为啥是那个样子?
先暂时放下栅格系统,审视我们的视觉系统。眼睛看见的就是“真实”吗?
1.1 眼见为虚
耳听如果为虚,那么眼见一定为实吗?有一些图片可以回答这个问题。

棋盘的方格是直线吗?

线条是真的盘旋到中心吗?

艾宾浩斯错觉两个黑圆是一样大吗?

法国*旗国**的三个色块一样大吗?
如果拿一把尺子好好从头到尾测量一下这些图片,结论是显而易见的,都是一些著名的视错觉案例,仅需要补充一点是法国*旗国**的红:白:蓝三色的面积比例为35:33:37。在网上随意搜索都会有各种各样千奇百怪的视错觉图片,除了好玩之外,视错觉的意义是什么?
重新琢磨上面的图片。
第一幅图扭曲的棋盘,与普通的棋盘相比,当我们仔细观察的时候会发现这个棋盘多出了由相邻小白点组成的近似圆环的图形,这些图形的对扭曲棋盘产生了什么样的作用?

扭曲棋盘中的小白点
第二幅图,除了“线条”之外,图形形成了一个A到B的螺旋,这个漩涡对图形产生的影响又是什么?

A到B的螺旋
第三幅图,去掉黑色圆形旁的圆环,两个黑*图色**形的大小是一样的吗?

艾宾浩斯错觉去掉圆环的图形
第四幅,如果把法国*旗国**变成黑白的颜色,那么明度和*旗国**面积之间的关系式什么?

法国*旗国**去掉颜色之后
从第一幅到第三幅图可以确定的是一些图形的形态会影响到与之相关的图形在我们眼中的形态,从第四幅图可以看出明度会影响视觉对面积的认知。
这些存在的客观现象指出了一个被我们忽视的事实,我们的视觉系统并非按照我们想象的那个样子原封不动的把看见的告诉给我们,而是在我们完全没有察觉的情况下把得到的视觉信息进行了加工。
这样的影响是不是有生理基础,也就是说我们大脑确实有这样的结构和功能?
1.2 我们从未看见过清晰且完整的世界
除了视错觉之外,让人更意想不到的是我们的眼睛竟然从来没有看见过清晰完整的世界,注意是清晰且完整。
我们看见过清晰的世界吗?我们肯定看见过清晰的世界,远处森林里飞出的鸟群,近处野草上露珠的光泽,这美好的世界是如此清晰。我们看见的世界是完整的吗?连绵起伏的山峦,一望无际的大海,浩瀚深邃的星空,世界是完整的。
所有这一切仍旧是我们所认为的那个世界,是我们告诉我们自己的世界,真实的世界又是什么样子?
人类视野的分辨率从中央向边缘锐减。视觉中央凹每平方毫米有约15.8万个视锥细胞,而在视网膜其他部分,只有0.9万个。中央凹的视锥细胞与相对应的神经节细胞的连接比是1:1,而其余地方是N:1。中央凹占视网膜面积的1%,大脑的视觉皮层有50%的区域用于接收中央凹的输入。这是我们视觉的生理基础。

眼睛感光细胞的密度分布

达到相同的分辨程度图形需要的尺寸
这两幅图片来自《认知与设计——理解UI设计准则》,左侧模拟的是感光细胞在视网膜上的分布,右侧的图对应的是要达到相同的分辨程度图形需要的尺寸,也就是说当人的眼睛盯住右侧图的中心的时候,中心点的字母和边缘的字母具有相同的清晰程度,再换个说法,我们的眼睛即刻形成的视觉是类似一张有镜头模糊的照片。

部分清晰的镜头模糊照片
而实际情况更极端,清晰的部分类似“隧道”,比普通带有镜头模糊效果的照片的清晰部分更小。那么是不是意味着我么的视力很糟糕呢?从我们的个人体验来看完全不是的,我们的世界是“清晰且完整的”。
这得益于我们眼睛的特殊能力,眼睛可以快速的移动和变换焦距,同时大脑会自动“填充”那些并不重要的视野,所以我们确实看见过清晰的世界,却从不是清晰且完整的。
眼睛的“隧道”效应为一种视错觉的存在提供了可能,这个视错觉的名称是”不可能视错觉“(不可能图形)。不可能视错觉就是局部空间正确,整体空间矛盾的视错觉类型。

不可能视错觉(不可能错觉)

眼睛在瞬时近似实际看到的是正确的空间结构
如果我们按照视觉特点使不可能图形的局部清晰其他部分模糊,我们就会认为看到的是”正确”的空间结构,而当我们快速移动视线的时候脑中残存的图形与正看见的图形拼合后又会表现出空间的矛盾。在ios平台上有一款游戏叫《纪念碑谷》,画面非常优美,这个游戏也是根据不可能错觉的特点所完成的。

《纪念碑谷》的截图
除此之外,用户研究的过程中使用的眼动仪一样是因为人的视觉的“隧道”效应所研制的,假若我们的视觉可以瞬间看见完整的清晰图像,那么也就无需通过眼动仪来追踪视觉的移动路线和度量注意力集中在某个局部时间的长度。

因为视觉中心的清晰和边缘的模糊,透视结构被在大尺度上杯破坏的图像依旧可以向我们传达足够的信息。在绘画中西方的焦点透视和东方的散点透视都作为各自的艺术特点表现出来。

清明上河图图
这里就有一个基本的问题,为什么眼睛不展示所有的细节,而要使部分清晰,部分模糊?
即使是人类现在的视觉系统捕获的信息也占用了大脑大量的计算能力,假如把这些信息扩大几倍,让人的视觉清晰的边界扩大些,以我们现在大脑的能力是没法做到的,也没有足够的必要,相较于其它动物人类硕大的头颅已经让母亲面临生产的障碍,现在人类的脑容量是进化上各种平衡的结果。
对于视觉来说,只要认定边界视野足够好到捕捉到运动物体,引导视野中心移动到移动物体上,对生物生存的重大意义就实现了,而无需获得大视角清晰的图片。
受注意力影响眼睛进行无意识或有意识的移动,眼睛获得视觉信息并对其进行第一步处理。大脑有其极限,不可能把世界的所有视觉信息进行有效处理,眼睛接受的信息是根据需要进行“”删减处理“”的那部分,表现为视觉中心凹有更好的清晰度,而边缘则非常模糊。与之相对,禽类的脑容量有限,处理动态图形的能力更弱,因此鸡的进化结果是通过保持头的平衡尽量保证获得信息的稳定,有人有趣的把摄像头绑在鸡的脑袋上进行录像,着实火了一下,这是另一个“删减处理”的方式,保持静态。
1.3 大脑如何处理信息
我们要知道我们的大脑是怎样形成视觉的,这就是枕—颞通路和枕—顶通路,以及枕—颞通路和枕—顶通路。

视觉刺激的特征信息在视网膜、外侧膝状体和纹状皮层(V1区)进行了初步分离的编码和加工后,会进一步通过纹前皮层(V2区)的不同区域,沿着平行的加工通路向V3区,V4区和V5区(MT)区传递。V4区负责颜色和知觉形状,V5(MT)区负责运动和立体知觉,V3区则加工动态的物体。“什么”和“何处”是视觉研究的两个基本问题,人们需要知道看到了什么,还要知道在哪。美国国家心理健康研究院的昂格莱德和米什金提出,大脑皮层按两大系统提取完全不同类型的信息,多层次实现顺序编码:枕—颞下皮层通路(腹侧通路)用来识别物体,也就是V1—V2—V4—颞下皮层通路;枕—顶叶皮层通路(背侧通路)专门用于空间知觉,判断物体位置,分析空间结构,也就是V1—V2—V3—V5(MT)—顶叶皮层通路。( 节选自《生物心理学》上海教育出版社,蔡厚德著)。
从20世纪80年代以来,认知神经科学家陆续通过动物实验发现视错觉发生的神经关联。根据研究表明V5区与移动错觉相关,V1V2区与轮廓错觉相关,V4与颜色错觉相关,这说明错觉有其特异性;另一方面,几种视错觉的共性表明,如果同一个特定神经网络或神经元群对两个不同客体的激活反应都达到同一个知觉发生的程度,该知觉就可能对两个客体引发相同的体验,这就是知觉神经的关联重叠,这是至少一些类别错觉现象的共同认知神经基础。(节选自《脑视觉》人民军医出版社,王育良等主编)。
我们粗浅的了解视错觉和形成视觉的脑结构之间的关系,重新审视视错觉对于认识我们认识人类视觉的意义,我们的大脑确实存在这样的结构和功能,既是对我们从眼睛获得的信息进行加工和整理。视错觉首先证明了这种加工作用的存在,其次视错觉是这种加工的副产品或者叫BUG。
1.4 顺序与意义
事物看上去为啥是那个样子?这是一个似乎从未被设计师仔细思考过的问题,从眼睛获得的信息就是世界吗?世界就是这样存在着,从降生的一刻开始我们就睁开眼睛注视世界,似乎也从未仔细思考过这个问题。
第一种回答,也是基本的回答,事物看上去是这个样子就因为它就是这个样子。这是一种植根于我们脑中对现象感受的答案,对自我感受的确定感,天空,大地,山川,河流,就是那个样子啊。
从上文的视错觉和对眼脑功能的描述已经可以清晰的否定这个说法,事物看上去是这个样子,这个过程是人的视觉系统对外界信息处理后的结果。
“看见"出现了两个解释,第一是原封不动的光进入眼睛而未加变化的世界已经被我们否定。
第二是主观的经过加工的世界,这是一种新的解释,是我们走向真理的第一步。在这点中事物看上去是这个样子有两个部分:1,事物本身作为看必不可少的客体,2,我们的视觉系统的加工作用作为另一个必不可少的部分。
那么随之而来的问题,加工的意义是什么?加工如何完成?
1.5 加工的意义 —— 万物皆序列
有机生命和无机世界的一个显著区别就是DNA分子以特定的序列排布。
IBM的那个标识,它究竟应该是什么?是一条一条彼此独立的线条吗?还有北斗七星,是七个孤立的点吗?为什么这些本应不相关的元素在我们脑中被整合成字母IBM和勺子?


对于计算机存储的图像而言,图像就是图像本身,只有一个唯一,只不过图像经过了压缩,视觉信息在一定程度上损失了,但是除了按照固定规则的压缩并未经过其它组织和处理,计算机存储的一切对于计算机本身在实质上没有区别没有任何特殊的意义。
而对于我们的知觉而言则不是这样,我们看到了客观存在的物理世界,物理世界的一部分东西被我们加工或者说“看”成具有特殊意义的东西。
这个过程是怎样的?如何用一种形象的语言来解释和表述?我们可以再从一些简单的可以直观判断的现象来逐步解释这个问题。
存粹的物理世界里,顺序本身并不具备意义,前一个原子和后一个原子,行星和恒星构成的星系随机的按照物理规律以最大熵的形式分布在宇宙间。而在我们的世界里不是这样,一只宠物猫爬过钢琴时则完全是随机的,而演奏一首曲子的音节确是按照其自身旋律的进行规律的变化。
任意找来四幅图,分别代表母亲,孩子,刀,血迹,当任意变化图片的顺序的时候,想象一下四幅图所可能产生的意义。

先看第一种顺序可能让人联想到的意义:经过剖腹产诞生了婴儿。

第二种顺序可能的意义:婴儿被伤害了,伤心的母亲。

第三种顺序可能的意义:母亲被迫伤害了婴儿
在电影中,类似的剪辑手法被称为“蒙太奇”,当不同镜头拼接在一起时,会产生各个镜头单独存在时所不具有的特定含义。
无论在视觉上还是心理上,相邻的物体或者事件产生了意义。生活中有很多并无因果关系的事件因为顺序产生了本来并无存在的意义,一个人说”今天是星期六“,另一个人说”火箭队赢球了“,两句并未直接关联成"星期六的球赛火箭队获得了比赛胜利",但是这样一个相邻的场景会让我们自然赋予其意义,而如果中间加上,”昨天是星期五“,那么火箭队获得胜利的时间就”自然“变为星期五。
四幅图片的例子,蒙太奇,语序,都说明了一个道理:相邻事物的顺序产生了意义。我们再次回顾北斗七星,七个点只能形成勺子的概念吗?显然不是,七个点可以形成很多不同的形状,七个点的连线可以交叉,可以变化,但是为什么勺子的形象却深入人心,那就是除了相邻,特殊的顺序也产生了意义。
1.6 加工如何完成—— 场的概念
先让我们暂时回到栅格系统,栅格系统的作用是规范版面布局和信息排布,那么依据什么进行的布局和排布的呢?
在建筑工程中的一个最基本的物理公式f=ma,施工者和审查者都需要预先学习才能在彼此的交流中使用这个公式,而无法天生就去使用,这与设计,或者确切的说与可以直观感受到的事物具有很大不同。如果布局和排布所依据的是完全需要后天学习的,那么设计师设计出来的作品,作为用户也必须需要学习才能理解和感悟,这与设计宗旨和实际情况都是矛盾的,好的设计就是不过分打扰用户的设计,好的设计是不需要学习的设计。所以我们依据的必然是一种自然的,每个人都有的,可以感受到的能力。
那么是不是说论证和思考这种能力的来源是没有必要的?因为设计师和观察者都自然具有这种能力。这也是本书存在价值的一个问题,设计是可以被感官接受和判别的,笔者完全不排斥直觉的感悟的设计方式,如果可以理性的认识这种能力,我们是不是可以更好的进行设计,毕竟经过理性认识的要比仅仅通过经验和直觉的设计更为有效,尤其是对于设计初学者,所以布局和排版的能力应该是先天能力和后天学习与训练共同的结果。下文中我还会提到这个话题,笔者会进行更深入多分析和论述。
我们继续探讨设计依据什么这个问题。上文中我们第一步肯定了视觉系统对我们接收到的信息的加工作用,第二步发现了邻近事物的顺序,特殊事物的顺序对我们的意义,但这些还不够,我们必须引入一些相对复杂点的概念来说明问题。

先从这幅图简单的说起,这是四个普通的正方形,似乎并没有特殊的意义。那么我们稍做变化。

加入右侧的方块之后有一种力量使左侧的四个方块更显著的形成一组,或者说左侧的“一组”有赖于右侧较远的独立的方块。 也就是说视觉在形成形象知觉的时候(左侧的一组,右侧的独立方块),物体彼此之间产生了自然的组织和联系,形象知觉的部分依赖这部分形象知觉与其余部分之间的联系。我们会自然地认为左侧相邻的四个方块是一组图片,而另一个为独立的一个方块,相邻的被认为相关,这就是格式塔的临近原则。格式塔源自格式塔心理学,也称完形心理学,格式塔是指“任何分离的整体”。很显然左侧间隙较小的四个方块形相对于右侧形成了一个整体,这就是一组格式塔。这里有一点非常值得思考,如果去掉右侧的方块,左侧的四个方块还是格式塔了吗?很显然,四个一组的关系被严重削弱了。
这点在一些视错觉中体现的最为明显。
如棋盘的扭曲,和上文中的视错觉现象一样,是由于图形内部之间各部分彼此之间互相影响所产生的结果。
那么我们抽象一下,视觉的一个重要性质是整体的各部分彼此之间会产生作用,最终形成一个结果。既然如此,有没有已经存在的理论或者相似的东西来借鉴或者辅助我们理解整体与部分,部分之间的关系呢?格式塔心理学家在上个世纪的研究过程中尽管面临着诸多条件限制,比如神经学的发展还很初级,没有现代的电脑、核磁共振等先进的实验设备,但是他们找到了一个可以帮助他们的类似理论,那就是物理学中的场。场是物理量在空间上的分布,磁场是传递磁性物质间磁力作用的场,引力是传递具有质量物质之间引力作用的场,依此类推。下图就是引力场的一种具象表达。

“如果你是草,便是害羞草,如果你是石,便是磁石,如果你是人,便是意中人”,雨果的书中以磁石来代指所爱之人带来的吸引和力量,这句话放在格式塔心理学中用来解释场的存在是最为恰当的比喻。我们经常会说一些有趣的事物像磁石一样吸引了我们,这是一种心理上的比喻,而在格式塔心理学家的眼中,这不是比喻而是真实的事实。

场对场中的物体产生作用,一和距离有关,二和场的性质以及场中受力物体相关。我们来说最熟悉的引力,任何具有质量的物体之间都存在引力,引力在距离远的地方就会变弱,比如失重的航天飞机依旧受到地球的引力,但是变弱了。引力是没有正负的,只有合力,而电磁场中却分成正向的力和负向的力,同种性质的力排斥,异种的力想吸引,例如磁铁的两极。
如果放在视觉中是什么样子呢?显然距离的作用是肯定的,距离越近的物体越容易被看成一组,相对于第一个四个方块的图形,这四个更像一组。
那么这个场是不是也具有方向?方块的例子说明了视觉中场的存在,证实了吸引的存在,那么只要证明出斥力的存在就可以说视觉中的场也是具有方向的。
从明暗的马太效应来看,如下图所示。
靠近黑色区域的边缘的灰色与白色似乎看上去更亮,所谓马太效应。在绘画中,素描通常强调明暗交界线附近的细致处理。明暗的边缘表现出来的就是斥力,这种斥力强调明暗的分离。
复杂背景和简单图形的分离,不同颜色的分离都会涉及到这一主题,这些会在之后的章节中继续讨论,在这一章中只先讨论距离。
1.7 场内的距离与作用
场中距离远近的对于解释栅格系统的意义是,设计师把一部分信息放在一起作为同一类信息,基本的手段就是通过调整不同类别的视觉信息距离的远近,也就是对格式塔的临近原则的运用。
我们可以非常容易找到这样的例证,导航条与下面区域的分离即是如此。

到这总结一下,1视觉经过了我们大脑的“加工”,2视觉是整体性的,形成视觉的物体之间彼此影响,3相邻的事物或者说顺序对我们的认知具有意义,距离远近会影响意义的表达。所以说,距离远近可以用来给信息分类,这是栅格系统的第一个基石。
但是,如果仅仅是这样,网页的结果就是这样的。

仅仅相关的信息聚在一堆,而没有对齐,那么对齐的意义又是什么?
2 整齐为什么会使人舒服?
我们对整齐的事物存在着明显的偏好,杂乱无章和凌乱是贬义的,整理孩子的房间总被认为是一个头痛的事,如果孩子可以整理好自己的房间就会获得众人的夸奖。



对齐的事物具有对称的几何形态,自然的让人感觉舒适,但是对齐是需要代价的。有一个物理学中的熵增定律,在自然过程中,一个孤立系统的总混乱度(即“熵”)不会减小。任何对齐的事物都是需要耗散能量进行整理的结果,整齐的屋子,货架,农场背后都是踏实的辛劳。
我们再看一个有趣的实验,其中的结果和对齐有关。
2.1图形记忆实验
鲁道夫.阿恩海姆曾经做过这样一个实验,将一个相对复杂的在一组被试者面前以较短时间展示,然后让被试者在预先准备好的纸上不加思索地尽量准确多画出自己看到的图形。从被试的大量图形中,总结出七类典型的图利。
这是原始图形。
这是对回忆图形的分类整理,依据回忆的图形处理的倾向。
强调对称的:
剔除不适合整体的细节的:
简化整体结构的:
轮廓线被封闭的:
将简单形状重复:
强调分离的:
把斜线改为垂直线的类型:
被试者的反映是各式各样的,这种差异性归结于测试者的个性差异,被试者与测试图样的距离,图形在被试者前呈现的时间长短。但除此之外所有的图形都用共同的特征“都能再现出源刺激图形的简化性”。如果这是图形在被试者中的“实际”状态,那么说明了两点,一是知觉系统自动对视觉信息进行了加工,二是加工是对其进行有效的简化。上文所述,对齐就是简化的一种形式,对齐的结果是需要耗散能量的,对齐在排版中耗散的无疑是设计师的脑力和能量,那么这也就相应减少了使用者需要付出的能量。
如果不够直观,我们拿两款手机的对称设计作为例证。

iPhone背面的logo并非居中,而据说在最初的设计中并未如此。如果logo是在正中间,当用手持握iphone的时候,会遮挡住苹果的logo,因此将logo上移,而这时又产生了一个问题,logo上移后,背面的下部显得非常空旷,因此补上了“iPhone”字样,而在中国则又加上了一些被要求加上的细碎但整齐的文字和图案,3C标准。这种方式无疑是为了追求图形上的对称。
坚果手机在设计中也是相同的道理,而罗永浩在该款手机发布的时候更是直言为了对称,底部扬声器另一侧的孔洞和摄像机左侧的孔洞都是仅仅为了对称的美观而存在。


将不规则的形态变为规则的形态,这与阿恩海姆所做的实验所采用的原理一致,可见实验和实际生活中我们对简化和对称的事物有着共同的需求。
2.2 识别的简化 —— 从大轮廓到小细节
有没有相关的理论解释类似的现象?对物体的识别过程,比德尔曼提出了成分辨认理论,来解释形成三维视知觉的机制。首先他提出了几何离子集“比如砖块,圆柱体,楔形体锥体以及把它们轴线弯曲之后的反向体”。
人们可以通过观察物体各边之后把物体分解为几何离子的方式很快再认物体,这些分离的离子又可以重组为其他物体。类似于很少的字母集可以构成无数的单词和句子,少数几何离子可以用来构造基本形状,和无数的基础物体。
传统认为”视觉识别的机制是,从大量看见的物体里面抽取相同的规律“概括”,然后用来判断不同的物体,比如我们看见许多人的头类似椭圆然后抽象成椭圆,再说人的头看上去像一个椭圆,再去区别和人的头不一样的东西,“传统观点”认为这需要相应的智力能力,是从个别细节到整体规律。
而大量的实验证明情况恰恰相反,人的视觉形成是一般到个别的过程。在《视知觉与艺术》中提到了这样的实验,把两个盒子放在一个两岁的孩子或者类人猿的眼前,其中一个盒子里面放着他们爱吃的食物,上面有一个固定大小和形状的三角形,经过多次的显示之后,幼儿和类人猿都知道了画有三角形标记的盒子有他们爱吃的食物。然后改变三角形的形状,变小,变大,倒置,填充,不管怎么变,他们都会识别出三角形的盒子。
在整个实验过程中,每一组只需要两个盒子,一个是带有出现多次但毫无改变的三角形,第二个是带有变化过的三角形,这样几组同时存在,第一个盒子是所有组别通用的那个盒子,第二个盒子是每组自己独有的盒子作为对照。无论小孩还是类人猿都可以轻易识别出带有三角符号的盒子,找到爱吃的食物。
很显然,开始的时候,他们只接触到了一个盒子,却从这一个盒子中得到了三角符号的概念,如果按照第一种方式“概括”的话就需要许多不同的盒子,抽象并找到规律才能形成所为三角符号的概念,并且要求儿童要具有“相应智力”,而两个条件都不需要,幼儿只用了一个盒子和几乎很低的智力水平就完成了识别三角形的任务,甚至更为低级的老鼠也完成了识别三角形的过程。那么视觉形成的规律就该是且只该是这样的,一开始就判定物体的轮廓,然后才是识别细节,这样才能解释为什么细节发生了改变却依旧能识别出三角形符号,而不是相反。
2.3 大轮廓到小细节的意义是什么?
视觉识别的意义对生物是如此的重要,任何相对高等动物都要在出生不久之后就识别出谁是自己的父母,谁是危险自己存在的生物,什么是食物,什么是危险。
如何高效的识别?从个别到一般吗?那么初生儿要看见一万个父母再认出谁是自己的父母吗?这是荒唐的。
视觉识别的过程好像素描一样,先是最为简单的基本图形,方的还是圆的?这样就可以基本区分出人脸与躯干,然后如果是圆的图形,是方一点还是椭圆还是遍一点的椭圆?这样似乎可以区分男女,然后是眼睛是方一点还是圆一点?依次类推的递进,直到认出妈妈。
这样的过程看似繁琐,其实却最为高效。人们识别物体的需求永远不是两个类似的物体,而是许许多多形态各异甚至不断变化的物体,第一轮通过最为基本的图形进行分类,然后再每个类别里再进行第二轮分类,直到区分出所有看见的物体。
假如过程是相反的,先记住一个物体的局部再区分,比如记住一个人的鼻子,那么任何物体和局部都不重复,因为一个鼻子的具体形象和身边任何事物都是不同的,记住无数个局部也无法区分出一个图形,把人的每个部位都分割的记清楚也无法区分出一个人和一座山的。
视觉识别的过程就像素描画的过程,先画一个基本的轮廓,然后是细化的轮廓,然后才是局部的细节。如果从信息角度考虑,从轮廓到细节的记忆和识别方式是最为高效的方式,大脑只需要识别基本轮廓的能力,记忆最少的规则,就可以轻松识别眼睛所看到的一切物体,比如识别躯干和脸只需要能区分正方形和圆的能力就可以,识别人脸也是从方脸还是圆脸开始。
在这个过程中大脑做了什么?简化物体的形状并不断识别,而无需记忆太多复杂的细节信息。就是用这种简单的方法,我们可以花费极短的时间从千千万万人中找到自己的至亲与至爱。
既然我们是从整体而非局部识别物体,那么区分两种设计的开始就不应该过分关注细节,而是从基本的轮廓。看看现代主义设计的简洁轮廓,这是设计的基本和开端。所以可以说,设计始自粗粝,如琢如磨,如切如磋,不甚趣焉。
很显然比德尔曼和阿恩海姆的实验结果具有共性,就是对识别的简化。比德尔曼的理论必然也伴随着可以证明简化存在的实验,那么可以说简化确实是我们视知觉在处理视觉信息中的一种必然。
2.4 整齐是一种简化
我们要先适当的解释舒适。什么样的设计会让人舒适?易于使用的,易于学习的,尽量少的干扰用户的设计是舒服的设计。而杂乱无章的,让用户迷茫的设计则不是舒服的设计。这里的舒服抽象的讲就是最小认知成本,用户经过最短时间和精力识别的界面设计就是好的界面设计。整齐实际是设计师通过设计所呈现出来的一个结果,一个经过设计师简化的结果,好比货架上整齐的货物是由售货员摆齐一样,整齐是设计师创造性工作的结果。
经过了这样一个过程,我们再次接触经过栅格设计的界面时就会以最小对认知成本去认知界面,这就是整齐让人舒服的原因。同样,根据格式塔将相关信息进行分类也会促成舒适的设计体验。设计师在设计的过程中根据格式塔原则进行信息分类,利用栅格系统对界面元素进行整理和对齐,通过创造性的设计降低了用户的认知成本,这也就是本章开头问题的答案,整齐是一种简化。
2.5 简化的延伸思考——斐波那契数列与黄金分割
在这四个图形中找出黄金分割的矩形,这实在是轻松不过的事情,我们熟悉的是第一个正方形和第三个具有黄金分割比的矩形,我们的生活中他们无数次出现过。

这幅图是iPhone图标圆角的由来,而背后还是那个斐波那契数列。
斐波那契数列和黄金分割比之间具有什么关系?为什么这两个和数学上相关的图形会引起知觉上的美感?
先从自然形态的斐波那契数列说起,数学家伏格( Helmut Vogel )模拟了原基生长的公式,


在《A better way to construct the sunflowerhead》一文中他将向日葵的秘密揭示了出来。θ是原基发散的角度,它是相继生长的原基按照螺旋线规律排布时的夹角,只有当θ为137.5度的时候,向日葵的花盘最为紧密,吸收的能量最高(” each new branch fits into the largeststill-existing gap between older branches, cutting a constant fraction off thatgap.“)。

中间是伏格计算出角度的图形,两边作为不同角度的对照,我们会发现中心的图形点最为密集。

而这种排序方式就是斐波那契数列。晶体学先驱布拉菲兄弟(Auguste and Louise Bravais)也发现各组原基发散角的规律排布和不相邻原则。
斐波那契数列的形态无疑是最为节省空间的高效的自然组织形态。
斐波那契数列和黄金分割的关系呢?斐波那契数列最后两个数之间的比值就说明了这个关系,当最后两个数变得无穷大的时候,其实就是求黄金分割比的公式,或者说黄金分割比就是斐波那契数列前后两个数比值的抽象数学化。除了植物之外,有人拿兔子也进行过类似的分析。
一般而言,兔子在出生两个月后,就有繁殖能力,一对兔子每个月能生出一对小兔子来。如果所有兔都不死,那么一年以后可以繁殖多少对兔子?
我们不妨拿新出生的一对小兔子分析一下:
第一个月小兔子没有繁殖能力,所以还是一对;
两个月后,生下一对小兔总数共有两对;
三个月以后,老兔子又生下一对,因为小兔子还没有繁殖能力,所以一共是三对;
……
依次类推可以列出下表:
| 经过月数 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 总体对数 | 0 | 1 | 1 | 2 | 3 | 5 | 8 | 13 | 21 | 34 | 55 | 89 | 144 |
如果我们把兔子换成细胞的增殖,那么人体或者生命体就是以这种方式出现在这个世界上,我们无时不刻不在和这个数字发生关系。在这两个数字与美的关系上并无纯粹的定论,在这里只提供一个可能的假说。黄金分割的计算公式显然是一个可以简化自然认知形态的公式,假设这是一种进入人的认知的天然的公式,我们日常的频繁接触在大脑中强化了这个公式,或者是我们基因内部的相似结构与生俱来携带了这个公式,那么在认知这个世界的时候,这个公式的天然存在就会省却认知成本。
复合并延伸比德尔曼的想法,黄金分割比的几何离子相对容易被人认知,美感即从中而来。
2.6 小结
栅格系统根据俩个因素成为设计的一个重要方法,一个是根据“场”的作用形成的临近法则,我们把相关的事物组织在一起,通过缩短或者放大不同部分的距离表达视觉元素的相关性;另一个是根据“最小认知成本“的认知原理进行矩阵式的对齐,二者协力向用户传递有序和舒适的设计体验。
尽管本章主要是讲述栅格的原理,但更主要的目的是希望通过栅格系统的分析来思考一个问题,我们的感性世界是不是可以用理性的分析进行解读?笔者认为是可以的,而且如果可以合理的解读将会十分有助于设计的顺利进行。
这样的自信源于这样的事实,对于世界的感知和思考都是源于我们的大脑,对于所谓“感性“和”理性“思维来说都具有共同的生理结构,那么为什么要人为的割裂开二者的天然联系?很显然这个地方存在了具有惯性的错误认知,而这种错误认知的原因是我们可以简化对复杂思维过程的理解,通过二分式非好即坏非对即错的方式理解世界和我们自身的思维,而这种简化的符号式的认知贯穿了我们对这个世界的认识。本文的目的就是希望在某种程度更正这种狭隘和落后的认知,让我们更接近真理本身。