现代网页间根本的区别在于它们交互动画细节。

我们对一个产品的体验印象是由一系列因素综合作用的结果,其中发挥了基础性的作用。我们再也不能认为用户界面只是静态的设计,交互效果是之后才施加的。相反,我们应当从一开始就信奉网页的交互特性,将其作为网页的自然组成部分来考虑。

让我们来看看一些灵活交互形式的例子,以巧妙地动画,优雅的提升用户体验

滚动条动画

仿照书籍用户体验。在网页上,特别是那些较长的网页,增加滚动效果可以让用户有翻书的舒适感。

Tips:界面中突兀的变化让用户难以处理。不要让他们迷失,要时刻让用户知道变化发生的原因。

状态的切换

没有什么比突然变化更显不自然的了,因为这种突然的变化是真实世界中不存在的。

eg:切换菜单:

Tip:这种过渡的意义在于让你的网页元素在每一状态下都能易懂。

折叠表单及评论

很多网站的评论表单不是令人愉悦的元素。为什么呢?因为它们绝大多数都不够友好,不是么?当你准备发表一条评论,你只是单纯希望输入评论而已。相反的,一种典型的表单会问你各种其他无关的东西。

为了促使用户发表更多评论,我们可以折叠表单,仅仅展现最为关键的元素:评论框

更进一步,在展开表单时光标聚焦评论框。然而这一方法有一个问题:一个关键的交互设计原则是这样说的,行为应发生在理交互产生最近的地方(焦点附近)。因此我们还可以再进一步,为评论框增加动画引导用户注意到评论框上:

将评论折叠,并用滚动条表示正文的长度,而不是整个页面的长度。一个常见的做法就是当用户到达页面底部的时候自动加载评论。我们应该避免强制用户点击,除非有更好的理由这样做。

Tip:逐步显示来减少视觉模块,只保留其本身的精华部分。在用户需要的时候展现。

下拉刷新

符合用户想要更多的期望。将用户发现更多内容的期望和刷新动作联系起来,这个明显的刷新动作就可以舍弃掉了。

Tip:将意图和行为联系起来,体验将变得更加连续无缝。

标签贴靠

标签贴靠是另一种用户界面组件中精妙且有用的集合同时也是非常有意义的过渡动画。

项目的标签跟随内容滚动,从而为右侧的图片提供上下文指示,直到下一项出现。这个动画跟iOS的联系人界面很像,他们对于长列表界面的上下文指示特别有用。这个过渡动画不仅可以帮助快速定位而且流畅的展示了上下文关系。

Tip:标签贴靠适用于那种内容无法很好的适配视窗,而描述或标题会给内容增加有价值信息的长列表中。

可供性动画

来源于认知心理学,它指的是物体可以指示观察者操作的特殊属性。

从用户界面设计角度:可供性是用户界面的理想属性——如此软件才能自然引导人们进行正确的步骤来完成他们的操作目标。

视觉上的突起常被用来增强可供性。突起的按钮暗示按钮能被操作。这个用户体验的手法被广泛应用与IOS的拍照软件中。

Tip:强的可供性设计能更好的引导用户界面中的操作。

情境隐藏

基本理念是当用户自然向下滑动页面开始浏览时,chrome的工具栏会自动隐藏。当用户回滚页面是,工具栏 会再次出现(而Safari是将工具栏变小变只读)。这样既使体验更加情景化(聚焦内容本身)也增加了屏幕的显示区域。而后者在移动终端显得尤其重要。

焦点转换

为Tab切换增加动画,光点击Tab键无法知道焦点跳到哪里了。

Tip:引导用户,不管用户怎么操作。

总结:

需要不断挑战我们现在的信仰。以此来看交互模式怎样潜在的优化用户的生活。我不是说我们要彻底推翻现在,而是如果停止探索真的会变得无知。所以,离开我们的安乐窝,来不断的探索和实验。