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

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

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

直觉上存在多个上游的 button 1 不应当改变显隐而应当改变可用不可用。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/774726

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX