美文网首页
动效练习

动效练习

作者: 小鹿大概不是我 | 来源:发表于2018-07-25 13:17 被阅读0次

月账单载入动效

这是当时在做iVoka Mini X的账单功能后续的一个优化方案。

对于线上的版本,因为开发时间等种种原因,效果并不理想。因此尝试以下的优化方案:

1.用饱和度较低的色彩和线性图标、细字体等的搭配,使页面设计轻盈化

2.加入载入动效,使页面更活泼

3.弱化列表感,通过色彩区分列表


记账本的月账单页面载入动效设计

机票搜索页面的动效设计

这是看到网上的一个screen,非常喜欢,尝试丰富了细节和后续页面。

1.用阴影和色块替代常规的分割线,页面更整洁、生动。

2.用飞机元素去标示交互路径

3.模拟飞机飞行路线动画


机票搜索页面的动效设计

较早的一个机票搜索页面动效

14年左右的一个设计练习。当时页面搜索结果加载会比较慢,尝试使用动效来缓解用户的等待焦虑。

1.原搜索页面都为表单输入,比较单一,加入插画丰富视觉元素

2.点击搜索后模拟飞机起飞滑行效果,而点击的同时,后台已经在开始搜索,大大缩短下一列表展示界面的加载时间。

3.列表项也模拟飞机看板的翻转,经常飞行的人对看板的这个效果比较熟悉,增加亲和力。同时,也能缩短列表的加载时间。

4.将抵达城市的设为背景图,画面更丰富且熟悉。


机票搜索页面动效

相关文章

  • 近日动效设计

    最近的一些动效工作和练习作品 信商产品App动效设计 动效设计练习作品

  • 动效练习

    月账单载入动效 这是当时在做iVoka Mini X的账单功能后续的一个优化方案。 对于线上的版本,因为开发时间等...

  • 动效练习3——层级动效

  • 动效练习1

    今天第一次使用Pixate制作了一个下载的小动画!发现这个软件很简单,上手很快,但是也有一些缺陷,可作为入门先使用...

  • 动效练习2

    魅族商城的应用界面动效练习,安卓版本的Pixate不支持负数的Y值控制图片,所以实现效果不完整。 经过这两天的使用...

  • ae动效小练习

    先说一下从最开是我学习每一个软件的步骤,基本是先找有教程的练习跟练——找自己感兴趣的内容临摹——回头看基础书,因为...

  • 论状态动效中的信息传递

    首先我们简单的先将游戏内动效分为两类:“状态”动效和“行为”动效。状态动效:永远单向传递信息行为动效:动效基于交互...

  • Principle转场动效

    今日份练习 使用Principle完成的转场动效,用了animate和drivers功能。

  • AE教程:学会这个,你做的Logo就可以单独出道了

    一、确定所需要做的动效 1、制作logo背景形状动效 2、制作U的动效 3、制作I的动效 4、制作消失动效 二、制...

  • 小乌龟的动效练习

网友评论

      本文标题:动效练习

      本文链接:https://www.haomeiwen.com/subject/hlrumftx.html