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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Origami2.0教程01-Scrolling Views
0.0°
2016-11-04 原创文章 教程 举报 4480 46 31 18

教程是直接从官方初步了解之后,以中文的方式作为本人的学习记录,同时共享大家一起学习。共勉



在学习之前,首先大概和大家重新认识一下Origami 的新版界面 

Image title


简单明了,动效基本就是图层属性的变化,同时操作交互上也与以前的QC有不小的变化,后续的小教程里面会一一说明。


为什么选择 Origami 做为主动效工具,最大的原因是 免费!!!


咳咳~ 哈哈,其次还有就是:

  • 对动效的实现进行初期的逻辑梳理,在技术实现阶段能提供一定的思路和建议;(特别是技术哥哥不是大牛的时候)
  • 能更加真实地还原手机的操作与真实的操作体验;
  • 能训练设计师本身的逻辑梳理能力,对于自己的设计有更全面的认知;

Scrolling Views - 滚动视图

如何制作竖向水平滚动动效?


视图滚动效果在 Origami 中实现是比较灵活简单的,现在我们通过一个简单的练习来认识一下如何实现(请下载附件的教程文件同步学习)


Image title



Step 1

打开教程文件,大家可以看到里面有几个图层,List 就是滚动层了。在左侧的预览窗口应该能发现目前是没办法进行任何操作的,现在我们要让列表动起来。


很简单,鼠标放到List 图层上,大家就能看到右侧有个 Touch 的按钮,点击,然后选择Scroll Y,这个时候你会发现模块面板已经多了些内容,这个时候在预览窗口尝试拖动一下,你就会发现效果已经出来了,是不是很神奇咧~ 哈哈




Tab 点击;Scroll 滚动;Swipe 滑动;Double Tap 双击;Long Press 长按; 


问题:

实现基础的滑动之后,再仔细看看预览,能发现1个比较严重的问题:

列表的默认位置并不是在Navigation Bar下面,被遮挡了。 


解决的方式有多种,在此仅介绍官方的方案,请看第二步。


Step 2

点击右上角的”+”按钮,新建一个文件夹 “Group”  ( Group很常用,后续会持续介绍其使用方法) 




默认情况下,Group的层大小与设备屏幕的大小相同。你可以添加一个 Color Fill 到图层里面,很明显就看到多了一层颜色。


Group作为List 的容器,当然全屏是不对的,去掉Navigation Bar 和 Tab Bar 的高度,才是List的高度,从属性面板中得知Navigation Bar 和 Tab Bar 的高度,分别是64.5 & 49。(自己设计的话,应该很清楚模块高度啦)


选择Group图层,修改 Size H 的值,不用算,直接667-49-64.5,然后回车就有结果了 




得出高度之后,最后一步就是调整Group的坐标点即可,坐标值就是Navigation Bar 的高度 64.5,然后你就能发现 Group 完美出现在Navigation Bar 下面了。




现在Group尺寸对了,坐标也对了,可以删掉Color Fill ,把 List 图层拖到 Group 里面,搞定!

 




学习总结:

  •   了解操作界面,手机模型、添加组件、图层属性、图层列表;
  •   明白图层 Touch 基本的几个操作属性;
  •   明白 Group 的基本作用;
  •   明白图层属性的基本应用,坐标锚点的作用;
更新:2016-11-04

下载
收藏

46人已收藏

HeNgrY

博学之,审问之,慎思之,明辨之,笃行之

  • 47

    作品

  • 1811

    粉丝

  • 130

    关注

  • Sketch58-智能布局功能的一些总结
  • 关于老板说“出几个方案看看”的思考
  • 聊聊小团队设计管理的那点事
  • 关于Sketch我知道的那些事

    猜你喜欢

      2016-11-04 原创文章 教程 举报 4480 46 31 18

      Origami2.0教程01-Scrolling Views

      0.0°

      你确定要举报Origami2.0教程01-Scrolling Views

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年11月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      31
      46
      18

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

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

      登录

      手机号

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

      登录
      第三方账号登录