美文网首页AE UI动效
加载动效设计经验总结

加载动效设计经验总结

作者: Motion实验室 | 来源:发表于2017-08-21 18:49 被阅读80次

    一、需求背景

    APP发现页面数据量大,需设计一个加载动效,提升用户体验。

    二、设计前的思考

    1、商业价值(通过加载动效更好地吸引用户注意力,提升用户对内容的点击探索欲,提升阅读量)

    2、用户体验价值(帮助用户理解当前所在的位置,缓解用户的等待情绪,促进用户体验)

    3、遵循原则(动效应该是自然、和谐、可用的)

    ①物理规律:应该符合现实世界的真实物理效果,努力模仿自然界的物理运动

    ②品牌调性:应与整个产品的定位、风格相一致

    ③可用性:不能给用户错误的引导信息,影响用户的操作

    4、设计关键点:能否给用户直观的解释当前的位置,动效的趣味性,与发现页面的匹配

    5、实现交付(动效是可实现的,应随时与开发人员沟通,保证动效的高度还原)

    三、设计过程

    1、调研分析

    查看大量学习、教育类APP的加载动效

    在查看了今日头条、沪江网校、微信读书等APP之后,分析得出常见加载动效一共分为三种类型:

    ① 安卓、iOS原生动效

    ② 品牌logo

    ③个性化设计

    因品牌logo在下拉刷新已用过,加载页面时间较长不适合原生动效,故选择个性化设计

    2、创意

    设计夹是学习类的APP,之前设计内容加载动效为书本翻页,发现页面为内容的上一页面,是许多成套的系统化内容,动效需保持与课程内容页面的关联性。

    创意联想:

    (书本 - 内容 - 笔记 - 资料 - 知识文件夹)

    使用场景分析:用户打开发现页面,显示许多套系统化的知识内容。

    一套内容 - 一个文件夹

    多套内容 - 多个文件夹

    成套的内容源源不断的向你输送而来(一个个文件夹向你输送而来)

    四、交付开发

    由于开发成本的问题,此次设计采用了gif图实现效果。

    切图只需要动效的部分即可,需保证动效在界面的中心位置。

    Thanks.

    相关文章

      网友评论

        本文标题:加载动效设计经验总结

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