element ui 原理_应用于ui的掩蔽原理

Let me share with you my journey today…

今天，让我与您分享我的旅程…

… I took a cab using one of these apps.

…我使用这些应用程序之一上了出租车。

… I checked my savings at one of these banking apps.

…我在其中一个银行应用程序中检查了自己的积蓄。

… I bought a pair of t-shirts through one of these retail apps.

…我通过其中一种零售应用购买了一件T恤。

By the end of the day, I used three different applications and I can’t remember any of them.

到最后， 我使用了三个不同的应用程序，我不记得其中的任何一个。

It’s a fact that companies avoid giving character to their interfaces. They design a brand but at the moment to develop an interface they hide it under a mask… just like Spider-man.

事实是，公司避免为界面赋予特征。 他们设计了一个品牌，但现在要开发一个界面，就将其隐藏在面具下……就像蜘蛛侠一样。

遮罩效果 (The masking effect)

When Marvel launched Spider-man in 1963 the character immediately connected with the readers because, in contrast with the other superheroes, all children were able to imagine themselves under the mask.

当漫威在1963年推出《蜘蛛侠》时，这个角色立即与读者建立了联系，因为与其他超级英雄相比， 所有孩子都可以在面具下想象自己 。

In Scott McCloud’s awesome book Understanding Comics, he talks about a technique in illustration called “the masking effect». The underlying principle is this:

在Scott McCloud的出色著作《 理解漫画》中 ，他谈到了插图中的一种“掩盖效果”技术。 基本原理是这样的：

Users want to see themselves in other things. But the more realistic or detailed a drawing of a character gets, the fewer people can project themselves in that character.

用户希望看到其他事物。 但是，角色绘制的图像越真实或详细，则可以在该角色中投射自己的人就越少。

An emoji can apply to everyone, but a photo can only apply to one person. The point is that we can emphasize with cartoonish simple characters but we struggle with realistically drawn ones.

表情符号可以适用于所有人，但是照片只能适用于一个人 。 关键是我们可以用卡通般的简单字符来强调，但是我们要与现实中绘制的字符作斗争。

Recently we had another example of how people perceive empathy through “the masking effect” with “Sonic the Hedgehog” film. People loved Sonic’s original pixel design but when Sony Pictures launched the movie trailer and revealed the new realistic Sonic’s appearance, people immediately hatted it.

最近，我们有了另一个例子，说明人们如何通过“刺猬索尼克”电影中的“掩盖效应”来感知同情。 人们喜欢Sonic的原始像素设计， 但是当Sony Pictures推出电影预告片并揭示新的逼真的Sonic外观时，人们立即讨厌了它 。

Due to audience feedback, people have forced the studio to reshoot the movie with new cartoonish character design.

由于观众的反馈，人们迫使电影制片厂以新的卡通人物设计重新拍摄电影。

避免错误的认识 (Avoiding the wrong perception)

Sadly I feel UI designers are embracing this principle as a pattern. Not as cartoon characters, we are using it as politicians.

可悲的是，我感到UI设计师正在接受此原则作为一种模式。 我们不是将其用作卡通人物，而是将其用作政治人物。

Politicians apply “the masking effect” into their own image. Look at this picture from the 2018 Spanish general election candidates. They look exactly the same. Same suit with neutral colors and same haircut. Nothing sticking out, just an accent color on their tie.

政客将“掩盖效应”运用到自己的形象中。 看看2018年西班牙大选候选人的这张照片。 它们看起来完全一样。 同样的西装搭配中性色和相同的发型。 没什么突出的，只是领带上的点缀颜色。

Now, look at the interfaces of these banking applications. It’s the same language.

现在，看看这些银行业务应用程序的接口。 这是同一种语言 。

Just like politicians, these designs are looking for empathy with a common face without sharing a message because they are just too afraid to provide the wrong perception.

就像政客一样， 这些设计在寻求同情心而又没有分享信息，因为他们太害怕无法提供错误的看法。

We are not building empathy because we are too afraid that users may leave us.

我们并不是在建立同理心，因为我们太害怕用户会离开我们。

We are using flat design because it’s more nitid, makes speedier pages, and has easy adaptability. We use native fonts to ensure effective readability on all the screens. We choose blue as the accent color because it fits in most of all the component’s status. We base our interaction on a navigation bar to provide quick and intuitive flow in web and mobile interfaces…

我们正在使用平面设计，因为它更简洁，页面更快，适应性更强。 我们使用本机字体来确保在所有屏幕上的有效可读性。 我们选择蓝色作为重点颜色，因为它适合大多数组件的状态。 我们基于导航栏进行交互，以在Web和移动界面中提供快速直观的流程…

Well, it does not looks like we are designing, it looks like we are following a recipe.

好吧，它看起来不像我们在设计，看起来像我们在遵循食谱。

Don’t take me wrong, that’s not necessarily something bad. I’m aware that we design it simply because we want to make it functional. But it feels like we are designing lazily and, just as politicians, we are too afraid to leave the safe path. In the end, we will come out with the same product as our competitors, a fine product for everyone but not especial to anyone.

不要误会我的意思，这不一定是不好的事情。 我知道我们设计它的原因仅仅是因为我们想使其功能化。 但是感觉就像我们在懒惰地设计 ，就像政治家一样，我们太害怕离开安全道路。 最后，我们将推出与竞争对手相同的产品， 这对每个人来说都是不错的产品，但对任何人来说都不是特别的 。

So now that we already know how to make something visually functional is time to try better. Design something usable and delightful is not easy but that’s the real UI designer job.

因此，既然我们已经知道如何制作具有视觉功能的产品，那么现在就可以尝试做得更好。 设计一些有用且令人愉悦的东西并不容易，但这是真正的UI设计器工作 。

让使用者记住你 (Let users remember you)

So how may we compose an interface where users can project themselves without coming up with another cold default random design?

那么，我们如何构建一个界面，使用户可以在不提出另一种默认默认随机设计的情况下进行自我投影呢？

If we look beyond Spider-man, Tintin or manga characters we see a rich and detailed world. The only element designed minimally is their face, simple enough to share emotions and connect with users. So how they make these characters recognizable?

如果我们超越蜘蛛侠，丁丁或漫画人物，我们将看到一个丰富而详细的世界。 最小化设计的唯一元素是他们的脸，简单到可以分享情感并与用户建立联系。 那么他们如何识别这些字符？

Well, it’s pretty obvious, look at their hair.

好吧，很明显，看看他们的头发。

We should find a way to do the same with our interfaces. Let’s ideate an interaction, a component or a wording to connect with the users. Don’t be afraid to be repudiated from the mass, identify your target. Empathize with your users using the masking effect and add something to make the interaction unique.

我们应该找到一种对接口进行相同处理的方法。 让我们构思一个与用户联系的交互，组件或措辞。 不要害怕被大众拒绝，确定您的目标。 使用遮罩效果吸引用户，并添加一些东西使交互独特 。

Let’s add a layer of personality to our designs. Something to let users remember you.

让我们为设计添加一层个性。 要的东西 让使用者记住你 。