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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
AE教程:数码电商界面动效设计
0.0°
2018-07-09 原创文章 教程 举报 6862 190 315 12


课前准备


在7月10日会带着大家花2-3周做一套车机的设计 http://activity.ui.cn/lynk 从规范制定到动效然后包装设计,欢迎关注!


---------------------------------------------------------------------------------

活动时间
7月8号-7月15号下午5点
将会在5点把点评和下一期教程一起发出
有问题可以在群里讨论和交流,不懂也可以来要教程看看


高清播放视频地址
界面设计(上):https://www.bilibili.com/video/av26116050/
动效设计(下):https://www.bilibili.com/video/av26344492/

必须下载的素材
本文所需要的素材和pdf  网盘下载


Image title

Image title



一、确定所需要的设计

这次我们设计一个数码电商页面,还有其动效

Image title



题目:数码电商页面

内容:首页需要有logo,菜单icon,图片,标题和价格。详情页需要有产品图片,标题,简介,价格,颜色选项以及其按钮。

提交:根据这次主题做出ui界面,然后将动效设计传到UI中国后,将其链接放到群文件中点评后选出最佳作品发放价值200元奖品,希望大家认真对待每次练习


Image title



二、简单介绍下如何制定规范,根据制定的规范去做设计


需要注意几点:

1、规范只是作为参考,有些特殊情况可以不用遵照规范去做

2、在规范中设定颜色等可以去看看优秀的设计,提取他们的关键元素,“颜色,字体,字号,字间距,行间距,内容间距”都是可以提取的

3、还有些问题在视频都有说明:https://www.bilibili.com/video/av26116050/


Image title

Image title


在这次设计我给你们找了一些参考,可以按照他们的排版参考后进行设计,可以下载pdf文件放大看


Image title



三、AE制作动效


介绍一下这个运动的过程

1、上滑首页后消失banner

2、点击卡片后过渡到二级页

3、二级页的出现效果


Image title



四、如何更方便的用AE直接转gif


很大一部分人都是导入到ps中保存gif,或者是用AE的插件GIFGUN去转换gif,其实AE内有自带的一个渲染选项,只需要下载Adobe的一个软件“Media Encoder CC 2018”一定得2018cc 的版本,可去百度或我网站进行下载

假如导出Gif有残影需要先导出视频文件后在转换成GIF,具体操作可见视频最后的部分:https://www.bilibili.com/video/av26344492/


Image title

Image title


五、设计完成进行提交

努力的人运气都不会差


Image title


最终效果


Image title



上周点评地址:http://www.ui.cn/detail/373493.html
希望大家能一起进步

版权申明:本文为我的原创文章,如有转载请附上作者和链接哦~
也欢迎加入设计群, 一起交流设计

微信公众号:LEO的Blender的课堂

更新:2018-07-09

收藏

190人已收藏

UILEO

微信:hjj199394

  • 103

    作品

  • 2w

    粉丝

  • 4

    关注

  • 【建模教程】万万没想到就学了小火箭,我的Blender就入门
  • 【Blender教程】万圣节南瓜头零基础教程
  • 顶配M1 Max渲染到底有多强?来看一看和3090的实测对比
  • 现阶段应该学习Blender还是Cinema 4D
相关标签

    猜你喜欢

      2018-07-09 原创文章 教程 举报 6862 190 315 12

      AE教程:数码电商界面动效设计

      0.0°

      你确定要举报 AE教程:数码电商界面动效设计

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年07月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      315
      190
      12

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

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

      登录

      手机号

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

      登录
      第三方账号登录