美文网首页
动效练习

动效练习

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

    月账单载入动效

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

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

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

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

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


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

    机票搜索页面的动效设计

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

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

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

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


    机票搜索页面的动效设计

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

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

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

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

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

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


    机票搜索页面动效

    相关文章

      网友评论

          本文标题:动效练习

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