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