你鼓舞了我是世界杯主题曲吗_下一个网站项目的鼓舞人心的UI设计思路

你鼓舞了我是世界杯主题曲吗

This article was peer reviewed by Dave Maxwell and Panayiotis Velisarakos. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

本文由Dave Maxwell和Panayiotis Velisarakos进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

The web has moved a long way from its traditional roots. Where once it was perfectly fine to provide a basic text-only website, now it’s practically expected that your sites convey not only information, but provide a modern, crisp and exciting user experience.

网络已经从其传统根源中走了很长一段路。 曾经提供一个基本的纯文本网站非常好，现在实际上可以期望您的网站不仅传递信息，而且还提供现代，清晰和令人兴奋的用户体验。

To that end, it’s up to you as the designer or developer to create something that’s visually interesting. This could be something as small as an awesome set of font pairings, or as complex as full-on animations and deep interactions.

为此，由您作为设计师或开发人员来创建视觉上有趣的东西。 这可能像一组很棒的字体配对一样小，也可能像完整动画和深度交互一样复杂。

Today we’re going to look at a few sites that masterfully use micro-interactions, hover state animations, CSS gradients and transforms to create visual interest and guide users’ actions. The whole point is to create something that users enjoy, either directly through interaction or through subtle effects users might not even notice, which nevertheless contribute to create positive connections with the site.

今天，我们将看一些站点，这些站点主要使用微交互，悬停状态动画，CSS渐变和变换来创建视觉兴趣并指导用户的操作。 关键是要通过交互或通过用户甚至可能不会注意到的细微效果来创建用户喜欢的东西，但这仍然有助于与网站建立积极的联系。

条纹 (Stripe)

Stripe is a US-based payment processing system for credit cards. It’s a developer-focused solution and this comes across both in their system and their website. Their site is colorful, interactive and generally pretty awesome to use. Let’s see which elements we can pick out and leverage in our designs.

Stripe是基于美国的信用卡付款处理系统。 这是一个以开发人员为中心的解决方案，在他们的系统和网站中都涉及到。 他们的网站色彩丰富，互动性强，使用起来通常很棒。 让我们看看我们可以选择哪些元素并在设计中加以利用。

渐变背景和CSS转换 (Gradient Backgrounds & CSS Transforms)

The Stripe website showcases a primary header section with a creative use of layout and design. The header changes colors on a page by page basis and is used as their main call to action element.

Stripe网站展示了一个主要的标题部分，其创造性地使用了布局和设计。 标头逐页更改颜色，并用作它们对动作元素的主要调用 。

At its most basic level, it’s a collection of containers that have been positioned to create a semi mosaic grid. These fragments have each their own linear gradient that blends or contrasts with other parts of the header.

在最基本的层次上，它是一组容器的位置，这些容器的位置可以创建半镶嵌网格。 这些片段各自具有自己的线性渐变，与标题的其他部分融合或形成对比。

What makes the header look even more visually interesting is the fact that it’s been slanted. To get this type of effect, all you need to do is apply a skew(xdeg) transformation on the top element. Doing so instantly skews the inner elements.

使标题看起来更加有趣的是倾斜的事实。 要获得这种效果，您需要做的就是在顶部元素上应用skew(xdeg)转换。 这样做会立即扭曲内部元素。

The subtle skew, along with simple yet interesting images and colors, are all you need to bring about this inventive design. Getting a good mixture of low and high contrast sections here is important. If these sections were flat colors the effect wouldn’t look so great. Instead, the gradient flowing from one section to another makes this look visually striking.

微妙的歪斜，以及简单而有趣的图像和色彩，都是实现本发明设计所需要的。 在此处获得低对比度和高对比度部分的良好混合非常重要。 如果这些部分是纯色，效果将不会很好。 取而代之的是，从一个部分流到另一个部分的渐变使该外观看起来很醒目。

If you like the idea, you could incorporate a layout like this in your header, or even use it as a background in a call to action or feature block. Try experimenting with mixtures of colors, positions and transforms and create something that looks interesting and makes you stand out.

如果您喜欢这个主意，则可以在标题中包含这样的布局，甚至可以将其用作号召性用语或功能块的背景。 尝试尝试各种颜色，位置和变换的混合，并创建看起来有趣的东西并使您脱颖而出。

Here’s a CodePen demo to get you started right away.

这是一个CodePen演示 ，可帮助您立即开始。

At its most basic level, this example is a collection of divs that have been colored with gradients and then positioned to produce the effect. Choosing the right combination of colors, heights and positions is what makes this effect striking.

在最基本的层次上，此示例是div的集合，这些div已使用渐变进行着色，然后放置以产生效果。 选择正确的颜色，高度和位置组合是使这种效果引人注目的原因。

创建交互式有趣的菜单 (Creating Interactive, Interesting Menus)

Menus have come a long way from the old left positioned vertical menu of past ages. Nowadays people expect your menus to be both useful, visually interesting, and of course mobile optimized.

菜单与过去放置在左侧的垂直菜单相距很远。 如今，人们期望您的菜单既有用，视觉上有趣，又可以对移动设备进行优化。

Stripe has an interesting take on their menus.

Stripe的菜单有趣。

Each of their main top level categories expands out and showcases several of their sub-pages in unique layouts. Their Products menu, for example, features a large mega-menu style layout. Each of the sub-pages has its own styled icon, title and summary description to entice you to find out more.

他们的每个主要顶级类别都会扩展，并以独特的布局展示其子页面中的几个子页面。 例如，他们的“ 产品”菜单具有大型巨型菜单样式的布局。 每个子页面都有自己的样式图标，标题和摘要说明，以吸引您了解更多信息。

As you’d expect, all these menus work perfectly on mobile, dynamically changing as required.

如您所料，所有这些菜单在移动设备上均可完美运行，并可根据需要动态更改。

The idea here is that Stripe has taken something generally quite boring such as a drop down menu and turned it into a showcase, something of interest. You could, for example, incorporate a few animations into your menu to subtly change its position or opacity. Or, you can create dynamic layouts for your menu to showcase each page under a unique light.

这里的想法是，Stripe采取了一些通常很无聊的操作，例如下拉菜单，然后将其变成了展示柜，这是一些有趣的事情。 例如，您可以将一些动画合并到菜单中，以巧妙地更改其位置或不透明度。 或者，您可以为菜单创建动态布局，以在独特的灯光下展示每个页面。

In a previous article I touched on a few examples of different menus you can use, but the guiding principle is that they should be easy to use and visually interesting.

在上一篇文章中，我谈到了几个可以使用的不同菜单的示例，但是指导原则是它们应该易于使用并且外观有趣。

帮助侦察员 (Help Scout)

Help Scout is an easy to implement, dynamic help system. It exposes a front-end widget visitors can use to get help by browsing predefined help articles or sending the contact form.

帮助侦查员是易于实施的动态帮助系统。 它公开了一个前端小部件，访客可以通过浏览预定义的帮助文章或发送联系表来获取帮助。

Their website is fairly simple with a focus on content. However, it uses several subtle animations and icons to draw your attention.

他们的网站相当简单，侧重于内容。 但是，它使用了一些微妙的动画和图标来引起您的注意。

创建细微的重复动画 (Creating Subtle Repeating Animations)

Not all animations have to be triggered from user interaction. Sometimes, creating an animation that runs subtly in the background is enough to endow your page with movement and make it appear dynamic.

并非所有动画都必须通过用户交互来触发。 有时，创建一个在后台巧妙运行的动画足以使页面具有动感并使其显得动态。

When you’re on Help Scout’s Tools page you’ll soon come across the simple pulsing component you can see in the image above. It’s a combination of a nice looking icon, material drop shadow and a simple pulsating ripple animation.

当您进入Help Scout的“工具”页面时 ，很快就会遇到上图所示的简单脉冲组件。 它是一个外观精美的图标，材质阴影和一个简单的脉动波纹动画的组合。

This is a good example of something you can introduce into your design, a subtle animation that looks good without distracting users’ attention away from your content.

这是可以引入设计的一个很好的例子，它是一种微妙的动画，看起来不错，而不会分散用户对内容的注意力。

I’ve created something similar as a stand-alone widget that you can drop into your projects:

我创建了一个类似于独立小部件的东西，您可以将其放入项目中：

See the Pen CSS Pulsating Sonar by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen CSS脉动声呐 。

These subtle animations can either be used as a centerpiece to draw visitors to accompanying text or as interesting elements in the background, whatever suits your purpose.

这些微妙的动画既可以用作吸引访问者阅读附带文本的中心，也可以用作背景中的有趣元素，无论您适合什么目的。

热情 (Zest)

Zest is a web service that showcases content feeds designed for marketers and created by marketers. The overall purpose of their site is to convince visitors to use their Chrome app.

Zest是一个Web服务，展示了针对营销人员设计并由营销人员创建的内容供稿。 他们网站的总体目的是说服访问者使用他们的Chrome应用。

Their site looks amazing as it combines strong colors, iconography and interesting shapes. As you scroll through the site, additional animations come to life and new layers scroll into focus, giving the site a dynamic and lively feel. There are a few elements we can take from this site, let’s look at them.

他们的网站融合了强烈的色彩，图像和有趣的形状，看起来令人赞叹。 当您滚动浏览网站时，其他动画变得生动起来，新的图层也聚焦起来，给网站带来动感十足的感觉。 我们可以从此站点中获取一些元素，让我们看一下。

基于滚动的动画 (Scroll Based Animations)

Some of the nicest animations are those that fire automatically as you scroll elements into view. Creating animations that start when elements hit the viewport area helps to give a “story” type vibe to your site.

一些最好的动画是在将元素滚动到视图时自动触发的动画。 创建在元素到达视口区域时开始的动画，有助于为您的站点提供“故事”类型的氛围。

This is especially useful for sites that are selling a product or service and want to guide the user through a path of discovery and engagement.

这对于正在销售产品或服务并希望引导用户进行发现和参与的路径的站点特别有用。

I’ve already discussed scrolling animations in a previous article, showing how you can use JavaScript and CSS to trigger some interesting effects as the user scrolls. If you’re looking to introduce subtle movements into your designs, this technique works very well.

我已经在上一篇文章中讨论过滚动动画 ，展示了如何在用户滚动时使用JavaScript和CSS触发一些有趣的效果。 如果您希望将微妙的动作引入设计中，则此技术非常有效。

Here’s a CodePen that illustrates how you can incorporate this into your site:

这是一个CodePen，它说明了如何将其合并到您的站点中：

See the Pen CSS Animations on Scroll – Slide in From Left by SitePoint (@SitePoint) on CodePen.

请参见Scroll上的Pen CSS动画-在 CodePen上由SitePoint( @SitePoint ) 从左滑动 。

As the user scrolls down, new testimonial elements slide in from the left and change opacity.

当用户向下滚动时，新的推荐元素将从左侧滑入并更改不透明度。

部分加载的内容 (Partially Loaded Content)

Another interesting design feature is when the site loads and positions its content in response to scrolling events. This technique is similar to the one referred to above: as soon as the user scrolls to the right position in relation to the viewport, a series of animations gets triggered. There’s heaps of options you can try out here. For example, you can show content bit by bit like Zest does, or you could perform a series of back to back animations.

另一个有趣的设计功能是网站响应滚动事件加载并放置其内容时。 此技术类似于上面提到的技术：一旦用户滚动到相对于视口的正确位置，就会触发一系列动画。 您可以在这里尝试很多选择。 例如，您可以像Zest一样一点一点地显示内容，也可以执行一系列背靠背动画。

微互动和动画 (Micro-Interactions and Animation)

One of the potential downsides of flat layouts is that by their own nature they’re fairly static. Some of the methodologies such as Google’s Material Design attempt to overcome this with subtle interactions, an emphasis on layering (via box-shadows) and other techniques aiming to add movement to this kind of layouts.

平面布局的潜在缺点之一是，由于其自​​身的特性，它们相当静态。 诸如Google的Material Design之类的一些方法试图通过微妙的交互，强调分层(通过盒子阴影)和其他旨在为这种布局增加移动性的技术来克服这一问题。

There are many ways you can introduce movement to your designs. These can be as subtle as changing colors on interaction, or as wild as re-flowing the design with entirely new content to emphasize the interaction.

您可以通过多种方式将运动引入设计中。 这些可能像在交互上更改颜色一样微妙，也可以像重新设计时添加全新内容来强调交互一样疯狂。

简单的卡片互动 (Simple Card Interactions)

In most of your sites you’re likely to make use of lists or grids of cards. Cards are sections of information you want to display, e.g., blog post excepts, service listings, etc. Adding a bit of interactivity to emphasize this type of content can often help with users’ engagement.

在您的大多数网站中，您可能会使用卡片列表或网格。 卡是您要显示的信息部分，例如博客文章除外，服务列表等。添加一些交互性来强调此类内容通常可以帮助用户参与。

Take a look at the following CodePen demo for example: the card displays basic information, but when interacted with, it animates and changes.

例如，看下面的CodePen演示：该卡显示基本信息，但是与之交互时，它会进行动画处理和更改。

See the Pen Fancy Card Animation by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen Fancy Card动画 。

While it would have been fine to have no animation at all here, having these subtle animations is often very beneficial to users, providing them with visual context. Only, be careful not to overdo it. If the animations are targeting multiple styles, not only will the result look jarring for the user, it can also potentially appear laggy on less powerful devices (e.g., mobiles).

虽然这里完全没有动画会很好，但是拥有这些微妙的动画通常对用户非常有益，为他们提供了视觉环境。 仅，请注意不要过度使用它。 如果动画以多种样式为目标，则结果不仅会给用户带来震撼，而且在功能较弱的设备(例如手机)上也可能会出现滞后现象。

Because of this, subtle animations that change opacity, use transformations, or otherwise aren’t too impactful, are the ones that work best.

因此，更改不透明度，使用转换或其他方式不太有影响力的细微动画才是效果最好的动画。

更复杂的卡交互 (More Complex Card Interactions)

As we mentioned before, you can use animation on cards or grids of information to enhance their content. Sometimes, you might want to display the most important information upfront and only selectively show more info as users interact with the card (as it is at that point that information becomes relevant).

如前所述，您可以在卡片或信息网格上使用动画来增强其内容。 有时，您可能想在最前面显示最重要的信息，而仅在用户与卡片互动时才有选择地显示更多信息(因为此时信息才有意义)。

Here’s a CodePen that shows a series of cards. These cards display an image and primary title. When users interact with them, they change state showing new information and triggering several animations:

这是一个显示一系列卡片的CodePen。 这些卡片显示图像和主要标题。 当用户与他们互动时，他们更改状态以显示新信息并触发多个动画：

See the Pen Animated border lines on hover by SitePoint (@SitePoint) on CodePen.

见笔悬停动画边界线由SitePoint( @SitePoint上) CodePen 。

This type of interactivity helps us show new info in an enticing way by using a few neat things like pseudo elements, box shadows and transforms.

通过使用一些诸如伪元素，框阴影和转换之类的简洁内容，这种类型的交互性有助于我们以诱人的方式显示新信息。

Again, same with the previous set of animations, moderation is the key. For each situation you should weigh up the elements you intend to animate. As a general rule of thumb, using transform will be hardware accelerated, and using transform on elements that don’t change the layout of other elements (such as on absolute positioned items) will yield the best results. Certain CSS properties, for instance box-shadow, can also cause slowness if used excessively.

同样，与前面的动画集一样， 适度是关键 。 对于每种情况，应权衡要设置动画的元素。 作为一般经验法则，使用transform将在硬件上加速，并且在不更改其他元素布局的元素上(例如，在绝对定位的项目上)使用transform将产生最佳效果。 如果过度使用某些CSS属性(例如box-shadow ，也会导致速度变慢。

动画：何时，何地以及为什么？ (Animations: When, Where and Why?)

The overall idea of when and where to use animation techniques or why use them at all is very subjective.

何时何地使用动画技术或为什么根本不使用动画技术的总体想法是非常主观的。

Some people avoid them like the plague, arguing that the performance hit incurred by running animations is too great, at least just for the sake of aesthetic reasons alone. Other people will use them everywhere, with everything looking interactive or dynamic.

有些人像瘟疫一样避开它们，认为运行动画带来的性能损失太大，至少是仅出于美学原因。 其他人将在任何地方使用它们，并且一切看起来都是交互式的或动态的。

There’s a healthy balance between both extremes, one where you can leverage animations for those key parts of your website where you want to draw users’ attention while leaving the rest to more static content.

两种极端情况之间存在健康的平衡，您可以在网站的关键部分利用动画来吸引用户的注意力，而将其余部分留给更多静态内容。

There are countless sites that strike a good balance. To keep things simple, let’s use pedrolandaverde.com as an example.

有无数的站点可以达到很好的平衡。 为了简单起见 ，我们以pedrolandaverde.com为例。

This site triggers basic rotation animations on several graphics as you scroll. The iconography and flat shapes work really well with this animations and give the site a fluid feel. In combination with the subtle parallax elements in the background layers, this site uses animation as a secondary accent, giving you something to look at while you browse the site.

当您滚动时，此站点将触发几个图形上的基本旋转动画。 图像和平面形状可以很好地与该动画配合使用，并给现场带来流畅的感觉。 结合背景层中微妙的视差元素，该网站使用动画作为次要重音，使您在浏览该网站时可以看到一些东西。

Using animations in the design should enhance your site. Whether this enhancement is to make your content clearer, to liven up your page or just to separate yourself from the hoard of other sites, as long as it’s done in a balanced fashion it will almost always have a positive effect.

在设计中使用动画可以改善您的网站。 无论此增强功能是为了使您的内容更清晰，使页面生动活泼，还是只是将自己与其他网站的存储区分开， 只要它以平衡的方式进行 ，几乎总是会产生积极的效果。

包装全部 (Wrapping It All Up)

The overall goal should be to create interesting, robust websites that draw in viewers and keep them both focused and entertained. You can leverage a combination of animations, whether they be subtle micro-interactions or full-blown visual experiences, to keep interest high and bounce rates low.

总体目标应该是创建吸引观众的有趣，强大的网站，并使他们既专注又娱乐。 您可以利用各种动画组合，无论它们是微妙的微交互效果还是成熟的视觉体验，都可以保持较高的兴趣和较低的跳出率。

To delve deeper into all there is to know about CSS animation, check out Animating with CSS, a SitePoint Premium video course by Donovan Hutchinson.

要深入研究关于CSS动画的所有知识，请查看Donovan Hutchinson的SitePoint Premium视频课程Animating with CSS 。

翻译自: https://www.sitepoint.com/creative-ui-design-ideas-you-can-use-in-your-next-website/

你鼓舞了我是世界杯主题曲吗