V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sillydaddy
V2EX  ›  设计

推荐一下 Origami(App 原型制作工具)

  •  
  •   sillydaddy · 80 天前 · 1271 次点击
    这是一个创建于 80 天前的主题,其中的信息可能已经有所发展或是发生改变。

    简介


    Origami 是一个比较有特色的原型工具。如果你对现在手上的原型工具不满意,可以看一下。如果你已经有合适的原型工具了,不妨也了解一下。

    不多说,先贴图 图片

    这张图实现的效果是:
    鼠标点击某个图层后,将 Photo 图层的缩放由 0 变为 1,将另外一个图层的 Opacity(透明度)由 0 变为 1 。并且变化过程有时间动画效果(Pop Animation)。

    图片里面,"Switch"/"Pop Animation"/"Transition" 这些灰色框框,表示 Patch,仔细观察会发现它们的左侧和右侧各有一些“锚点”。左侧的是输入数据,右侧的是输出数据。你可以把这些 Patch 理解成数据加工的机器。并且 Patch 可以串联起来,对数据作连续的加工。

    从图片里面,可以清晰看到数据流向:紫色框是用户的点击操作,触发后面的一个开关翻转,开关的状态(0/1)作为 Pop Animation 的输入,设定好 animation 的时间(speed),它输出一个随时间变化的 process,这个 process 作为输入,经过一个线性映射(transition),再将线性映射的输出,绑定到多个图形的属性(比如 Opacity/Scale)上。

    它不仅可以处理“点击”这种单次离散的事件,也可以处理“拖拽”这种连续的。

    看一下 拖拽对应的 patch

    整个 Origami 的设计就只有这一种“数据流+连接”抽象,没有其他更多的概念了。 这种抽象方式,是不是很容易理解呢?所有的用户操作都可以作为输入,而图层的所有属性,都可以接收 Patch 的输出。

    我觉得这种方式特别适合于原型制作,因为原型的输入输出,都是很直接的,中间没有复杂的数据逻辑。而且有点 zero-abstract(零成本抽象)的感觉:在花很少的时间理解了这种数据流的方式后,如果你要制作的原型比较简单,那只需要常用的 4 ~ 5 个 patch 即可,如果需要更复杂的(比如条件判断、循环),只需再学习对应的 patch,整个软件的使用逻辑是不会变的。

    有些担心


    不知道你是否和我曾经一样,担心这种连线会变成一团糟糕的线团。看下面的文章会解除你的顾虑:
    https://blog.prototypr.io/a-cure-for-cable-clutter-in-origami-studio-f07e6a65264f

    进一步的资料


    官方例子,Origami 的简单演示
    https://www.youtube.com/watch?v=ThaWrk3L2eU

    里面有连续触发、离散触发的形象演示,可以不看文字,只看动图
    https://www.raywenderlich.com/117-origami-studio-tutorial-for-mobile-prototyping-getting-started

    官方网站,文档很完备
    https://origami.design

    第 1 条附言  ·  79 天前
    搜了一下,发现原来已经有人给 Origami 写了推荐信了,

    “交互神器 Facebook Origami” ( /t/341106 )。介绍得比我这个详细多了。

    另外站长 7,8 年前好像也介绍过 Origami 。

    搜索的意外所得是:在帖子 ( /t/691930 )里发现了一个软件 houdini 。3D 版的 Origami !!也是通过这种“node 节点连接”的方式构建交互。真可谓“踏破铁鞋无觅处,得来全不费功夫”。哈哈
    5 条回复    2021-05-17 14:42:44 +08:00
    cairnechen
        1
    cairnechen   80 天前
    facebook 家的吧,以前捣鼓 fresco 的时候了解过
    sillydaddy
        2
    sillydaddy   80 天前
    如果有疑问的话,可以在回复里面提问,说不定我可以答上来。
    HiJony
        3
    HiJony   80 天前
    欢迎到群里来交流:D
    VGhlRmFrZUpvbnk=
    Mryang
        4
    Mryang   80 天前
    @HiJony 什么群?
    sillydaddy
        5
    sillydaddy   80 天前
    @cairnechen 对,Facebook 荣誉出品
    @Mryang Origami 微信交流群
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2496 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 10:53 · PVG 18:53 · LAX 03:53 · JFK 06:53
    ♥ Do have faith in what you're doing.