文總結(jié)了幾點刪除按鈕的設(shè)計技巧，以防止誤操作導(dǎo)致防止數(shù)據(jù)丟失。enjoy~

數(shù)據(jù)丟失是用戶使用計算機時可能遇到的最大意外之一。他們不僅丟失了數(shù)據(jù)，還損失了投入的時間和金錢。對于企業(yè)而言，這可能意味著數(shù)百個工時和數(shù)千美元的損失。不要讓這種情況發(fā)生在您的用戶身上。

一項研究發(fā)現(xiàn)，人為錯誤導(dǎo)致30％的數(shù)據(jù)丟失。這意味著良好的用戶體驗設(shè)計可以防止這些意外發(fā)生。以下是一些預(yù)防技巧。

在確認操作中使用紅色警告信號

當用戶按下刪除按鈕時，請勿立即執(zhí)行，有可能是用戶誤點擊了按鈕，您需提示用戶通過確認頁面確認操作。

刪除按鈕請勿使用如藍色等常規(guī)顏色。應(yīng)使用紅色按鈕警示用戶即將觸發(fā)危險性操作。紅色具有很強的視覺警告提示，因其更容易吸引用戶注意力。

避免正常操作使用紅色按鈕，否則即為告警用戶。保留紅色按鈕僅用作刪除操作。冷色更適合使用于正常的行為呼叫按鈕，因為其警示作用較弱。

雖然紅色按鈕能警示大部分用戶，但是有些用戶也許會忽視。額外的視覺提示，能增加警示作用。尤其是有助于無法區(qū)分色差的色盲和弱視用戶群。

若要加強警告信號，請在確認屏幕上添加代表刪除操作的圖標。例如，用戶熟悉的刪除圖標是垃圾桶。當用戶看到圖標時，他們會將當前操作與刪除相關(guān)聯(lián)。

您可以通過在屏幕頂部添加紅色條塊來加強警告信號。現(xiàn)在此確認頁面，用戶可以看到三個紅色警告信號，表明他們即將進行危險性操作。這使用戶更加注意他們的行為和處境，以防按錯按鈕。

UX效益-打破慣性點擊

用戶使用移動應(yīng)用程序次數(shù)越多，他們越有可能養(yǎng)成慣性點擊的習慣。無意識慣性點擊可以更快更容易完成任務(wù)，但也更容易點擊刪除按鈕。

紅色通常與警告和危險有聯(lián)系，并且具有負面含義。我們常看到許多用紅色來傳達警告和危險的標志。在設(shè)計中，紅色按鈕會引起用戶對傷害或損失的恐懼，以防止錯誤。這是人類為了生存而躲避危險的本能。

研究表明，紅色物體會引起注意并促進一致的運動反應(yīng)。這意味著，當用戶看到紅色的刪除按鈕時，他們可能會更快、更準確地做出響應(yīng)。用戶對任務(wù)的關(guān)注越多，他們就會越好的執(zhí)行該任務(wù)。

簡潔的會話窗文本

紅色警告信號可以防止刪除意外，但這不是您須考慮的唯一事項。您還需編寫簡潔的會話文本來確保其易于瀏覽。

在會話窗標題的末尾添加問號來替代詢問用戶“您確定要刪除嗎？”。例如，標題為“刪除帳戶？”，用較少的字詞表示“您確定要刪除帳戶嗎？”。

不僅如此，不要使用冗長的句子來解釋點擊確認后會發(fā)生什么。以列表格式列出他們將丟失的內(nèi)容，來替代通知用戶，“如果您刪除了自己的帳戶，則會永久丟失您的個人資料，消息和照片”，以便用戶快速閱覽。

在該示例中，會話窗文本通過從25個單詞減少到僅9個單詞來簡化。使得會話窗更容易瀏覽和理解。

UX效益–更好地理解后果

確認對話框的目的是描述刪除操作的后果。用戶需要閱讀并理解這些，否則他們可能會得到意想不到的結(jié)果。但在冗長的對話中很難做到這一點。

大多數(shù)用戶會跳過冗長的文字，因為閱讀需要花費時間和精力。簡潔的文本可以防止用戶跳過，幫助用戶更快地執(zhí)行任務(wù)，減少錯誤，并記住更多信息。使用簡潔的對話文本，用戶可以更好地理解其行為的后果并做出正確的決定。

居中對齊布局

簡潔的文本使其容易瀏覽。但你還可以通過中心對齊布局使整個會話窗更進一步加強其易讀性。中心對齊布局將圖標與會話窗文本對齊，以便用戶可以同時瀏覽。還使會話窗對稱，圖標更加突出，以防遮擋。

UX效益-減少視覺工作

當使用視覺追蹤圖觀察一個左對齊布局和冗長的文本會話窗時，會發(fā)現(xiàn)有更多的注視點和更長的瀏覽路徑。

簡潔的會話窗和中心對齊的布局只需較少的視覺工作。通過更少的注視點和更短的瀏覽路徑，用戶可以更快地瀏覽屏幕以做出明智的決定。

• 中心對齊布局可讓用戶以單一視覺方向（從上到下）瀏覽屏幕。他們不需要移動眼睛來瀏覽屏幕，只需要專注于屏幕的中心。
• 使用左對齊布局，用戶需要以兩個可視方向（從左到右和從右到左）瀏覽屏幕。用戶的眼睛需要做更多的工作，從而降低任務(wù)的完成效率。

確認保留紅色警告信號

• 當刪除按鈕出現(xiàn)在確認頁面上時，您希望用戶全神貫注。
• 相反，當刪除按鈕未出現(xiàn)時，您不希望引起用戶對它的注意。這樣做會使用戶無意點擊時誤點刪除按鈕。

如果刪除按鈕不在確認頁面上時，請勿使用紅色警告信號。例如，設(shè)置頁面可以有一個“刪除帳戶”按鈕，但它不需像呼叫行為按鈕來吸引不必要的注意。

最好將刪除按鈕設(shè)為僅帶有紅色文本標簽的獨立按鈕。使用過多的紅色會導(dǎo)致用戶將其誤認為是屏幕上的主呼叫行為按鈕。

UX效益-增加意外發(fā)生難度

用戶在確認頁面上的停留時間越多，他們按錯按鈕的可能性就越大。通過思考其他屏幕上的刪除按鈕，用戶不太可能意外進入確認頁面。這使得他們遠離危險。

在其他頁面上將刪除按鈕與正常按鈕分開也可以使用戶遠離危險。用戶不會將其誤認為是正常的號召性按鈕并想按下它。

提供撤消按鈕

即使有確認屏幕，意外仍然可能發(fā)生。有些用戶仍然可能誤讀了會話窗或按錯了按鈕。在確認屏幕之后，向用戶提供撤消按鈕，其中包含告知用戶已執(zhí)行操作的消息。

將撤消按鈕和完成消息放在屏幕底部的通知橫幅中。您可以根據(jù)刪錯操作的上下文使撤消按鈕成為臨時或持久的。

臨時撤消將使橫幅在幾秒鐘后自動消失。持久撤消顯示橫幅，直到用戶通過按“關(guān)閉”按鈕關(guān)閉橫幅。請注意，持久性撤消的技術(shù)實現(xiàn)比臨時撤消更復(fù)雜。

UX效益-允許用戶從事故中恢復(fù)操作

撤消刪除操作的選項允許用戶從事故中恢復(fù)操作以防止數(shù)據(jù)丟失。數(shù)據(jù)丟失對企業(yè)和人們的生活造成嚴重后果。發(fā)布確認撤消按鈕不僅可以保存用戶的數(shù)據(jù)，還可以保存用戶的工作。

提示用戶點擊確認

如果撤消按鈕不是可選項，則可以提示用戶在文本框中輸入刪除以確認。提示用戶輸入確認使他們意識到刪除行為。雖然容易意外按錯按鈕，但是不可能輸入意外出錯，因為此操作需要很多步驟。

此方法對于用戶經(jīng)常使用刪除操作的效率不高。例如，刪除帖子是社交媒體應(yīng)用上的常見操作。若要求用戶每次通過輸入來確認將大大降低用戶操作效率。僅用于類型罕見的刪除操作。

UX效益-確保用戶確認意識

無意識地按下按鈕比輸入單詞要容易得多。當用戶輸入時，他們必須考慮他們正在輸入的內(nèi)容然后點擊右邊的確認按鈕。與按下按鈕相比，出錯空間更大。這使用戶意識到他們的確認行為，以防止意外按下按鈕。

數(shù)據(jù)丟失意外

當用戶進入確認屏幕時，他們處于意外發(fā)生的邊緣。如果您沒有采取措施防止這種情況發(fā)生，按錯了按鈕可能會損壞數(shù)據(jù)。將這些方法應(yīng)用到您的應(yīng)用中，將避免用戶遇到數(shù)據(jù)丟失意外。

PS：翻譯過程中為適合我們的閱讀習慣以及個人的理解，有對原文進行一定的內(nèi)容簡化和語義修飾，如有不妥歡迎大家根據(jù)官網(wǎng)鏈接進行比對并留言互動。

（本文翻譯已獲得該網(wǎng)站的正式授權(quán)）

原文鏈接：https://uxmovement.com/buttons/how-to-design-destructive-actions-that-prevent-data-loss/

原作者：anthony

譯文地址：https://www.zcool.com.cn/article/ZMTAxNzcwMA==.html

編譯作者：黎沫limo

本文由 @黎沫limo 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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

先，看實現(xiàn)的效果，效果視頻如下：

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

分析

1.當我們把文本域里面的值賦值給 li 的時候，多 添加一個刪除的鏈接

2.需要把所有的鏈接獲取過來，當我們點擊當前鏈接的時候，刪除當前鏈接所在的 li

3.我們只需要在之前寫的那個版面上添加一段刪除元素的代碼就行了

代碼