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.

除了上述提示之外，這里還列出了您可以開始進行自己的旅程的步驟。

Research your client’s niche. Are there storytelling principles in place? Are there opportunities for you to introduce storytelling?

研究客戶的利基市場。 是否有講故事的原則？ 您有機會介紹故事嗎？

Define what your client wants and needs. How can you deliver?

定義您的客戶的需求。 您如何送貨？

Define the customer journey.

定義客戶旅程。

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 動畫設計

總結

以上是生活随笔為你收集整理的ios 动画设计_动画和讲故事在设计中的力量的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。