Skip to content

动效微交互 #149

Open
Open
@cavenliu

Description

@cavenliu

动效微交互

让产品“活”起来

动效微交互能够让用户在不自知的情况下被吸引:让操作任务变得清晰和尽可能的流畅。让交互过程变得更自然、轻快,动效的基础是实用性,不是纯粹的装饰和娱乐。

动效微交互中运用动效的原则:

不应该给页面加载增加太重的负担
充分考虑目标用户可能使用的各种设备,以及可能出现的各种情况
不让那些专注页面的用户太过分心
和网站或app的整体风格相搭配,保证产品整体的和谐
柔和、轻盈、顺畅、自然
在iUAP Design中,动画微交互定义为一些轻微的,察觉度较低的界面动作,例如颜色变化,形状改变,位置移动,隐藏显示,遮罩阴影等。

动效微交互的设计中,各种配色、形状、动态所形成的界面反馈,总的来说有3种作用:

第一,提供状态信息;引导用户使用
第二,展示结果信息;表示状态
第三,为用户操作提供帮助和引导。提示操作的结果

动画微交互的页面体验效果:

产品融入动画微交互目的是为了通过细致入微的使用体验,堆积起用户对于产品的满意和快感,让减弱用户操作过程中的枯燥情绪,增加愉悦度及主动性行为。甚至用户会主动去频繁的使用和操作。这就是‘参与感’的表现,当一个用户在使用的过程中,能够随时的获取愉悦的反馈,那么这个产品的参与感是很强的,用户的存在感是很强的。
加强体验舒适度
增加界面的活力 在用户预期之外增加的惊喜,可以是帅气的,可以是卖萌,可以有些物理属性,总之让用户感知到产品的生命力。 吸引用户持久的注意力,增加用户的惊喜感,在数据量较大的界面中添加一些动效,让用户保持注意力。
减弱不可避免的不适感
让等待变得更愉快 常出现在加载、刷新、发送等界面中,让等待变得可视化,甚至不再那么无聊。 增加界面与界面衔接的延续感 界面的跳转不可以避免,但是如果让本来分别独立的2个界面或者事件拥有了特定的联系,可以显得更加好玩,不再是生硬的跳转。

可以带给用户反馈的界面呈现方式包括了:

按键和按钮;
渐变或透明;
动态的图标;
临界位置的动态效果;
高对比度高反差的色彩;
气泡或悬浮信息;
一闪而过的提示文字;
对应位置的形状/动态变化。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions