起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識巧妙的過渡動畫
小編導讀：有的網站就是比其他網站做得好，無論在內容，可用性，設計，特性等等。交互設計(IxD)和動畫的細節造就了它們之間最基本的區別。我們將分享一些案例經驗，分析為什么這些簡單的模型會如此受用。
當我們設計電子產品時，我們會使用像Photoshop、Sketch這樣的設計軟件。那些經過多年工作的人一定知道設計不僅是視覺展示，設計還有更多的事要做。Steve Jobs是這樣說設計：
It’s not just what it looks like and feels like. Design is how it works.
我們的體驗和對產品的印象是被各種因素所影響，而交互在其中扮演最基礎的角色。我們不再抱有這樣的想法——UI就是靜態的設計，然后再添加一些神奇的交互。我們從一開始就應該把握交互才是互聯網的本質，并把它看做核心成分。
接下來我們會看到一些例子，其中的交互是由微妙的動畫構建起來，逐步提升用戶體驗。
動畫式滾動
超鏈接罵得多，也用得多。當你點擊一個鏈接的時候，你有可能被帶到任意的地方，從商品頁到街邊一個破舊的木偶商店的網站。這樣的結果就不連貫。
書的用戶體驗最偉大的地方在于它是線性的。書的每個章節都是連貫的，你首先得把第一章讀完，才能理解第二章的內容。如果你跳過一個章節，你很快會意識到你錯過些什么，因為有些知識寫在那個章節里面。在網絡上，特別是長的網頁，這樣的事經常下意識發生。通過增添一些滾動動畫，我們可以解決它：
然后對比這個：
對比“name”錨點鏈接的默認行為和動畫行為。跳轉內容不再是無意識的動作；它是用戶的決定。事實上，希望就在每秒中的24幀中的移動版有一個菜單按鈕，它不需要任何動畫就讓你返回頁面頂端。這讓我迷惑了好一陣子。
Takeaway:界面中的突然改變很難讓用戶去理解。時刻展示給用戶究竟發生什么。
狀態式開關
在上個案例中我們可以看到，動畫能幫助用戶理解界面上的一舉一動。沒有什么比突然改變跟不自然，因為現實世界里面就不存在突然改變。我們再看一個例子：切換菜單。用戶把“+”與添加內容、添加元素關聯起來。旋轉45°，“+”就變成“×”，一個被廣泛理解成“關閉”的元素。
這個動畫就完全改變的icon的意義。這樣一個小細節代表猜測將要發生什么，以及知道icon在不同狀態下的意義的區別。這樣的切換是很用戶友好的。同時，“+”旋轉的方向跟內容時一樣的，加強了信息的流動性。
Takeaway:讓你網站上的元素的每一個狀態都是可以被理解的。
折疊式表單和評論
很多博客、新聞網站的評論表單都不是讓人喜愛的元素。為什么？他們大部分都不友好？當你想要發表一條評論，你想要做的事是寫評論，而不是其他東西。但是，典型的表單會要求你先填其他信息。這很討厭。
要鼓勵人們更多地去評論，我們折疊表單，只留下最核心的元素：評論框。但用戶點擊該區域，表單就會自動展開。這一真實的案例可以在New York Times的beta版網站找到。
你可以進一步提升它，當它擴展的時候，把指針焦點鎖定在評論框。這個方法有一個問題，交互設計的原則是一個動作的發生應該靠近交互出現的地方(靠近關注的位置)。我們再走得遠一點，用評論框的動畫來引導用戶：
或者你可以把評論框放在上面，讓它按需擴展，其他的框放在它下面。
你可以看到，這減少混淆，讓評論表單變得更誘人。但是如果折疊前面所有的評論？
通過折疊評論，我們可以得到與文章長度相符的滾動條，而不是整個頁面。一個通常的做法是，當用戶到達頁面底部時，自動加載評論。如果沒有一個好理由的話，我們應該避免讓用戶去點擊。
Takeaway:逐步展示的方法是為了減少UI部件以保留其中的精華。只有在用戶需要的時候才把它們放出來。
下拉刷新
在iPhone出現過了不久，一個最激動的交互方式出現了“下拉刷新”，由Loren Brichter倡導的。它讓用戶更新已時間倒序排列的內容。你可以在Twitter 的應用中看下這個概念的應用。當你拉到最頂端的tweet時，再下啦一點就可以刷新信息流。
它為什么如此有效？再下拉刷新出現之前，用戶點擊刷新按鈕來加載更多的內容。聯系用戶發掘更多內容的欲望來做刷新動作，這個動作就變得自然而然。
Takeaway:聯系動作背后的意圖，才能做出無縫的體驗。
粘性標簽
粘性標簽是另一個微妙而又有用的，對UI元素和有意義的動畫的結合品。Edenspiekermann在他作品中運用這一技術。
這個項目標簽會隨著內容滾動，給右邊的圖片提供語境，直到下一個項目的出現。這個行為就像iOS上的聯系人，這在需要提供語境的長文章中很有用。這一動畫加強導航和平滑內容描述的作用。
Takeaway:在長文章中使用粘性標簽，可以描述或為內容增添有用信息。
功能可見的動畫
功能可見的概念源于認知心理學，指的是特定物體的特征來引導觀眾。
這UI設計中，EU網站上的可用性術語(PDF)是這樣定義：
功能可見是UI的一個理想屬性——軟件應自然引導人去到正確的步驟以完成他們的目標。
脊線(ridge)經常用于加強功能可見的效果。按鈕周圍的脊線代表著這個按鈕是可以被操作的。iOS上的相機應用把這一技術推廣出去。
iOS 6 的鎖屏中，相機icon周圍的線都暗示它是可拖動的。Apple在iOS 7中去掉它們，顯然由于用戶已經習慣了它，現在的icon更像是單獨的按鈕。其實操作還是一樣，拖動按鈕，推開鎖屏界面，露出下面的相機。這是在界面中為用戶找出 產品特點的好技術。
Takeaway:添加功能可見的元素，幫助用戶在界面中找出 產品特點。
基于語境(context)的隱藏
iOS上的Google Chrome在發布之初就有基于語境的隱藏功能。它大概長這樣：
基本思路就是一旦往下拖動，控制欄等元素都自動隱藏。當用戶往上拖動時，它們會重新出現。這方法提高語境體驗(專注控制欄)和增大可視區域。后者對移動設備尤為重要。
基本假設是用戶使用時會去滑動內容。當滑動停止時，可能就對語境有需要；因此控制欄就重新出現。雖然這個方案節省屏幕位置，但請檢驗這個假設在你的項目中是否成立。
iOS走得更遠，當你到達頁面底部時，控制欄會自動展開。它是動態合并用戶需求的好例子。
Takeaway:利用基于語境的隱藏，來提高專注度和節省空間。
焦點動畫
一周前，Nikita Vasilyev(多倫多的UI設計師)提出一個主意。他開發了一個腳本，是焦點轉移的動畫?，F在還是試驗階段，不過這個概念很有意思。先看下他的視頻。(記得帶耳機——音樂很……)
但用鍵盤來導航時，用戶不太清楚點擊tab鍵時，焦點移動什么位置。動畫就能指出他的正確位置。動畫很微妙，但對導航很有用。
Takeaway:為用戶導航，不管用什么形式。
結論
這里只有部分示例，在其他地方也能找到更多。目的并不是展示最新、最時尚的交互技術，而是指出小的交互細節可以多大地提高用戶體驗。
如果我們要設計更好的電子產品，我們需要挑戰先有的信仰，看看交互怎么在無形中舒緩用戶生活。我不是說我們要重新發明輪子，但是停止探索是個很幼稚的行為。所以，遠離安逸的環境，不斷地去探索和測試。
If you like this article, you can follow me on Twitter, or join me for a bar of Swiss chocolate in Switzerland.
本文作者：@Adrian Zumbrunnen ? 翻譯：@lyzhie ? 來自：smashingmagazine
優秀的交互總是那么自然