5个UI交互动效，让你的设计脱颖而出

文章摘要：在注意力持续时间短暂的网络世界，动画-微交互是一种刺激用户参与的好方式。就像所有放入界面中的元素并与之交互的过程一样，动效效果也是一个功能性元素，而非仅仅是让界面更好看的装饰，当动效效果是锦上添花而不是美中不足时，用户将获得更佳的使用体验。水平视差滚动效果视差效果在数字系统设计中可以同时用

在注意力持续时间短暂的网络世界，动画-微交互是一种刺激用户参与的好方式。

就像所有放入界面中的元素并与之交互的过程一样，动效效果也是一个功能性元素，而非仅仅是让界面更好看的装饰，当动效效果是锦上添花而不是美中不足时，用户将获得更佳的使用体验。

水平视差滚动效果

视差效果在数字系统设计中可以同时用于垂直面和水平面，采用不同的视觉元素并以不同的速度移动它们来增加动作和深度的错觉，从而创建一个多层次的3D滚动效果，使用户体验更加身临其境。精心制作的视差互动效果可以很容易使你从产品群中脱颖而出，并赢得一个客户的好印象。

视觉效果最佳位置之一是在移动应用程序或网站上水平或垂直滚动卡片，并在最后部分的卡片上引入如橡皮筋效应。

需要注意运动错觉和深度错觉可能导致眩晕或迷失方向感，切记以下设计准则

将视差效果的数量保持在最低限度

屏幕的一个小区域内限制过多移动效果

不要让视差效果分散用户对重要信息的注意力

动画搜索栏交互

搜索栏是用户在移动应用程序或网页设计中最常见的图形元素之一。

通过在搜索元素中添加一个微妙的动画效果，可以实现两个目标

为查询过程增添乐趣

有效利用空白区

提交按钮启动消息

一个应用程序首次启动并且所有缓存和数据都被提取时，或是用户进行了某些选择按下提交按钮后，启动动画会被使用，设计师希望通过强烈影响用户体验的交互式体验，让用户走得更远。

启动画面可做参考的建议

将持续时间控制在2秒内

对于用户可能在程序中多次进行的交互将时间减少到1秒内

在评估设计想法时追求简单和大胆的想法而不是难懂、错综复杂的点子

过于复杂的序列动画会显得华而不实，同时可能使客户觉得时间被浪费

强烈的背景色彩、背景图片是不错的选择

在一个相对固定或渐变的背景上添加动画可能呈现的效果会更好

页面间的分页动画

分页是一系列相互连接且内容相似的页面，通常用在点子商务网站。

通过现有的分页交互效果，可以在各个部分之间滑动并由动画创建一个令人愉快的用户体验。

用粘性元素展开卡片

卡片列表是用户界面设计中易于展示信息的方法。

借鉴现实世界中使用实物卡片记忆和组织信息的方法——例如抽屉卡或便利贴——列表显示一系列卡片，每张卡片包含一小部分信息。

通过平衡信息的传递方式，用户可以得到一个清晰的图片和准确的内容信息。当用户选择深入浏览时，可以选择扩展信息，而卡片展开的连续性、流动性会带来整个过程是连在一起的错觉。