保存是后臺(tái)產(chǎn)品中很通用的操作,它司空見慣到我們誤認(rèn)為保存一般不會(huì)有體驗(yàn)上的問題。但筆者在工作中觀察發(fā)現(xiàn):即使再通用,用戶也可能會(huì)在保存功能上遇到疑惑,甚至忽略了它的存在。這是為什么呢?保存功能應(yīng)該如何設(shè)計(jì)呢?我想分享一下我的一些經(jīng)驗(yàn)。
圍繞保存,我覺得從機(jī)制上來分解,可以從手動(dòng)保存、自動(dòng)保存、保存兜底三個(gè)維度遞進(jìn)思考,最終找到合理的保存設(shè)計(jì)方式。
一、手動(dòng)保存
手動(dòng)保存,即依賴用戶做額外操作才可以達(dá)成的保存行為。此類保存,我們往往依賴保存按鈕。我會(huì)從保存按鈕的位置個(gè)數(shù),對(duì)齊方式和視覺樣式來討論如何設(shè)計(jì)它。
1. 保存按鈕的位置
保存按鈕一般位于內(nèi)容的下方,因?yàn)橛脩粢话銖捻撁嫔系较麓_認(rèn)完內(nèi)容后再進(jìn)行保存。這也符合用戶瀏覽路徑方便點(diǎn)擊。 如果配置內(nèi)容較短,保存按鈕一般緊跟內(nèi)容,用戶更容易發(fā)現(xiàn)。
但如果表單內(nèi)容過長(zhǎng)且超過一屏,保存按鈕還緊跟內(nèi)容的話它就不會(huì)在第一屏展現(xiàn)。此時(shí)用戶必須把頁面滑動(dòng)到底部才可發(fā)現(xiàn)按鈕。首次填寫表單的話還好,但日后只對(duì)某幾項(xiàng)內(nèi)容修改的時(shí)候,用戶就很容易忽略按鈕。而且即使用戶意識(shí)到保存按鈕在底部,操作效率也是比較低的。
為了解決這個(gè)問題,很多產(chǎn)品通過在頁面底部提供一條不可滾動(dòng)的固定區(qū)域展示按鈕。這樣用戶一眼便可以看到核心按鈕,并且日常修改內(nèi)容的時(shí)候不需要滑動(dòng)頁面,可以直接保存。
不過剛才也說了這種樣式一般用于內(nèi)容較多并超過一屏的情況。如果內(nèi)容很少,用戶的視線就需要越過一大片空白區(qū)域?qū)ふ野粹o。下圖模擬了這樣的情況,你是否也覺得按鈕不容易被發(fā)現(xiàn),操作距離也比較遠(yuǎn)呢?
總結(jié)一下:較短的表單建議考慮保存按鈕緊跟內(nèi)容;內(nèi)容超過一屏的長(zhǎng)表單建議用固定懸浮在底部的保存按鈕。
2. ?按鈕的個(gè)數(shù)
其實(shí)在一個(gè)表單內(nèi)不一定只有一個(gè)保存的。如果表單內(nèi)容可以被清晰劃分成多個(gè)功能模塊,且各模塊可以獨(dú)立生效,那么表單可以為每一個(gè)模塊單獨(dú)配置一個(gè)保存按鈕。這樣,用戶在編輯某個(gè)模塊的時(shí)候,由于內(nèi)容較少就可以清晰看到保存按鈕了。這種設(shè)計(jì)是通過拆分一個(gè)保存為多個(gè)保存,解決頁面較長(zhǎng)單個(gè)保存不易發(fā)現(xiàn)的問題。
不過,如果劃分得太細(xì)碎會(huì)造成操作成本太高的問題,同時(shí)太多的按鈕也會(huì)讓頁面的視覺層級(jí)混亂,沖淡用戶對(duì)表單內(nèi)容的關(guān)注。使用的時(shí)候請(qǐng)注意這點(diǎn)。
3. 保存按鈕的對(duì)齊方式
按鈕該左對(duì)齊,右對(duì)齊還是居中,你有糾結(jié)過嗎?
Luke Wroblewski 于2010年在《Web表單設(shè)計(jì)作者》一書中提到,他為評(píng)估哪一種主動(dòng)作和次動(dòng)作的排布方式效果最好,對(duì)23個(gè)人做了6種方案的用戶測(cè)試(如下圖)。測(cè)試結(jié)果是:方案A、B、C、D、F的成功率100%,且完成時(shí)間和滿意度都較好。
Luke 本人更傾向按鈕左對(duì)齊的方案,理由是用戶視覺的動(dòng)線最短。有很多網(wǎng)站在保存的設(shè)計(jì)上參考了這一習(xí)慣,這里就不多言了。
不過也有很多產(chǎn)品參考的是右對(duì)齊,比如 Zendesk。
右對(duì)齊我認(rèn)為有幾點(diǎn)合理性。
與彈窗邏輯保持一致
表單里很多彈窗的操作區(qū)域都是右下角,體現(xiàn)了一種從左上到右下的視覺動(dòng)線。如果這種動(dòng)線對(duì)于用戶成立,那么表單的操作按鈕在右下角也挺合理。從統(tǒng)一性的角度,按鈕在右下角與彈窗保持了一致,用戶的心智也比較統(tǒng)一。
個(gè)別表單的特殊性
很多表單功能是更適合右對(duì)齊的。比如價(jià)格結(jié)算這樣的功能表格,核心數(shù)據(jù)(比如價(jià)格)都在右側(cè)展示,用戶的主要視線會(huì)從右側(cè)從上往下滑動(dòng)。最終的提交按鈕也就自然地選擇在了右側(cè)。因此這些產(chǎn)品會(huì)考慮整體都將按鈕放于右側(cè)確保統(tǒng)一性。
居中對(duì)齊也是一種對(duì)齊方式,有些產(chǎn)品出于中立的角度選擇了居中的對(duì)齊方式,保持了視覺的對(duì)稱性,常用于彈窗。
關(guān)于對(duì)齊方式總結(jié)一下:設(shè)計(jì)師在設(shè)計(jì)對(duì)齊方式可以自行選擇對(duì)齊方式。但在設(shè)計(jì)中要盡可能考慮一致性和易用性。盡可能地用最少的對(duì)齊方式滿足用戶體驗(yàn)和業(yè)務(wù)需求。
4. 按鈕的顏色大小
保存按鈕被忽視的另一個(gè)原因就是不夠明顯。除了明顯的顏色以外,按鈕也需要在規(guī)范允許的情況下盡可能的大而不易被遮擋。在客戶反饋中,我們遇到過按鈕固定底部且右對(duì)齊的時(shí)候,用戶的輸入法功能條擋住了按鈕的情況(就像下圖)。我們無法控制桌面系統(tǒng)插件的一些遮擋,所以我們需要將按鈕設(shè)計(jì)得盡可能明顯。
二、自動(dòng)保存
自動(dòng)保存,即用戶完成內(nèi)容的輸入即完成了對(duì)內(nèi)容的保存。當(dāng)然,不是所有情況都適合使用自動(dòng)保存。接下來我會(huì)討論兩種適用的場(chǎng)景。
1. 控件自動(dòng)保存
有些控件獨(dú)立性較高,直接操作就生效可以提高操作效率而不會(huì)產(chǎn)生疑惑。實(shí)際上用得最多的就是開關(guān)(switch)。
不管是無線端還是 PC端,越來越多的功能開啟或權(quán)限控制都在使用開關(guān)組件。當(dāng)點(diǎn)擊開啟或關(guān)閉時(shí),控件立即生效,并通過成功提示做出反饋。這也越來越成為趨勢(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ì)于開關(guān)組件非常重要。
有時(shí)候開關(guān)開啟后是需要配置內(nèi)容的,這里的處理方式就會(huì)發(fā)生一些變化,一般有兩種情況(如下圖):
一種情況是開關(guān)附屬的配置內(nèi)容有默認(rèn)值,這樣開關(guān)和配置內(nèi)容就可以分開保存。開關(guān)自動(dòng)保存保留,編輯內(nèi)容需要通過保存按鈕自行保存。
另一種情況就是開關(guān)和配置內(nèi)容必須強(qiáng)綁定不能單獨(dú)生效的時(shí)候,比如配置內(nèi)容無默認(rèn)值,一定需要用戶輸入后才可正常開啟。此時(shí)開關(guān)需要和內(nèi)容一同編輯保存,即開關(guān)無法自動(dòng)保存,需要一并編輯完后點(diǎn)擊保存。
總結(jié)一下,開關(guān)在獨(dú)立無需編輯的情況下適合自動(dòng)保存。其他情況則得考慮編輯保存了。
2. 全局自動(dòng)保存
既然個(gè)別控件可以直接保存生效,那我們是不是可以想象一下全局自動(dòng)保存呢?也就是說表單的每一內(nèi)容都可以自動(dòng)保存,這樣可行嗎?
筆者認(rèn)為在絕大數(shù)情況下這種全局自動(dòng)保存會(huì)有以下體驗(yàn)上的風(fēng)險(xiǎn):
- 有些組件很難定義何時(shí)自動(dòng)保存。比如輸入框里,在編輯一大堆文字的時(shí)候,系統(tǒng)很難判斷何時(shí)用戶輸入完畢并做保存。
- 每做一步就生效,沒有容錯(cuò)余地。假想每一個(gè)操作執(zhí)行就立即生效不能反悔,那你真的不敢輕易操作表單了。一個(gè)閃失造成錯(cuò)誤或資損那可不是開玩笑的。
- 頻繁保存造成的干擾和系統(tǒng)壓力。每一步操作就保存生效必然帶來每一步保存成功的提醒。頻繁的成功提示真的會(huì)很干擾用戶的沉浸操作。另外如此頻繁的調(diào)用保存接口對(duì)于系統(tǒng)也有一定壓力。
說完風(fēng)險(xiǎn),我也總結(jié)了一些適合全局保存的情況:當(dāng)你編輯的內(nèi)容存在草稿狀態(tài),系統(tǒng)就可以隨時(shí)或過一段時(shí)間后自動(dòng)為你保存草稿,但你還是需要有最終提交或生效的按鈕做最后的確認(rèn)。像周報(bào)系統(tǒng)這種需要大量編輯的功能就適合自動(dòng)保存。
三、保存兜底
當(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è)到用戶有編輯行為但沒有保存就想跳轉(zhuǎn)或離開的時(shí)候彈出一個(gè)溫馨的提示:您是否需要保存呢?用戶可以選擇去保存或者直接離開。用兜底的辦法就可以基本杜絕。
總結(jié)
一個(gè)復(fù)雜表單的保存只有需要考慮到手動(dòng)保存、自動(dòng)保存和保存兜底三個(gè)機(jī)制,才可以讓功能體驗(yàn)變得易用又統(tǒng)一。希望這份總結(jié)能幫助到你。
補(bǔ)充一點(diǎn),很多表單組件可能你會(huì)覺得微不足道,但簡(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掉它。
原文作者:夏晨曦
全站高品質(zhì)素材免費(fèi)下載!