开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
改进 UI 微交互的实用建议 - 技术翻译 - 开源中国社区

改进 UI 微交互的实用建议 【已翻译100%】

标签: <无>
oschina 推荐于 5个月前 (共 9 段, 翻译完成于 03-23) 评论 6
收藏  
42
推荐标签: 待读

下面是一些优秀和更高明的 UI 微交互对比示例。随着一点点地调整,你可以用动画来改进你的 UI 布局。

所列出的交互展示了状态之间的连续性,表示共享元素之间的关系,并且将用户的注意力引向他们应该注意和采取动作的点上。

为了构建这些动画,我遵循了 Material MotionIBM 的动画原则以及 Motion Manifesto 中的 UX 准则。

所有的交互动画都是使用尝鲜版的 InVision Studio 制作的。 你可以在此下载源文件。

Tocy
 翻译得不错哦!

让 tab 页的内容可以滑动

左边的内容渐入渐出,右边随 tab 滑动。

  • 优秀的动画随着内容从一个状态进入另一个状态而渐入渐出。

  • 高明的动画能在移动时表现出连续性,使内容在状态间移动。

当设计 tab 页或是弹出式菜单的交互时,尝试在触发事件的地方定位内容的位置,除了控制显示,还可以在位置方面加入动画。当这样设计时,可以加一个滑动手势,将你从内容的一方带到另一方。

imqipan
 翻译得不错哦!

连接卡片的共享元素

左边的内容在向上滑动的时候打开了一个新的屏幕。右边的卡片则是放大并填充屏幕来显示内容。

  • 优秀的动画使用比如左滑或上滑这样的过渡效果在屏幕上展示内容。

  • 高明的动画通过共有内容的过渡效果维持两个状态之间的联系。

在不同状态之间进行动画过渡时,请查看它们之间是否有共享元素并将它们连接起来。 使用 InVision Studio 时,在创建 Motion 过渡时,在两个链接屏幕之间重复的组件会自动连接。 这使制作原型动画变得轻而易举。

查看 Motion Manifesto 以了解你可以应用的动画类型。上面的例子使用了 Masking、Transformation、Parenting 和 Easing 原则的组合。

rever4433
 翻译得不错哦!

给内容使用级联效果

左边的卡片通过滑动和淡入而出现,右边的卡片使用了相同的动画,但每个卡片有一个短暂的延迟。

  • 当素材进入屏幕时,优秀的过渡动画会改变位置和素材的不透明度。

  • 高明的动画效果会迅速错开每个组或者每个元素的出现。

要完成瀑布效果,请尝试对每个内容或一组内容应用延迟。保持相同的缓解和持续时间,这样会感觉连贯。 尽管如此,不要串联每个小元素,这些内容组成了一个动画。保持动画快速和敏捷。谷歌建议每个元素间隔不超过20毫秒。 查看 Material Motion 中的编排原理以了解更多示例。

rever4433
 翻译得不错哦!

使内容将其他元素推出

左侧的动画位于其他内容的顶部。右侧的动画随着其增长将内容推出。

  • 优秀的动画在上下文中移动并显示元素。

  • 高明的动画显示被他们改变所影响周围的元素。

让内容中的元素知道他们的周围元素。这意味着使内容吸引或排斥周围的元素。 更多示例,请查看 Material Design 中的 Aware 运动原则。

Tocy
 翻译得不错哦!

使菜单在上下文中浮现

左边的菜单从下面飞入。右侧的菜单是从创建它的动作扩展而来的。

  • 优秀的动画菜单从打开它们的按钮的方向来展示其内容。

  • 高明的动画菜单从创建它们的动作中浮现出来,从触摸点扩展而来。 

Tocy
 翻译得不错哦!

用按钮来显示不同状态

左边的按钮用文字来标示状态。右边的按钮用容器来显示不同的事件。

  • 优秀的交互应该在紧挨着按钮来显示事件。

  • 高明的交互使用按钮本身来表明不同的状态。

试着用按钮的容器来提供状态的视觉反馈。比如,你可以 spinner 旋转器或者载入动画来代替 CTA 按钮;或者你可以在背景中加入一段动画来展示载入过程。具体解决方案是取决于你自己的,但核心思想是利用已经和用户产生交互的空间。 如果你使用按钮颜色和复制来确认一个成功状态,这会是一个加分项。

句号句号
 翻译得不错哦!

把注意力聚焦到重要的事物上

左边的例子用颜色和位置来突出一个元素。右边的例子使用一个轻微的动画效果来吸引用户的注意力。

  • 优秀的设计者会使用颜色、大小和位置来突出一个值得用户注意或者接受指示的环节。

  • 高明的设计者会用动画效果来将注意力带到需要执行的环节上,并且不会分散干扰用户注意力。

当用户要执行重要操作时,尝试让这一环节变的动态起来以吸引用户的注意力。以轻微的动画效果为起始然后根据这个环节的重要程度增加力度(改变大小、颜色和速率)。注意只在关键的环节上使用动画效果 —— 使用效果越频繁,它将变得越不引人注意...并且你的用户会越觉得厌烦。

句号句号
 翻译得不错哦!

结语

希望这些例子可以帮助你在为交互添加动画时做出更好的决策。有了像 InVision Studio 这样的新动画和原型制作工具,我估计很快就会开始看到富有创意的互动的复兴。我们只需要记住负责任地使用这个新的超级利器。

用微交互来解释状态的变化,注意必要的操作,确定元素之间的关系,并在产品中添加一些趣味和特征。遵循这些原则,我们将把微交互从优秀转变为高明。

为微交互欢呼吧!

Tocy
 翻译得不错哦!
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们
评论(6)
Ctrl/CMD+Enter

windows系统高级属性:最佳性能,最佳效果
想问一下,这些效果通过css3怎么实现?
虽然我不是做前端的,但是看到这些交互,还是感觉比较好,动作有缓冲的效果,提醒很人性化
用户体验也是一门学问,非常好!
搞死开发的节奏
很炫,但是中间有几个看不出来区别
顶部