編者按：對于B端設計師而言，處理復雜的表單界面設計恐怕是必修課。來自 Saadia Minhas 的這篇文章深入探討了又一個經典的問題，復雜表單當中的內聯表單的設計技巧。文章并不僅僅分析了內聯表單中的諸多設計陷阱，優缺點，并且給出了一些問題的常見解決方案，最后還梳理了設計策略上，需要注意的要點。

表格在數字產品中扮演著至關重要的角色，尤其是在需要以結構化方式呈現大量數據時。設計一個無縫的用戶體驗，尤其是在處理復雜數據的表格時，是一項重要的設計挑戰。

設計表格時，需要仔細考慮各種UI元素和行為，包括分頁、編輯功能、過濾選項、排序機制、列可見性切換以及搜索功能。

本文將探討表格內聯編輯的優點和缺點，分析其適用的場景，并探索替代方案。這些見解將幫助你設計更具吸引力的用戶交互，并提升表格對象的整體可用性。

關鍵要點

• 內聯編輯提供了一種快速簡便的方式來編輯表格內容，尤其適用于數據量有限的情況。
• 如果你希望用戶輕松理解信息，同時避免在同一視圖中混淆編輯操作，建議提供單獨的視圖（如對話框或頁面）來編輯表格。
• 為表格編輯提供單獨的視圖（對話框或頁面），可以防止在編輯重要數據時出現不必要的錯誤。

表格內聯編輯

表格的內聯編輯功能，讓用戶可用直接在同一頁面上編輯表格數據，而無需跳轉到單獨的視圖（如彈出窗口、對話框或頁面）。用戶只需點擊表格單元格或行，修改數據并立即保存。

內聯編輯是一種快速且高效的表格編輯方式。通過減少修改數據所需的點擊次數，提升了易用性和用戶的工作效率。同時，由于無需打開單獨的視圖，用戶不會丟失上下文信息。

表格中的內聯編輯

文章接下來主要探討以下3方面的內容：

• 在表格中提供內聯編輯的方法
• 內聯編輯的優缺點
• 應遵循哪種方法？

在表格中實現內聯編輯的方法

有很多方法可以在表格對象中，提供內聯編輯功能。

1. 編輯單元格

用戶可以逐個編輯每個單元格的內容。有兩種方法可以切換到編輯模式。

• (i) 點擊單元格：點擊單元格后，內容將進入編輯模式，用戶可以更新內容。

• (ii) 點擊「編輯」圖標：點擊單元格上的「編輯」圖標后，內容將變為可編輯狀態。用戶可以通過輸入文本來更改內容。編輯圖標可以始終顯示，也可以僅在懸停時顯示。

使用編輯圖標來內聯編輯單元格中的內容

• (i) 點擊單元格外部：點擊單元格外部將保存修改的內容。
• (ii) 點擊「保存」圖標：點擊明確的「保存」圖標將保存修改的內容。點擊「取消」按鈕可放棄更改。

用戶可以保存或者取消修改的內容

2. 編輯整行

用戶可以對整行進行內聯編輯。切換到編輯模式的方法有兩種：

• (i) 點擊行上的任意位置：點擊行上的任意位置后，該行所有單元格的內容將進入編輯模式，用戶可以更新每個單元格的內容。

行內編輯

• (ii) 點擊「編輯」圖標：點擊行旁邊的「編輯」圖標后，該行將進入編輯模式，所有單元格都可編輯。用戶可以在每個單元格中輸入文本來更改內容。

編輯圖標以及一行以啟用編輯模式

保存編輯內容的方法有兩種：

• (i) 點擊行的外部：點擊整行外部空白將關閉編輯模式，并保存修改的內容。
• (ii) 點擊「保存」圖標/按鈕：點擊行旁邊的「保存」圖標/按鈕將保存所有單元格的修改內容。點擊「取消」按鈕可放棄更改。

用戶可以保存或者取消修改的內容

3. 編輯多行

用戶可以對表格中的多行進行內聯編輯。然而，這種方法僅適用于不需要唯一值的列/字段。所有選定單元格的內容將被修改，并且相同的內容將應用于所有選定單元格。

切換到編輯模式的方法：

• 使用復選框選擇所需的行/記錄。
• 點擊「編輯」按鈕，選定的行將進入可編輯模式。
• 點擊一個單元格并更新內容。所選行中同一列/字段的所有單元格內容都將更新。

保存所有行編輯內容的方法：

• 點擊「保存」圖標/按鈕。點擊「取消」按鈕可放棄更改。

建議在保存更改之前與用戶確認，因為此操作將覆蓋所選行中的原始值。

選擇表中的多行

在表格的多行中進行內聯編輯

表格內聯編輯的優缺點

下表總結了表格內聯編輯的優缺點。

優點：

• 快捷操作方式：用戶點擊單元格即可直接編輯，無需額外操作步驟
• UI連貫性優勢：編輯過程始終在同一頁面完成，有效地保持了語境
• 學習成本低：獨立的界面需要用戶重新適應新的交互，增加認知負擔
• 不容易感到迷失：脫離原始界面，會導致上下文環境變化與數據關聯性斷裂
• 保持交互連續性：返回原界面時需重新定位信息焦點，影響操作節奏

缺陷：

• 適用場景限制：僅適用于數據結構簡單、字段量少的表單和場景
• 復雜數據處理麻煩：存在橫向滾動瀏覽需求時，行內編輯易特別造成信息斷層
• 數據驗證局限：復雜數據結構的輸入校驗機制實現起來難度較高
• 批量編輯適配度低：獨立頁面更適合批量操作，行內編輯僅支持有限的批量處理
• 內容容量限制：字段字符數需要嚴格控制，長文本編輯場景適用性較差

從上述討論中可以清楚地看出，你需要考慮其他選項來為表格提供用戶友好的編輯功能。以下是幾種替代方法。

替代方案

1. 使用對話框/彈出窗口

對于復雜表格數據的編輯，可以選擇一行并以編輯模式打開它。此編輯模式將顯示在當前視圖頂部打開的對話框或彈出窗口中。

用戶可以執行所需的編輯，然后點擊「保存」按鈕保存更改。對話框/彈出窗口關閉后，用戶會返回原始視圖，表格將顯示更新后的數據。

編輯單元格內容的編輯圖標

點擊編輯圖標，可以在對話框中打開單元格的內容。用戶可以編輯和保存內容。

編輯圖標以可在編輯模式下打開行中的內容。

單擊「編輯」圖標將在對話框中打開行的內容

2. 使用單獨的頁面

另一種方法是編輯一行或多行中的大量字段。用戶可以選擇一行或多行，然后點擊「編輯」圖標。所選行的可編輯模式將在新頁面上打開。用戶可以進行更改并保存，然后返回上一個視圖。表格中的數據將更新。

點擊編輯圖標，會在單獨的頁面中打開該行的內容。用戶可以修改并保存內容。

選擇多行編輯內容

單擊「編輯」按鈕將在對話框中打開所選行的內容

3. 使用內聯編輯和對話框/頁面的組合

你可以將內聯編輯與對話框或頁面視圖結合使用。允許對有限數量的字段進行內聯編輯，并提供對話框和頁面視圖，來編輯內容復雜的單行或者多行的內容。

表格將提供內聯編輯選項，并在頂部提供一個編輯按鈕，以便在單獨的對話框或頁面中打開選定的行或多行。

單元格的內聯編輯

選擇該行以在對話框中以可編輯模式打開內容。

應遵循哪種方法？

有幾個優先事項可以幫助你確定需求，從而提供合適的解決方案。以下是選擇優先事項的建議：

• 優先級選項 1：你希望用戶輕松理解信息，同時避免在同一視圖中編輯時造成混亂。
  優先級選項 2：你希望在編輯重要數據時避免不必要的錯誤。
  優先級選項 3：你希望用戶能夠快速、輕松地編輯信息。

但是設計時的具體解決方案，取決于你的優先級選擇。

選項 1 和 2 需要你創建單獨的視圖進行編輯。

• 為了提供無縫體驗，確保應用的UI（包括帶有表格的原始頁面和對話框或新頁面）保持一致。這樣，用戶不會感到失去上下文語境。
• 提供用于編輯復雜數據的對話框或頁面有助于確保簡單性。用戶的任務將被分成多個部分，而不是將所有功能都放在一個地方，從而帶來更輕松、更易理解的體驗。

優先級選項 3 需要提供內聯編輯支持。

• 為了提供易于編輯的體驗，需要仔細定義用戶在編輯過程中執行的操作。
• 提供明確的編輯選項來啟用編輯模式，用戶可以編輯數據，并提供明確的按鈕來保存更改的內容。
• 如果出現錯誤，系統應顯示清晰的消息，解釋錯誤的緣由并提供解決方法。