APP下载

人的视觉规律在现代设计中的体现

2020-10-09赵志永

写真地理 2020年27期
关键词:轮廓线图标规律

赵志永

摘 要: 本文以视觉心理学作为理论基础,将手机界面视觉设计作为研究对象,对手机界面上的图形元素以及它们之间的组织关系进行了研究,其中主要是对简化关系、图底关系,层次关系等方面进行分析。

关键词: 视觉心理学;手机界面

【中图分类号】TB472 【文献标识码】A 【DOI】10.12215/j.issn.1674-3733.2020.27.034

根据格式塔心理学,人们的视觉认知过程具有一定的规律,视野中离散的刺激可以由于它们彼此之间的某种关系而被组织在一起,形成一个整体的感觉。视觉上的整体感是界面设计趋于成熟的重要特征。从格式塔心理学所整体论的角度解释,一款界面的整体感是由单个视觉元素按照一定的规律组织体现出来的,用户根据自己的视觉经验对界面进行判断,从而降低视觉压力,增强视觉认知,从而使操作过程直观易懂、高效愉悦。我们的视知觉是如何将他们組织判断最终形成一个视觉整体的呢?下面将对这一问题做一些分析探讨。

1 手机图标中的简化关系

简化关系属于视知觉组织规律,偏重对物体的整体感知,它使某些部分之间的关系看上去比另外部分之间的关系更加紧密,它主要的简化方式就是完形法则,格式塔心理学中的组织完形法则有一百多种,这里主要涉及到封闭律、相似律、接近律。

1.1 闭合律

闭合可以实现统一整体,这不难理解。但是不闭合有时候也会实现统一的整体,更确切的说,这种现象是一种不完全的关闭。这些图形与设计给人以简单,轻松、自由的感觉。所以,完全的闭合是没有必要的。如图一和图二的图标设计中,虽然整个图标轮廓不是闭合的,但给人的感觉还是闭合的一个整体。图三是凤凰新闻手机端的最新版本的导航图标,也应用同样的原理。

1.2 相似律

人们通常把那些明显具有共同特性(如形状、运动、方向、颜色等)的事物组合在一起。这种方法在导航和强调信息部分属性的设计上有着广泛地应用。如图4,它是苹果ios8新推出的一个健身APP,底端的四个图标在默认都是灰色的,但被选择之后其中一个就会变成红色,那么其他三个由于相同的颜色就会被视为一个整体。

1.3 接近率

接近强调位置,实现统一的整体。设计中类似的现象还有很多,可以说接近是实现整体的最简单常用的法则。如图5、图6中的图标,由于线条的接近,图标的整体性也就体现了出来。

2 手机界面中的图底关系

“图-底”论是视觉心理中最基本的一条理论,它认为我们知觉到的客观世界分为两部分,即“图形”和“背景”,图形是知觉的中心,具有明显的外轮廓,背景则是作为图形的陪衬。一般说来,图案与背景的区别度越大,图形就越突出成为我们的知觉对象。在手机界面的设计中,区分图底是第一任务。因为手机呈现的是一个二维空间,这就增大了图像认知的难度,再加上手机屏幕上内容越来越丰富,突出图形就显得很有必要。一般我们采用凹凸、闭合曲线、来实现图和底的分离。

2.1 凹凸

人们一般会将凹进或者平整的事物看做背景,而将凸起的事物看做图形。在iOS7之前的手机界面偏爱拟物化设计(如图7),这种设计通过对现实中的客观对象进行一定程度的抽象和简化,以降低学习和认知成本,同时它也有效区分了图底关系。即使是在扁平化盛行的今天,很多界面依然用投影的方式表示一种凸出形态以区分图底,如图8。

2.2 闭合轮廓线

一般来说,有封闭轮廓线的形,容易被看做是图(形象);反之,容易被看成是底(背景)。当事物的轮廓线越大,轮廓线内部的点距离轮廓线越远时,这一点受到轮廓线的影响越小,越容易与背景融合;反之,事物圈定的面积越小,其内部越容易与背景分离。在手机界面设计中越来越重视线的使用,以达到简洁的目的。比如iOS7以后的版本按键等要素都使用各种“线”来实现(如图9),这就增加了用户认知风险。这时就要尽量使用闭合曲线以与背景分离。ios8中的拨号键使用了闭合圆形来达到分离背景的目的。如图10。

3 手机界面的层次关系

视觉对象由于形状、明暗、色彩的不同,所呈现的层次关系也不一样。人的视觉活动会对观察对象进行积极的加工,以使得视觉层次尽量减少到最低限度。在手机界面中,有时我们也需要通过不同的层次深度来表达不同的内容。但电子屏幕是完全平面化的,它无法呈现不同深度的信息内容。我们可以通过虚化模糊背景或者使用card设计的方法来实现。苹果iOS应用毛玻璃效果把背景模糊成一个层次,以凸出显示所要表达的另一层,如图11所示。而Google 今年推出的Material Design的解决方式就是把现实世界中纸张的特性挪到电子屏幕里,把信息内容呈现在这个虚拟的纸上,纸(信息内容)跟纸之间有上下层级关系,用投影模拟纸张的空间感,投影会随着纸张的空间关系而改变大小,如图 12。

4 结语

在现实使用的手机界面中,各种视觉规律并不是独立存在的,通常都是共同发挥作用。在进行界面设计时,应遵守格式塔的基本原理,顺应人的视觉规律,使界面更好用、更易用。在完成设计之后,可以拿格式塔原则对各个设计细节进行检验和验证,避免为了视觉效果或特立独行而违背人的视觉规律。同时,在设计的过程中,要灵活运用视觉规律,在符合基本规律的基础上做出适度的、合理的创新,不仅让用户觉得产品好用,还要不时送给用户惊喜,使用户愿意留在界面中继续探索。

猜你喜欢

轮廓线图标规律
规律睡眠中医有妙招
找规律 画一画 填一填
找排列规律
基于HTML5的凸轮廓线图解法App教学软件研究
Android手机上那些好看的第三方图标包
Android手机上那些好看的第三方图标包
中国风图标设计
巧解规律
有意思的厕所图标
多轮廓线的三维形体重构技术研究与实现*