4.8 设计与邻近原则

1 空间同义的邻近布局

“无框UI设计”就是通过基本的空间分隔来组织相邻的视觉元素的，比如Airbnb的页面设计。

下部的“体验”内容与“房源”内容之间完全没有线框，而“体验”内容和“房源”之间的空白比较大。再比如，Medium首页的截图，仍然是通过空间分隔不同部分内容的。

相对早期的Material Design指导原则中组件（Components）对浮动按钮（Buttons:Floating Action Button）的规定也是格式塔邻近原则的应用。浮动按钮是一个悬浮在界面上的圆形按钮，点击悬浮的浮动按钮后，会转换成几个相关的动作按钮。

按照设计原则，点击浮动按钮后应该转换成相关的动作按钮（如绿条上），而不应该转换成无关的动作按钮（如红条上）。

再如下图所示。

当点击设计正确的浮动按钮时，出现的是一组头像，此时可以猜测点击头像后会进入相关的个人页面。而如果错误地将点击后的图标设计成“麦克风”“蛋糕”“人”的组合，实际上可能激活的是一个过生日唱歌的场景，这就变成了空间异义邻近的场景，这是邻近原则使用中经常出现的问题。

2 空间异义的场景构建

独立的视觉元素一旦进入场景就会对场景和自身的意义产生影响，成为场景的一部分，进而失去独立性。进入场景的视觉元素分为两种：第一种是纯粹的简单图形，比如圆形与正方形的对比；另一种是具象的复杂图形表现出超出图形的意义，如“五角星”可能代表的是收藏，或者类似于前文中的电锯表达出的3种含义。

空间异义场景构建中的视觉元素会根据场景的变化形成不同的效果，引起不同的激活，所以构建的重点并非单纯的元素，而是“视觉元素—场景”的整体效应，在构建之中，视觉元素往往具有多重含义，如电锯的中性（工具属性）、贬义（破坏自然）、褒义（创作工具），苹果的含义有普通的水果（本意）、苹果公司（图形意义延伸）、图灵的苹果（“吃了毒苹果身亡”故事意义的延伸）。

3 时间的语义异义邻近

导航软件语言对位置的表达依赖于上下语义的构建，如“前方行驶300米后左转”，“前方”指的是相对于软件使用者自身的位置。也就是说，语义邻近的范围可以连接可视环境和抽象的语音环境，可视环境的语义与语音环境可以通过时间邻近联合起来。反过来，“听觉—视觉”过程的语义邻近在软件交互中也在使用，比如，使用声音配合图像的新手引导过程，如下图所示的Facebook公司的新闻类软件Paper的新手引导过程。

人工智能兴起的一个重要标志就是语音识别的应用，在这其中最为基本的就是抽象语义在各种环境中的邻近，可以是基本的“听觉—听觉”，也可以是“视觉—听觉”与“听觉—视觉”，相关内容会在“13 人工智能与UI设计——智能的本质”中继续讨论。

4 时间场景的异义邻近——共同命运原则

先看如下图所示的图形。

这是一组渐变的图形，人们会自然地认为最后一个图形是第一个图形在时间上演化的结果，时间场景的效应就是让时间尺度上的独立视觉元素产生关联效应，格式塔的共同命运原则实际上也是时间场景的异义邻近。

共同命运原则就是具有共同的运动方向，具有相同或近似速度的元素会被组织在一起，当成具有关联的整体。在操作系统的UI中，选定多个文件并一起拖动文件，这些文件就会被自然地看成一组。

这里起作用的就是被选择的文件在运动过程中时间上的一致性。事实上，不同时间点上的截图是不同的，但是仍旧可以看出运动元素之间的关系。