保存是后臺(tái)產(chǎn)品中很通用的操作，它司空見(jiàn)慣到我們誤認(rèn)為保存一般不會(huì)有體驗(yàn)上的問(wèn)題。但筆者在工作中觀察發(fā)現(xiàn)：即使再通用，用戶也可能會(huì)在保存功能上遇到疑惑，甚至忽略了它的存在。這是為什么呢？保存功能應(yīng)該如何設(shè)計(jì)呢？我想分享一下我的一些經(jīng)驗(yàn)。

圍繞保存，我覺(jué)得從機(jī)制來(lái)分解，可以從手動(dòng)保存、自動(dòng)保存、保存兜底三個(gè)維度遞進(jìn)思考，最終找到合理的保存設(shè)計(jì)方式。

1. 手動(dòng)保存

手動(dòng)保存，即依賴(lài)用戶做額外操作才可以達(dá)成的保存行為。此類(lèi)保存，我們往往依賴(lài)保存按鈕。我會(huì)從保存按鈕的位置個(gè)數(shù)，對(duì)齊方式和視覺(jué)樣式來(lái)討論如何設(shè)計(jì)它。

1.1 保存按鈕的位置

保存按鈕一般位于內(nèi)容的下方，因?yàn)橛脩粢话銖捻?yè)面上到下確認(rèn)完內(nèi)容后再進(jìn)行保存。這也符合用戶瀏覽路徑方便點(diǎn)擊。 如果配置內(nèi)容較短，保存按鈕一般緊跟內(nèi)容，用戶更容易發(fā)現(xiàn)。

但如果表單內(nèi)容過(guò)長(zhǎng)且超過(guò)一屏，保存按鈕還緊跟內(nèi)容的話就它不會(huì)在第一屏展現(xiàn)，此時(shí)用戶必須把頁(yè)面滑動(dòng)到底部才可發(fā)現(xiàn)按鈕。首次填寫(xiě)表單的話還好，但日后只對(duì)某幾項(xiàng)內(nèi)容修改的時(shí)候，用戶就很容易忽略按鈕。而且即使用戶意識(shí)到保存按鈕在底部，操作效率也是比較低的。

為了解決這個(gè)問(wèn)題，很多產(chǎn)品通過(guò)在頁(yè)面底部提供一條不可滾動(dòng)的固定區(qū)域展示按鈕。這樣用戶一眼便可以看到核心按鈕，并且日常修改內(nèi)容的時(shí)候不需要滑動(dòng)頁(yè)面，可以直接保存。

不過(guò)剛才也說(shuō)了這種樣式一般用于內(nèi)容較多并超過(guò)一屏的情況，如果內(nèi)容很少，用戶的視線就需要越過(guò)一大片空白區(qū)域?qū)ふ野粹o。下圖模擬了這樣的情況，你是否也覺(jué)得按鈕不容易被發(fā)現(xiàn)，操作距離也比較遠(yuǎn)呢？

總結(jié)一下：較短的表單建議考慮保存按鈕緊跟內(nèi)容；內(nèi)容超過(guò)一屏的長(zhǎng)表單建議用固定懸浮在底部的保存按鈕。

1.2 按鈕的個(gè)數(shù)

其實(shí)在一個(gè)表單內(nèi)不一定只有一個(gè)保存的。如果表單內(nèi)容可以被清晰劃分成多個(gè)功能模塊，且各模塊可以獨(dú)立生效，那么表單可以為每一個(gè)模塊單獨(dú)配置一個(gè)保存按鈕。這樣，用戶在編輯某個(gè)模塊的時(shí)候，由于內(nèi)容較少就可以清晰看到保存按鈕了。這種設(shè)計(jì)是通過(guò)拆分一個(gè)保存為多個(gè)保存，解決頁(yè)面較長(zhǎng)單個(gè)保存不易發(fā)現(xiàn)的問(wèn)題。

不過(guò)，如果劃分得太細(xì)碎會(huì)造成操作成本太高的問(wèn)題，同時(shí)太多的按鈕也會(huì)讓頁(yè)面的視覺(jué)層級(jí)混亂，沖淡用戶對(duì)表單內(nèi)容的關(guān)注。使用的時(shí)候請(qǐng)注意這點(diǎn)。

1.3 保存按鈕的對(duì)齊方式

按鈕該左對(duì)齊，右對(duì)齊還是居中，你有糾結(jié)過(guò)嗎？

Luke Wroblewski于2010年在《Web表單設(shè)計(jì)作者》一書(shū)中提到，他為評(píng)估哪一種主動(dòng)作和次動(dòng)作的排布方式效果最好，對(duì)23個(gè)人做了6種方案的用戶測(cè)試（如下圖）。

測(cè)試結(jié)果是：方案A、B、C、D、F的成功率100%，且完成時(shí)間和滿意度都較好。

Luke本人更傾向按鈕左對(duì)齊的方案，理由是用戶視覺(jué)的動(dòng)線最短。有很多網(wǎng)站在保存的設(shè)計(jì)上參考了這一習(xí)慣，這里就不多言了。

不過(guò)也有很多產(chǎn)品參考的是右對(duì)齊，比如：Zendesk。

右對(duì)齊我認(rèn)為有幾點(diǎn)合理性：

（1）與彈窗邏輯保持一致

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

（2）個(gè)別表單的特殊性

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

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

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

1.4 按鈕的顏色大小

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

2. 自動(dòng)保存

自動(dòng)保存，即用戶完成內(nèi)容的輸入即完成了對(duì)內(nèi)容的保存。當(dāng)然，不是所有情況都適合使用自動(dòng)保存。

接下來(lái)我會(huì)討論兩種適用的場(chǎng)景：

2.1 控件自動(dòng)保存

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

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

如果一個(gè)狀態(tài)控件需要保存才可以確認(rèn)的話，那操作之后保存之前的時(shí)間段用戶會(huì)被未保存的狀態(tài)所迷惑，甚至?xí)它c(diǎn)擊保存（如下圖），所以自動(dòng)保存對(duì)于開(kāi)關(guān)組件非常重要。

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

• 一種情況是開(kāi)關(guān)附屬的配置內(nèi)容有默認(rèn)值，這樣開(kāi)關(guān)和配置內(nèi)容就可以分開(kāi)保存。開(kāi)關(guān)自動(dòng)保存保留，編輯內(nèi)容需要通過(guò)保存按鈕自行保存。
• 另一種情況就是開(kāi)關(guān)和配置內(nèi)容必須強(qiáng)綁定不能單獨(dú)生效的時(shí)候，比如配置內(nèi)容無(wú)默認(rèn)值，一定需要用戶輸入后才可正常開(kāi)啟。此時(shí)開(kāi)關(guān)需要和內(nèi)容一同編輯保存，即開(kāi)關(guān)無(wú)法自動(dòng)保存，需要一并編輯完后點(diǎn)擊保存。

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

2.2 全局自動(dòng)保存

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

筆者認(rèn)為在絕大數(shù)情況下這種全局自動(dòng)保存會(huì)有以下體驗(yàn)上的風(fēng)險(xiǎn)：

1. 有些組件很難定義何時(shí)自動(dòng)保存。比如：輸入框里，在編輯一大堆文字的時(shí)候，系統(tǒng)很難判斷何時(shí)用戶輸入完畢并做保存。
2. 每做一步就生效，沒(méi)有容錯(cuò)余地。假想每一個(gè)操作執(zhí)行就立即生效不能反悔，那你真的不敢輕易操作表單了。一個(gè)閃失造成錯(cuò)誤或資損那可不是開(kāi)玩笑的。
3. 頻繁保存造成的干擾和系統(tǒng)壓力。每一步操作就保存生效必然帶來(lái)每一步保存成功的提醒，頻繁的成功提示真的會(huì)很干擾用戶的沉浸操作。另外，如此頻繁的調(diào)用保存接口對(duì)于系統(tǒng)也有一定壓力。

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

3. 保存兜底

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

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

總結(jié)

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

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

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

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