Framer 原型设计指南

专栏连载
让设计师学会用代码做设计
作者leadream
期数共 16 篇, 正在更新
阅读
创作中,已发表 16 / 20 篇 391 人订阅

在众多原型设计工具中选择 Framer ,想用它设计出独特的原型,甚至于一个逼真的应用?可是面对代码这座大山又心生恐惧和排斥,觉得自己做不好?其实,这些都是纸老虎。本专栏的文章,将会使用浅显易懂的语言由浅入深地教你使用 Framer 来设计高保真原型。

本专栏将会通过实例逐个讲解 Framer 中的一些概念——图层、状态、组件等。后半部分再通过一些进阶的内容,让你能够实现更加复杂的案例。所有示例在线预览请访问:https://github.com/leadream/framer-examples-douban#user-content-demos

  • 最近这几年可交互原型设计工具不断出现,从功能全面的 Axure ,到主打移动端设计的 Justinmind ,再到后来更加轻量化的 Hype、Flinto ,以及来自 Google 的 Form 和 Facebook 的 Origami 。面对如此众多的原型工...

    2017年5月20日 ・ 4228 阅读
  • 不同于其它设计软件,使用 Framer 设计可交互原型时,更多的是要和代码打交道。对于很少接触编程的设计师来说,代码一直是“天书”一般的存在。其实设计师对于编程的抵触及恐惧绝大部分是心理作用。我们觉得那些...

    2017年5月27日 ・ 2712 阅读
  • 在 Sketch 和 Photoshop 中我们早已经接触了图层,而图层在 Framer 中也是一个很重要的概念,但是略有不同。在 Framer 中图层是有层级的,通过不同的层级可以定义一个界面的结构。我们把一个元素的上一层级叫做它...

    2017年6月4日 ・ 2003 阅读
  • 说了这么多关于代码的概念,我们还没有完整地看到过 Framer Studio 这款软件的模样。Framer Studio 是一款 Mac 端的原型设计软件,它的核心引擎是 Framer.js ,这是一个为制作高保真原型而生的开源框架,你可以在...

    2017年6月9日 ・ 2094 阅读
  • 图层,是 Framer 中最基本的构成单元。它和其他设计软件中的图层相似,但又有一些独特的地方。我们不仅可以对 Framer 中的图层样式进行操作,还可以在代码模式中给它们添加状态或者动画。创建图层的方式一般有三...

    2017年6月18日 ・ 2083 阅读
  • 我们画好了太阳和云朵,现在是时候让它们动起来了,不如我们一起把白天变成夜晚吧!在写代码之前,我们按照之前的方法先写一段文字来描写这个过程。在蔚蓝的天空中,太阳半遮在云朵后面,散发出温暖的光芒。慢慢...

    2017年6月24日 ・ 933 阅读
  • 使用状态可以很简单地让页面上的元素形成过渡动画,除此之外我们还可以使用另一种方式——动画——来实现动态效果。相比于状态,使用动画可以对元素的运动过程进行更加精确的控制。和状态一样,动画也是一个对象...

    2017年7月1日 ・ 536 阅读
  • 预览链接:一个设计师应该是一个翻译的角色,他能够让用户和自己设计的应用对话。之前几节我们一起做的原型,一直都在向用户展现自己,不停地说话而没有让用户参与对话。想让用户加入进来和你的设计对话,我们需...

    2017年7月9日 ・ 407 阅读
  • 预览链接:每一位设计师都是导演,当他看着一个个图片、按钮、文字按照自己的剧本时间线轮流走上舞台,完成表演时,那种欣喜是溢于言表的。讲完了几个 Framer 中的基本概念之后,我们开始学习怎样使用 Framer 组...

    2017年7月16日 ・ 526 阅读
  • 上周我们一起使用 Framer 滚动组件实现了一个页面滚动,并添加了元素伴随的动效。组件给我们的工作带来的好处是显而易见的——封装了复杂的内部结构,却提供了丰富的定制接口,让我们可以聚焦于自己的想法,工作...

    2017年7月22日 ・ 408 阅读

喜欢这个专栏连载的人也喜欢