缺少反饋是一個(gè)比較普遍存在的問(wèn)題。在現(xiàn)實(shí)世界中，我們希望服務(wù)場(chǎng)所的服務(wù)人員們都會(huì)熱情的對(duì)我們說(shuō)“謝謝，希望您有美好的一天”之類熱情的話，對(duì)你視而不見是令人不愉快的。在我們?yōu)g覽網(wǎng)頁(yè)時(shí)，有多少次點(diǎn)擊操作完成后，會(huì)經(jīng)歷一段漫長(zhǎng)的時(shí)間等待，才會(huì)提交我們填寫的內(nèi)容。點(diǎn)擊的按鈕或者是其他什么控件，它需要與服務(wù)器有交互，那么這時(shí)等待是在所難免的，此時(shí)我們?cè)谠O(shè)計(jì)反饋的時(shí)候就要慎重，不要讓用戶過(guò)久等待。一些好的做法：Twitter的點(diǎn)贊無(wú)論網(wǎng)絡(luò)強(qiáng)弱，都會(huì)顯示成功，其他的就交給系統(tǒng)吧；微信發(fā)布朋友圈，無(wú)論是否有網(wǎng)絡(luò)都會(huì)顯示成功發(fā)布，其他的也交給了系統(tǒng)處理；注冊(cè)/登錄時(shí)通過(guò)按鈕的不同狀態(tài)來(lái)反饋當(dāng)前狀態(tài)等等。

我們?cè)倥e一個(gè)切換提示的例子。

當(dāng)光標(biāo)移動(dòng)到屏幕上的某個(gè)內(nèi)容時(shí)，即光標(biāo)懸停時(shí)，快速響應(yīng)是相當(dāng)重要的。通常，光標(biāo)會(huì)由箭頭變成伸出一個(gè)手指的小手形狀，你便可以點(diǎn)擊內(nèi)容了。切換提示一般也會(huì)伴隨著文字或圖標(biāo)樣式的變化，例如顏色等，當(dāng)鼠標(biāo)經(jīng)過(guò)它們時(shí)就會(huì)立即觸發(fā)這個(gè)樣式的變化，這樣才可以有效的提示用戶這是可以點(diǎn)擊的。

網(wǎng)絡(luò)環(huán)境中的響應(yīng)機(jī)制

這類反饋有很多，加載中圖標(biāo)、iOS的菊花轉(zhuǎn)、谷歌的旋轉(zhuǎn)圖標(biāo)、蘋果的旋轉(zhuǎn)沙漏光標(biāo)。蘋果的這個(gè)光標(biāo)因?yàn)楣δ茼憫?yīng)比較慢，獲得了很多不太友善的綽號(hào)。由此我們可以看出，提供反饋通?？梢跃徑鈫?wèn)題，卻不能解決問(wèn)題。所以，在處理長(zhǎng)時(shí)間的操作時(shí)，最好能使用可以顯示進(jìn)度的圖形。

除了基本的屏幕信息，比如“你的文件已經(jīng)成功下載”，以及各種各樣的動(dòng)畫，我們還可以用各種各樣的設(shè)計(jì)模式來(lái)完成不同的任務(wù)。下面是一些比較常用的方式；

• 亮度調(diào)節(jié)：調(diào)亮特定的區(qū)域以表明其處于活動(dòng)狀態(tài)。比如，微信在收付款時(shí)，頁(yè)面被自動(dòng)的調(diào)亮，這樣做既可以告知用戶正在進(jìn)行的操作，也可以避免由于屏幕過(guò)暗不方便掃描二維碼。
• 聲音：不同的操作關(guān)聯(lián)不同的聲音，我們最熟悉的就是手機(jī)收到郵件或短信時(shí)所發(fā)出的不同提示音。淘寶2017版本已經(jīng)把聲音的提示加入了APP中，但是，有一個(gè)問(wèn)題值得思考，就是當(dāng)用戶不知道當(dāng)前音量的大小時(shí)會(huì)被這個(gè)提示音嚇一跳，應(yīng)該考慮結(jié)合手機(jī)將音量控制在不高的范圍。

說(shuō)起來(lái)目前有上千種處理響應(yīng)的技術(shù)，有些好，有些壞。但是無(wú)論你決定采用哪種響應(yīng)機(jī)制，只要用戶可以看到、聽到或感受到，并且理解了這些響應(yīng)的意思，那就是良好的可用性。

我們要保證系統(tǒng)的響應(yīng)性，就要確保我們的系統(tǒng)/產(chǎn)品：1.點(diǎn)擊按鈕時(shí)，要能看到按鈕的反應(yīng)；2.指針懸停在一個(gè)鏈接或者其他可交互組件上時(shí)，要改變形狀來(lái)表明可以點(diǎn)擊的內(nèi)容；3.一些簡(jiǎn)單的任務(wù)，如下載文件或點(diǎn)擊完成付款流程。在這個(gè)過(guò)程中網(wǎng)站要對(duì)操作有回應(yīng)；4.所有需要很長(zhǎng)時(shí)間處理的流程，像下載文件，要提供持續(xù)的反饋來(lái)顯示流程的進(jìn)度；5.得到的反饋要及時(shí)。

產(chǎn)品要符合人體工程學(xué)

用戶可以輕松地查看、點(diǎn)擊、彎曲或者翻轉(zhuǎn)

人體工程學(xué)是研究如何設(shè)計(jì)出符合人們生理和心理能力的設(shè)備的科學(xué)。我們對(duì)人體工程學(xué)的理解大都停留在辦公環(huán)境人體工程學(xué)，比如辦公椅調(diào)整、桌子高度、電腦屏幕位置等等。但是人體工程學(xué)不僅適用于電腦屏幕外圍的各種情況，也適用于發(fā)生在屏幕上的各種事情，在移動(dòng)端亦是如此。

這里先介紹一下12條基本的人體工程學(xué)原則：

• 以正常的姿勢(shì)工作；
• 減少過(guò)度的壓力；
• 確保所有的東西都可以輕松獲得；
• 在合適的高度工作；
• 減少過(guò)度的動(dòng)作；
• 盡量減小疲勞和靜載荷；
• 盡量減少壓力點(diǎn)；
• 提供間隙；
• 移動(dòng)、運(yùn)動(dòng)和伸展；
• 保持舒適的環(huán)境；
• 提高清晰度，讓人理解；
• 改善工作流程。

從可用性的角度來(lái)說(shuō)，這些人體工程學(xué)原則之所以重要，是因?yàn)楸M管它們是根據(jù)實(shí)物世界中的作用效應(yīng)總結(jié)出來(lái)的，但對(duì)屏幕產(chǎn)品的設(shè)計(jì)也有深遠(yuǎn)的影響。例如：光標(biāo)可以充當(dāng)我們的電子手指，和真實(shí)的手指一樣，它也有能做和不能做的動(dòng)作。此外，隨著觸摸屏的出現(xiàn)，我們的手指通常就是光標(biāo)，突然之間，我們發(fā)現(xiàn)自己得同時(shí)應(yīng)付線上的和線下的人體工程學(xué)問(wèn)題。

說(shuō)到人體工程學(xué)在屏幕設(shè)備上的應(yīng)用，不得不提到費(fèi)茨定律，定律的內(nèi)容就不多說(shuō)了，費(fèi)茨定律在設(shè)計(jì)中的作用：

1. 按鈕等可點(diǎn)擊對(duì)象需要合理的大小，例如iOS規(guī)范中的44*44px規(guī)則。
2. 屏幕的邊和角的位置適合放菜單欄和按鈕這樣的元素。
3. 出現(xiàn)在用戶正在操作的對(duì)象旁邊的控制菜單或工具欄可以被打開的更快，例如點(diǎn)擊鼠標(biāo)右鍵出現(xiàn)在旁邊的菜單。

大目標(biāo)比小目標(biāo)更容易捕捉和使

我們現(xiàn)在的網(wǎng)站出現(xiàn)了很多下拉菜單，它們都會(huì)觸發(fā)二級(jí)菜單，顯示在自己的側(cè)面。這種下拉菜單要注意的事情是：

確保點(diǎn)擊區(qū)域比鏈接中的文字區(qū)域大。因?yàn)楦?更容易點(diǎn)擊。

確保給用戶足夠的時(shí)間將光標(biāo)移動(dòng)到相應(yīng)的位置。具體做法：1.光標(biāo)在鏈接上面懸停約0.5秒后，再觸發(fā)擴(kuò)展菜單。2.動(dòng)畫菜單被觸發(fā)后，就應(yīng)該盡快顯示菜單項(xiàng)，如果可能的話，顯示所用的時(shí)間應(yīng)少于0.1秒。3.用戶將光標(biāo)從菜單上移開后，要等待0.5秒再關(guān)閉菜單。這樣，用戶就不必嚴(yán)格地將光標(biāo)固定在菜單的活動(dòng)區(qū)域中，而可以在操作時(shí)更隨意地移動(dòng)光標(biāo)，也可以選擇比較近的操作路徑。

過(guò)延遲下拉菜單/彈出菜單的收起時(shí)間，用戶可以將光標(biāo)直接移到對(duì)角線處的菜單項(xiàng)上，而不會(huì)觸發(fā)其他菜單項(xiàng)或者錯(cuò)過(guò)他們想要點(diǎn)擊的菜單項(xiàng)

屏幕人體工程學(xué)方面的一個(gè)重要發(fā)現(xiàn)就是，如何最好地創(chuàng)建長(zhǎng)鏈接列表?？捎眯詫＜已鸥鞑肌つ釥柹↗akob Nielsen）提到過(guò)“F模式”。當(dāng)你觀察一幅眼睛跟蹤地圖時(shí)，會(huì)發(fā)現(xiàn)有一種F形模式。眼睛跟蹤地圖通常叫做熱點(diǎn)圖，哪里被看得越多，哪里就會(huì)越紅。

這個(gè)熱點(diǎn)圖清晰地顯示了人們的眼睛是如何瀏覽鏈接頁(yè)面的。創(chuàng)建列表或標(biāo)題時(shí)，要確保將最重要的詞匯放在前面

這就是說(shuō)，在準(zhǔn)備列表的時(shí)候（尤其是鏈接列表），你要確保最重要的詞匯放在鏈接的開頭而不是后面。這也適用于具備機(jī)器可讀性的標(biāo)題，即那些會(huì)在搜索結(jié)果列表中呈現(xiàn)特定網(wǎng)頁(yè)名稱的標(biāo)題。所以，要認(rèn)真地看待那些沒(méi)有以最重要的詞匯開頭的列表、菜單或者鏈接等。

另外一個(gè)基本的人體工程學(xué)原則 就是提供間隙，它意味著，要確保兩輛購(gòu)物車可以同時(shí)通過(guò)超市的過(guò)道，按鈕大得可以讓人舒服地點(diǎn)擊。

我們?cè)趧?chuàng)建網(wǎng)站或應(yīng)用的時(shí)候，需要給頁(yè)面中各個(gè)元素之間保留足夠的間隙，這樣才能保證用戶的使用不會(huì)有任何干擾。亞馬遜的網(wǎng)站中會(huì)存在一些彈出框，它們能夠正常的運(yùn)行，在下圖中，彈窗中的各個(gè)元素（文本、按鈕等）之間保持各自的間隙，層次清晰。

我們要確保產(chǎn)品/系統(tǒng)遵循人體工程學(xué)的原則，就要保證：

1. 按鈕要足夠大，可以方便的通過(guò)鼠標(biāo)或者手指點(diǎn)擊；
2. 網(wǎng)站中的下拉菜單等其他可交互控件要能被鼠標(biāo)輕易的捕獲（移動(dòng)設(shè)備上這些控件要能被手指輕松的捕獲）；
3. 頁(yè)面中的所有元素之間要保持一定的間隙，不能相互影響；
4. 我們的頁(yè)面要讓用戶輕松的知道要做什么；
5. 產(chǎn)品/系統(tǒng)中不能存在不符合邏輯的任務(wù)或工作流程，我們的產(chǎn)品/系統(tǒng)要易用。

產(chǎn)品便捷性

所有的東西需要時(shí)都有

對(duì)于便捷性的定義，很簡(jiǎn)單：1.讓人感到舒適自在。2.觸手可及。數(shù)字產(chǎn)品的便捷性提現(xiàn)在使用這個(gè)產(chǎn)品的過(guò)程中，讓用戶感到舒適自在，使用我們的產(chǎn)品能夠輕松的解決他們想問(wèn)題。而且，應(yīng)該是觸手可及的，比如我們餓了，拿起手機(jī)找到美團(tuán)外賣或者百度外賣就能 解決我們的問(wèn)題。

讓人感到舒適自在

在這里，我們來(lái)看一下計(jì)算機(jī)的多模式輸入和輸出，計(jì)算機(jī)的多模式輸入包括鍵盤、鼠標(biāo)和語(yǔ)音，多模式輸出包括聲音、視頻等。多模式的體驗(yàn)是指，在一個(gè)任務(wù)執(zhí)行過(guò)程中進(jìn)行接口的切換，可以分為三大類：

1. 在同一個(gè)接口內(nèi)從一個(gè)任務(wù)切換到另一個(gè)任務(wù)：表示我可以停留在同一個(gè)瀏覽器窗口，切換不同的任務(wù)。
2. 在相關(guān)的接口進(jìn)行切換：表示任務(wù)可以從電腦屏幕移動(dòng)到智能手機(jī)上，任務(wù)還將繼續(xù)。
3. 在不相關(guān)的接口內(nèi)進(jìn)行切換：表示可以從電腦屏幕移動(dòng)到打印機(jī)輸出。

這三種情況下的體驗(yàn)可以做到很好。不好的體驗(yàn)我們要避免，例如：一個(gè)網(wǎng)站有兩個(gè)相互依賴的表單，但必須要分別單獨(dú)填寫，這就會(huì)給用戶帶來(lái)很差的體驗(yàn)了。用戶更加期待的是無(wú)縫的體驗(yàn)。讓人們盡可能以最少的干擾、最快的途徑、最少的異常來(lái)完成他們的工作。

從可用性的角度看，便捷性問(wèn)題與一個(gè)經(jīng)典的問(wèn)題密切相關(guān)：只有當(dāng)手機(jī)沒(méi)電的時(shí)候，你才會(huì)意識(shí)到公共場(chǎng)所的電源插座少得可憐；只有下雨的時(shí)候，你才會(huì)關(guān)注雨傘放在哪里。進(jìn)入不熟悉的地域時(shí)，我們會(huì)自主的尋找舒適的區(qū)域。這是因?yàn)?，符合我們個(gè)人日常習(xí)慣的事物就可以提供這種舒適感。事物提供了舒適感，我們就認(rèn)為它們是便捷的。所以，我們的產(chǎn)品/系統(tǒng)要為用戶提供習(xí)慣性的舒適感，讓用戶在使用我們的產(chǎn)品時(shí)找到熟悉的舒適感，這會(huì)讓我們的產(chǎn)品加分不少。

觸手可及

在這個(gè)方面，我們講究的是“只需一次點(diǎn)擊即可完成”。如果你在修理汽車，最好把所有工具以及修理所需的任何配件都放在手邊。如果你在做飯，那么在開始之前你可能會(huì)買來(lái)所有的食材并把他們備好。如果你要在亞馬遜上瀏覽一個(gè)主題，那么你應(yīng)該收集所有需要的鏈接，并在十幾個(gè)瀏覽器窗口中打開它們？當(dāng)然不！

你期望亞馬遜去做這項(xiàng)艱難的工作，為你尋找并提供有效的鏈接。在亞馬遜的結(jié)賬頁(yè)面，所有鏈接和其他必要信息會(huì)放在同一個(gè)地方，所有的產(chǎn)品信息會(huì)在另一個(gè)地方。亞馬遜已經(jīng)為你安排好了一切。將不同的信息都做好了分組。

我們確保產(chǎn)品/系統(tǒng)的便捷性，就要保證：1.將相關(guān)內(nèi)容進(jìn)行分組，使其更容易查找。2.如果擁有多模式體驗(yàn)，要確保不同的進(jìn)程不會(huì)互相干擾。3.要提供有用的內(nèi)容。4.消除強(qiáng)制用戶多次輸入相同信息的區(qū)域。5.為用戶提供方便。

產(chǎn)品的簡(jiǎn)單易用性

幫助人們避免操作錯(cuò)誤或損壞產(chǎn)品

提示

指出人們可能不小心忘記了執(zhí)行什么操作，比如在關(guān)閉文檔之前保存文檔，或者在郵件中忘記粘貼附件。

文明的toast提示

我們一般會(huì)看到兩種類型的系統(tǒng)提示。一種是比較標(biāo)準(zhǔn)的提示信息“是否要對(duì)更改的內(nèi)容進(jìn)行保存？”這樣的提示信息一般是為了提醒用戶，這種提示信息用戶是不太會(huì)反感的。另一種系統(tǒng)提示卻會(huì)對(duì)用戶的操作造成一些影響并且強(qiáng)制用戶進(jìn)行許多選擇，如“你確定要?jiǎng)h除該文檔嗎？”“你是否確定？該操作不能恢復(fù)”（廢話，我自己選擇的刪除當(dāng)然是要?jiǎng)h除了?。?。

我們使用提示信息不能打斷事件處理流程的流暢性，不能妨礙人們工作。在現(xiàn)實(shí)世界中，大量不恰當(dāng)?shù)南⒁矔?huì)對(duì)我們?cè)斐筛蓴_。一些語(yǔ)音郵箱系統(tǒng)，總是會(huì)播放一段長(zhǎng)長(zhǎng)的廣告，才列出菜單項(xiàng)，很讓人郁悶。簡(jiǎn)而言之，如果幫助是不必要的，那就不要出現(xiàn)。

警告

在一些內(nèi)容上添加標(biāo)簽或標(biāo)記，來(lái)表示這些是用戶進(jìn)行下一步操作之前必須完成的內(nèi)容，比如輸入密碼或者勾選“我接受條款”復(fù)選框。

警告可以告訴人們有錯(cuò)誤存在（如密碼錯(cuò)誤），狀態(tài)發(fā)生改變（電量不足），或者其他一些需要你注意的內(nèi)容。但是，一些警告僅僅是讓用戶確認(rèn)電腦或者移動(dòng)設(shè)備執(zhí)行了一些操作。比如，往智能手機(jī)里插入耳機(jī)后，或者是拔出耳機(jī)的時(shí)候，屏幕上總是出現(xiàn)這樣的信息：

“手機(jī)插孔中連入一個(gè)設(shè)備”，我當(dāng)然知道我查了耳機(jī)，難道會(huì)有人趁我不注意偷偷插耳機(jī)在我的手機(jī)上？

想要避免人們犯錯(cuò)的出發(fā)點(diǎn)是很好的，但是不斷地陳述顯而易見的事實(shí)，是會(huì)惹惱用戶的。通常在設(shè)計(jì)此類警示信息時(shí)，非常重要的一點(diǎn)事不斷評(píng)價(jià)它們的相關(guān)性，確保它們能起到一些作用。警告通常是為了告知系統(tǒng)的錯(cuò)誤故障等用戶不可預(yù)知的情況，并非是用戶明確的狀態(tài)。

在移動(dòng)設(shè)備中，對(duì)話框作為警告的一種表現(xiàn)形式，在iOS和Google的規(guī)范中都有規(guī)定，對(duì)話框這種中斷用戶流的形式適用于用戶執(zhí)行了將要引起嚴(yán)重錯(cuò)誤的交互行為（在軟件中則是此操作將要引起用戶狀態(tài)變化的情況）或者是系統(tǒng)自身的異常警告等。在用戶掌握范圍內(nèi)的情況，用提示更加妥當(dāng)。

用戶操作在app中的警告提示

強(qiáng)制

消除一些不可用的選項(xiàng)，比如把一些不可用或者在某個(gè)特定時(shí)刻不適用的菜單項(xiàng)變灰色。

在數(shù)字世界中，實(shí)現(xiàn)強(qiáng)制操作的方式，是把那些因?yàn)槟承┰虿豢捎玫牟藛雾?xiàng)置灰。例如，如果已經(jīng)保存了文檔，沒(méi)有再對(duì)文檔修改，那“保存”按鈕就可以一直不可用。我們可以多考慮以點(diǎn)，置灰的菜單項(xiàng)用戶是不知道原因的，為什么之前還能點(diǎn)擊呢？我們希望程序能提供一些解釋，說(shuō)明為什么這時(shí)這個(gè)菜單項(xiàng)不可用。例如，鼠標(biāo)懸停在置灰的菜單項(xiàng)時(shí)，會(huì)有一個(gè)小小的提示說(shuō)明彈出框來(lái)解釋原因。當(dāng)然到目前為止，還沒(méi)有程序是這么做。

“下一步”按鈕置灰

我們要幫助人們做出更好的決策

屏幕信息有時(shí)候會(huì)需要我們做出選擇，甚至那些需要我們點(diǎn)擊“確定”的信息也會(huì)讓我考慮一下自己需要認(rèn)可的內(nèi)容。我們?cè)谠O(shè)計(jì)這寫提示信息時(shí)，需要問(wèn)自己一些問(wèn)題：

1. 用戶知道為什么會(huì)出現(xiàn)這個(gè)信息嗎？
2. 用戶是否足夠理解這個(gè)提示，并且做出正確的決定？
3. 提示中信息是否有用，會(huì)不會(huì)讓用戶困惑？
4. 用戶理解做完決策的后果嗎？

如果所有的答案都是否，那么就得修改提示信息或者考慮更改設(shè)計(jì)，去掉這個(gè)提示信息。

我們要保證產(chǎn)品/系統(tǒng)的簡(jiǎn)單易用，就要確保：

1. 為用戶提供多種響應(yīng)方式，以防萬(wàn)一。
2. 提示信息要清晰簡(jiǎn)潔，易于理解。
3. 準(zhǔn)確區(qū)分提示和警告，不得混淆。
4. 不要妨礙用戶去完成任務(wù)。
5. 為用戶提供認(rèn)知線索，正確引導(dǎo)用戶使用產(chǎn)品。
6. 確保用戶隨時(shí)隨地獲取所需要的信息。

作者：流年，互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)師，4年互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)。

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

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