ios 动画设计_动画和讲故事在设计中的力量

ios 动画设计

As human beings, we’ve always been fond of storytelling. Just think of campfire stories, Santa Claus, or that thrilling book you just finished. Here’s how you can use the power of storytelling to make your designs better.

作为人类，我们一直喜欢讲故事。 只是想想篝火的故事，圣诞老人或刚读完的那本激动人心的书。 这是您可以使用讲故事的能力来改进您的设计的方法。

Storytelling is all around us.

讲故事就在我们身边。

We tell stories and love to listen to them. You could consider our dreams to be stories we tell ourselves. We dream about classic myths and legends, the things we want to achieve, about love and death. They are all storytelling motifs.

我们讲故事，喜欢听。 您可以将我们的梦想视为我们讲述的故事。 我们梦想着经典的神话传说，我们想要实现的事情，关于爱情和死亡。 它们都是讲故事的主题 。

“Myths are public dreams, dreams are private myths.” — Joseph Campbell

“神话是公共梦想，梦想是私人神话。” —约瑟夫·坎贝尔

Storytelling is very powerful.

讲故事非常强大。

Just think of worldwide events like the Super Bowl commercials or the latest blockbuster movie. Everybody’s talking about it. Storytelling greatly enhances user experience. In fact, storytelling is a basic human need. It keeps us focused and motivates us to grow, express ourselves, and be creative.

试想一下全球活动，例如超级碗广告或最新的大片。 每个人都在谈论它。 讲故事可以大大提高用户体验。 实际上， 讲故事是人类的基本需求。 它使我们保持专注，并激励我们成长，表达自我和发挥创造力。

We are all storytellers.

我们都是讲故事的人。

If you skip to modern times you will see that storytelling is an even bigger part of our society. We have the means to do so and the audience to share it with all on the mobile device in our pocket.

如果您跳到现代，您会发现讲故事是我们社会中更大的一部分。 我们有能力做到这一点，观众可以在口袋里的移动设备上与所有人共享它。

Did you know that you can use storytelling as a part of your visual, UI/UX, or product design process to greatly improve the quality of your work?

您是否知道您可以将讲故事作为视觉，UI / UX或产品设计过程的一部分，以大大提高工作质量？

Here’s how and why.

这是方法和原因。

讲故事作为一种设计技能 (Storytelling as a design skill)

You can use several different skills to work with storytelling. UX writing, for example, is the modern (digital) version of telling a campfire story to your audience.

您可以使用几种不同的技能来讲述故事。 例如，UX写作是现代(数字)版本，可以向您的听众讲述篝火的故事。

UX writing is all about using the right words that resonate with your target audience. It has to be clear, inclusive, and useful. A picture tells you more than a thousand words, but sometimes you need to words also.

UX写作就是使用与目标受众产生共鸣的正确词语。 它必须明确，包容且有用。 图片告诉您一千多个单词，但有时您也需要说单词。

Other design skills that go hand-in-hand with storytelling are visual design, animation, and service design. For now, I will focus on animation.

与讲故事紧密相关的其他设计技能是视觉设计，动画和服务设计。 现在，我将专注于动画。

设计中讲故事的附加价值 (The added value of storytelling in your design)

Storytelling engages the user. An engaged user is far more likely to complete a task, register with your service, or return to your product altogether. Both storytelling and design help you to engage the user in a way that will benefit your business goals.

讲故事吸引用户。 敬业的用户更有可能完成任务，向您的服务注册或完全返回产品。 讲故事和设计都可以帮助您以有利于您的业务目标的方式吸引用户。

Good design is where user goals meet business needs.

良好的设计是用户目标满足业务需求的地方。

Anyway, enough introduction. Here are a few ways you can use storytelling to improve your design.

无论如何，足够的介绍。 您可以通过以下几种方式使用故事讲述来改善设计。

描绘一个主题 (Depict a theme)

Does your product or your client’s product have a theme? Maybe a certain type of sport, a day and age, or in case of a restaurant a type of cuisine. You can make great use of that.

您的产品或客户的产品有主题吗？ 可能是某种体育活动，白天和黑夜，或者在餐厅里是一种美食。 您可以充分利用它。

When talking about sports themes, for example, Dribbble makes great use of their theme. Dribbble is built around a basketball metaphor. Users are called Players and every image a player uploads is called a Shot. Imagine if you would remove all of that. A user would be just a user. You wouldn’t have to be drafted by another Player. You would have to be selected. That cool basketball loading icon would be just that. A basic loading icon. It loses something.

例如，在谈论体育主题时， Dribbble充分利用了它们的主题。 Dribbble是围绕篮球比喻构建的。 用户称为“播放器”，而播放器上载的每个图像称为“镜头”。 想象一下，如果您删除所有这些。 用户将只是一个用户。 您不必由其他玩家起草。 您必须被选中。 那个很酷的篮球加载图标就是这样。 基本的加载图标。 它失去了一些东西。

Having a theme in place adds to Dribbble’s success.

拥有适当的主题可以增加Dribbble的成功。

“The most powerful person in the world is the storyteller. The storyteller sets the vision, values, and agenda of an entire generation that is to come.” — Steve Jobs

“世界上最有权势的人是讲故事的人。 讲故事的人设定了下一代的愿景，价值观和议程。” —史蒂夫·乔布斯

Here’s what it comes down to. Having a theme in place and using it in your designs adds storytelling to your product. Storytelling engages your users. It is a great way to help users remember you and your product. The added business-related benefit is that users that remember your product are far more likely to return to your product.

这就是它的含义。 放置主题并在设计中使用它可以为您的产品增加故事讲述。 讲故事可以吸引用户。 这是帮助用户记住您和您的产品的好方法。 与业务相关的附加好处是，记住您的产品的用户更有可能返回到您的产品。

Returning users are good for business.

老用户对企业有利。

An example

一个例子

Design a golf-themed progress bar, for example. Imagine you’re running a golf course. You have a website and a mobile application for your guests. Your guests know about golf, obviously. It’s a great chance to improve user experience by implementing a golf-themed UI design.

例如，设计一个以高尔夫为主题的进度条。 想象一下，您正在跑步高尔夫球场。 您有一个网站和一个移动应用程序供客人使用。 您的客人显然了解高尔夫。 通过实施以高尔夫球为主题的UI设计，这是改善用户体验的绝佳机会。

Golf Course Progress Bar on 盘带上的 Dribbble. 高尔夫球场进度栏 。

You could call your starting time the tee-off-time. You could call the restaurant next to the golf course The 19th hole. From an animation and UI design’s perspective, you could design the progress bar of a form element to look like a golf flag.

您可以将开始时间称为开球时间。 您可以在第19洞高尔夫球场旁边的餐厅打电话。 从动画和UI设计的角度来看，您可以将表单元素的进度栏设计为看起来像高尔夫球旗。

These are just a few examples of how storytelling can help you change your golf course from just another golf course to the golf course players keep returning to for more.

这些只是讲故事如何帮助您将高尔夫球场从另一个高尔夫球场更改为高尔夫球手不断回头的更多示例。

使用动画指导用户完成任务 (Use animation to guide your users in completing a task)

There’s storytelling for the bigger picture of your products, like the previous point on themes. When you drill it down to actually using an application, the way users move through your application via the user interface (UI) tells a story, too.

故事讲述可以为您的产品提供更广阔的前景，就像主题之前的观点一样。 当您深入研究实际使用应用程序时，用户通过用户界面(UI)在应用程序中移动的方式也会讲述一个故事。

Think of it as the user’s story, or the customer’s journey as it is more commonly known. The user signs up, logs in, completes a set number of tasks, and logs out. That’s the user’s story of your application. Your user goes through his story via the UI. User interfaces can be overwhelming. Both for you as a designer to create the UI and for your users to use it. Especially if you’ve never used the particular UI before. There’s a lot to look at.

可以将其视为用户的故事，或者将其视为更为普遍的客户旅程。 用户注册，登录，完成一定数量的任务并注销。 这就是用户关于您的应用程序的故事。 您的用户通过用户界面浏览了他的故事。 用户界面可能不堪重负。 您既可以作为设计师来创建UI，也可以供用户使用。 特别是如果您以前从未使用过特定的UI。 有很多东西要看。

The user is the hero in their own customer journey. You’re the Obi-Wan, Dumbledore or Gandalf to their story.

用户是他们自己的客户旅程中的英雄。 你是欧比旺，邓布利多或甘道夫的故事。

You can help guide your users by using subtle movement in your elements. As a designer, you know the steps the user must take to complete his story because you helped design the steps. You can assist by providing subtle cues and tips in your UI that helps your users in completing their journey. If you do, you help your users in completing their tasks. These tasks include submitting forms, purchasing products, or registering with your service. All of which is good for business.

您可以通过在元素中使用微妙的移动来帮助指导用户。 作为设计师，您知道用户完成故事所必须采取的步骤，因为您帮助设计了这些步骤。 您可以在用户界面中提供一些微妙的提示和技巧，以帮助您的用户完成旅程，从而为您提供帮助。 如果这样做，则可以帮助用户完成其任务。 这些任务包括提交表格，购买产品或向您的服务注册。 所有这些都对业务有利。

An example

一个例子

You can make an element your users must drag and drop bounce a little bit in the general direction of where it should be dragged. It helps to point your users in the right direction.

您可以使用户必须将元素沿应该拖动的大致方向拖放一些反弹。 它有助于将您的用户指向正确的方向。

Bouncing Drag & Drop UI Elements on Dribbble.

在 Dribbble上 弹起 拖放UI元素 。

It is very subtle. If you can do it by combining this suggestion with a theme you’re doing even better.

这是非常微妙的。 如果您可以通过将此建议与主题结合起来来做，那么您会做得更好。

创建一个角色 (Create a character)

Give your design a face. Use the storytelling theory of archetypes. There are multiple storytelling archetypes you can choose from, but for this example, we’re going to go with the hero-archetype.

给您的设计一个面Kong。 使用原型的故事讲述理论。 您可以从多种叙事原型中进行选择，但是在本示例中，我们将使用Hero原型。

Each archetype has his own use, so be sure to read about archetypes well. A hero, someone with his own story, is a great way for your users to empathize. You can use your hero’s story when your users hit a bump in their journey through your product. Users will drop out of your application at points of resistance. If you tell a story, you provide your users with a lifeline. If they can relate to your character’s struggle, they might just complete their task.

每个原型都有自己的用途，因此请务必仔细阅读有关原型的内容。 英雄，拥有自己的故事，是让用户产生同情心的绝妙方法。 当用户在产品浏览过程中遇到麻烦时，可以使用英雄的故事。 用户将在遇到阻力时退出您的应用程序。 如果您讲故事，则可以为用户提供生命线。 如果它们可以与您角色的挣扎相关，那么他们就可以完成任务。

“You are the hero of your own story.” — Joseph Campbell

“你是自己故事的英雄。” —约瑟夫·坎贝尔

Once again, users that complete your tasks stay in the loop and might return to your application or service, which is good for business.

再次，完成任务的用户会停留在循环中，并且可能会返回到您的应用程序或服务，这对业务非常有利。

An example

一个例子

We’ll take another look at a sports theme. The golf course’s front desk application has a list that shows reservations for a certain day.

我们将再看看体育主题。 高尔夫球场的前台应用程序具有一个列表，显示特定日期的预订。

Empty State UI Design on Dribbble上的 Dribbble. 空状态UI设计 。

The design of an empty state UI (that which is shown when there are no items on the list) above is a lot of fun, even though it’s an undesirable outcome for the user. The hero of this design is the golf ball. Let’s call him Hanni-ball the Golf Ball. Hanni-ball is trying to sleep on the golf course. He can because there are no reservations. He does not want to be hit in the head by a big swinging golf club. To make sure he’s safe, he checks every once in a while.

上面的空状态UI(在列表中没有项目时显示)的设计很有趣，尽管这对用户来说是不希望的结果。 这种设计的英雄是高尔夫球。 我们称他为Hanni-ball高尔夫球。 Hanni-ball试图在高尔夫球场上睡觉。 他可以，因为没有保留。 他不想被一个大型的挥杆高尔夫俱乐部击中头部。 为了确保他的安全，他不时检查一下。

Using a hero and his story in your design helps to turn an undesirable outcome into a fun experience for your users. Users can relate to Hanni-ball (who wants to be hit in the head by a golf club anyway?).

在设计中使用英雄及其故事有助于为用户带来不良后果，从而为他们带来有趣的体验。 用户可以关联到Hanni-ball(谁想被高尔夫球杆击中头部？)。

如何开始 (How to get started)

Using animation and storytelling is a great way to improve your design. It will help your users and in turn, will help your clients. Whether it is to give meaning to your design or to help guide your users on their own story, it works. You’ll be able to greatly enhance the user experience of your products.

使用动画和讲故事是改善设计的好方法。 它将帮助您的用户，进而帮助您的客户。 无论是给您的设计赋予意义还是帮助指导用户了解自己的故事，它都有效。 您将能够极大地增强产品的用户体验。

Here’s a list of steps you can undertake to get started on your own journey, in addition to the aforementioned tips.

除了上述提示之外，这里还列出了您可以开始进行自己的旅程的步骤。

1. Research your client’s niche. Are there storytelling principles in place? Are there opportunities for you to introduce storytelling?
   研究客户的利基市场。 是否有讲故事的原则？ 您有机会介绍故事吗？
2. Define what your client wants and needs. How can you deliver?
   定义您的客户的需求。 您如何送货？
3. Define the customer journey.
   定义客户旅程。
4. Apply the tips from this post.
   应用这篇文章中的技巧。

Good luck!

祝好运！

翻译自: https://medium.com/the-designers-toolbox/how-to-use-animation-and-storytelling-to-make-your-designs-better-49467403b5f2

ios 动画设计