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

你们用的原型工具,是怎样做到页面内部的不同显示效果切换的呢?

  •  
  •   sillydaddy · 2021-05-03 11:54:42 +08:00 · 1856 次点击
    这是一个创建于 1306 天前的主题,其中的信息可能已经有所发展或是发生改变。
    某个页面,里面有 N 个 checkbox,这些 checkbox 分别控制页面内的不同元素的显隐。
    比如,
    checkbox 1 控制 input 1 和 input 2 的显隐;
    checkbox 2 控制 input 3 和 input 4 和 input 5 和 button 1 的显隐;
    checkbox 3 控制 input 6 的显隐;
    checkbox 4 控制 input 7 和 input 8 的显隐;

    一般的原型工具,都是通过页面的不同状态,然后在点击某个 checkbox 时,切换到对应的状态,以此来实现页面内不同显示状态的切换。但对于这个需求,这种状态切换的方法就不太好实现了——因为组合的状态太多了,例如对上面这个例子,4 个 checkbox 各自选中与不选中,组合形成的状态有 2^4=16 种,这意味着要画 16 个页面状态,相互间跳转。

    感觉这种需求应该不算很特别吧,那么各个原型工具是怎样处理这种情况的呢?
    我了解到 Framer X 里面,并没有简单易用的方式来处理。要实现的话,需要用到里面的 Overrides 概念,可能还要写些代码,不是很易用。
    之前了解的 Axure 和墨刀,似乎也是我说的通过状态跳转来实现的。


    引申:帖子 ( /t/773541 ) 里面提到的对原型工具的抽象,还是很有必要的。作出的抽象不同,原型工具的能力就不同。对于这个例子来说,checkbox 的触发,修改的是特定 input 和 button 的属性值,切换的是这些元素的状态,但不影响其他的元素状态。抽象一下就是,动作触发可以只影响页面局部元素的状态,而不是整个页面的状态。所以如果原型工具里面只提供整体状态切换的话,就会遇到问题。
    4 条回复    2021-05-07 09:47:15 +08:00
    sillydaddy
        1
    sillydaddy  
    OP
       2021-05-03 13:19:00 +08:00
    了解到 Flinto 可以用打组的方式实现:将页面中的几个元素打组,然后这几个元素就可以脱离页面中的其他元素,设置独立的状态变化。不过,一个元素好像只能打在一个组里面。
    Junn
        2
    Junn  
       2021-05-04 10:42:02 +08:00
    你大概没用过 Axure 吧!
    Axure 里可以单独控制元素、组件、分组的显隐的。
    也可以通过设置变量,实现一些复杂一点包含逻辑判断的显示隐藏。
    sillydaddy
        3
    sillydaddy  
    OP
       2021-05-04 14:39:53 +08:00
    @Junn 嗯。用的都不多。
    no1xsyzy
        4
    no1xsyzy  
       2021-05-07 09:47:15 +08:00
    我觉得只需要全选和全不选两个,如有必要,用文字描述相关性
    不过这里类似「贫血模型」与「充血模型」,我觉得原型没必要搞那么复杂,更重要的是不要:
    1. 在原型阶段写逻辑;
    2. 不要指望设计人员能写对复杂逻辑;
    3. 不要让前端自己猜或者自己从原型工具中挖掘逻辑,如果你的设计不能让前端一眼看过去就知道按钮相关逻辑是什么样的,那显然用户会更加迷惑,那这个设计就是个垃圾设计。

    最贵的原型工具是纸笔,虽然不一定最好——它的大部分(你无需支付的)成本潜藏在世界这个巨大的模拟器中,人类目前根本造不出来这样一个模拟器。

    直觉上存在多个上游的 button 1 不应当改变显隐而应当改变可用不可用。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4122 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 05:30 · PVG 13:30 · LAX 21:30 · JFK 00:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.