请选择 进入手机版 | 继续访问电脑版

产品设计

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

[其他] Framer Flows

[复制链接]
软妹子 发表于 2016-12-2 15:27:54
170 2
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.
智渊 发表于 2016-12-2 18:18:42
有钱就是任性
回复 支持 反对

使用道具 举报

婕珍 发表于 2016-12-25 09:27:41
不错 支持下
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表