與彈窗邏輯保持一致

表單里很多彈窗的操作區(qū)域都是右下角，體現(xiàn)了一種從左上到右下的視覺動線。如果這種動線對于用戶成立，那么表單的操作按鈕在右下角也挺合理。從統(tǒng)一性的角度，按鈕在右下角與彈窗保持了一致，用戶的心智也比較統(tǒng)一。

個別表單的特殊性

很多表單功能是更適合右對齊的。比如價格結(jié)算這樣的功能表格，核心數(shù)據(jù)(比如價格)都在右側(cè)展示，用戶的主要視線會從右側(cè)從上往下滑動。最終的提交按鈕也就自然地選擇在了右側(cè)。因此這些產(chǎn)品會考慮整體都將按鈕放于右側(cè)確保統(tǒng)一性。

居中對齊也是一種對齊方式，有些產(chǎn)品出于中立的角度選擇了居中的對齊方式，保持了視覺的對稱性，常用于彈窗。

關(guān)于對齊方式總結(jié)一下：設(shè)計師在設(shè)計對齊方式可以自行選擇對齊方式。但在設(shè)計中要盡可能考慮一致性和易用性。盡可能地用最少的對齊方式滿足用戶體驗和業(yè)務(wù)需求。

4. 按鈕的顏色大小

保存按鈕被忽視的另一個原因就是不夠明顯。除了明顯的顏色以外，按鈕也需要在規(guī)范允許的情況下盡可能的大而不易被遮擋。在客戶反饋中，我們遇到過按鈕固定底部且右對齊的時候，用戶的輸入法功能條擋住了按鈕的情況(就像下圖)。我們無法控制桌面系統(tǒng)插件的一些遮擋，所以我們需要將按鈕設(shè)計得盡可能明顯。

二、自動保存

自動保存，即用戶完成內(nèi)容的輸入即完成了對內(nèi)容的保存。當然，不是所有情況都適合使用自動保存。接下來我會討論兩種適用的場景。

1. 控件自動保存

有些控件獨立性較高，直接操作就生效可以提高操作效率而不會產(chǎn)生疑惑。實際上用得最多的就是開關(guān)(switch)。

不管是無線端還是 PC端，越來越多的功能開啟或權(quán)限控制都在使用開關(guān)組件。當點擊開啟或關(guān)閉時，控件立即生效，并通過成功提示做出反饋。這也越來越成為趨勢。而且如果一個狀態(tài)控件需要保存才可以確認的話，那操作之后保存之前的時候用戶會被未保存的狀態(tài)所迷惑。

如果一個狀態(tài)控件需要保存才可以確認的話，那操作之后保存之前的時間段用戶會被未保存的狀態(tài)所迷惑，甚至會忘了點擊保存(如下圖)。所以自動保存對于開關(guān)組件非常重要。

有時候開關(guān)開啟后是需要配置內(nèi)容的，這里的處理方式就會發(fā)生一些變化，一般有兩種情況(如下圖)：

一種情況是開關(guān)附屬的配置內(nèi)容有默認值，這樣開關(guān)和配置內(nèi)容就可以分開保存。開關(guān)自動保存保留，編輯內(nèi)容需要通過保存按鈕自行保存。

另一種情況就是開關(guān)和配置內(nèi)容必須強綁定不能單獨生效的時候，比如配置內(nèi)容無默認值，一定需要用戶輸入后才可正常開啟。此時開關(guān)需要和內(nèi)容一同編輯保存，即開關(guān)無法自動保存，需要一并編輯完后點擊保存。

總結(jié)一下，開關(guān)在獨立無需編輯的情況下適合自動保存。其他情況則得考慮編輯保存了。

2. 全局自動保存

既然個別控件可以直接保存生效，那我們是不是可以想象一下全局自動保存呢?也就是說表單的每一內(nèi)容都可以自動保存，這樣可行嗎?

筆者認為在絕大數(shù)情況下這種全局自動保存會有以下體驗上的風險：

有些組件很難定義何時自動保存。比如輸入框里，在編輯一大堆文字的時候，系統(tǒng)很難判斷何時用戶輸入完畢并做保存。

每做一步就生效，沒有容錯余地。假想每一個操作執(zhí)行就立即生效不能反悔，那你真的不敢輕易操作表單了。一個閃失造成錯誤或資損那可不是開玩笑的。

頻繁保存造成的干擾和系統(tǒng)壓力。每一步操作就保存生效必然帶來每一步保存成功的提醒。頻繁的成功提示真的會很干擾用戶的沉浸操作。另外如此頻繁的調(diào)用保存接口對于系統(tǒng)也有一定壓力。

說完風險，我也總結(jié)了一些適合全局保存的情況：當你編輯的內(nèi)容存在草稿狀態(tài)，系統(tǒng)就可以隨時或過一段時間后自動為你保存草稿，但你還是需要有最終提交或生效的按鈕做最后的確認。像周報系統(tǒng)這種需要大量編輯的功能就適合自動保存。

三、保存兜底

當了解到了自動保存有自身的局限性后，我們也會發(fā)現(xiàn)大多數(shù)表單內(nèi)容都還是需要手動保存的。既然是手動保存，就很難避免再怎么設(shè)計總有個別用戶還是會忘記保存。所以這時候你就需要一個兜底方案。

這個一勞永逸的辦法就是，當監(jiān)測到用戶有編輯行為但沒有保存就想跳轉(zhuǎn)或離開的時候彈出一個溫馨的提示：您是否需要保存呢?用戶可以選擇去保存或者直接離開。用兜底的辦法就可以基本杜絕。

總結(jié)

一個復雜表單的保存只有需要考慮到手動保存、自動保存和保存兜底三個機制，才可以讓功能體驗變得易用又統(tǒng)一。希望這份總結(jié)能幫助到你。

補充一點，很多表單組件可能你會覺得微不足道，但簡單的組件也會有很多體驗細節(jié)。我們在設(shè)計時需要結(jié)合用戶心智、產(chǎn)品特點、場景、統(tǒng)一性等綜合考慮。也許你會有設(shè)計規(guī)范，但當已有的組件影響到了用戶體驗和業(yè)務(wù)目標時，你要去判斷組件是否不合時宜。當答案是 YES 的時候請不要猶豫，更新?lián)Q掉它。

圖片素材作者：Thunder Rockets