UI设计与认知心理学(全彩)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

4.8 设计与邻近原则

1 空间同义的邻近布局

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

“无框UI设计”通过距离分隔不同部分

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

Medium首页同样使用空间分隔不同的部分

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

安卓系统的浮动按钮

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

浮动按钮的使用规范1

再如下图所示。

浮动按钮使用规范2

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

2 空间异义的场景构建

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

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

3 时间的语义异义邻近

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

在初次启动时,引导通过语音完成

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

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

先看如下图所示的图形。

图形逐渐变化

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

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

格式塔共同命运原则

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