动效练习

2018-07-25  本文已影响0人  小鹿大概不是我

月账单载入动效

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

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

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

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

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


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

机票搜索页面的动效设计

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

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

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

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


机票搜索页面的动效设计

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

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

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

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

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

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


机票搜索页面动效
上一篇下一篇

猜你喜欢

热点阅读