UX - 在大型表格上如何以及在何處放置保存按鈕

Question

我有一個使用左側jQuery選項卡的頁面。

大約有8個選項卡，每個選項卡內有表單，每個選項卡內的每個表單上可容納大約10-20個項目。

如何以及什麼是顯示「保存」按鈕或某些標識的最佳方式，以確保每個選項卡上的表單上的項目都正在保存？

保存按鈕需要保存所有選項卡上的所有字段，但不能確定將其顯示在屏幕上的最佳方式，以獲得最佳用戶體驗。

Answer 1

如果您有一個包含很多項目的選項卡，您可能需要在頂部和底部放置一個保存按鈕。

此外，我認爲這些保存按鈕中的任何一個保存多個選項卡是一個壞主意。 如果我在4個不同的選項卡中進行更改，然後在第5個選項卡上單擊保存並出現驗證錯誤，您將遇到鎳和硬幣情況 - 用戶將不得不點擊所有選項卡以查找他們。

更好的方法是讓每個選項卡包含自己的表單，您可以方便地爲該選項卡顯示驗證消息。

從用戶的角度思考這個問題，難道你不想討厭做一堆只能由半打的錯誤消息提供的更改，然後必須單擊每個選項卡才能修復它們？

Answer 2

我同意尼克。而不是一系列帶有單個保存按鈕的選項卡，在每個步驟中使用不需要驗證的嚮導樣式佈局可能會更好。每個步驟都有一個後退和下一個按鈕，每次您單擊下一步時都會進行驗證。最後一步有一個保存按鈕，而不是下一個按鈕。此外，在後退和下一個按鈕之間，您還有一個進度條，顯示用戶在進程中的位置。

我已經構建了這樣的用戶界面，我發現他們很適合很多用例。