产品的交互按照这 6 点做才加分

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

001

交互能够让界面看起来生动有趣,但是要格外注意上下文。通过上下文流畅地传递给用户,能够让用户有明显的预期。解释界面上的元素,强化元素间的层次结构,并且表现产品逻辑。

如何让交互的上下文表现的更加流畅呢?《Functional Animation In UX Design: What Makes a Good Transition?》(原文需要翻墙)一文中提到了 6 点,包括:有响应、能联想、自然的、有目的、速度适中、简单清晰。

1. 有响应

简单的说,用户操作并产生预期的反馈。作者在文中提到了“开关灯”这个场景,在现实生活中也会有类似的场景存在,比如点击应用图标打开应用、点击用户头像进入用户个人主页等等。我认为,有响应是大多数应用遵循的基本的逻辑和原则。

2. 能联想

这一点和“有响应”有密切的关系,也就是符合用户预期。将新展开的界面和构成界面的元素或动作连接起来。组合联系背后的逻辑是帮助用户理解刚刚在可视布局里发生的变化,是什么触发了这个变化。也就是用户在前一界面发生点击行为,与后一界面之间的关联性。这个概率的大小,决定了用户预期的强弱。

3. 自然的

在现实世界,物体迅速加速或减速是受重力和摩擦力的影响,比较明显的几种类型有:

ease 规定慢速开始,然后变快,然后慢速结束的过渡效果;

ease-in 规定以慢速开始的过渡效果;

ease-out 规定以慢速结束的过渡效果;

ease-in-out 规定以慢速开始和结束的过渡效果

类似的,在好的用户界面设计中,开始或停止也不是突然出现的,而是遵循一定的加速或者减速的表现。

4. 有目的

在恰当的时机指引到恰当的方向和目的,交互的作用彰显的淋漓尽致。不论是文字段落,还是静态图片,都能通过交互完成,一个好的交互能够引导用户进行下一步的操作。

第一次进入的用户或许不能预知即将发生的交互行为,但合理的动画能帮助用户保持良好的方向感,不会觉得内容突然发生了变化而感觉不适。当把窗口缩小时,Mac OS 使用了一个动画,这个动画连接了前一个状态和下一个状态。

另一个好的示例是一个继承性过渡,当用户在列表中或卡片元素中选择某一项,放大看它的细节内容,这个交互需要用户保持上下文一致。(请对照原文阅读体会)

5. 速度适中

原文中表达的是“快速”,我认为应该是速度适中,或者应该是找到一个平衡点,让用户既不会等太久,且符合用户心理感知。在用户操作后,能够让用户理解和判断即将发生的事情。

6. 简单清晰

过渡应该避免一次做太多事情,因为当众多的条目需要在不同的方向或路径运动时,它们会让人困惑。

过渡应该清晰、简单而连贯。记住,在交互设计时,少即是多。所以我们应该只关注希望用户做的主要事情,完成我们为用户设置的主要任务就可以了。

在结论部分,作者也介绍说明了:

交互不是随机的,每一个交互背后都有目的。交互需要让你的用户不错过最重要的信息,无论你的 App 是好玩有趣的,还是严肃直接的,使用合理的交互能帮你给用户提供一个清晰快速连贯的体验。用心设计,注意每一个细节都是成功的关键,让人机交互更容易使用。

文章由 郑几块 原创发布,转载请获得授权,谢谢!

您的赞赏,是对我创作的最大鼓励。

评论( 4

登录后参与评论
  1. 有配图说明会更好

    回复
    1. 回复

      这个并不是翻译,所以我没有用原文的图,你可以翻墙看看原文,嘿嘿

  2. :mrgreen:

    回复
    1. 回复

      :!: :!: :!:

加载中