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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Origami官方案例的试做
0.0°
2015-06-11 原创文章 经验/观点 原作者: 原作者 举报 1066 4 4 0

最近在研究QC和Origami,各种问题,但身边似乎没有小伙伴在研究这个,只能先贴出来,欢迎指导讨论。

最近在研究QC和Origami,作为一个英文渣的数学盲,简直虐的不能再虐。

总之整理了一些,都是做的过程中遇到的各种问题,最后有的想明白了,有的现在依旧不是很懂。

最初入手的时候大概翻了一下官方的说明文档,但英文渣,好不容易看懂的一点对实践指导意义有限,然后只好大概翻了一下就开始试着做官方的案例。

先是大概对着源文件看,然后凭感觉来理解整个流程,之后关了源文件自己做,最后截图,把最初错的,好不容易想明白的地方标到截图里。开始进度慢的丧心病狂,后来倒是好了一点但依旧问题多多。

从第一个遇到的问题开始吧,

  •  2D Waggle


这个案例最大的问题其实是不理解z rotation的确定,在transition那里试验了很多数值,应该是数字越大摆动的幅度越大,但为什么要把 x和y的值加起来实在是理解不能


  • 界面案例 4.Swipe Navigation

这个 因为在做界面图片的时候特别2的没把背景存下来 ,于是底层的列表图片是没有底的,按照官网的逻辑做出来就没有那种被遮挡时变黑的效果了,于是加了一个黑色的图层遮挡在上边,就是红框的位置。

按照官网的案例,滑动激活之后只要向左滑动,内容页都会滑出来,但总觉得这种逻辑有点奇怪。

另外一个纠结的地方在于刚载入的时候总会有内容页先滑出去的情况,这点似乎在gif图上看不出来,在实际操作中总会出现。

在swipe那里试着勾选了jump to start,这样进入时会直接显示内容页面。所以现在的想法是怎么把开始和结束翻转,不知道能不能实现,总之先放在这里,等有进展了再补充。

 

经过一个周末 以上问题并没有很好解决。。。当然其实是根本没怎么去想,然后进行下面一个

界面案例5 page scrolling

大概是最近做的几个里最简单的了... 起码刚打开源文件时是这样的心情

只是通过scroll的X Scrolling来控制滑动的方式

截图时正在试都是什么  

Free就是随便滑,滑到哪停到哪

paging就是案例中 按照页面宽度一段段的滑

whell of fortune 其实也很像随便滑 但滑完的结果会固定到滑到的页面...(我在说什么|||)

也不一定准确,在手机和电脑上都试的结果是如果有个宽3个页面宽的图片  paging属于再怎么努力也只能从页面1滑动到页面2 而且是没有什么弹性效果的 阻尼值(大概是真么叫)会让图片正好的停留在第相邻那个页面的位置,whell of fotune在电脑上努力的(这形容词)拖动的话是可以拖到第三页的  而且还会有反复弹啊弹的效果(开会去)



  • Compose Modal

将两个交互动作绑在一个开关上, 开关控制一个新页面的出现和消失

外面逻辑其实挺简单的,一个interaction2控制着外面那个小按钮的小动画 并且和开关的开启连起来,控制内页图片y轴移动,让内页从下面滑到上面。

然后内页的内容其实是在一个图层组里,同时里面还有一个点击的热区,图层组里的interaction2通过一个input port把down输出到外面和开关的关闭连接,然后就没有然后了。

另外感慨一下,这段是昨天中午做了一半,然后一直想不明白里面那个down是怎么通过input port跑到外面的,然后一直忙着干活就没管这事了,到今天临下班忙完,突然想起来翻一下源文件,于是就领悟了... 简直激动到泪奔,因为实在是一点基础都没有,然后自己想明白之后有一种特别大的成就感╮(╯▽╰)╭  总之这个也完成了  


  • Master detail

终于进行到最后一个了,官网的案例是在pad上的,然后我懒得做那么大的界面,于是就毫无细节的弄了个手机的,弄完发现对齐都被忽略了|||  

内部的页面增加了一个滚动的效果,点击图标时有一个点亮的图标切换,高亮的图片直接和demultiplexer连起来就行了。

原本案例主要的内容是index switch和 Demultiplexer连起来做出tab切换的效果。可以并联N个页面,官方案例里是用iOS8的设置页面来做的,但估计作为强迫症我得都连上才开心,所以就更加偷懒了。

别的就是在内页滚动的定位时稍微算了一下,因为界面是速成做的所以数字也是估计着来,但看效果也还行。因为最后这个画面弄的占地面积太大了,所以附件传了一个源文件,有发现错误或者其他比较好的做法的欢迎沟通。

更新:2015-06-11

下载
收藏

4人已收藏

  • 1

    作品

  • 1

    粉丝

  • 3

    关注

相关标签

    猜你喜欢

      2015-06-11 原创文章 经验/观点 原作者: 原作者 举报 1066 4 4 0

      Origami官方案例的试做

      0.0°

      你确定要举报Origami官方案例的试做

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2015年06月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      4
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录