您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > UI设计 > UI-K歌类APP交互动效设计(下)

UI-K歌类APP交互动效设计(下)

手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

VIP优惠升级 21大分类,畅享50000+设计教程特权!

为自己充值升华学习
今日剩余学习次数:1

按住画面移动小窗

UI-K歌类APP交互动效设计(下)

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

学习意犹未尽?成为VIP,继续提升

免费学习即将结束

关闭继续学习>

发表评论
收起宽屏
分享给朋友:
手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

添加到专辑收藏已收藏收藏成功,可进入个人中心-课程收藏 查看!
艾伦
艾伦

关注人数:173

目录信息笔记
图文教程学员评价 (6条评论)视频字幕查看优秀作品>

1、本课主要内容如图示。

2、[打开]Sketch软件,[打开]制作好的版式文档。具体效果如图示。

3、[打开]Flinto软件,[新建]画板,单击[文件]-[从Sketch软件导入]。具体效果如图示。

4、单击[屏幕属性],调整画板尺寸至对应的尺寸,[选择]首页面,右击[创建主屏幕]。具体效果如图示。

5、调整画面整体的细节,[选择]首页中关联的图层,单击[创建滚动组]。调整滚动组框至合适的位置,按Alt键[拖动复制]首页面板至合适的位置,右击[淡入]手势动效。具体效果如图示。

查看更多
课程综合评分:9.3
课程难易程度:太简单(0)简单(0)适中(5)有点难(0)太难了(0)
您需要学习后才可以评价,立即学习
课程综合评分:9.3
课程难易程度:太简单(0)简单(0)适中(5)有点难(0)太难了(0)
您需要学习后才可以评价,立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

嗨 大家好,欢迎来到虎课网 我们又见面了,我是艾伦 ,本节课的内容是把上两节课设计的这些界面啊 ,让他们动起来 好,那我们先来看一下课程大纲 ,目的就是使用 Flinto软件,实现简单的交互动效,对吧,让你的设计更清晰 ,具有逻辑性,同时更有说服力 课程重点呢 是1 ,掌握常用的手势 ,其实移动端的交互啊,就那么几种 ,而且已经在人们使用的行为中成了,就形成了固定的操作模式 ,比如说点击 点击两下 长按 ,还比如说上下左右的滑动对吧 ,那比如说是按下抬起啊这些操作 ,那这些操作都已经形成了一些规范了 ,是不是 好 2 什么是转场 ,转场的动效是根据手势操作给予反馈形成的场景,转换动效 ,比如说淡入淡出 推入退出 ,向上向下滑动 左右翻转等 3 创建链接以及绘制链接 ,是Flinto中触点和操作点的指向区域 一会我们讲 ,细节 ,课程难点 在转场动画的设置中 转场计时器 开始和结束是反向的 ,就在制作的时候,可能会扰乱你的思绪,不过不用担心 适应以后就会没问题了 ,好,我们打开之前的设计稿 准备把设计稿导入到Flinto里面 ,这边有两种方法可以导入过去 第一种是 ,安装Send to Flinto这个插件 ,那可以选择你想要导入的设计稿 ,那没有选中的话就不会导入过去 另一种呢是在Flinto软件里面直接导入 ,

这种方法呢,会把你的设计稿中所有的页面全部导过去 这种方法倒是省心 ,不过他会把你不想要的,就是不想要做的动效的页面也给你导过去了 ,回头还得自己删减对吧 嗯 ,而且我们从Sketch中导入的设计稿是分层的 ,和你在Sketch中分层就是 分层分组完全是一样的 ,这两种导入的方法就看个人喜好了 我还是比较喜欢用第一种方法 ,这样有选择的导入 算是以后比较省事儿吧 ,哎,导过来有点问题 是吧没事 我们把文档类型改成iPhone X的尺寸就好了 ,好 全部挪过来了 ,我们把首页 的下面标签栏和home指针调整一下 ,好,点击右上角的预览 打开的这个界面就是真实的手机模型场景 ,那可以在你的手机上安装Flinto的展示软件 ,安装完了之后,在同一个wifi下就可以 就实时的预览你现在的这个界面 ,不过呢,我们的这个界面是没有 ,添加任何动效的 所以说还不能操作 ,那你现在装了也是只是看了大概一个界面而已 ,好,那我们带着大家熟悉一下Flinto这款软件 ,整个界面是不是感觉在哪见过 ,是吧 对 他和Sketch特别的像对吧 ,左侧的图层 右侧的基本属性 那左上角插入一个 ,

对啊,左上角插入是简单的工具组 ,有屏幕 矩形 椭圆 文本和矢量等 那还可以添加比如说图片 ,如果你的UI是用photoshop做的 那你可以在Photoshop当中分别分层的导出 ,图片来 ,然后把他们导到Flinto中来 ,好 我们演示一下 先建一个屏幕 ,把项目中的设计搞导进来 导入进来的图片是没有分层的 所以说 ,如果你用photoshop设计的界面 ,就导出的时候,必须把,就是每一个元素都导出来 ,然后再导到这个Flinto上 然后Sketch ,是可以把整个画板都能导过来的,而且还是分层的 对吧 ,那我们 ,为什么说通过这个Flinto来讲解这个 ,动效呢是因为他跟Sketch结合的比较好 ,而且他是同一个就是同一个MCE系统下面 ,是比较好的一款软件 ,好 ,我们首页上有个小房子图标是什么意思呢 就表示说 ,这里是我们在预览时 ,作为主页 那如果想把它 想把比如说发现这页作为主页怎么办呢 ,你在发现页面上点右键,设置一下主屏就好了 ,预览的时候 发现就成了主页 对吧 ,好,我们来分析一下怎么去做动效 ,首页的页面就做个简单的滚动效果吧 ,或者 再加上一个好友和热门的切换动效 ,左右滑动的动效 ,第二个发现页面的话,banner部分可以做成幻灯片的形式 ,

而猜你喜欢和已点歌曲,可以作为一个选项卡切换的动效 ,那么列表就做一个上下滚动的效果就完了 ,好 第三四个页面做成一个选项卡的动效 ,也可以把他这个独唱和合唱做成一个选中的效果 ,有一个问题啊 ,我们在Sketch中设计的时候,这里是高斯模糊对不对 ,那导过来的时候高斯模糊不起作用了 ,可以返回Sketch中,重新将这个图层做一个真正的模糊的效果 ,或者说不想太麻烦的话我们可以把底部的这个图层 然后不透明度调低点就好了 ,让他们两就是 让他们在页面上看的协调一点 ,好,比如说像这样的一个正在录制的这种动效也是可以做的 ,那小红点闪烁啊 或者说正在录制的时候 这个后面的这个 ,数字正在走动什么的 ,嗯,不过呢,考虑到这个课程的时间比较长,所以说 这两个动效就不做了 ,

那以后的课程中 我们再来讲解好了 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与
虎课网为您推荐UI-K歌类APP交互动效设计(下)视频教程、图文教程、素材源文件下载,学员课后练习、作品以及评价等内容。UI-K歌类APP交互动效设计(下)教程讲师:艾伦,使用软件:Flinto,难度等级:初级练习,视频时长:33分57秒 查看全部
入门教程:
PS (CC2017)教程Illustrator教程After Effects教程CorelDRAW 教程SAI教程Sketch教程Indesign教程Lightroom教程Dreamweaver教程AutoCAD(室内)教程Maya(玛雅)教程SketchUp教程C4D教程Premiere教程3DS MAX教程Axure教程ZBrush教程DaVinci(达芬奇)教程Animate(Flash)教程Lumion教程Keyshot教程Excel教程虚幻4引擎教程AutoCAD(机械)教程PPT教程Word教程Principle教程SolidWorks教程Audition教程C#游戏开发基础教程Hype 3教程Unity3D引擎教程Rhino(犀牛)教程Substance Painter教程Mockplus教程Nuke教程Pro/Engineer教程Vegas Pro 14教程墨刀教程Final Cut ProX教程Unigraphics NX教程Xmind 8教程EDIUS Pro 9教程PAINTER教程酷家乐室内设计教程蓝湖教程xiaopiu教程Keynote教程Houdini教程MUSE教程PPT教程PS (CC2018)教程Adobe XD教程Twinmotion教程Realflow教程图怪兽教程SPSS教程Python教程Acrobat Pro DC教程VBA教程Mastercam教程Numbers教程Pages教程会声会影教程WPS(2019)教程Axure(9.0)教程Visio教程R语言教程JDBC教程Maven教程Servlet教程AJAX教程Rhino(6.0)教程Revit教程Amos教程PHP教程Creo(5.0)教程C4D(R20)教程CSS教程HTML教程Dimesion教程Java教程JavaScript教程Maya(2019)教程Blender教程Oracle教程SQL Server教程OBS Studio教程AE(CC2019)教程PR(CC2019)教程Camtasia studio教程CATIA教程FL Studio教程Cubase教程Redis教程AutoCAD(建筑)教程SQL教程Vue.js教程JQuery教程VideoScribe教程C++教程PowerMill教程Alias教程

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧
限时新手任务
额外获得 4 次学习教程次数

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

学习后才能提问哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
客户端
虎课桌面客户端
置顶播放器,边看边学习
虎课移动APP
支持离线缓存,随时随地学习
领福利
微信扫码关注领5G 2019年全新素材包
建议意见
官方客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:021-80344319工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课积分
免费学习50000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了171,973
并提交了2,021份作业!
登录后立即学习!
loading
微信扫码关注即可登录
登录后立即学习!
手机号
验证码
立即登录
您需要同意协议才可以进行登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
上上签 · 今日宜学习
恭喜!签到成功,获得 10 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到
全站50000+课程免费学!昨日已有41614位学员免费领取~点我领取