bts防弹少年团演唱会

bts防弹少年团演唱会

4种方式动画可以实际改善用户体验

《4种方式动画可以实际改善用户体验》

为了“酷”而动画通常会伤害转换,因为它会分散注意力,但并非总是如此。 动画有四种方式,如果使用得当,实际上可以加强用户体验。 更好的%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E5%8F%AF%E4%BB%A5%E5%B8%A6%E6%9D%A5%E6%9B%B4%E9%AB%98%E7%9A%84%E8%BD%AC%E5%8C%96%E7%8E%87“>

您无需彻底检查网站即可利用动画。 几乎任何网站都可以在其加载顺序,号召性用语或导航中使用基本动画。

新的Web开发功能允许轻松实现动画。 CSS3有一个完整%E7%9A%84%E5%8A%A8%E7%94%BB%E5%87%BD%E6%95%B0%E5%BA%93“>

在将动画实施到数字设计中时,请遵循以下规则:

1.使用让用户感兴趣的加载序列

即使在网站完全加载之前,动画也可以让用户保持参与。 这样可以防止用户过早离开。 即使%E5%8A%A0%E8%BD%BD%E6%97%B6%E9%97%B4%E5%A2%9E%E5%8A%A0“>

以下是3种方法:

示例#1:多部分转换

Luke” wroblewski>是交互设计的领跑者,他介绍了如何使网站和应用程序在加载时看起来更加活跃。

[…]“/>

Luke提供的一个示例是Google搜索应用,它使用转换在应用加载搜索结果时保持屏幕动画。

该应用程序将页面加载为三部分:

  1. 页面从右侧滑入。
  2. 装载栏从左侧前进。
  3. 内容平滑地淡入页面。
《4种方式动画可以实际改善用户体验》

UX研究公司Nielsen Norman Group %E6%A6%82%E8%BF%B0%E4%BA%86%E7%BD%91%E9%A1%B5%E5%8A%A8%E7%94%BB%E7%9A%84%E5%8E%9F%E7%90%86“>

当用户空闲时,快速和慢速转换的组合占用用户。 谷歌的搜索应用程序完美地执行此操作。

“我们希望人们感觉事情是敏感的,应用程序在等待的同时也在行动。”


– Luke Wroblewski

示例#2:骨架屏幕

Luke Wroblewski的第二个例子是骨架屏幕。 屏幕在内容完全加载之前以递增方式完成UI。 这使用户在较慢的加载时间内保持兴趣。 通过级联到页面骨架上的内容实现动画。

“……当你的内容从服务器上传下来时,你并没有坐在那里盯着加载指示器。 你实际上是一点一点地看到它,进入界面并对你有用。“


– Luke Wroblewski

骷髅图像加载速度很快,因为它是一个通常由矩形组成的小图像。 这种技术可以在移动应用程序上进一步采用,因为骨架可以本地存储在移动设备上,这允许更复杂的屏幕。

示例#3:将网页加载成碎片

可以通过后端Web开发实现基本动画。 Facebook%E5%B7%A5%E7%A8%8B%E5%85%AC%E5%8F%B8%E4%BD%BF%E7%94%A8%E4%B8%80%E4%B8%AA%E5%90%8D%E4%B8%BABigPipe%E7%9A%84%E6%B5%81%E7%A8%8B%EF%BC%8C%E4%BB%A5%E6%9B%B4%E5%BF%AB%E9%80%9F%EF%BC%8C%E6%9B%B4%E5%8A%A8%E6%80%81%E7%9A%84%E6%96%B9%E5%BC%8F%E5%8A%A0%E8%BD%BDFacebook%E3%80%82″>

BigPipe使用PHP和JavaScript将主页分解为“pagelets”。 这些pagelet同时单独加载到页面上,导致页面以块的形式出现。 下图显示了Facebook工程团队如何将其主页划分为多个部分。 这些部分中的每一部分并行加载。

《4种方式动画可以实际改善用户体验》

如果您观看自己的Facebook主页加载,您将看到这种分块效果。

  1. 时间轴加载其骨架布局,紧接着是右侧的“趋势”和广告列。
  2. 弹出左手菜单。
  3. 聊天列弹出右侧。

在页面完成加载过程的第一个关键微秒期间,用户开始从时间轴开始消费内容。 考虑到每天加载Facebook的次数,这一点至关重要。

2.根据用户应关注的位置进行动画处理

动画会影响用户的眼睛,并且可以控制他们聚焦的位置。 只要用户的眼睛处于正确的位置,这就很棒。 当动画处于错误的位置或速度错误时,它会分散内容。

%E7%A7%BB%E5%8A%A8%E5%88%B0%E5%B1%8F%E5%B9%95%E4%B8%8A%E7%9A%84%E8%A7%86%E8%A7%89%E6%95%88%E6%9E%9C%E4%BC%9A%E6%A0%B9%E6%8D%AE%E9%A1%B5%E9%9D%A2%E4%B8%8A%E7%9A%84%E9%80%9F%E5%BA%A6%E5%92%8C%E4%BD%8D%E7%BD%AE%E5%90%B8%E5%BC%95%E4%B8%8D%E5%90%8C%E7%9A%84%E6%B3%A8%E6%84%8F%E5%8A%9B%E3%80%82″>

一个很好的例子是“返回顶部”按钮。 它们允许用户在向下滚动页面后跳回到菜单,并且可以是一个微妙的功能 – 或完全分散内容。

%E8%A7%86%E9%A2%91%E6%9D%A5%E6%BA%90%EF%BC%9ANNGroup“>

“返回顶部”按钮立即在%E8%90%A5%E9%94%80%E8%8A%82%E7%82%B9%E7%9A%84%E5%B7%A6%E4%BE%A7%E5%BC%B9%E5%87%BA%E3%80%82″>

  1. 用户将大部分时间花在%E5%B1%8F%E5%B9%95%E5%B7%A6%E4%BE%A7%E5%B9%B6%E4%BB%8E%E5%B7%A6%E5%88%B0%E5%8F%B3%E4%BD%BF%E7%94%A8%E5%86%85%E5%AE%B9%EF%BC%8C%E4%BB%8E%E8%80%8C%E4%BD%BF%E8%AF%A5%E5%8A%A8%E7%94%BB%E4%BC%98%E5%85%88%E4%BA%8E%E5%89%AF%E6%9C%AC%E3%80%82″>
  2. 物体的速度立即引起注意。 当用户完成阅读页面上的内容时,应该使用该按钮。

“返回顶部”按钮可以更有效地使用。 以下是修复这两个因素时会发生的情况:

%E8%A7%86%E9%A2%91%E6%9D%A5%E6%BA%90%EF%BC%9ANNGroup“>

按钮位于屏幕右侧,降低了用户视野中的优先级。 按钮不会改变位置,而是缓慢淡入。 这样可以减少与页面目标一致的注意力:让用户在跳回菜单之前查看内容。

3.防止用户迷路

如果网页瞬间改变,用户%E5%8F%AF%E8%83%BD%E4%BC%9A%E5%A4%B1%E5%8E%BB%E4%BB%96%E4%BB%AC%E6%89%80%E7%9C%8B%E5%88%B0%E7%9A%84%E5%86%85%E5%AE%B9%E3%80%82″>

示例1:动画页面滚动

单击链接并不总是将您带到新页面。 有时,它会将您跳到同一页面上的新位置。 如果没有转换,这会令人困惑,并且不清楚页面是否自动向下滚动。 动画显示用户如何引发操作。 比较以下两个图像:

《4种方式动画可以实际改善用户体验》

第一个示例清楚地显示了单击“联系人”菜单按钮时发生的情况。 移动栏和滚动动画显示“联系”页面位于“主页”和“关于”下方的同一屏幕上。 第二个示例不太清楚,可能会让用户想知道为什么没有加载新页面。

示例2:扩展表单

为您的潜在客户%E5%88%B6%E4%BD%9C%E6%97%A0%E6%91%A9%E6%93%A6%E7%9A%84%E8%A1%A8%E6%A0%BC%E9%9D%9E%E5%B8%B8%E9%87%8D%E8%A6%81%E3%80%82″>

当用户填写表单时,有时会显示其他字段。 用户必须%E7%9F%A5%E9%81%93%E8%BF%99%E4%BA%9B%E9%99%84%E5%8A%A0%E5%AD%97%E6%AE%B5%E7%9A%84%E5%8E%9F%E5%9B%A0“>

%E8%A7%86%E9%A2%91%E6%9D%A5%E6%BA%90%EF%BC%9ANNGroup“>

动画可以显示新对象的来源。 如果用户看到从用户点击的位置向下渐变的新字段,那么他知道他导致了它发生。 当新字段扩展时,清楚地表明需要其他信息。

4.使用反馈来显示已完成的内容

动画可以提供视觉反馈,显示网站何时正常工作。 正如Nielsen” norman group sherwin> ,这可以“告知用户当前的工作状态,并通过减少不确定性使用户更容易接受该过程。”这里有两种方法可以使用动画来提供即时反馈(和用户满足感) :

示例1:动画购物车

%E5%8A%A8%E7%94%BB%E5%8F%8D%E9%A6%88%E5%8F%AF%E4%BB%A5%E5%9C%A8%E5%BF%85%E8%A6%81%E6%97%B6%E9%80%9A%E8%BF%87%E6%94%AF%E9%85%8D%E8%A7%86%E8%A7%89%E5%B1%82%E6%AC%A1

来自Vimeo%E7%9A%84” editorial> %E7%B2%BE%E5%BD%A9%E9%9B%86%E9%94%A6“>

在这种情况下,动作用于将眼睛画在购物车所在屏幕的右上方。 如果没有这种移动,很容易错过页面上所有对象的反馈。 使用此功能,该网站可以使用复杂的购物车,您仍然不会错过购买通知。

示例2:不要再次单击警告

有时,动画反馈可以做文本不能做的事情:让用户知道动作已经实时完成。

“不再点击 – 再次”警告会阻止用户在第一个仍在处理时发送两次查询。 但是,警告仍然没有告诉用户%E7%82%B9%E5%87%BB%E6%98%AF%E5%90%A6%E6%88%90%E5%8A%9F%E3%80%82“>

“……用户不确定计算机是否首先接收到命令或者是否可能已经崩溃。 这种用户恶意设计导致了大量的额外点击和双重订单。“

-Katie Sherwin,尼尔森诺曼集团

解决此问题的一种简单方法是%E5%9C%A8%E6%8C%89%E4%B8%8B%E6%8C%89%E9%92%AE%E5%90%8E%E7%A6%81%E7%94%A8%E8%AF%A5%E6%8C%89%E9%92%AE“>

Stripe%E5%B0%B1%E6%98%AF%E4%B8%80%E4%B8%AA%E5%BE%88%E5%A5%BD%E7%9A%84%E4%BE%8B%E5%AD%90%EF%BC%9A”>

反馈立竿见影。 单击时按钮会缩小并变暗。 在提交之后会出现一个进度图标,然后是一个完成操作的复选标记动画。 与没有提供反馈的按钮相比,这是一种更清晰,更吸引人的互动。

结论

动画是对内容的有用补充,并且在%E4%BD%BF%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E6%9B%B4%E6%B8%85%E6%99%B0%E6%96%B9%E9%9D%A2%E6%89%AE%E6%BC%94%E6%AC%A1%E8%A6%81%E8%A7%92%E8%89%B2%E3%80%82″>

(交互式,可嵌入的动画测试.http://codepen.io/NobodyRocks/pen/vEKGC。由NobodyRocks提供)

投资动画不仅可以优化您当前的网站,还可以为您提供许多您不具备的UX选项,例如复杂的表单和长而滚动的网站。 这使您可以更好地控制整个用户体验。 所以这里有一些关键的要点:

关键要点

  1. 装载不一定无聊。 几乎任何网站都可以在加载内容时使用骨架屏幕或微妙的动画,以防止用户点击。
  2. 使用动画来引导(而不是分散注意力)用户。 屏幕左侧的快速动画和动作引起了人们的注意。 一定不要分散重要内容的注意力。
  3. 使用动画过渡移动到页面的其他部分或显示网站的新部分。 这阐明了用户在页面上的开始和结束位置。
  4. 显示,不要告诉。 使用动画确认用户的点击次数,购买次数和注册次数。 这表明该操作已完成,并且该站点尚未冻结。

相关文章

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注