一些網(wǎng)站不僅在內(nèi)容，可用性，設(shè)計，功能等方面，讓人耳目一新；交互設(shè)計細節(jié)和動畫更是與眾不同。我們將分享一些模型的經(jīng)驗，分析一下這些簡單的模式為什么效果很好。

當(dāng)我們設(shè)計數(shù)碼產(chǎn)品時，我們一般使用 Photoshop 和 Sketch 此類軟件。大多數(shù)有數(shù)年行業(yè)經(jīng)驗的人顯然明白設(shè)計不僅僅是視覺傳達。盡管如此，有些人還是繼續(xù)做靜態(tài)設(shè)計。Steve Jobs 如此描述設(shè)計：

“It’s not just what it looks like and feels like. Design is how it works.”
“設(shè)計不僅僅是看起來和感受到的樣子。設(shè)計是如何工作。”

我們對于產(chǎn)品的體驗和印象來源于諸多因素的集合，交互扮演一個根基的角色。我們無法想象用戶界面是靜態(tài)設(shè)計，隨后再添加交互魔法。相反，我們需要在早期加入交互特性，把它當(dāng)成天然的組成部分。

讓我們看看一些巧妙的交互，它們是一些微妙的動畫，優(yōu)雅地改善了用戶體驗。

動畫滾動

超鏈接總是褒貶不一，當(dāng)點擊一個鏈接時，可以生硬地跳轉(zhuǎn)，結(jié)果是丟失上下文。

對網(wǎng)站而言，特別是長網(wǎng)站，加一個線性滾動動畫，可以改善用戶體驗：

對比下面看看：

對比下默認(rèn)行為和動畫行為，跳過內(nèi)容不再是無意識的行為；它是一個決定。實際上，《Hope Lies at 24 Frames Per Second》此文中的菜單按鈕沒有任何動畫，它花了我1分多鐘才明白確切發(fā)生了什么。

要點：界面的突然變化用戶很難適應(yīng)，總是告知他們發(fā)生了什么。

有狀態(tài)的切換

讓我們看看另一個例子：切換菜單。用戶點擊“+”號增加內(nèi)容或展開元素。通過旋轉(zhuǎn) 45 度，加號變成了叉號，叉號大家廣泛理解為“關(guān)閉”：

簡單的變換完全改變了圖標(biāo)的意義。這個小細節(jié)比讓用戶猜測接下來發(fā)生什么，以及理解圖標(biāo)是什么意思容易多了。這個切換對用戶非常友好。此外，加號旋轉(zhuǎn)總是跟內(nèi)容保持一個方向，加強了信息的流動。

要點：讓網(wǎng)站元素的每個狀態(tài)都可理解。

#p#

漸進呈現(xiàn)表單和評論

許多博客和新聞網(wǎng)站的評論表單不是很友好，當(dāng)你準(zhǔn)備發(fā)表評論時，你只想輸入評論而不是干別的，典型的問題是，它會詢問你各種其它的事情，好煩人吶。

為了激發(fā)用戶的評論熱情，我們可以僅顯示最重要的元素：評論框。當(dāng)用戶點擊輸入?yún)^(qū)域時，展開相應(yīng)的表單。真實世界漸進展現(xiàn)的例子，可以看紐約時報的 beta 網(wǎng)站：

你可以更進一步，當(dāng)評論框獲得焦點時展開表單。這么做有個問題，交互設(shè)計的基本原則提到：an action should always happen close to where the interaction occurs （一個行為總是發(fā)生在離交互點最近的地方）（關(guān)注焦點附近）。我們可以再進一步，給評論框添加動畫引導(dǎo)用戶：

你還可以把評論框固定在頂部，在下面展開相應(yīng)內(nèi)容，顯示附加字段。

如你所見，這么做減少了混亂，令評論表單更吸引人。

更好的做法是，當(dāng)用戶到達頁面底部時自動加載評論。我們應(yīng)該避免強迫用戶去點擊，除非有更好的理由。

要點：漸進展現(xiàn)為了減少 UI 組件的呈現(xiàn)，用戶需要它們時再顯示出來。

Pull To Refresh （拉動刷新）

最令人激動的交互之一是伴隨著 iPhone 出現(xiàn)， Loren Brichter 倡導(dǎo)的 “拉動刷新”。用戶可以更新可卷動的時序型內(nèi)容。你可以在 Twitter 的應(yīng)用中看到此效果。

為什么效果這么好？在拉動刷新出現(xiàn)之前，用戶必須點擊瀏覽器的刷新按鈕加載更多內(nèi)容。把用戶發(fā)現(xiàn)更多內(nèi)容的愿望和刷新行為聯(lián)系起來，明確的點擊行為變得好古板。

要點：連接意圖和行為，體驗變得更加無縫。

Sticky Labels （粘性標(biāo)簽）

粘性標(biāo)簽是另一個微妙而實用的組合，它把用戶界面與有意義的過渡結(jié)合起來。看看 Edenspiekermann’s use of this technique 的運用。

項目標(biāo)簽一直固定在內(nèi)容的左側(cè)，直到下一個項目出現(xiàn)。這個效果類似 iOS 地址本，它為較長區(qū)域提供了上下文。過渡效果不僅增加了方向感，而且提供了基于上下文的描述。

要點：長區(qū)域中添加了有價值信息的摘要或者標(biāo)題可以使用粘性標(biāo)簽。

#p#

Affordance Transition （自解釋的過渡效果）

自解釋的概念源于認(rèn)知心理學(xué)，指一個對象的特征，它用于引導(dǎo)用戶。

在用戶界面設(shè)計的上下文，EU 網(wǎng)站的可用性詞匯 （PDF）中如此定義自解釋性：

“An affordance is a desirable property of a user interface — software which naturally leads people to take the correct steps to accomplish their goals.”
“自解釋性是用戶界面令人滿意的特性 —— 軟件很自然地引導(dǎo)用戶，通過正確的步驟達到預(yù)期的目標(biāo)。”

Ridges（棱線）常常用于提高自解釋性。按鈕周圍的棱線暗示按鈕是可操作的。這種用戶體驗技術(shù)被 iOS 上的相機應(yīng)用廣泛推廣。

iOS 6 的鎖屏旁邊的相機圖標(biāo)，暗示可以拖動。Apple 在 iOS 7里移除了它，顯然是因為用戶習(xí)慣讓它看起來更像一個獨立的圖標(biāo)。后來是怎么做的：當(dāng)你拖動按鈕，鎖屏彈起，相機出現(xiàn)在下面。這是一項將用戶指向功能的很好的技術(shù)。

要點：在界面上，給予元素高度自解釋性，它會把用戶指向功能。

Context-Based Hiding（基于上下文隱藏）

iOS 上的 Google Chrome 啟動后有個基于上下文隱藏功能，見下圖：

基本理念是當(dāng)用戶向下滾動頁面，瀏覽器導(dǎo)航面板自動隱藏。當(dāng)用戶再次向上滾動頁面，控制面板出現(xiàn)。這種方法不僅改善了上下文體驗（專注于內(nèi)容本身），而且增加了屏幕可用空間。屏幕空間在移動設(shè)備尤為重要。

首先假設(shè)用戶將一直瀏覽關(guān)注的內(nèi)容。當(dāng)他們停止瀏覽，上下文可能改變；因此，導(dǎo)航面板需要重新出現(xiàn)。這一技術(shù)節(jié)省屏幕空間的同時，檢查某種假設(shè)是否超出了你的測試用例。

iOS 處理的更好，當(dāng)?shù)竭_頁面的底部時，控制面板再次出現(xiàn)。這是一個動態(tài)整合用戶需求的絕佳的例子。

要點：使用基于上下文的隱藏功能提高用戶關(guān)注度，節(jié)省屏幕空間。

Focus Transition（焦點過渡）

當(dāng)通過鍵盤導(dǎo)航時，用戶按下 Tab 鍵，常常搞不清焦點移動到哪里了。通過動畫指引他們到達頁面指定位置。過渡是微妙的，但在指引用戶方面影響巨大。

要點：為用戶指明方向，不管他們?nèi)绾螌?dǎo)航。

總之

這幾個例子僅僅是九牛一毛罷了，本文要點不是秀一些最新最酷的交互技術(shù)，而是強調(diào)如何通過輕微的交互細節(jié)大大提高用戶體驗。

如果我們想設(shè)計出更好的數(shù)字產(chǎn)品，我們需要挑戰(zhàn)當(dāng)前的信念，看看何種交互模式更能方便用戶的使用。我沒說要重復(fù)造輪子，但是不要停止探索。因此，走出你的安樂窩，保持探索，勇于嘗試。

如果你喜歡本文，可以在 Twitter 上關(guān)注我，或者到瑞士請我吃一塊瑞士巧克力。

原文鏈接：http://blog.jobbole.com/51255/