轉載藍藍設計( www.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
原文地址：http://uxdesign.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
有些網站無論在內容，可用性，設計或者功能等方面勝人一籌，其取勝之道在于交互和動效的細節上。在這里通過各種模型和大家分享一些案例，并分析為什么這些簡單的方式能產生讓人難忘的效果。
我們常常會用Photoshop和Sketch這一類軟件來設計數字產品。大多數在這個行業工作過幾年的人都應該知道設計不僅僅是視覺傳達而已。盡管如此，還是有許多人在進行靜態的設計。對于設計，喬布斯就說過這樣的話：
“設計并非外觀怎樣，感覺如何。設計的是產品的工作原理。”
我們對產品的體驗和印象是由綜合因素影響的，其中交互起著根本性的作用。我們再也不能先從靜態的角度考慮用戶界面，然后再加入交互效果。相反，我們需要從一開始就考慮到互動，并把這個當作界面的天然屬性。
讓我們來看看一些小而美的交互實例，看看這些巧妙的動效是如何優雅地改善了用戶體驗。
動態滾動
網頁上的超鏈接既有好處又有缺點。當你點擊一個鏈接，你無法預期會帶你到怎樣的頁面，也許是一個產品的頁面，也可能是一家令人毛骨悚然的沿街老木偶店面的網站。前后的關聯是斷開的。
閱讀書籍的一個很棒的體驗就是內容是線性的。書中每個章節是遞進的。比如，你必須閱讀第一章中的經濟學入門來幫助你理解第二章。當你跳過一個章節，你很清楚你可能會遺漏一些信息，從而會缺乏對后續內容的理解。在網頁上，尤其是在很長的網頁上，這種現象常常無意識地發生。這時通過添加一個滾動的動效，就可以解決這個問題：
對比下這個效果：
謹記：界面上任何突兀的變化會讓用戶感覺很難進行，別把他們搞得暈頭轉向；清晰的顯示發生了什么事。
狀態切換
正如上個例子里我們所看到的，切換的過程能幫助用戶了解界面的路徑和指向。沒有什么能比一個突發變化更讓人感覺到不自然了，因為瞬變在現實世界中是不存在的。讓我們來看看另一個例子：切換菜單。用戶看到“＋”這個符號，會聯想到添加內容或擴展元素。旋轉45°后，加號變為一個叉叉，這個元素被廣泛地理解為“關閉”：
這個簡單的過渡，徹底改變了圖標的含義。這樣一個小小的細節意味著不必猜測接下來會發生什么，用戶知道圖標在兩種狀態下的含義。如果你問我，我覺得這樣的切換是相當人性化的。此外，請注意加號的旋轉和內容的出現是在同一方向，加強了信息的指向。
謹記：保證你的網站元素在每個狀態下都易于理解。
收縮表單和評論
許多博客和新聞網站的評論表單不是一個讓人看著愉悅的組件。為什么呢？好吧，大部分還是不夠友好的，對吧？當你準備發表評論時，你只是想開始輸入評論。然而，一個典型的表單卻要求你先提供其他的各種信息，這樣多煩人。
為了激勵人們參與評論，我們可以把表單折疊，并只顯示最關鍵的元素：評論框。當用戶點擊了評論框，你可以相應地擴大表單。這種逐步披露的方式可以在紐約時報的測試版網站上找到一個實例：
當表格擴展時，有種更好的方式是可以設置光標的焦點在評論框上。不過會有一個問題：交互設計的一個重要原則是，反饋動作應該發生在交互產生的附近（或者是在關注點的軌跡上）。我們再優化一下，給評論框的展開加上過渡的動畫來幫助用戶定位：
你甚至可以把評論框放在區域的頂部，相應地擴大框的大小并把其他字段展示在評論框下方。
正如你所見，這樣能減少干擾，讓評論表單更加引人注意。但是把評論內容也全部折疊起來會怎么樣呢？
通過折疊評論，我們可以憑借滾動條得知正文的長度而不是整個頁面。通常的做法是，當用戶到達頁面底部會自動加載評論。我們應該避免強迫用戶點擊，除非有很好的理由。
謹記：逐步披露信息的方式是為了減少UI上的干擾從而突出用戶需要的功能。
下拉刷新
在iPhone面世后不久出現的一個最令人興奮的交互操作就是“下拉刷新”（開發者：Loren Brichter）。用戶下拉后內容會根據發布時間倒序更新。你可以在Twitter的app里看到這樣的應用了。只要你在推文的頂部稍微向下拉動就能刷新所有內容。
為什么這個設計如此受歡迎？在下拉刷新存在之前，用戶不得不點擊瀏覽器的“刷新”按鈕去加載更多內容。通過下拉的方式滿足了用戶的探索欲，從而讓進行明確操作的需要逐漸被淘汰。
謹記：當操作符合了意圖，體驗會變得更加無縫。
黏性標簽
項目標簽會跟隨內容滾動，從而為右側圖片提供了目錄，直到出現下一個項目。這種行為和iOS里的地址簿很類似，特別是對長內容的索引非常有幫助。這種過渡既提升了定位也讓基于上下文的描述更流暢。
謹記：在很長的內容視圖里不適合用描述或者標題的方式來添加有價值的信息，這時可以考慮用黏性標簽。
預示性過渡
預示性的概念源自認知心理學，意指通過特定的對象的特征來引導觀眾。
在用戶界面設計的背景下，歐盟網站的可用性術語表（
PDF下載）中給出了如下定義：
“預示性是用戶界面（軟件）中的一個理想屬性 ，能很自然的引導人們采取正確的步驟，來完成目標。”
凸起經常被用來增強預示。按鈕周圍的凸起就暗示了這個按鈕可以操作。這個用戶體驗技術在iOS的相機應用程序里被廣泛推廣。
iOS 6鎖屏里的相機圖標周圍就有起伏的紋理暗示用戶可以拖動。在iOS7里，這個設計被刪除了，使圖標看起來更像是一個獨立的按鈕，這是因為用戶的習慣已經建立起來了。顯然，會發生什么事仍然是一樣的：當你拖動按鈕，鎖屏彈起，露出攝像頭下方。這是一個偉大的技術，向用戶指示出界面的功能。
謹記：在界面里給控件提高預示來幫助用戶學習。
隱藏索引
谷歌Chrome的iOS版本有個隱藏索引的設計，就像這樣：
其基本思路是，一旦用戶向下拖動，Chrome瀏覽器的導航控件自動隱藏。只要用戶再次向上拖動，導航重新出現。這種方法既提升了瀏覽上下文的體驗（聚焦內容本身），也增加了屏幕空間。當然，后者在移動設備上特別重要。
一個毋庸置疑的說法是，用戶會一直瀏覽他們非常感興趣的內容。一旦他們停止繼續瀏覽，極有可能是要更換瀏覽內容了，因此，這時導航條需要出現。雖然這項技術節省了屏幕空間，但請確認這種場景是否會出現在你的產品里。
iOS更進了一步。當你到達一個頁面的底部，控制欄會再次擴大。這是動態地根據場景滿足用戶需求的一個很好的例子。
謹記：使用隱藏索引的方式讓用戶更聚焦內容，并節省屏幕空間。
總結
這些僅是大量案例的其中幾個。本文的主旨不是顯示奇的交互技術，而是突出小交互細節如何顯著提高用戶的體驗。
如果我們要設計出更好的數字產品，那么我們就需要挑戰我們目前的信念和探索交互模式可以如何緩解用戶的生活。我不是說我們應該推倒重來，但如果停止探索那就太目光短淺了。所以，走出你的安樂窩，繼續探索和試驗。
