2020-8-28 周周
在經典的尼爾森十大啟發式當中，「系統狀態可見性」可以說是如今交互設計領域當中，最為重要的原則之一。通過向用戶展現當前的狀態，讓用戶擁有對系統的控制權，建立用戶對于產品的信任感，這也是這種設計啟發式的最重要的價值之一。
但是，想要做到可靠、易用，系統狀態展現的技巧是很講究的。這里梳理了4種最為常用的方法，結合了不少實用的案例，希望對你有所幫助。
1.1、讓用戶知道自己在哪
沒有人會喜歡迷失方向，但是無論在現實生活還是在數字領域當中，這種情況都會發生。讓用戶知道他們在哪里是創建良好導航體驗的關鍵。應用程序和網站都應該凸顯當前的導航選項，幫助用戶了解他們所在的位置。
Google 的底部導航欄設計
1.2、要經過多少步驟來完成任務
這也是一個非常基本的操作，通過展現步驟數量，幫助用戶來預估完成這個過程所需要的時間。
Selecto 的調查問卷的設計
數字界面畢竟不是現實世界中的真實硬件機構，用戶更多只能借助交互過程中的即時視覺反饋來確定是否完成了操作，即時的視覺反饋因此顯得非常重要。
即時的視覺反饋讓用戶的操作得到了視覺上的「認可」，從而強化了「確信感」，這樣一來一回的確認可以避免錯誤的發生，比如可以避免用戶因為「感覺沒有點下去」而反復點擊。
這種視覺反饋的設計，最常見的范例就是點擊按鈕按下的微交互動畫，它告知用戶「系統已經捕捉到點擊交互了」。
AliAli 所設計的懸停點擊動畫
但是在某些狀況下，按鈕的視覺反饋還有很多不同的呈現形式，有更多可見的、可理解的新形態，可以在原有的基礎上探索更多可能性，比如下面的
2.1、單擊點贊按鈕
Spread love, not viruses ，作者 Charles Patterson
2.2、開關按鈕
這個開關按鈕不僅有點擊動效，而且色彩和按鈕標識也隨之改變，更為清晰地表明狀態，甚至兼顧到了視覺障礙用戶
Switcher XLIV , 作者 Oleg Frolov
2.3、書簽按鈕微交互
這個書簽按鈕通過色彩的虛實變化來呈現書簽已添加的狀態，頗為巧妙。
Bookmark interaction，作者 Oleg Frolov
2.4、添加購物車微交互
在這種情況下，視覺反饋非常明確且優雅地告知用戶已經添加到購物車里面了。
咖啡下單動效，作者 Nhat M. Tran
3.1、系統正忙于什么事情
當系統正在加載，正在執行，正在運行的過程中，通過動效來告知用戶系統并沒有停止，而是正忙于執行某件事情，是避免用戶誤解的手段。在用戶等待的過程中，通常會實用無限加載的動效（一般使用在低于10s的操作中）：
對于超過10s的更長的執行過程，無限加載的動效會顯得令人沮喪，這個時候實用進度條會更好：
這些視覺反饋很大程度上降低了系統給人的不確定感。
對于移動端應用，在初始加載階段所使用的啟動動畫界面，是否精心設計，決定了用戶對于整個產品的第一印象，優秀的初始加載動畫能夠將用戶的注意力從焦躁的等待中解放出來。
Logo 閃屏 ，作者 Gleb Kuznetsov?
3.2、內容加載
當用戶需要時間來加載內容的時候，建議使用一種特殊的的容器「界面骨架」來展現。這種臨時的內容容器不僅能夠幫助用戶快速地了解界面的整體框架，構建用戶預期，并且能夠在后臺快速地加載數據，漸進式地幫用戶獲得信息。
內容加載，作者 Ginny Wood
這種設計方式對于移動端和桌面端的設計同樣適用：
界面骨架加載動效，作者 Shane Doyle
4.1、通知和提醒
有效的通知和提醒，能幫用戶意識到有新的事情正在發生。在多數時候，我們建議設計師使用微妙的動畫來進行通知，因為動畫效果會自然地吸引用戶的注意力，人類的雙眼的動態視覺其實是非常強的。
Aleksei Kipin 設計的通知動效
4.2、提示用戶采取行動
在很多情況下，用戶界面中會有很多地方會需要用戶提交信息。比如，需要用戶提交表單，或者用戶創建了一個密碼，但是在復雜度上不足需要修正，或者填寫郵箱來訂閱信息的時候，郵箱格式出錯，等等。使用適當的視覺反饋總能夠更加有效地將問題告知用戶。
內聯郵箱驗證機制，作者 Derek Reynolds
讓用戶有掌控感，就是為用戶創造更好的體驗。在很多設計方案中，視覺反饋會因為種種原因被削弱了，甚至被忽略了。但是當用戶在和 UI 進行交互的時候，期望度和可動性其實是高度依賴于這些動效和微交互，而這正是設計師需要設計出優秀視覺反饋效果的原因所在。
文章來源：優設 作者：Nick Babich
藍藍設計( m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務