產品的交互按照這 6 點做才加分

來自專欄 鄭幾塊

交互能夠讓界面看起來生動有趣，但是要格外注意上下文。通過上下文流暢地傳遞給用戶，能夠讓用戶有明顯的預期。解釋界面上的元素，強化元素間的層次結構，並且表現產品邏輯。

如何讓交互的上下文表現的更加流暢呢？《Functional Animation In UX Design: What Makes a Good Transition?》（原文需要翻牆）一文中提到了 6 點，包括：有響應、能聯想、自然的、有目的、速度適中、簡單清晰。

1. 有響應

簡單的說，用戶操作併產生預期的反饋。作者在文中提到了「開關燈」這個場景，在現實生活中也會有類似的場景存在，比如點擊應用圖標打開應用、點擊用戶頭像進入用戶個人主頁等等。我認為，有響應是大多數應用遵循的基本的邏輯和原則。

2. 能聯想

這一點和「有響應」有密切的關係，也就是符合用戶預期。將新展開的界面和構成界面的元素或動作連接起來。組合聯繫背後的邏輯是幫助用戶理解剛剛在可視布局裡發生的變化，是什麼觸發了這個變化。也就是用戶在前一界面發生點擊行為，與後一界面之間的關聯性。這個概率的大小，決定了用戶預期的強弱。

3. 自然的

在現實世界，物體迅速加速或減速是受重力和摩擦力的影響，比較明顯的幾種類型有：

ease 規定慢速開始，然後變快，然後慢速結束的過渡效果；

ease-in 規定以慢速開始的過渡效果；

ease-out 規定以慢速結束的過渡效果；

ease-in-out 規定以慢速開始和結束的過渡效果

類似的，在好的用戶界面設計中，開始或停止也不是突然出現的，而是遵循一定的加速或者減速的表現。

4. 有目的

在恰當的時機指引到恰當的方向和目的，交互的作用彰顯的淋漓盡致。不論是文欄位落，還是靜態圖片，都能通過交互完成，一個好的交互能夠引導用戶進行下一步的操作。

第一次進入的用戶或許不能預知即將發生的交互行為，但合理的動畫能幫助用戶保持良好的方向感，不會覺得內容突然發生了變化而感覺不適。當把窗口縮小時，Mac OS 使用了一個動畫，這個動畫連接了前一個狀態和下一個狀態。

另一個好的示例是一個繼承性過渡，當用戶在列表中或卡片元素中選擇某一項，放大看它的細節內容，這個交互需要用戶保持上下文一致。（請對照原文閱讀體會）

5. 速度適中

原文中表達的是「快速」，我認為應該是速度適中，或者應該是找到一個平衡點，讓用戶既不會等太久，且符合用戶心理感知。在用戶操作後，能夠讓用戶理解和判斷即將發生的事情。

6. 簡單清晰

過渡應該避免一次做太多事情，因為當眾多的條目需要在不同的方向或路徑運動時，它們會讓人困惑。

過渡應該清晰、簡單而連貫。記住，在交互設計時，少即是多。所以我們應該只關注希望用戶做的主要事情，完成我們為用戶設置的主要任務就可以了。

在結論部分，作者也介紹說明了：

交互不是隨機的，每一個交互背後都有目的。交互需要讓你的用戶不錯過最重要的信息，無論你的 App 是好玩有趣的，還是嚴肅直接的，使用合理的交互能幫你給用戶提供一個清晰快速連貫的體驗。用心設計，注意每一個細節都是成功的關鍵，讓人機交互更容易使用。

原創：鄭幾塊

未經許可，不得轉載