Jquery UX-如何以及在何处放置大型窗体上的“保存”按钮

我有一个页面，它在左侧使用jQuery选项卡

大约有8个选项卡，每个选项卡内有表单，每个选项卡内的每个表单上有大约10-20个项目

显示“保存”按钮或每个选项卡上的表单项目正在保存的某些标识的最佳方式是什么

---

保存按钮需要保存所有选项卡上的所有字段，但不确定在屏幕上显示此字段的最佳方式，以获得最佳用户体验

如果您有一个包含多个项目的选项卡，您可能需要在顶部和底部放置一个保存按钮

此外，我认为让这些保存按钮中的任何一个保存多个选项卡都不是一个好主意。 如果我在4个不同的选项卡中进行更改，然后在第5个选项卡上单击“保存”，并且出现验证错误，则您将遇到“镍币和一角硬币”的情况-用户将必须单击所有选项卡才能找到它们

更好的方法是让每个选项卡都包含自己的表单，这样可以方便地显示该选项卡的验证消息

---

从用户的角度考虑这一点，难道你不讨厌做一大堆更改，结果只显示六条错误消息，然后必须点击每个选项卡来修复它们吗？

我同意尼克的观点。与其使用一系列带有单个保存按钮的选项卡，不如使用向导样式的布局，而不在每个步骤进行验证。每一步都有一个“后退”和“下一步”按钮，并且每次单独为该步骤单击“下一步”时都会进行验证。最后一步是“保存”按钮，而不是“下一步”按钮。此外，在“后退”和“下一步”按钮之间有一个进度条，显示用户在流程中的位置

---

我已经构建了这样的UI，我发现它们在很多用例中都能很好地工作。

我同意@Nick；如果隐藏的选项卡上存在验证错误，那么用户返回每个选项卡以更正错误将是一件乏味的事情。我会推荐一个向导式的表单；允许用户在进入下一个“选项卡”之前保存在每个“选项卡”上输入的数据。