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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
AE教程:读书界面动效设计
0.0°
2018-06-13 原创文章 经验/观点 举报 7955 302 456 13


需要看高清无广告的视频可点击B站链接

https://www.bilibili.com/video/av24519371




提交作业:有跟着教程学习的朋友,可以将设计完成的APP和Gif上传到UI中国后,将链接放到txt中,将其txt以QQ号命名上传到QQ群文件,可见右侧头像下面。


点评模式:下周末我会抽取部分作品进行点评,并对其设计方向给出建议,希望大家练习的模式会越来越成熟,谢谢大家支持!



课前准备


必须下载的素材

本文所需要的素材 网盘下载


按照惯例开始继续啰嗦下


1、从本期开始将动效教程全部改成关于UI的动效


2、为了兼顾初学者,将出视频直播教程。有需要的可以关注下


3、请务必练习,看教程很舒服,但是其中会出现各式各样的问题


在看视频前建议浏览完整篇文章



一、确定所需要的操作


1、APP设计的注意事项

2、如何搜集灵感

3、设计App

3、切图后导入AE

4、制作动效


Image title


二、App的注意事项


这个App用的是Iphonex的尺寸,先说下iphonex的注意事项

iphonex的官方文字规范 https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x


iphonex的官方界面源文件 https://developer.apple.com/design/resources/


这是源文件的部分截图

Image title


IphoneX的界面尺寸为1125px*2436px,由于之前直播时候忘记录屏,大家想要详细了解Iphonex的设计规范可以查看这篇文章 http://www.ui.cn/detail/302573.html


三、搜集灵感


确定了设计的规范,就可以想想怎么去设计这个界面,由于之前想设计一个关于读书的页面,所以我们去dribbble上找一些参考,可以下载之前的素材文件夹,里面有大图和gif


Image title


从这些dribbble的文件可以看出有些共同点

1、阴影
阴影基本上是大阴影,并且这块的阴影为了更有品质感,可以将原图层复制后缩小,进行高斯模糊,然后降低透明度,具体可以看源文件1中的封面2


2、字号
标题字号基本上都偏大号,并且都是加粗的,并且内容字号为了体现节奏感,将其字色和字号都变弱


3、留白

不同区块之间留的距离都很大,并且没有任何不相关的元素


四、设计APP

首先我们确定所做页面的内容
首页的布局为标题、搜索、封面、作者、底部导航

内容页的布局为封面、主内容、数据、评论


Image title


这里举一个例子,如何去利用别人的排版完成自己的设计(针对初学者),有一定审美的童鞋可以自由发挥,而就算用了其他人的排版,也需要注意页面整体的间距需要保持统一

Image title


这里建议初学者自己去设计一遍,可以对iphonex的规范有一个详细的了解
这里把标注放上


Image title



五、制作动效


这里说下大概的步骤,请完整看完后再看视频哦,尤其是第5步


1、将切图文件夹的文件分别导入到AE后排好


Image title


2、首先制作home页面的切图由透明度0-100,位置由上到下过度出现的过程


Image title


3、点击第一个封面后,其他的切图将会渐隐消失,所以可以将除去封面1、顶部时间、底部横线所有的都打上预合成,将透明度由100到0

Image title


4、然后将第二个内容页面的切图放入ae并排好,继续做一个透明度由0-100,位置由上到下的过渡,并且将封面1的位置由下往上挪动

Image title


5、接下来是最难的一步,涉及到3d图层的翻转,蒙版的扩散和羽化的知识点

这一步由于需要封面从左上侧开始放大,所以需要在第一步就将锚点挪至左上侧

Image title


在封面放大的同时将其他的切图进行隐藏,并且将第三个页面缩小并用蒙版裁切至封面的后面,随着封面一起放大
当封面放到到一定位置的时候,开始沿着Y轴旋转进行翻页效果,同时透明度由100降低到0
并且在翻页完成的时候第三个页面的蒙版中的扩展和羽化也会相应变化


Image title




码字这么辛苦,真的不关注下吗???


版权申明:本文为我的原创文章,如有转载请附上作者和链接哦~



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

更新:2018-06-13

收藏

302人已收藏

UILEO

微信:hjj199394

  • 103

    作品

  • 2w

    粉丝

  • 4

    关注

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

    猜你喜欢

      2018-06-13 原创文章 经验/观点 举报 7955 302 456 13

      AE教程:读书界面动效设计

      0.0°

      你确定要举报AE教程:读书界面动效设计

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年06月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      456
      302
      13

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

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

      登录

      手机号

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

      登录
      第三方账号登录