手机二维码 手机二维码

什么是UI设计中的动效设计?

发表时间:2021-08-31    人气:1983    作者:牛耳教育
    什么是UI设计中的动效设计?动效设计,顾名思义就是动起来的效果,这种表现形式使得静态的页面可以更加灵活的动起来,不仅可以使得操作体验更加顺畅,也可以在某种程度上吸引、引导用户。
什么是UI设计中的动效设计?
    1、动效转场

    入场元素

    用户操作进入新页面后,通常会比较关注入场元素,像一些金融产品、数据图表的UI设计,都会采用短暂的动态效果,强化元素的展示效果,进一步吸引用户关注数据与内容。

    持续元素

    在很多优秀的设计网站上,我们可以发现大多数交互动效都是对持续元素进行特殊处理,他们不仅可以让动效更加特别,还可以提高产品的流畅度。

    例如,前后页面的内容关系比较大,因此操作后可以采用持续效果,进一步引导用户的视线,提高视觉体验,强化交互流畅感。

    停留元素

    在整个动效编排中,除了关注入场和持续元素之外,停留元素也是非常值得关注且可以深入打磨的内容。

    例如,在整个搜索体验的UI设计链路中,我们可以发现搜索框提示文字、输入的单词等等均在进行了停留处理,确保在页面切换时,减少用户的视觉跳转,可以有效提供用户的专注度,打造更加轻松的体验。
什么是UI设计中的动效设计?
    2、信息折叠

    产品设计中都希望在足够的空间内可以展示更多的信息,但这样往往会带来信息过载的问题,因此我们需要在UI设计的过程中对信息展示进行区分,利用行动触发结合动效的形式,辅助信息布局更合理。

    同类信息

    比如vivo全新的原子随身听,利用现实生活中音乐播放器的样式,将同类app进行收纳,体现了在较小的空间布局下如何展示更多的内容。

    容器折叠

    与此同时也会发现很多产品中利用容器来承载信息,典型的案例就是FAB按钮,用户操作后再利用动效的形式进行反馈,其实和上面的相差不大,只不过他属于不同信息共用同一区域。

    触发展示

    网页端有一个不同于移动端的交互,那就是hover,因此我们可以利用这种交互方式,去处理信息的重要层级,然后根据用户的操作再进行详细露出,很大程度上优化了信息空间展示。
什么是UI设计中的动效设计?
    3、交互流程

    随着产品体量越来越大,功能繁多的同时,页面结构也变得十分复杂,为了确保用户体验过程中,更清楚页面层级,以及操作后的流程,所以我们可以通过动效合理安排交互流程,助力用户的舒适体验。

    操作预知

    利用动效的形式,提升用户在交互流程中的操作预知,例如下图的分类图表,充分的体现内容的含义,进一步强化用户操作前的预知性。

    交互反馈

    在一些结构复杂的页面中,我们可以通过合理安排交互动效,转场方式、状态反馈等等一系列的UI设计,有效的对界面层级路径梳理。

免责声明:1、文章部分图片源于网络,均为示意图;2、所有文章、图片、音频视频文件等资料版权归版权所有人所有;3、因非原创文章及图片等内容无法一一和版权者联系,如原作者或编辑认为作品不宜上网供浏览,或不应无偿使用,请及时通知我们,以迅速采取适当措施,避免给双方造成不必要的经济损失;4、本页面内容如无意中侵犯了媒体或个人的知识产权,请来电告之,我们将于24小时内删除。

每日前50名预约咨询

可免费获取专属优惠

*
*

电话咨询

400-0731-162

在线咨询

返回顶部