Javascript 你会使用什么样的用户界面？

我正在尝试做一个用户界面，可以做到以下几点，但我不知道如何做到这一点

问题是，我想让人们把账户余额的一个百分比分配给不同的东西，比如说你想把40%分配给房租，30%分配给储蓄，30%分配给其他所有东西

你将如何让人们在这两者之间选择百分比？ 问题是总百分比必须始终为100%，因此假设您想在页面上放置3个文本框，每个文本框指示比率

如果用户选择80%作为第一个，20%作为下一个，那么最后一个必须保持0，这是一个笨拙的用户界面，考虑到互联网用户对浏览页面的关注度是多么的低，我认为没有人会完全理解和使用它

我一直在考虑像音频均衡器一样的滑块，但即使这样也很难理解

一个饼图可能是个好主意，它可以让你通过点击饼图来改变值，但是在js中很难实现

---

让我知道你的想法

三个互相更新的滑块怎么样

---

或者一个交互式的饼图怎么样？

我投票支持实时更新的滑块；滑块A被抓取，当更改时，会更新滑块B和C。您还可以进行饼图更新，以加强正在发生的事情。

磁盘分区工具解决了我认为相同的问题，它们可视化了可用空间、其中的分区、未分区的空间，你有没有用过分区魔法之类的东西

但是-是的，用JavaScript创建UI很有挑战性，但仍然可行

---

对ux.stackexchange.com来说，这是一个很好的问题。不幸的是，该网站很少处于互动状态。他们只会每隔几个月发布一个产品，然后只发布一两周，但他们在以下位置进行了这样的设置：互动饼图听起来很难编写，从ux的角度来看也很痛苦。除非你有我们可以查到的例子，否则我不建议你这样做。但是，将二级视图作为通过滑块自动更新的饼图并不是一个坏主意。这是一个好主意，尽管它与分区之间的区别在于分区之间存在空间关系。在最右边的微小间隙是一个真正的物理鸿沟。百分比没有这样的空间关系。难道账户余额中不能有10%之类的未分配百分比吗？然后一个人仍然需要手动降低一个项目的百分比，直到他能够增加另一个项目的百分比。但是这个屏幕截图没有显示的是，对于一个分区管理器，这些间隙在逻辑上可以存在于每个分区之间。对于百分比控制，多个间隙没有意义。这就是我的意思，这是一个好主意开始；这是一个棘手的场景：对于分区管理器来说，将拉伸操作硬停在另一个分区的边缘是有意义的。对于百分比控制，它不会。当您在其中一个边框上单击并拖动，且边框之间没有间隙时，用户会期望什么？它会从一个值中减去以增加到另一个值，还是从间隙中减去，然后移动中间值使其保持不变？您如何处理一个项目的0%，并且仍然允许调整大小？我明白了。空的空间会像气泡一样互相粘着。当为一个项目增加分区时，如果有可用的空空间，所有其他分区可能会朝该空空间的方向弹出，而该分区仍然可用，一旦不可用，则停止。对于零分区，上面和下面可能有标记。但是，是的，我同意，我提出的并不是百分比任务的最终用户界面。这需要做一些工作。