每个设计师都应该了解视觉感受和格式塔原理

You probably know about perception. Every day, our brains are processing a lot of information that perception from the proximal stimulus, such as light, sounds, touch, and receive by sensory organs, like eyes. Learning about visual perception is the first step to advance your design to attract target users.

您可能知道感知。 每天,我们的大脑都在处理大量来自近端刺激的感知信息,例如光,声音,触摸以及诸如眼睛的感觉器官所接收的信息。 了解视觉感知是改进设计以吸引目标用户的第一步

What’s perception?

有什么看法?

Perception is the process where information from proximal stimulus is encoded, judged, and given meaning.

感知是对来自近端刺激的信息进行编码,判断并赋予其含义的过程。

每个设计师都应该了解视觉感受和格式塔原理
A diagram of the main features of the eye. Sources by Colin Ware — “Visual Thinking for Design”
眼睛的主要特征图。 Colin Ware的资料来源-“设计的视觉思维”

First, human perception involves signals from the world around us and received by sensory organs, such as eyes, ears, skin. When the light/objects go through our eyes, human visual systems would sense. The light passes through both the cornea and the lens, projected the images upside-down to our retina, where is located in the back go the eyeball.

首先,人类感知涉及来自我们周围世界的信号,并被诸如眼睛,耳朵,皮肤等感觉器官接收。 当光线/物体通过我们的眼睛时,人类的视觉系统就会感觉到。 光线穿过角膜和晶状体,将图像上下颠倒地投射到我们的视网膜,位于后面的眼球。

The retina of the eye contains millions of rods and cones, which connect with ganglion neuron cell, which transmits information through the optic nerve to our brains. Rods and cones are the two important connectors. Whether they function appropriately, would influence our visual information reception.

眼睛的视网膜包含数百万个与神经节神经元细胞相连的视杆和视锥,它们通过视神经将信息传递到我们的大脑。 杆和锥是两个重要的连接器。 它们是否正常运行,将影响我们的视觉信息接收。

The most cones are concentrated in a small area near the center of the retina known as the fovea, where visual acuity is greatest.

视锥细胞最多的是集中在视网膜*凹附近的小区域,该区域的视敏度最大。

However, the rods are located at the edges or periphery of the retina. Rods are sensitive to contrast and overall brightness, work best in low light and poor spatial acuity.

但是,这些杆位于视网膜的边缘或外围。 棒对对比度和整体亮度敏感,在光线不足和空间敏锐度最差的情况下效果最佳。

如何快速找到图形符号? (What does make a graphic symbol be found rapidly?)

How can something be highlighted in our brains? In order to ensure all visual queries can be effectively and rapidly served. As a designer, we should know how to stimulate the periphery vision and what makes an object easy to find to focus user attention on it.

如何在我们的大脑中突出显示某些内容? 为了确保可以有效且快速地提供所有视觉查询。 作为设计师,我们应该知道如何激发周围的视觉,以及使对象容易找到以吸引用户注意力的原因。

每个设计师都应该了解视觉感受和格式塔原理
A view of the brain from beneath. Sources by Colin Ware. Visual Thinking for Design
从下面看大脑。 资料来源:Colin Ware。 设计视觉思维

In our back of the brain, there is a region called primary visual cortex cells, known as V1, where different kinds of information are processed. Visual input from V1 would act the neurons in Visual area 2 (V2), V3, and V4, where individual neurons each respond to a specific simple feature. V2’s neurons respond to slightly more complex patterns, based on the processing already done in V1.

在我们的大脑后部,有一个称为初级视觉皮层细胞的区域,称为V1 ,在其中处理各种信息。 来自V1的视觉输入将作用于视觉区域2(V2),V3和V4中的神经元,其中单个神经元各自对特定的简单功能做出响应。 根据V1中已经完成的处理,V2的神经元对稍微复杂的模式做出响应。

Our V1 is always a response from the feature types, such as orientation, size, and motion. The critical thing to make our eye movement is to pop out from the page.

我们的V1始终是来自要素类型(例如方向,大小和运动)的响应 使我们的眼睛运动的关键是从页面弹出。

Area V1 and V2 can each be thought of as a parallel computer, far more complex and powerful than anything humans have built to date. The V1 and V2 provide the inputs to two distinct processing system called the what system and where systems.

区域V1和V2都可以看作是一台并行计算机,其功能远比人类迄今建造的任何计算机都要复杂和强大。 V1和V2为两个不同的处理系统(什么系统和何处系统)提供输入

The what system and where the system would impact how easily we can direct a rapid eye movement to focus our attention on it.

什么系统和系统将在何处影响我们如何引导眼球快速移动以将注意力集中在该系统上。

What system identified objects in the environments and helps identify the pattern of light and color represents.

哪个系统可以识别环境中的物体并帮助识别光和颜色表示的图案。

Where the system is concentrated on the location of information and with guiding actions in the world, such as moving from place to place and make eye movements.

该系统集中于信息的位置并在世界范围内具有指导作用,例如到处移动并进行眼动。

The responses from the cells that are sensitized passed both up the what pathway biasing the things that are seen, and up the where pathway to regions that send signals to make eye movements occur.

来自敏化细胞的响应既通过偏见所见事物的途径,又通过向发出信号以使眼睛运动的区域发生的地方途径。

每个设计师都应该了解视觉感受和格式塔原理
The most responded visual information in our Primary Visual Cortex (V1)
在我们的主要视觉皮层(V1)中响应最Swift的视觉信息

什么脱颖而出=我们可以争取的(What Stand Out= What We Can Bias For)

Visual search is not random. If you’re looking for something smallish, we can only see it when we are looking at it. But how do the eyes get directed to the right locations if the information has not been processed?

视觉搜索不是随机的。 如果您正在寻找较小的物件,则只有在查看时才能看到。 但是,如果未处理信息,如何将眼睛对准正确的位置?

If that target is distinct in some feature channels of the primary visual cortex(V1), we can program an eye movement. In order to make an object pop-out, it is usually not enough that low-level feature differences simply exist. We sometimes need to combine several feature channels.

如果该目标在主要视觉皮层(V1)的某些特征通道中不同,则可以对眼睛运动进行编程。 为了弹出对象,仅存在低级功能差异通常是不够的。 有时我们需要结合几个功能通道。

Pop-out effects depend on the relationship of a visual search target to the other objects that surround it.

弹出效果取决于视觉搜索目标与其周围其他对象的关系。

As a designer, if you wish to make several things easily searchable at the same time? The solution is to use different channels, such as orientation and size, color, and motion or combines several channels to enhance visibility.

作为设计师,您是否希望同时轻松搜索几件事情? 解决方案是使用不同的通道,例如方向和大小,颜色和运动,或组合多个通道以增强可见性。

One key to making an efficient visual search is through the use of pop-out properties, including the elements of form, size, elongations, color, and orientation;

进行有效视觉搜索的一个关键是通过使用弹出属性,包括形式,大小,伸长率,颜色和方向等元素。

The elements of color, including hue and lightness, motion, and spatial layout. The large-scale graphic structure also can help with visual search when search already is known where the important details exist.

颜色元素,包括色相和明度,运动和空间布局。 当已知存在重要细节的地方时,大规模图形结构也可以帮助进行视觉搜索。

我们的色觉有限 (Our color vision is limited)

Usually, color vision is optimized to detect contrast, not absolute brightness. A well-known example is in image1, the square marked A and B are the same gray. We see B as white because it is shaded from the cylinder's shadow.

通常,对色觉进行优化以检测对比度,而不是绝对亮度。 在image1中是一个众所周知的示例,标记为A和B的正方形是相同的灰色。 我们将B视为白色,因为它已从圆柱体的阴影中阴影了。

每个设计师都应该了解视觉感受和格式塔原理
Image 1. The square marked A and B are the same gray. We see B as white because it is shaded from the cylinder’s shadow. Sources by Johnson, Jeff. Designing with the Mind in Mind.
图像1. 标有A和B的正方形是相同的灰色。 我们将B视为白色,因为它已从圆柱体的阴影遮挡了。 资料来源:Johnson,Jeff。 以心灵为中心进行设计。

Also, our ability to distinguish color depends on how colors are presented. The users. The paler the color is, the harder it is to tell them apart. The smaller or thinner objects are, the harder it is to distinguish their colors. The more separated color patches are, the more difficult it is to distinguish their color.

同样,我们区分颜色的能力取决于颜色的呈现方式。 用户。 颜色越浅,区分它们就越困难。 物体越小或越薄,区分它们的颜色就越难。 色块分离得越多,区分它们的颜色就越困难。

格式塔原理-每个设计师都需要知道 (Gestalt Principles-Every Designer Needs to Know)

Our vision is optimized to see the structure. The structure can be achieved by using the gestalt principles, which are proximity, similarity, continuity, closure, symmetry, figure/ground, and common fate.

我们优化了视觉以查看结构。 可以通过使用格式塔原理来实现该结构,这些原理是相似性,相似性,连续性,闭合性,对称性,图形/背景和共同命运。

Proximity is that objects that are near each other appear, groups, while those are farther apart do not. The relative distance between objects in a display affects our perception of whether and how the objects are organized into a subgroup. For example, image 1–1, the graphic on the left side is perceived to be one group, while the graphic on the right side, people perceive two groups.

邻近点是彼此靠近的对象会成组出现,而距离较远的对象则不会出现。 显示器中对象之间的相对距离会影响我们对对象是否以及如何组织为子组的感知。 例如,在图像1-1中,左侧的图形被视为一组,而右侧的图形则被感知为两组。

每个设计师都应该了解视觉感受和格式塔原理
Image 1–1. Sources: Andy Rutledge
图片1-1。 资料来源:Andy Rutledge

Similarity is that where objects that look similar appear grouped, all other things being equal. similar elements can be grouped by color, shape, or size. for example, in image 1–2, the shape causes us to interpret elements as a column of circles and squares.

相似性是在所有其他条件相同的情况下,看起来相似的对象出现在分组的位置。 相似元素可以按颜色,形状或大小分组。 例如,在图像1-2中,形状使我们将元素解释为一列圆形和正方形。

每个设计师都应该了解视觉感受和格式塔原理
Image 1–2. Source from Jon Hensley.
图1-2。 来自乔恩·亨斯利(Jon Hensley)。

Proximity and Similary often uses to group information, such as organize patterns and objects.

接近和相似经常用于对信息进行分组,例如组织模式和对象。

Continuity is that our visual perception is biased to perceive continuous forms rather than disconnected segments. Human vision is biased to see continuous forms, even adding missing data if necessary. A well-known example of the use of the continuity principle in graphic design is the IBM® logo. It consists of disconnected blue patches, and yet it is not at all ambiguous; it is easily seen as three bold letters, perhaps viewed through something like Venetian blinds.

连续性是我们的视觉感知偏向于感知连续形式而不是不连续的部分。 人类的视觉偏向于看到连续的形式,甚至在必要时添加缺失的数据。 IBM®徽标是在图形设计中使用连续性原理的一个著名示例。 它由不连贯的蓝色补丁组成,但一点也不模糊。 它很容易被看作是三个粗体字母,也许是通过百叶窗之类的东西看到的。

每个设计师都应该了解视觉感受和格式塔原理
IBM logo
IBM徽标

Closure states that our visual system automatically tries to close open figures so that they are perceived as whole objects rather than separate pieces. For example, in image 1–3, human vision is biased to see whole objects, even when they are incomplete.

Closure表示我们的视觉系统会自动尝试关闭打开的图形,以便将其视为完整的对象,而不是单独的部分。 例如,在图像1-3中,人的视觉偏见于看到整个对象,即使它们不完整。

每个设计师都应该了解视觉感受和格式塔原理
Image 1–3
图片1-3

The closure is often used in logo design. The well-known logo design, such as Apple, NBC, Adidas.

封盖通常用于徽标设计中。 著名的徽标设计,例如Apple,NBC,Adidas。

每个设计师都应该了解视觉感受和格式塔原理
Closure principle in logo design
标志设计中的封闭原则

Symmetry states that we tend to parse complex scenes in a way that reduces complexity. the human visual system tries to resolve complex scenes into combinations of simple, symmetrical shapes. For example, in image1–4, we see two overlapping diamonds, not as two touching corner bricks or a pinch-waist octahedron with a square in its center.

对称性表示我们倾向于以降低复杂度的方式来解析复杂的场景。 人类的视觉系统试图将复杂的场景分解为简单,对称形状的组合。 例如,在图1-4中,我们看到了两个重叠的菱形,而不是两个接触角砖或中心为正方形的捏腰八面体。

每个设计师都应该了解视觉感受和格式塔原理
Image 1–4. Sources by Johnson, Jeff. Designing with the Mind in Mind.
图像1-4。 资料来源:Johnson,Jeff。 以心灵为中心进行设计。

Figure/Ground states that our mind separates the visual field into the figure (the foreground) and ground (the background). The foreground consists of the elements of a scene that are the object of our primary attention, and the background is everything else.

图形/地面表示我们的大脑将视野分为图形(前景)和地面(背景)。 前景包括场景元素,这些元素是我们主要关注的对象,而背景则是其他所有元素。

每个设计师都应该了解视觉感受和格式塔原理
Examples of Figure and Ground
地物示例

Common fate concerns moving objects. It states that objects that move together are perceived as grouped or related. One of the implications of common fate is common motion, which is used in some animations to show relationships between entities. In image 1–5, items appear grouped or related if they move together.

共同的命运与移动物体有关。 它指出一起移动的对象被视为已分组或相关。 共同命运的含义之一是共同运动,它在某些动画中用于显示实体之间的关系。 在图像1-5中,如果项目一起移动,它们将显示为已分组或相关。

每个设计师都应该了解视觉感受和格式塔原理
Image 1–5. Common fate example
图片1–5。 共同命运的例子

In the real world, the gestalt principles are usually work in concert, not in isolation. As a designer, we should keep the gestalt principles in mind when we’re designing a display.

在现实世界中,格式塔原则通常可以协同工作,而不是孤立地工作。 作为设计师,我们在设计显示器时应牢记格式塔原则。

每个设计师都应该了解视觉感受和格式塔原理
Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in. 海湾地区黑人设计师:一个专业的黑人开发社区,他们是旧金山湾区的数字设计师和研究人员。 通过在社区中团结起来,成员可以共享灵感,联系,同伴指导,专业发展,资源,反馈,支持和韧性。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

翻译自: https://uxdesign.cc/every-designer-should-know-visual-perception-and-gestalt-principles-5297a5e20312