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

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

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

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

關(guān)鍵要點(diǎn)

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

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

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

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

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

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

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

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

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

1. 編輯單元格

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

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

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

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

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

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

2. 編輯整行

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

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

行內(nèi)編輯

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

編輯圖標(biāo)以及一行以啟用編輯模式

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

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

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

3. 編輯多行

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

切換到編輯模式的方法：

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

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

• 點(diǎn)擊「保存」圖標(biāo)/按鈕。點(diǎn)擊「取消」按鈕可放棄更改。

建議在保存更改之前與用戶確認(rèn)，因?yàn)榇瞬僮鲗⒏采w所選行中的原始值。

選擇表中的多行

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

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

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

優(yōu)點(diǎn)：

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

缺陷：

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

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

替代方案

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

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

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

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

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

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

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

2. 使用單獨(dú)的頁面

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

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

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

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

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

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

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

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

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

應(yīng)遵循哪種方法？

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

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

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

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

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

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

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

作者：陳子木