图像标注技巧_图像技巧使用户感觉比想像的要好

图像标注技巧

A picture is worth a thousand words.

一张图片胜过千言万语。

We've all heard that old chestnut a thousand times before, right? In web design images are as important if not more than your actual copy.

我们都曾经听过一千遍老栗子，对吗？ 在网页设计中，图像甚至不超过实际副本同样重要。

While there's no doubting the precision that clear writing can bring to an idea, images have the ability to bypass the high-level, analytical brain and speak straight to us on an emotional level. Do we need another goofy cat Youtube video to prove that imagery can turn normal, intelligent discerning humans into giggling, retweeting fools?

毫无疑问，清晰的写作可以为一个想法带来精确性，但是图像具有绕开高级分析大脑并在情感层面上直接对我们说话的能力。 我们是否需要另一则愚蠢的Youtube视频来证明图像可以将正常，聪明的人变成傻瓜，转推傻瓜？

There are three types of readers your site encounters. You have:

您的网站会遇到三种类型的读者。 你有：

• The Reader : an individual that reads every line

  读者 ：阅读每一行的个人

• The Scanner : an individual who “scans” or “skims” through your content to find the interesting bits

  扫描仪 ：一个人“扫描”或“浏览”您的内容以找到有趣的部分

• The Bottom Feeder : an individual who reads the first few sentences and then cuts to the summary paragraphs

  下进纸器 ：一个人，先阅读前几句话，然后剪切到摘要段落

Do bear in mind, the same user could take on any of these roles, possibly even within the same browsing session.

请记住，即使在同一浏览会话中，同一用户也可能承担任何这些角色。

The majority of readers fall under the scanner category, which makes it even more important to make emotionally impactful choices in regards to your visual content. Regardless of what type of readers you encounter there is one thing that you must always remember, you’re dealing with humans and humans are influenced by emotional triggers.

大多数读者都属于扫描仪类别，这使得在视觉内容方面做出具有情感影响力的选择显得尤为重要。 无论您遇到哪种类型的读者，您都必须始终记住一件事，您与人打交道，并且人受到情感触发因素的影响。

电影提示 (Film Cues)

I find that the easiest way to explain and illustrate examples and techniques is to use common links. In this article I'm going to be borrowing from the world of film.

我发现解释和说明示例和技术的最简单方法是使用公共链接。 在本文中，我将借鉴电影世界。

Most of us have films we relate to. We laughed or cried, we cheered for a hero, and we feared for a character's safety. Each film used a clever combination of image and sound to manipulate the way we felt. And we probably loved it.

我们大多数人都有与我们相关的电影。 我们笑或哭，我们为英雄欢呼，我们为角色的安全而担忧。 每部电影都使用图像和声音的巧妙组合来操纵我们的感觉。 我们可能喜欢它。

Aside from entertaining us and creating a visual masterpiece with a strong story, directors aim to trigger some form of emotional reaction — and if you reacted, even for a second, then they did their job.

导演除了娱乐我们并创作出具有强烈故事力的视觉杰作外，导演的目的是引发某种形式的情感React-如果您做出React，即使只是一秒钟，他们就可以完成自己的工作。

This should be the way your approach your website imagery choices. Trigger an emotion and capture your audience.

这应该是您处理网站图像选择的方式。 激发情感并吸引观众。

逻辑不听话 (Logic Doesn’t Dictate)

Let's take a photo of a smiling face and animated body language. There's every chance that your three year old niece could tell you that the smiling person is happy.

让我们拍张笑脸和生动的肢体语言照片。 您三岁的侄女很可能会告诉您微笑的人很高兴。

While our logical brain can justify why the image might communicate happiness, it isn't part of the process that evokes the emotion for the viewer. Often our 'gut' reaction to an image comes first, and our logical brain is given the task of explaining our reasoning later.

尽管我们的逻辑大脑可以证明图像为什么可以传达幸福，但它并不是过程中唤起观看者情感的部分。 通常，我们对图像的“胆量”React首先出现，然后我们的逻辑大脑被赋予稍后解释我们推理的任务。

Of the following two images, the left image may be more scientifically useful in understanding precisely what a frog is. But it's probably the right image that we engage with.

在以下两个图像中，左图像可能在科学上更准确地理解青蛙是有用的。 但这可能是我们参与的正确形象。

Two accurate frog images — but which one engages you?

两张准确的青蛙图像-但是哪一张能吸引您？

This is why, as designers, we should always favour emphasizing “feelings over logic”. It's more impactful and will do a better job making your visitors 'connect'.

这就是为什么作为设计师，我们应该始终主张强调“感觉胜于逻辑”。 它更具影响力，并且可以更好地使访问者“连接”。

To help this, we can employ some subtle techniques of adjusting the frame, manipulating the color and focal points we can craft the emotional message, in the same way we might craft written copy.

为此，我们可以采用一些微妙的技术来调整框架，操纵色彩和焦点，从而可以制作出情感信息，就像制作书面副本一样。

关键技术 (Key Techniques)

While there are numerous ways to generate and evoke emotion the easiest and quickest results come from appropriate framing and lighting. These two methods help create atmosphere.

尽管有很多产生和唤起情感的方法，但最简单，最快的结果来自适当的取景和照明。 这两种方法有助于营造气氛。

Consider the hard hitting moments in film. The parts where you are really made to feel. These are crafted thanks to the work of the cinematographer.

考虑电影中的重击时刻。 真正让您有感觉的部件。 这些都是由于摄影师的努力而制作的。

Below I’ll show you examples of how both framing and lighting choices can motivate the emotions needed for your site. Note that each image has gone undergone a very quick 5 minute edit to work as examples.

下面，我将向您展示框架和照明选择如何激发网站所需情绪的示例。 请注意，每个图像都经过了5分钟的快速编辑才能作为示例。

构图 (Framing)

Framing is an important aspect whether you’re making movies or shooting photos. The proper angle and distance from the lens are just those small little changes that can create a “wow” effect for your viewers.

无论是拍摄电影还是拍摄照片，构图都是重要的方面。 与镜头的适当角度和距离只是那些微小的微小变化，可以为观看者创造“哇”的效果。

Let’s look at the two examples below to see how a good crop or tighter frame can change the overall mood of an image.

让我们看下面的两个例子，看看良好的裁剪或更紧的边框如何改变图像的整体色调。

Example 1

例子1

Credit : https://www.flickr.com/photos/coffeemakesitbetter/4866329711/in/photostream/

图片来源： https : //www.flickr.com/photos/coffeemakesitbetter/4866329711/in/photostream/

At first glance this image is of a good quality and has captured emotion. Upon second glance and if you are looking to place this on your website, say for the header/slider the image is fairly neutral.

乍一看，此图像具有良好的品质并吸引了情感。 第二眼，如果您希望将其放置在您的网站上，请说说标题/滑块的图像是中性的。

Yes, the people appear happy but that’s because logic is telling you “smiling means happy”. Crowd shots are tricky when eliciting emotions.

是的，人们看起来很快乐，但这是因为逻辑告诉您“微笑意味着快乐”。 引发情绪时，人群拍摄非常棘手。

If this image was for a charity organization website and accompanied with the text “Better Life, Better Care” and a donation button you would want to motivate people to actually donate to create a better life to the recipients.

如果此图像用于慈善组织的网站，并带有文字“更好的生活，更好的护理”和一个捐赠按钮，您将希望激励人们实际捐赠，以为接受者创造更好的生活。

Creating a tighter shot on particular faces can easily affect this.

在特定面Kong上拍摄更紧密的照片很容易影响这一点。

Here you see I focused on those truly happy faces in the crowd. By creating focus I have helped isolate those feelings of happiness. Compared to the original you are more likely to smile and consider donating than if prompted with the original image.

在这里，您会看到我专注于人群中那些真正幸福的面Kong。 通过集中精力，我帮助隔离了那些幸福的感觉。 与原始图片相比，与原始图片相比，您更有可能微笑并考虑捐赠。

Example 2

例子2

Credit: https://www.flickr.com/photos/robinmcconnell/9700775038/

信用： https : //www.flickr.com/photos/robinmcconnell/9700775038/

The process of framing for emotional impact can be used even when you have one person in your photo. Remember that humans like looking at other humans. We are born with the software for reading faces and we see faces in everything from clouds to tree bark to car bonnets.

即使您的照片中只有一个人，也可以使用构图以产生情感影响。 请记住，人类喜欢看别人。 我们天生就有用于读取人脸的软件，而且我们可以看到从云层到树皮再到汽车引擎盖等所有事物中的人脸。

Just like before we have a smiling face but we really can make it a lot more impactful than it already is.

就像之前我们笑着面对一样，但我们确实可以使它比以前更具影响力。

Consider if this image was for a site that wanted to promote active and healthy living for women. While there is nothing wrong with the shot we can amp it up by focusing on the woman’s face more.

考虑一下此图像是否用于想要促进妇女积极健康的生活的网站。 虽然拍摄没有问题，但我们可以通过更多地关注女性的脸来增强拍摄效果。

With a tighter emphasis on her face than on her actual activity, we can motivate the thought process starting from “oh, she looks to happy” to “wow, that could be me enjoying myself while being fit”. Not to mention we have direct eye contact which is always a helpful technique to use within your site’s images.

通过重点放在脸上而不是实际活动上，我们可以激发思维过程，从“哦，她看起来很高兴”到“哇，这可能是我在保持健康的同时享受自己”。 更不用说我们有直接的眼神交流，这总是在您的站点图像中使用的一种有用的技术。

Now pair that with a well designed Call To Action (CTA) that perhaps prompts you to “learn more” and the emotional cue is more likely to happen.

现在，将其与精心设计的号召性用语(CTA)配合使用，它可能会提示您“学习更多”，并且更有可能发生情感暗示。

灯光 (Lighting)

Lighting is an extremely important asset in and outside of images. We as humans use lighting on a daily basis not only to see but as visual stimulants. Real estate agents purposely open the windows of houses they show to create an enjoyable and welcoming atmosphere. Restaurants manipulate the amount and type of lighting to enhance the dining experience.

照明是图像内部和外部的极其重要的资产。 作为人类，我们每天都在使用照明，不仅作为视觉刺激，而且作为视觉刺激。 房地产经纪人特意打开他们展示的房屋的窗户，以营造一种愉悦而温馨的氛围。 餐厅控制照明的数量和类型，以改善用餐体验。

Film of course does this as well. Blue lighting can be used to motivate somber moods and tones while warmer lighting can depict carefree atmospheres or high energy.

电影当然也可以做到这一点。 蓝色照明可用于激发沉闷的心情和色调，而温暖的照明则可表现出无忧无虑的氛围或高能量。

Let’s take a look at our lighting examples.

让我们看一下我们的照明示例。

Example 1

例子1

While our image above does seem to be an emotive shot, we can heighten the effect. Depending on what the text copy is around it the context of this image could be easily seen as contemplative or even neutral.

虽然我们上面的图像确实是一个感性的镜头，但我们可以增强效果。 根据周围的文本副本，该图像的上下文很容易被视为沉思甚至中立的。

By manipulating just the lighting of this particular photo we can create a slightly more solemn feel. This always needs to be subtle.

通过仅处理此特定照片的照明，我们可以创建稍微更庄重的感觉。 这总是需要微妙的。

By darkening shadows and adding cooler tones we have established a more definitive emotion than the original image.

通过使阴影变暗并添加较冷的色调，我们建立了比原始图像更明确的情感。

Like noted before you can achieve feelings by changing your lighting. This means you can create feelings of love just as easily as feelings of sadness.

如前所述，您可以通过更改照明来获得感觉。 这意味着您可以像悲伤一样轻松地产生爱的感觉。

Our image here has some aspects that you would automatically decide as positive. We have this colorful backdrop and a couple kissing at the forefront and in the center.

我们在这里的形象有些方面，您会自动判断为正面。 我们有这个色彩斑backdrop的背景，情侣在最前沿和中央接吻。

If you wanted to use this image for a site for couples then there needs to be some adjustments to the lighting to give you a more “lighter” and “loving” feeling.

如果您想将此图像用于情侣聚会场所，则需要对照明进行一些调整，以使您更“轻”和“喜欢”。

By opening up our image with light we have something that is not only brighter but gives you a sort of innocent, carefree feeling as opposed to the harsher shadows and saturated colors in the original photo.

通过用光打开图像，我们不仅拥有更明亮的色彩，而且还带给您一种天真无忧的感觉，与原始照片中较刺眼的阴影和饱和色相反。

一起构图和照明 (Framing and Lighting Together)

Now that you have seen how framing and lighting work separately, here is what a difference that using both techniques together can get you.

既然您已经了解了帧和照明是如何分开工作的，那么同时使用这两种技术可以为您带来不同。

Before

之前

Credit: https://www.flickr.com/photos/coffeemakesitbetter/6288435873

图片来源： https ： //www.flickr.com/photos/coffeemakesitbetter/6288435873

After

后

快速提示 (Quick Tips)

• Avoid going for crowd shots. If you must create a pull or rack focus to generate interest in one specific area.
  避免去人群射击。 如果必须创建拉动或机架焦点以引起对特定区域的兴趣。
• The amount of contrast used in your images should be proportionate to the site’s background to not create disconnect.
  图像中使用的对比度应与网站背景成比例，以免断开连接。
• If your image appears to fall into “neutral ground” try adjusting your crop.
  如果您的图像看起来掉到了“中立”，请尝试调整裁剪。
• Try to go for images that show either humans or animals. This will help motivate positive emotion and interest opposed to objects.
  尝试寻找显示人或动物的图像。 这将有助于激发与对象相对的积极情绪和兴趣。
• When opting for object shots make sure to create interesting angles.
  选择拍摄对象时，请确保创建有趣的角度。
• Go for that one amazing image instead of five good images.
  选择一张令人惊叹的图像，而不是五张好图像。
• If your image is within your article make sure that it is followed by text or captions to motivate readers to continue scrolling.
  如果您的图片在文章中，请确保在其后跟随文字或标题，以激发读者继续滚动。
• When cropping/framing your images you may need to apply a blur effect to create focus.
  裁剪/构图时，您可能需要应用模糊效果以创建焦点。

结论 (Conclusion)

As you can see, it’s just a little tweaking on your part that can really evoke emotion no matter what type of image you’re using. With a little consideration on how you want your visitors to feel you can very easily guide them towards that by simple psychological triggers as opposed to logical stimulants.

如您所见，无论您使用哪种类型的图像，只要稍作调整，就可以真正唤起情感。 稍微考虑一下您希望访客的感觉，您可以通过简单的心理触发(而不是逻辑刺激)轻松地引导他们迈向这一目标。

Hopefully this article has been enough to inspire you to do your own testing with framing and lighting.

希望本文足以激发您对框架和照明进行自己的测试。

翻译自: https://www.sitepoint.com/tricks-images-make-users-feel-think/

图像标注技巧