恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
加载动效经验总结
0.0°
2017-08-23 原创文章 经验/观点 举报 3314 12 12 0


这是在前段时间为APP发现页面设计的loading动效,现将当时的设计思路与经验总结分享出来,与大家共同学习交流。


一、需求背景


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


Image title

 

二、设计前的思考


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


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


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

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

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

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


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


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



三、设计过程


1、调研分析


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

Image title


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


① 安卓、iOS原生动效

② 品牌logo

③个性化设计

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


2、创意


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


创意联想:


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

Image title

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


一套内容 - 一个文件夹

多套内容 - 多个文件夹


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

Image title

四、交付开发


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

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

Image title

Thanks.


更新:2017-08-23

收藏

12人已收藏

小草niudecao

动画/动效设计师

  • 14

    作品

  • 25

    粉丝

  • 37

    关注

  • 激萌表情动效
  • 【动效】- 正在录音
  • 引导页动效
  • 【动效】- 点赞

    猜你喜欢

      2017-08-23 原创文章 经验/观点 举报 3314 12 12 0

      加载动效经验总结

      0.0°

      你确定要举报加载动效经验总结

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      12
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录