編輯導(dǎo)語：數(shù)據(jù)更新是B端產(chǎn)品的常見功能之一，而數(shù)據(jù)更新功能可以通過編輯功能實現(xiàn)。具體而言，B端產(chǎn)品中的編輯功能有哪些常見形式？本篇文章里，作者就編輯形式的種類、設(shè)計注意事項、如何應(yīng)用等方面做了總結(jié)，一起來看一下。

一、三種編輯形式

一個B端產(chǎn)品的功能無外乎是新增（Create）、讀?。≧etrieve）、更新（Update）、刪除（Delete）。數(shù)據(jù)更新可以通過編輯功能實現(xiàn)，常用于更新表單或列表數(shù)據(jù)，主要有以下三種形式：

1. 內(nèi)聯(lián)式編輯；
2. 彈出式編輯；
3. 跳轉(zhuǎn)頁面編輯。

1. 內(nèi)聯(lián)式編輯

指在原頁面編輯并保存的一種編輯形式。整個過程不會涉及到對話框的彈出和頁面的跳轉(zhuǎn)，用戶清楚地知道編輯的內(nèi)容會顯示在哪里。

這有助于在不離開當前視圖的情況下立即更改內(nèi)容，防止用戶丟失當前視圖上下文的信息，常用于小范圍內(nèi)容更新。

內(nèi)聯(lián)多字段編輯一般有明顯的編輯按鈕，單一字段編輯時可以隱藏編輯按鈕在鼠標懸浮時才出現(xiàn)，甚至沒有編輯按鈕，需要通過鼠標單擊或雙擊進入編輯狀態(tài)。

• 優(yōu)點：簡單、直接，可方便用戶聯(lián)系上下文內(nèi)容。
• 缺點：防錯性較弱。
• 適用場景：常用于單一字段、重要性較弱的編輯。

1）基礎(chǔ)樣式

用戶觸發(fā)某一欄時，該欄即變?yōu)榭删庉嫚顟B(tài)。這時用戶可以任意修改。并且當鼠標點擊到其他欄或者表格以外的地方時，該可編輯欄失焦之后自動保存修改后的內(nèi)容，并變回不可編輯狀態(tài)。

觸發(fā)編輯的條件可以是單擊或雙擊，但是為了使用戶容易發(fā)現(xiàn)，大多數(shù)產(chǎn)品會添加編輯圖標按鈕。

2）帶按鈕樣式

當鼠標懸浮到某一欄上時，出現(xiàn)編輯圖標，點擊圖標出現(xiàn)「保存」 和 「取消」 按鈕。編輯完成后點擊「保存」即完成編輯，否則編輯內(nèi)容不會被保存。

這種形式給用戶適當?shù)目紤]時間，可以防止用戶反悔或錯誤輸入。

3）行編輯/多個字段編輯

與帶按鈕的編輯相似，點擊編輯按鈕時進入編輯狀態(tài)，編輯完畢后可進行「保存」 或者 「取消」操作。

這種方式適合對列表同一行或表單的多個字段進行修改，且編輯字段內(nèi)容較簡單時使用。

2. 彈出式編輯

指需要以彈框為載體進行編輯的形式。如果要編輯的字段較多，可使用這種方法。通常隱藏編輯按鈕在鼠標懸浮時才出現(xiàn)。

彈窗編輯也包括三種形式：模態(tài)彈框形式、非模態(tài)彈框形式、以及模態(tài)抽屜形式。

• 優(yōu)點：可承載較多信息，防錯性較強。
• 缺點：打破了用戶的上下文連貫性，在保存后返回到之前的視圖時，必須再次重新聚焦。
• 適用場景：用于復(fù)雜、較重要信息的編輯。

1）非模態(tài)彈框

此類型的編輯仍停留在原頁面，但是會有彈出框。彈出框不會遮蓋需要更新的字段信息，并且彈出框懸停在編輯位置處。當用戶點擊彈出框以外的區(qū)域時，彈出框可消失。與模態(tài)彈框不同，這種彈出框不會阻斷原頁面和編輯內(nèi)容的關(guān)聯(lián)性。

這種方式適合修改較重要但又不復(fù)雜的信息。

2）模態(tài)彈框

這是常用的交互方式了。當鼠標懸浮要修改的字段時，出現(xiàn)編輯圖標，點擊圖標會彈出可更新的字段內(nèi)容彈框，并且原頁面上會覆蓋灰色透明蒙層，弱化原頁面信息。操作結(jié)束后點擊保存更新信息，否則信息不保存。

這種模式的好處是用戶可以集中注意力在彈窗中內(nèi)容，使用戶謹慎操作，同時又不離開主頁面。

這種方式適合修改重要但不太復(fù)雜的信息。

3）模態(tài)抽屜

此類型與模態(tài)彈框類似，點擊編輯后從左側(cè)劃入模態(tài)抽屜進行交互，用戶可以更加專注于當前操作。

抽屜可以承載更多信息，可執(zhí)行多步驟操作，常用于復(fù)雜的編輯功能。

3. 跳轉(zhuǎn)頁面編輯

顧名思義，指點擊編輯按鈕或圖標后跳轉(zhuǎn)到新頁面。用這種方式編輯記錄時幾乎沒有限制，可以有大量文本內(nèi)容，利用彈出框來設(shè)置字段值，放置驗證消息等等。

常用于列表中，通常有明顯的編輯按鈕（操作欄），也會有鼠標懸浮時才出現(xiàn)的情況。

• 優(yōu)點：由于列表中會存在隱藏列，需要編輯的字段可能沒有顯示，這種形式可以看到之前填寫記錄的全部內(nèi)容。
• 缺點：嚴重破壞了主頁面信息的連貫性。
• 適用場景：編輯列表中的整條記錄。

跳轉(zhuǎn)頁面編輯樣式與內(nèi)聯(lián)編輯、彈窗編輯有明顯的區(qū)別，就不過多贅述了。需要注意的是，跳轉(zhuǎn)頁面后，不是所有信息都是可編輯的，不可編輯的需要置灰處理。

大多數(shù)企業(yè)級產(chǎn)品功能結(jié)構(gòu)復(fù)雜，通常會使用內(nèi)聯(lián)與彈框、跳轉(zhuǎn)頁面相結(jié)合的形式。在這種情況下，允許編輯一些內(nèi)聯(lián)字段，其他字段在單獨的頁面或彈出框中編輯。

二、注意事項

1. 防錯

彈出式編輯的防錯性要優(yōu)于內(nèi)聯(lián)式編輯，使用彈窗意味著有更多的顯示空間，這有助于：

1）顯示幫助文本。

幫助文本可以提高用戶的操作效率，可以是正在編輯的記錄名稱、編輯后帶來的影響以及該如何操作。

2）顯示標題。標題可以提示用戶所編輯的字段內(nèi)容。

3）以更清晰的方式呈現(xiàn)驗證錯誤。

2. 驗證

彈出式編輯的驗證方式與表單相同，這種驗證較常規(guī)，用戶很好理解。

當您為用戶提供內(nèi)聯(lián)式編輯時，報錯會有些許不同，尤其是列表，沒有多余的空間顯示驗證內(nèi)容，可以考慮以下數(shù)據(jù)驗證方法。

1）氣泡提示

最簡單的形式為氣泡提示，幫助用戶識別無效輸入。當用戶輸入無效時會在編輯處附近彈出氣泡顯示幫助提示，解釋錯誤及其解決方法。用戶可以按照給定的信息在單元格中進行有效輸入來消除錯誤。

2）行下方提示

這種形式是在用戶輸入無效信息的行下方顯示錯誤消息。使用此方法需要在表中受影響的行下方留出額外的空間。用戶刪除錯誤并輸入正確內(nèi)容后消失。

3）通知提醒框

這種形式是在表格頂部顯示錯誤消息。當用戶輸入無效信息時，錯誤消息將顯示在頂部。受影響的單元格以紅色顯示，以便用戶可以輕松識別錯誤并進行必要的更正。

4）更改行顏色

還有一種選擇是更改行的背景顏色以指示無效條目。錯誤的詳細信息可以顯示在當前視圖的頂部，當用戶解決錯誤時會隱藏。

3. 模態(tài)

對于是否使用模態(tài)通常會有不同的意見。有的人認為模態(tài)會打破頁面視圖的連貫性。但是如果將主屏幕和模態(tài)對話框構(gòu)建為整個任務(wù)過程的共生部分，則不會感覺中斷。

無論如何界面如何簡單，所有復(fù)雜的操作都必須分解為步驟或模塊。當列表中有一組具有復(fù)雜屬性的對象時，弱化原頁面的內(nèi)容，將編輯圖標按鈕與編輯彈窗理解成一個整體，即是一個功能入口與功能界面的關(guān)系，此時模態(tài)會是最佳呈現(xiàn)方式。

只有當對象很簡單并且所有屬性都顯示在列表中時，才可以使用非模態(tài)形式。因此，是否使用模態(tài)完全取決于對象的屬性間的關(guān)系、產(chǎn)品的結(jié)構(gòu)及用戶的操作習慣。

三、如何選擇

1. 功能是否復(fù)雜

如果功能簡單，盡量使用非模態(tài)的樣式。

• 編輯的字段重要性較低，選擇內(nèi)聯(lián)編輯。
• 編輯的字段重要性較高，選擇非模態(tài)彈出框的形式，方便放置驗證信息。

如果功能復(fù)雜，需要進行多步操作，可以使用模態(tài)形式。

• 編輯內(nèi)容步驟較少時，選擇模態(tài)彈窗。
• 編輯內(nèi)容步驟較多時，選擇模態(tài)抽屜。

2. 是否批量編輯

批量編輯使用模態(tài)的形式。批量編輯對于企業(yè)級產(chǎn)品很重要，這有助于讓用戶多選項目然后執(zhí)行批量操作，在這種情況下非模態(tài)編輯十分有限。

由于編輯的內(nèi)容會更改多條記錄，需要用戶謹慎操作，所以應(yīng)該選擇模態(tài)彈窗或抽屜形式。

3. 是否有隱藏列

若編輯列表的隱藏列內(nèi)容，盡量使用新頁面編輯。

使用內(nèi)聯(lián)式編輯和彈出式編輯，必須保證在列表中能查看到需要編輯的字段。如果產(chǎn)品允許用戶隱藏列，或者只選擇顯示可編輯字段的子集，就必須使用能查看詳細信息的視圖了。

參考文章

• http://www.codemsi.com/pd/249837.html
• https://ux.stackexchange.com/questions/53631/what-is-the-best-ux-to-let-user-perform-crud-operations
• https://uxdworld.com/2020/04/22/inline-editing-and-validation-in-tables/

本文由 @LIZ醬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議