用戶體驗設計中的巧妙過渡
一些網(wǎng)站不僅在內容，可用性，設計，功能等方面，讓人耳目一新；交互設計細節(jié)和動畫更是與眾不同。我們將分享一些模型的經(jīng)驗，分析一下這些簡單的模式為什么效果很好。
當我們設計數(shù)碼產品時，我們一般使用 Photoshop 和 Sketch 此類軟件。大多數(shù)有數(shù)年行業(yè)經(jīng)驗的人顯然明白設計不僅僅是視覺傳達。盡管如此，有些人還是繼續(xù)做靜態(tài)設計。Steve Jobs 如此描述設計：
“It’s not just what it looks like and feels like. Design is how it works.”
“設計不僅僅是看起來和感受到的樣子。設計是如何工作。”
我們對于產品的體驗和印象來源于諸多因素的集合，交互扮演一個根基的角色。我們無法想象用戶界面是靜態(tài)設計，隨后再添加交互魔法。相反，我們需要在早期加入交互特性，把它當成天然的組成部分。
讓我們看看一些巧妙的交互，它們是一些微妙的動畫，優(yōu)雅地改善了用戶體驗。
動畫滾動
超鏈接總是褒貶不一，當點擊一個鏈接時，可以生硬地跳轉，結果是丟失上下文。
對網(wǎng)站而言，特別是長網(wǎng)站，加一個線性滾動動畫，可以改善用戶體驗：
對比下面看看：
對比下默認行為和動畫行為，跳過內容不再是無意識的行為；它是一個決定。實際上，《Hope Lies at 24 Frames Per Second》此文中的菜單按鈕沒有任何動畫，它花了我1分多鐘才明白確切發(fā)生了什么。
要點：界面的突然變化用戶很難適應，總是告知他們發(fā)生了什么。
有狀態(tài)的切換
讓我們看看另一個例子：切換菜單。用戶點擊“+”號增加內容或展開元素。通過旋轉 45 度，加號變成了叉號，叉號大家廣泛理解為“關閉”：
簡單的變換完全改變了圖標的意義。這個小細節(jié)比讓用戶猜測接下來發(fā)生什么，以及理解圖標是什么意思容易多了。這個切換對用戶非常友好。此外，加號旋轉總是跟內容保持一個方向，加強了信息的流動。
要點：讓網(wǎng)站元素的每個狀態(tài)都可理解。
#p#
漸進呈現(xiàn)表單和評論
許多博客和新聞網(wǎng)站的評論表單不是很友好，當你準備發(fā)表評論時，你只想輸入評論而不是干別的，典型的問題是，它會詢問你各種其它的事情，好煩人吶。
為了激發(fā)用戶的評論熱情，我們可以僅顯示最重要的元素：評論框。當用戶點擊輸入?yún)^(qū)域時，展開相應的表單。真實世界漸進展現(xiàn)的例子，可以看紐約時報的 beta 網(wǎng)站：
你可以更進一步，當評論框獲得焦點時展開表單。這么做有個問題，交互設計的基本原則提到：an action should always happen close to where the interaction occurs （一個行為總是發(fā)生在離交互點最近的地方）（關注焦點附近）。我們可以再進一步，給評論框添加動畫引導用戶：
你還可以把評論框固定在頂部，在下面展開相應內容，顯示附加字段。
如你所見，這么做減少了混亂，令評論表單更吸引人。
更好的做法是，當用戶到達頁面底部時自動加載評論。我們應該避免強迫用戶去點擊，除非有更好的理由。
要點：漸進展現(xiàn)為了減少 UI 組件的呈現(xiàn)，用戶需要它們時再顯示出來。
Pull To Refresh （拉動刷新）
最令人激動的交互之一是伴隨著 iPhone 出現(xiàn)， Loren Brichter 倡導的 “拉動刷新”。用戶可以更新可卷動的時序型內容。你可以在 Twitter 的應用中看到此效果。
為什么效果這么好？在拉動刷新出現(xiàn)之前，用戶必須點擊瀏覽器的刷新按鈕加載更多內容。把用戶發(fā)現(xiàn)更多內容的愿望和刷新行為聯(lián)系起來，明確的點擊行為變得好古板。
要點：連接意圖和行為，體驗變得更加無縫。
Sticky Labels （粘性標簽）
粘性標簽是另一個微妙而實用的組合，它把用戶界面與有意義的過渡結合起來。看看 Edenspiekermann’s use of this technique 的運用。
項目標簽一直固定在內容的左側，直到下一個項目出現(xiàn)。這個效果類似 iOS 地址本，它為較長區(qū)域提供了上下文。過渡效果不僅增加了方向感，而且提供了基于上下文的描述。
要點：長區(qū)域中添加了有價值信息的摘要或者標題可以使用粘性標簽。
#p#
Affordance Transition （自解釋的過渡效果）
自解釋的概念源于認知心理學，指一個對象的特征，它用于引導用戶。
在用戶界面設計的上下文，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.”
“自解釋性是用戶界面令人滿意的特性 —— 軟件很自然地引導用戶，通過正確的步驟達到預期的目標。”
Ridges（棱線）常常用于提高自解釋性。按鈕周圍的棱線暗示按鈕是可操作的。這種用戶體驗技術被 iOS 上的相機應用廣泛推廣。
iOS 6 的鎖屏旁邊的相機圖標，暗示可以拖動。Apple 在 iOS 7里移除了它，顯然是因為用戶習慣讓它看起來更像一個獨立的圖標。后來是怎么做的：當你拖動按鈕，鎖屏彈起，相機出現(xiàn)在下面。這是一項將用戶指向功能的很好的技術。
要點：在界面上，給予元素高度自解釋性，它會把用戶指向功能。
Context-Based Hiding（基于上下文隱藏）
iOS 上的 Google Chrome 啟動后有個基于上下文隱藏功能，見下圖：
基本理念是當用戶向下滾動頁面，瀏覽器導航面板自動隱藏。當用戶再次向上滾動頁面，控制面板出現(xiàn)。這種方法不僅改善了上下文體驗（專注于內容本身），而且增加了屏幕可用空間。屏幕空間在移動設備尤為重要。
首先假設用戶將一直瀏覽關注的內容。當他們停止瀏覽，上下文可能改變；因此，導航面板需要重新出現(xiàn)。這一技術節(jié)省屏幕空間的同時，檢查某種假設是否超出了你的測試用例。
iOS 處理的更好，當?shù)竭_頁面的底部時，控制面板再次出現(xiàn)。這是一個動態(tài)整合用戶需求的絕佳的例子。
要點：使用基于上下文的隱藏功能提高用戶關注度，節(jié)省屏幕空間。
Focus Transition（焦點過渡）
當通過鍵盤導航時，用戶按下 Tab 鍵，常常搞不清焦點移動到哪里了。通過動畫指引他們到達頁面指定位置。過渡是微妙的，但在指引用戶方面影響巨大。
要點：為用戶指明方向，不管他們如何導航。
總之
這幾個例子僅僅是九牛一毛罷了，本文要點不是秀一些最新最酷的交互技術，而是強調如何通過輕微的交互細節(jié)大大提高用戶體驗。
如果我們想設計出更好的數(shù)字產品，我們需要挑戰(zhàn)當前的信念，看看何種交互模式更能方便用戶的使用。我沒說要重復造輪子，但是不要停止探索。因此，走出你的安樂窩，保持探索，勇于嘗試。
如果你喜歡本文，可以在 Twitter 上關注我，或者到瑞士請我吃一塊瑞士巧克力。
