产品设计

    今日:40| 主题:15597
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] Framer Flows

[复制链接]
软妹子 发表于 昨天 15:27
72 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Onboarding Flowby Benjamin den Boer  
  When it comes to micro-interactions, we’ve always had your back. But it’s time we filled a bigger role in your design toolkit. In this release, we've made it easier than ever to design a high-fidelity app from start to finish.
  Start with your first screen, use Framer Flows to go to the next and watch as it intuitively defines a natural animation between the two, no matter what transition you dream up. Work your way from loading screen to checkout, finetuning interactions and connecting screens as you go. It’s simple, high-fidelity and fully customizable.
  Seamless Screen-to-Screen Workflow

      With Framer Flows, you won’t have to manually code animations between every screen transition.It does the heavy lifting for you. It’s set up for common iOS transitions, so expect bouncy spring animations and horizontal scroll effects to happen naturally.  
  Framer Flows is built on the FlowComponent. It’s empty by default, so we’ll start by adding the first layer. Here’s how it works:
  1. # Create layers 
  2. layerA = new Layer
  3.     backgroundColor: "#00AAFF"
  4.     size: Screen.size
  5.  
  6. layerB = new Layer
  7.     backgroundColor: "#FFCC33"
  8.     size: Screen.size
  9.  
  10. # Set up FlowComponent 
  11. flow = new FlowComponent
  12. flow.showNext(layerA)
复制代码
To transition to the next layer on click, we simply use the    showNextfunction again. Check out how it looks below or open    this examplein Framer to try it out yourself.  
  1. # Transition to layerB on click 
  2. layerA.onClick ->
  3.     flow.showNext(layerB)
复制代码
To go backwards in your flow, simply use the    showPreviousfunction to cycle to previous screens. You won’t need to specify a new layer here; the FlowComponent does this automatically for you.  
  1. # Go backwards 
  2. flow.showPrevious()
复制代码
         Overlays & Scrolling

  Apps are rarely limited to horizontal flows. They often include scrollable screens, dialogs, modal views and much more. To support the variety of existing transition states (and to empower you to invent new ones), we've included customizable overlay functions in Framer Flows.
  In the featured example above, we overlay a layer from the left side of the screen. See how it works below, or open    this examplein Framer.  
  1. # Create layers 
  2. layerA = new Layer
  3.     backgroundColor: "#00AAFF"
  4.     size: Screen.size
  5.  
  6. layerB = new Layer
  7.     backgroundColor: "#FFCC33"
  8.     width: 500
  9.     height: Screen.height
  10.  
  11. # Set up FlowComponent 
  12. flow = new FlowComponent
  13. flow.showNext(layerA)
  14.  
  15. # Show overlay on click 
  16. layerA.onClick ->
  17.     flow.showOverlayLeft(layerB)
复制代码
Need a layer to pop in from the bottom? Simply set the direction.
  1. # All overlay directions 
  2. flow.showOverlayCenter(layerA)
  3. flow.showOverlayTop(layerA)
  4. flow.showOverlayRight(layerA)
  5. flow.showOverlayBottom(layerA)
  6. flow.showOverlayLeft(layerA)
复制代码
         Common Interactions Made Simple

  As you can see,    Framer Flows is a huge asset for designing simple screen transitions, fast.But that’s not all. In this release, we’ve also added advanced support for common interactions. You can now easily add anchored elements like tab bars using just a single line of code. Scrollable areas with sticky navigation? No problem.  
  1. # Add sticky navigation 
  2. flow.header = sketch.navBar
  3.  
  4. # Add sticky tab bar 
  5. flow.footer = sketch.tabBar
复制代码
A Few Ways To Get Started

  We’re big believers in handing you the reigns when it comes to pushing the boundaries of design. To encourage ingenuity and unparalled invention, we kept Framer Flows code-driven for now. This also allows Windows users and third-party platforms to benefit from it.
  Here are a few working examples to jumpstart your next prototoype, with Sketch files included in the .framer folders of each project.
  
       
  •       Next & Previous— Go back and forth between two screens.   
  •       Overlay— Show a new screen from the bottom.   
  •       Modal— Show a modal dialog from the center.   
  •       Scroll— Scrollable artboard with anchored layers.  
  Check out our updated    getting starting guideor read thedocumentation to learn more about Framer Flows and the FlowComponent. A huge thank you goes out to    Chris Camargoand    Andreas Wahlströmfor the modules that inspired the making of Framer Flows. As always, we’d love to hear your thoughts and see your prototypes on    Facebookor    Twitter.
友荐云推荐




上一篇:情感化设计认知模型:引发愉悦情感化设计的4种元素
下一篇:The typographic details behind Typewolf’s favorite sites of November
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

智渊 发表于 昨天 18:18
有钱就是任性
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表