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

表格在數(shù)字產(chǎn)品中扮演著至關(guān)重要的角色，尤其是在需要以結(jié)構(gòu)化方式呈現(xiàn)大量數(shù)據(jù)時。設計一個無縫的用戶體驗，尤其是在處理復雜數(shù)據(jù)的表格時，是一項重要的設計挑戰(zhàn)。

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

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

關(guān)鍵要點

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

表格內(nèi)聯(lián)編輯

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

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

表格中的內(nèi)聯(lián)編輯

文章接下來主要探討以下3方面的內(nèi)容：

• 在表格中提供內(nèi)聯(lián)編輯的方法
• 內(nèi)聯(lián)編輯的優(yōu)缺點
• 應遵循哪種方法？

在表格中實現(xiàn)內(nèi)聯(lián)編輯的方法

有很多方法可以在表格對象中，提供內(nèi)聯(lián)編輯功能。

1. 編輯單元格

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

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

• (ii) 點擊「編輯」圖標：點擊單元格上的「編輯」圖標后，內(nèi)容將變?yōu)榭删庉嫚顟B(tài)。用戶可以通過輸入文本來更改內(nèi)容。編輯圖標可以始終顯示，也可以僅在懸停時顯示。

使用編輯圖標來內(nèi)聯(lián)編輯單元格中的內(nèi)容

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

用戶可以保存或者取消修改的內(nèi)容

2. 編輯整行

用戶可以對整行進行內(nèi)聯(lián)編輯。切換到編輯模式的方法有兩種：

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

行內(nèi)編輯

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

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

保存編輯內(nèi)容的方法有兩種：

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

用戶可以保存或者取消修改的內(nèi)容

3. 編輯多行

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

切換到編輯模式的方法：

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

保存所有行編輯內(nèi)容的方法：

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

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

選擇表中的多行

在表格的多行中進行內(nèi)聯(lián)編輯

表格內(nèi)聯(lián)編輯的優(yōu)缺點

下表總結(jié)了表格內(nèi)聯(lián)編輯的優(yōu)缺點。

優(yōu)點：

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

缺陷：

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

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

替代方案

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

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

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

編輯單元格內(nèi)容的編輯圖標

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

編輯圖標以可在編輯模式下打開行中的內(nèi)容。

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

2. 使用單獨的頁面

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

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

選擇多行編輯內(nèi)容

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

3. 使用內(nèi)聯(lián)編輯和對話框/頁面的組合

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

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

單元格的內(nèi)聯(lián)編輯

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

應遵循哪種方法？

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

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

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

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

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

優(yōu)先級選項 3 需要提供內(nèi)聯(lián)編輯支持。

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

作者：陳子木