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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
UI设计中的动效:看看墨刀大神们是怎么炫技的
0.0°
2018-05-04 原创文章 教程 举报 6360 13 7 2


文:墨墨姐




1



故事要从弥漫在社交圈的猪小妹佩奇开始讲起…

Image title



作为一只来自大不列颠的粉红色“吹风机”,风力十八级,不仅席卷到我们的朋友圈微博、某手、某音、某呼… 前段时间还一鼓作气吹到了墨刀讨论区…



先是“小龙”同学率先po了一张墨刀鼠绘佩奇,墨墨姐下巴惊掉。

Image title


留言区瞬间变“社会”。


Image title



但素很快,有“轮子丸”同学来叫板。


Image title


墨刀办公室一片沸腾。


此时谁料“小龙”同学不服,要搬出“小虎”。

Image title



“愿望是击败小猪佩奇喽!”


于是……

Image title


点此查看“小虎”原型



墨墨姐想说,小龙,你真的证明了…


我们会期待更多作品的哈。


Image title


墨墨姐在此打个call:画佩奇画小虎只是小龙的“会友”之作,人家还是有分享专业交互原型的,可以去讨论区查看哦。




02


当然,除了这片洋溢的粉红色,在墨刀讨论区更有好几位大神们分享出了自己的实力作品。

让墨刀小白们觉得,原来还能这么玩?!


“周祚栋” 大使的交互系列作品


这个系列在刀友的鼓励下已经发了三期。

第一期包含一些导航图标转换、音量变化、进度条等微交互。

Image title


点此查看完整原型


第二期另外增加首页交互,嵌入了表单,增加了打赏入口。


Image title


点此查看完整原型


第三期除了主页的九宫格翻折动效,还汇总了9种交互效果,比如微信朋友圈点赞和评论、悬浮按钮等。

Image title




点此查看完整原型




“互谋”同学的“浪”系列作品


这个【“浪”系列】是墨墨姐起的名字,呃,因为……


Image title


【稳住,别浪】篇有12种微交互组合,包括进度条、音乐播放暂停、开关、下载成功、下拉刷新等等,超级实用。

Image title



点此查看完整原型



【浪得慌】篇包含标签导航的左滑右滑,以及上拉下拉的页面动效。


Image title


点此查看完整原型



【太浪了】篇则有常见的卡片左滑右滑效果,以及下拉和上滑时卡片为适配页面变换尺寸大小。

Image title



点此查看完整原型




“小romeo”的【ae地图展示】


这个动效是临摹的原作者CPH4 用AE做的作品。

Image title

此效果全程也可以用墨刀实现。具体怎样操作?小romeo 贴心准备了详细的教程,点此可以查看原型和教程哦



“大锤食漆” 的【NIKE SNKRS】


这个作品主要有卡片左右滑动效果,以及底部小图的突出和还原效果。

Image title


“大锤食漆”也贴心提供了教程,墨墨姐表示,写的很详细,学到了!点此可以一并查看教程和原型!



03


墨刀讨论区还有很多大神的优秀作品,因为文章篇幅有限这次没有收录,但是以后墨墨姐会不定期收集更多作品给大家分享。


如果你还想看更多的原型、教程或者产品设计有关的文章,欢迎移步墨刀讨论区。


如果你有作品或者经验想分享,发在讨论区,也许下一个受刀友们膜拜的就是你哦!

Image title



更新:2018-05-04

收藏

13人已收藏

墨刀_MockingBot

在线产品设计写作一体化平台

  • 494

    作品

  • 1448

    粉丝

  • 3

    关注

  • 产品经理和设计师谈恋爱,看得我比“老坛酸菜”还酸!
  • Figma”断供“后:墨刀能为中国企业做什么?
  • 产品经理干久了,有哪些后遗症?
  • 超实用的后台原型,产品大佬的摸鱼技巧都在这里!

    猜你喜欢

      2018-05-04 原创文章 教程 举报 6360 13 7 2

      UI设计中的动效:看看墨刀大神们是怎么炫技的

      0.0°

      你确定要举报UI设计中的动效:看看墨刀大神们是怎么炫技的

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年05月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      13
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录