对 Framer 真是相见恨晚,发一些感概。请进来聊聊对原型工具的理解吧。 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sillydaddy
0.69D
0.12D
V2EX    设计

对 Framer 真是相见恨晚,发一些感概。请进来聊聊对原型工具的理解吧。

  •  1
     
  •   sillydaddy 2021-04-27 10:25:25 +08:00 5151 次点击
    这是一个创建于 1643 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近初步了解了 Framer,虽然只是初步了解,但感觉它正是理想的原型工具。(此处引爆炸点

    我对原型工具的理解

    • 组件

       将原型分解成一系列的“组件”(按钮、复合组件) 
    • 属性

       然后每个“组件”暴露在外面不同的“属性”(显隐、位置、大小、透明度、颜色、文字。。等等) 
    • 状态

       然后很多个组件以及它们的属性的取值,组合成一个“状态”(不同的页面、页面的不同显示状态,这些状态中的组件同一个属性值取值可能不同) 
    • 触发

       然后使用触发器(点击、触摸、键盘)触发这些状态的切换,比如手指点击按钮,触发页面切换。 
    • 变化曲线

       状态的切换过程,就是各个组件的各个属性的变化过程,如果给属性的变化加上一个随时间的渐变效果,就是常说的“转场动画”了。 

    这些概念并不新鲜的,在不同的原型工具里面,有不同程度的体现,但毕竟体现的程度不同。

    我感觉最能突出的就是“Framer”这种,因为

    • 它特别强调了属性+变化这 2 个概念的组合

       每个组件都有不同的属性,每个属性值的变化都可以设置变化曲线? 
    • 而且组件+属性这 2 者的结合,又与现在前端开发的组件化不谋而合

       对于会编码的人来说非常亲切,可以很容易封装一个组件用在原型工具里。 

    开战吧

    了解过 Axure 和墨刀,感觉不如 Framer 能体现出上述的概念,比如让 Axure 做个动画得费老劲了。对其他原型工具还不太熟悉,没有深入理解和对比过,可能没发现它们的优点。

    欢迎大家来拍砖,聊聊你对原型工具的理解吧。

    第 1 条附言    2021-05-03 13:13:21 +08:00
    进一步了解了 Framer 以及 FramerX 。

    惊讶的发现了一个事实:
    之前的 Framer 和现在的 FramerX 。完全是 2 个不同的产品思路。
    这可以从介绍 Framer 和 FramerX 的视频中了解到:2 者的可视化编辑器是完全不同的。思路、底层 API 也是不同的。

    下面这个英文帖,有人在怀念之前 Framer 的简单、易用,而新的 FramerX 则剥夺了他们的这种权利,而不得不被迫去学习 React 相关:
    https://www.designernews.co/comments/296086

    我试用了一下 FramerX,逻辑上确实对于设计工作者来说,非常不友好就连我作为开发,一时之间也很难学会。

    Framer X 的思路,更像 24#楼里说的,朝着构建“组件库”的思路发展,但却在大大加大了设计师的门槛。因为之前的 Framer 虽然说有 code,但这些代码更多的非常简易的脚本语言,而且基本上都是通过“Framer Studio”可视化生成的,而现在的 Framer X 则必须要设计师具备读写 React 的能力,才能定制自己的组件。

    我感觉不能说 FramerX 的方向有问题,但这种激进的方式太不可取了。
    虽然 FramerX 有很多我想要的原型工具的特性,但奈何太复杂。我现在一点也不想用它。
    26 条回复    2021-05-05 03:16:32 +08:00
    EvansUtopia
        1
    EvansUtopia  
       2021-04-27 10:53:40 +08:00
    我理解的原型设计,本不应该存在动画这件事
    Outshine
        2
    Outshine  
       2021-04-27 10:54:20 +08:00
    我看标题的时候以为是讲 Figma,点进来看了一下介绍,发现又是一个新的原型工具!
    原型工具从 Sketch 出来之后这几年,更新迭代好快啊!
    efaun
        3
    efaun  
       2021-04-27 11:00:53 +08:00
    我对原型工具就一个要求:有公开的修改记录,以后上线前产品再改需求就打死他!
    charlie21
        4
    charlie21  
       2021-04-27 11:06:14 +08:00
    @efaun 哪个原型工具支持修改记录
    Pandroid
        5
    Pandroid  
       2021-04-27 11:22:55 +08:00
    @Outshine Framer 很早就有了,当时 origami 、principle 、flinto 、Pixate 、Form 等各家混战,到现在被收购的、被做死的一大片。这类工具对我价值主要在界面过渡、交互细节动画上的表现,充其量只是动画工具,现在已经用 keynote 代替了。
    yyc529
        6
    yyc529  
       2021-04-27 11:27:08 +08:00
    @EvansUtopia 产品原型一般不需要动画。但有的交互原型,设计师需要给前端一个效果示意,有时会用到;
    C603H6r18Q1mSP9N
        7
    C603H6r18Q1mSP9N  
       2021-04-27 11:42:09 +08:00
    我感觉 figma 也不错,直接做原型也可以
    235777178
        8
    235777178  
       2021-04-27 13:43:03 +08:00
    产品原型也要分阶段,低保证大多数就是框图,不需要动,把逻辑列出来就好了。
    高保真才需要一些交互,但是也不至于做到动画的程度。
    越复杂的原型以为着你在原型阶段需要花的时间越长。
    表面可能对开发友好了,但是实际上压缩的时间是开发的时间。。。。
    hahastudio
        9
    hahastudio  
       2021-04-27 13:51:35 +08:00
    有稍微用过 Adobe XD,主要是因为免费 + 自带官方 UI Kits www.adobe.com/products/xd/features/ui-kits.html
    但我真是用不惯,主要是有那用原型画出来的工夫,真的 UI 实现都做出来了
    ichanne
        10
    ichanne  
       2021-04-27 14:19:38 +08:00
    @charlie21 蓝湖带记录
    sillydaddy
        11
    sillydaddy  
    OP
       2021-04-27 14:46:57 +08:00
    @235777178 分阶段是肯定的。不过,我想要的原型工具,要能应对原型设计的各个阶段。。所以就需要去分析一个原型工具到底是什么,把它的构成要素抽象出来,看看市面上的工具是不是符合,各个工具的侧重点在哪儿。
    Eninsslei
        12
    Eninsslei  
       2021-04-27 17:43:09 +08:00
    framer 确实不错,但是需要一定的代码基础
    235777178
        13
    235777178  
       2021-04-27 19:33:03 +08:00
    @sillydaddy 不是抬杠,就是觉得其实做原型的根本目的是为了把事说明白,不能太纠结于工具的使用。
    我刚入行的时候做原型都带跳转,axure 各种动态面板嵌套,现在已经懒得就在边上写个说明就完了。
    sillydaddy
        14
    sillydaddy  
    OP
       2021-04-27 19:56:55 +08:00 via Android
    @235777178
    也不是抬杠,你看下 2 楼的回复,再结合下面 2 个链接,1 个链接是 7 年前的,1 个链接是 2 年前的:
    15 款优秀原型产品 ( http://www.woshipm.com/rp/64741.html )
    9 款原型工具 ( http://www.chanpin100.com/article/109790 )

    现在都流行微交互了 ( https://www.uisdc.com/micro-interactions-why-when-how )
    新的原型工具能更流行,肯定是有需求在推动着的吧。
    235777178
        15
    235777178  
       2021-04-27 21:12:33 +08:00
    @sillydaddy
    这些我很早就看过了。你所谓的需求,并不是说产品经理实际的工作内容,或者可以这么说。
    产品经理的最根本职责就是把事说明白了,减少沟通成本,哪怕用纸也无所谓。
    有交互必然是好的,但是对于整个项目周期来看,产品经理所占的实际份额就会很长,然后下一个环节就会被挤压。

    在一个项目周期里,什么时候需要这种交互,是给到客户展示、领导展示的时候。开发的时候。
    而且在一个项目的开发周期里,开发首先在意的是你这个功能说没说明白,至于怎么交互,交互的细节,其实是在优化的过程中了。
    heypig
        16
    heypig  
       2021-04-27 21:44:46 +08:00
    作为一个外行 , 看各位交流挺有意思. 了解到一些这个行业变化情况.

    有些是关于"器"的讨论, 工具的比较, 工具的演化,工具背后的理念变化.
    有些是关于"道"的讨论 弱化工具, 强调原则, 介绍不变的理念. 和实践经验. 常见到最后出现的现象, "最好的原型工具"还是纸和笔.

    不同阶段的不同做着重点.

    既然楼主开贴是介绍工具. 我们尽量聚焦点吧. 大家都介绍下自己的不同的工具体验和实践经验吧.
    个人作为围观者, 潜在的入门学习者, 短期也觉得这更实用点.
    EvansUtopia
        17
    EvansUtopia  
       2021-04-28 08:21:16 +08:00
    @yyc529 任何要求我在原型阶段给他做动画的需求,我都想一巴掌扇死他。除非客户要求进行演示,必须做动画,否则一概不做。
    对于你说的效果示意,交互标注和直接沟通的效率吊打原型做动画。
    Outshine
        18
    Outshine  
       2021-04-28 10:41:41 +08:00
    @EvansUtopia 文字和语言沟通始终没有一个动画效果好理解

    而且,当所有(大部分吧)的原型设计工具都这么做的时候,说明需求和趋势是存在的。
    superliwei
        19
    superliwei  
       2021-04-28 13:59:20 +08:00
    当一个外国厨师说最好的味道是原汁原味的时候,你想想中国几千年的饮食文化中又是炸又是蒸又是煮又是煎的是为了什么?这一想你就明白了,五花八门的原型工具,目的就是为了你能体验到各种方式做原型的乐趣,所以,选择自己喜欢的方式准没错。
    EvansUtopia
        20
    EvansUtopia  
       2021-04-28 16:44:02 +08:00
    @Outshine 确实没有一个动画效果好理解,但是如果是对内的原型(就是我说的非对外演示的情况下),原型的意义是快速描绘产品的意图,产品逻辑闭环等等...
    做动画(非简单的跳转),是一件极其费工夫的事情。
    而且原型的修改是非常繁多的,一旦附加上动画,修改工作量指数级增长。
    看似好像做动画很高大上,提高效率,实则不然。
    至于需求和趋势,我只能说,那是被外界倒逼的,真的交互设计师,谁想在原型阶段做动效
    Spoter
        21
    Spoter  
       2021-04-29 18:06:16 +08:00
    实际过程中,很少用到动画(应该说是 99.9%),流程图、uml 用的多,
    如果是原创的动画,一般都是设计做。非原创的话,都直接文字说明或者给个案例即可。
    Kq7jB3UYozSnk9Fp
        22
    Kq7jB3UYozSnk9Fp  
       2021-04-30 19:41:53 +08:00
    哈哈哈,这种工具果然是程序员喜欢的。我这种不懂代码的设计师一而再再而三被 Framer 的顺滑效果惊艳到并吸引到安装学习并启用过好几次了。
    sillydaddy
        23
    sillydaddy  
    OP
       2021-05-01 09:59:48 +08:00
    @Spoter 了解
    @blaaibla 现在 Framer X 应该是不需要编码吧,看介绍说是对设计人员更友好了。我还在了解 Framer 中。
    madlifer
        24
    madlifer  
       2021-05-02 11:47:29 +08:00   1
    UX 的事儿别老往产品这边靠,原型不需要动画,甚至不需要交互

    原型是产品经理用的

    产品经理的岗位职责是做一个好的连接器

    作为一个连接器,更高效的沟通才是追求的目标。画图是必备的嘛?

    并不是,如果你能通过文字甚至口述把事儿讲清楚,根本就不需要画图。

    既然画图只是沟通的一种工具,方便、快捷才是进化方向。

    你要说你是个 UX 设计师,可以,研究交互设计技巧,Sketch 、Figma 、Framer 都可以尝试选出最优。

    你要说你是个产品经理,算了,你的精力应该更聚焦于产品规划和做每一个功能点的抉择

    -----

    在我看来,Axure 以外,唯一一个进化方向还在正轨的产品原型工具是墨刀

    为什么这样说,因为让我坚守 Axure 的理由只有一个,就是社区强大的组件库。

    我需要快速画出原型,不想去纠结什么交互设计,直接拖,对,就是一把拖。

    墨刀现在就在建立社区资源库,同时在开发导入 Axure 的功能,直接把 Axure 的社区组件占为己有

    一个随时随地可以打开,支持团队协作的原型工具,这才是产品真正想要的东西。

    -----

    To 同行:

    奉上最近参悟到的一句产品经理应恪守的信条:


    做规划胸怀宇宙,做选择如履薄冰
    sillydaddy
        25
    sillydaddy  
    OP
       2021-05-03 12:02:21 +08:00
    @blaaibla #22
    又进一步了解了 FramerX 。感觉它里面的概念有点多,而且比较复杂,太偏向 Code 而不是设计了。

    @madlifer #24
    你说的对,是这个道理。不过一般来说,后面的原型工具都是在前面工具基础上进化的,它们不止可以做动效,产品初始阶段的线框图、基本交互都是能做的,而且一点也不复杂。
    xingzhi
        26
    xingzhi  
       2021-05-05 03:16:32 +08:00
    @madlifer
    说得很对,产品经理的职责更在于做功能的规划和抉择,而工具甚至于原型图也只是术而已。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2576 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 11:20 PVG 19:20 LAX 04:20 JFK 07:20
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86