v-charts加载动画_加载动画-用户体验写作练习

v-charts加载动画

Many new UX writers often struggle to find the balance between creativity and clarity. You can’t make everything fun/exciting/interesting as it can have an adverse effect on usability. But there are times when you can add a bit of flair.

许多新的UX作家经常努力在创造力和清晰度之间找到平衡。 您不能使所有事情都变得有趣/令人兴奋/有趣，因为这会对可用性造成不利影响。 但是有时候您可以增加一些天赋。

Loading animations are a great place to start if you’re a new or aspiring UX writer. What I’d like to do in this article is:

如果您是新手或有抱负的UX作家，则加载动画是一个不错的起点。 我在本文中想做的是：

1. Get you to think about UX design principles before you write
   在编写之前让您考虑UX设计原则
2. Provide new & aspiring UX writers with some practice exercises and ideas for where to flex their creative skills
   为新的和有抱负的UX作家提供一些实践练习和想法，以帮助他们提高创造力

载入原则... (Loading principles…)

The more you know about UX design and HCI (human-computer interaction), the better a UX writer you will be. So let’s start there.

您对UX设计和HCI(人机交互)了解得越多，您的UX编写者就越好。 因此，让我们从那里开始。

Why do we have loading animations? Is an animation better than a static image? Why? Do they need text? What should the text say and why?

为什么要加载动画？ 动画比静态图像好吗？ 为什么？ 他们需要文字吗？ 文字应该说什么，为什么？

Simple questions, but not necessarily things you’ve stopped to consider before.

简单的问题，但不一定是您之前已经停止考虑的事情。

Loading animations give the user feedback (this is the keyword). The user’s not left wondering if the website or app has broken; they can see something is happening.

加载动画会为用户提供反馈(这是关键字)。 用户不会怀疑网站或应用程序是否已损坏； 他们可以看到正在发生的事情。

If you use a progress bar, this can give some indication about how long is left.

如果使用进度条，则可以指示剩余时间。

Loading animations/screens can also look nice. This is important if you expect the user to stare at them for a while.

加载动画/屏幕看起来也不错。 如果您希望用户凝视他们一段时间，则这一点很重要。

In combination, all these can reduce the stress of waiting and the perceived waiting time.

结合起来，所有这些都可以减轻等待的压力和等待时间。

Loading animations/screens are also a great opportunity to infuse the brand voice into the user flow.

加载动画/屏幕也是将品牌声音注入用户流程的绝佳机会。

But is an animation better? In most cases, I would say yes. A static image only gives a limited amount of feedback. And you could argue animations are more interesting to look at.

但是动画效果更好吗？ 在大多数情况下，我会说是。 静态图像只能提供有限的反馈。 您可能会认为动画更有趣。

Do we need accompanying text? Not always, no. It’s hard to measure how much value the word “Loading…” under a spinning wheel icon adds, but it does make the interaction more human. And as mentioned above, it can add a little bit of the brand voice into the experience. In terms of conversational design, adding that bit of text can help strengthen the relationship between you and the user. It makes the whole experience feel more real and personal.

我们需要附带文字吗？ 并非总是如此。 很难衡量在“纺车”图标下的“加载中...”一词有多大的价值，但这确实使交互更加人性化。 如上所述，它可以在体验中添加一些品牌声音。 在会话设计方面，添加少量文本可以帮助加强您与用户之间的关系。 它使整个体验更加真实和个性化。

Here’s a bonus question for you to think about on your own. Why do many sites and apps use ellipses after the word “Loading”? If you get stuck, remember not all loading animations/screens use ellipses in their messaging. Why not? When would you use them, and when would you not?

这是一个奖金问题，您可以自己考虑。 为什么许多网站和应用程序在“正在加载”一词后使用省略号？ 如果陷入困境，请记住并非所有加载的动画/屏幕在其消息传递中都使用椭圆。 为什么不？ 您什么时候使用它们，什么时候不使用？

If you do add microcopy, your goals should be the same as the designers:

如果要添加显微镜，则您的目标应该与设计者相同：

1. Give the user feedback (let them know something is happening)
   向用户提供反馈(让他们知道正在发生的事情)
2. Make the wait more enjoyable, if possible, and reduce the perceived waiting time
   如果可能的话，使等待更愉快，并减少等待的时间
3. Add a touch of the brand voice
   增添品牌声音

Don’t forget to add accessibility text if your team has decided against adding microcopy. Some users won’t get enough/any feedback from just a spinning icon.

如果您的团队决定不添加显微镜，请不要忘记添加辅助功能文本。 某些用户仅通过旋转的图标就无法获得足够的/任何反馈。

实践使… (Practice makes…)

Ok, let’s get into some exercises. Here are 3 scenarios for you to practice writing the microcopy for. Afterwards we’ll do a roundup and a bit of a postmortem.

好的，让我们开始一些练习。 这里有3种情况供您练习编写显微照片。 之后，我们将进行综述并进行一些事后分析。

1. You’re writing for an app used to find restaurants and book tables. The user has selected some search criteria (location, type of cuisine etc.) and hit search. The design team has added a brief loading animation (one of the spinning circle types below) while the search results load. You’ve been given the placeholder text “Loading…” that will appear under the spinning icon. The brand wants to focus on the principles of young, adventurous, and convenient.
   您正在写一个用于查找餐厅和桌子的应用程序。 用户已经选择了一些搜索条件(位置，美食类型等)并点击搜索。 设计团队在搜索结果加载时添加了一个简短的加载动画(下面是旋转的圆圈类型之一)。 您将获得占位符文本“正在加载...”，该文本将显示在旋转图标下方。 该品牌希望专注于年轻，冒险和方便的原则。

2. You’re working on an installation progress screen for a project management application. The design includes a percentage progress bar this time and it will be an independent screen as opposed to just a UI element. This brand wants to make project management more visual, easy, and accessible. They say they’re open to using more casual language to seem more fun. As well as the loading bar, they want to add an image and text, but want your input to ensure the content and image match. (Feel free to think of animation rather than a static image)

2.您正在处理项目管理应用程序的安装进度屏幕。 这次设计包含一个进度条百分比，它将是一个独立的屏幕，而不仅仅是UI元素。 这个品牌希望使项目管理更加直观，轻松和易用。 他们说，他们愿意使用更多随意的语言来表现更多乐趣。 除了加载栏之外，他们还希望添加图像和文本，但希望您输入以确保内容和图像匹配。 (随意考虑动画而不是静态图像)

3. You’re the writer for an online sporting goods store. The user has entered their bank card info and you need a loading screen while you process their payment. This brand has a strong sporting theme. But they want to appear professional, knowledgeable, and accessible; their site is popular with soccer moms after all. They want to use a repeating colored dots animation to show the loading state, with some text above it. They haven’t given you any placeholder text this time.

3.您是在线体育用品商店的作家。 用户输入了他们的银行卡信息，并且在处理他们的付款时需要一个加载屏幕。 这个品牌具有强烈的体育主题。 但是他们希望表现出专业，知识渊博且易于使用的状态； 他们的网站毕竟受到足球妈妈们的欢迎。 他们希望使用重复的彩色圆点动画来显示加载状态，并在其上方显示一些文本。 他们这次没有给您任何占位符文本。

要考虑的事情 (Things to think about)

How did that go? Hopefully you came up with 3 very different voices for those products.

怎么样了 希望您为这些产品提出3种截然不同的声音。

Let’s look at some of the things you might want to consider for each scenario.

让我们看一下每种情况下可能要考虑的一些事项。

For the restaurant reservation app, you kind of have free rein here. You could even try something food-related. Something like “Coming right up…” like a waiter or chef serving up their search results. It’s very subtle, so even if your brand isn’t trying to be fun, you can probably get away with it. Remember not to take things too far, unless that’s part of your brand voice. You could even suggest making the spinning icon food-related if your designer has time.

对于餐厅预订应用程序，您可以在这里免费使用。 您甚至可以尝试一些与食物有关的东西。 诸如“来吧……”之类的东西，例如服务员或厨师提供他们的搜索结果。 这非常微妙，因此，即使您的品牌不打算变得有趣，您也可以摆脱它。 切记不要太过分，除非这是品牌声音的一部分。 如果您的设计师有时间，您甚至可以建议使旋转图标与食物相关。

But remember this won’t be on screen for long (hopefully), so the text has to be relatively short. This is something you need to talk to the design and tech teams about. If it’s only a split second, your flash of text might be pointless.

但是请记住，这不会在屏幕上显示很长时间(希望如此)，因此文本必须相对较短。 这是您需要与设计和技术团队讨论的内容。 如果只是一瞬间，那么文字闪烁可能就毫无意义。

For the project management application, again this is creative freedom. A great example of content and design working well together is Mailchimp. Their success pages and “Prepare for launch” pop-ups are a great case study if you’re trying to convince your design team to involve you more. Think about what kind of wording and imagery you would want to use for this project management software, and how it fits with their values. It’s also worth asking how long installation takes. Do you want one image or multiple? Maybe you need to write something for each image. Or maybe an animation is enough?

对于项目管理应用程序，这又是创作自由。 Mailchimp是内容与设计完美配合的一个很好的例子。 如果您想说服您的设计团队更多地参与其中，他们的成功页面和“准备发布”弹出式窗口是一个很好的案例研究。 考虑一下您想在此项目管理软件中使用哪种措辞和图像，以及它们如何适合其价值。 还需要询问安装需要多长时间。 您要一张还是多张图片？ 也许您需要为每个图像写一些东西。 也许动画就足够了？

For the online sporting goods store, there’s not necessarily a right or wrong answer here. But this kind of scenario shows how you approach a problem. It certainly shows how well you can empathize with the user. Be aware you’ve just asked someone to hand over their bank card details. And like I said in the brief, it could be someone’s mom. She’s not likely to appreciate any funny messages. She just wants to know her payment is being processed. That doesn’t mean it has to be something as straightforward as “Processing your payment…”, but if you try to be too clever you could end up with something the user wont understand, or worse, confuses them. Sometimes simpler is better. You don’t want them to sigh with relief when they realize you were just processing the payment.

对于在线体育用品商店，这里不一定有对还是错的答案。 但是这种情况说明了您如何解决问题。 它肯定显示了您对用户的同情程度。 请注意，您只是要求某人交出其银行卡详细信息。 就像我在简介中说的那样，可能是某人的妈妈。 她不太可能欣赏任何有趣的消息。 她只想知道她的付款正在处理中。 这并不意味着它必须像“处理您的付款…”那样简单明了，但是如果您尝试变得太聪明，最终可能会得到用户不会理解的东西，或更糟的是，会使他们感到困惑。 有时越简单越好。 当他们意识到您只是在处理付款时，您不希望他们感到宽慰。

As a UX writer, it’s part of your job to learn the UX principles behind a design, and then craft your copy with those in mind.

作为UX作家，学习设计背后的UX原理，然后牢记这些原则，是您工作的一部分。

Loading animations can be a relatively harmless and unobtrusive UI element to play around with. Perfect for scratching your creative itch. Look for loading animations on your product that stay on screen for a while. How could you make them more enjoyable? How could you make the copy more interesting or on-brand?

加载动画可以是相对无害且不干扰用户界面的元素。 完美解决您的创意难题。 寻找在您的产品上加载会在屏幕上停留一段时间的动画。 您如何使它们更有趣？ 您如何使该副本更有趣或更具品牌影响？

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in. UX Para Minas Pretas (UX For Black Women)，这是一个巴西组织，致力于通过采取行动，赋权和知识共享的举措来促进科技行业中的黑人女性平等。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

翻译自: https://uxdesign.cc/ux-writing-exercises-loading-animations-74a2230f61f8

v-charts加载动画