先推薦兩個我知道的研究這方面的網(wǎng)站 http://shengxi.sinaapp.com/orientation.html
http://www.ui-transitions.com/
然后開始譯文了欧募。

有的網(wǎng)站就是比其他網(wǎng)站做得好饲鄙，無論在內(nèi)容，可用性巷燥，設(shè)計，特性等等吕粹。交互設(shè)計(IxD)和動畫的細節(jié)造就了它們之間最基本的區(qū)別。我們將分享一些案例經(jīng)驗丽惭，分析為什么這些簡單的模型會如此受用。

當我們設(shè)計電子產(chǎn)品時辈双，我們會使用像Photoshop责掏、Sketch這樣的設(shè)計軟件。那些經(jīng)過多年工作的人一定知道設(shè)計不僅是視覺展示湃望，設(shè)計還有更多的事要做换衬。Steve Jobs是這樣說設(shè)計：

It’s not just what it looks like and feels like. Design is how it works.

我們的體驗和對產(chǎn)品的印象是被各種因素所影響，而交互在其中扮演最基礎(chǔ)的角色证芭。我們不再抱有這樣的想法——UI就是靜態(tài)的設(shè)計瞳浦，然后再添加一些神奇的交互。我們從一開始就應(yīng)該把握交互才是互聯(lián)網(wǎng)的本質(zhì)废士，并把它看做核心成分叫潦。

接下來我們會看到一些例子，其中的交互是由微妙的動畫構(gòu)建起來官硝，逐步提升用戶體驗矗蕊。

動畫式滾動

超鏈接罵得多，也用得多泛源。當你點擊一個鏈接的時候拔妥，你有可能被帶到任意的地方，從商品頁到街邊一個破舊的木偶商店的網(wǎng)站达箍。這樣的結(jié)果就不連貫没龙。

書的用戶體驗最偉大的地方在于它是線性的。書的每個章節(jié)都是連貫的缎玫，你首先得把第一章讀完硬纤，才能理解第二章的內(nèi)容。如果你跳過一個章節(jié)赃磨，你很快會意識到你錯過些什么筝家，因為有些知識寫在那個章節(jié)里面。在網(wǎng)絡(luò)上邻辉，特別是長的網(wǎng)頁溪王，這樣的事經(jīng)常下意識發(fā)生。通過增添一些滾動動畫值骇，我們可以解決它：

ScrollingAnimated

然后對比這個：

ScrollingNoAnimation

對比“name”錨點鏈接的默認行為和動畫行為莹菱。跳轉(zhuǎn)內(nèi)容不再是無意識的動作；它是用戶的決定吱瘩。事實上道伟，希望就在每秒中的24幀中的移動版有一個菜單按鈕，它不需要任何動畫就讓你返回頁面頂端。這讓我迷惑了好一陣子蜜徽。

Takeaway:界面中的突然改變很難讓用戶去理解祝懂。時刻展示給用戶究竟發(fā)生什么。

狀態(tài)式開關(guān)

在上個案例中我們可以看到拘鞋，動畫能幫助用戶理解界面上的一舉一動砚蓬。沒有什么比突然改變跟不自然，因為現(xiàn)實世界里面就不存在突然改變盆色。我們再看一個例子：切換菜單怜械。用戶把“+”與添加內(nèi)容、添加元素關(guān)聯(lián)起來傅事。旋轉(zhuǎn)45°缕允，“+”就變成“×”，一個被廣泛理解成“關(guān)閉”的元素蹭越。

Stateful-toggle

這個動畫就完全改變的icon的意義障本。這樣一個小細節(jié)代表猜測將要發(fā)生什么，以及知道icon在不同狀態(tài)下的意義的區(qū)別响鹃。這樣的切換是很用戶友好的驾霜。同時，“+”旋轉(zhuǎn)的方向跟內(nèi)容時一樣的买置，加強了信息的流動性粪糙。

Takeaway:讓你網(wǎng)站上的元素的每一個狀態(tài)都是可以被理解的。

折疊式表單和評論

很多博客忿项、新聞網(wǎng)站的評論表單都不是讓人喜愛的元素蓉冈。為什么？他們大部分都不友好轩触？當你想要發(fā)表一條評論寞酿，你想要做的事是寫評論，而不是其他東西脱柱。但是伐弹，典型的表單會要求你先填其他信息。這很討厭榨为。

要鼓勵人們更多地去評論惨好，我們折疊表單，只留下最核心的元素：評論框随闺。但用戶點擊該區(qū)域日川，表單就會自動展開。這一真實的案例可以在New York Times的beta版網(wǎng)站找到板壮。

NY-Times

你可以進一步提升它逗鸣，當它擴展的時候合住，把指針焦點鎖定在評論框绰精。這個方法有一個問題撒璧，交互設(shè)計的原則是一個動作的發(fā)生應(yīng)該靠近交互出現(xiàn)的地方(靠近關(guān)注的位置)。我們再走得遠一點笨使，用評論框的動畫來引導用戶：

ExpandingComments

或者你可以把評論框放在上面卿樱，讓它按需擴展，其他的框放在它下面硫椰。

你可以看到繁调，這減少混淆，讓評論表單變得更誘人靶草。但是如果折疊前面所有的評論蹄胰？

通過折疊評論，我們可以得到與文章長度相符的滾動條奕翔，而不是整個頁面裕寨。一個通常的做法是，當用戶到達頁面底部時派继，自動加載評論宾袜。如果沒有一個好理由的話，我們應(yīng)該避免讓用戶去點擊驾窟。

Takeaway:逐步展示的方法是為了減少UI部件以保留其中的精華庆猫。只有在用戶需要的時候才把它們放出來。

下拉刷新

在iPhone出現(xiàn)過了不久绅络，一個最激動的交互方式出現(xiàn)了“下拉刷新”月培，由Loren Brichter倡導的。它讓用戶更新已時間倒序排列的內(nèi)容恩急。你可以在Twitter 的應(yīng)用中看下這個概念的應(yīng)用节视。當你拉到最頂端的tweet時，再下啦一點就可以刷新信息流假栓。

Twitter

它為什么如此有效寻行？再下拉刷新出現(xiàn)之前，用戶點擊刷新按鈕來加載更多的內(nèi)容匾荆。聯(lián)系用戶發(fā)掘更多內(nèi)容的欲望來做刷新動作拌蜘，這個動作就變得自然而然。

Takeaway:聯(lián)系動作背后的意圖牙丽，才能做出無縫的體驗简卧。

粘性標簽

粘性標簽是另一個微妙而又有用的，對UI元素和有意義的動畫的結(jié)合品烤芦。Edenspiekermann在他作品中運用這一技術(shù)举娩。

Sticky-Label

這個項目標簽會隨著內(nèi)容滾動，給右邊的圖片提供語境，直到下一個項目的出現(xiàn)铜涉。這個行為就像iOS上的聯(lián)系人智玻，這在需要提供語境的長文章中很有用。這一動畫加強導航和平滑內(nèi)容描述的作用芙代。

Takeaway:在長文章中使用粘性標簽吊奢，可以描述或為內(nèi)容增添有用信息。

功能可見的動畫

功能可見的概念源于認知心理學纹烹，指的是特定物體的特征來引導觀眾页滚。

這UI設(shè)計中，EU網(wǎng)站上的可用性術(shù)語(PDF)是這樣定義：

功能可見是UI的一個理想屬性——軟件應(yīng)自然引導人去到正確的步驟以完成他們的目標铺呵。

脊線(ridge)經(jīng)常用于加強功能可見的效果裹驰。按鈕周圍的脊線代表著這個按鈕是可以被操作的。iOS上的相機應(yīng)用把這一技術(shù)推廣出去片挂。

iOS_Lockscreen-500-final

iOS 6 的鎖屏中邦马，相機icon周圍的線都暗示它是可拖動的。Apple在iOS 7中去掉它們宴卖，顯然由于用戶已經(jīng)習慣了它滋将，現(xiàn)在的icon更像是單獨的按鈕。其實操作還是一樣症昏，拖動按鈕随闽，推開鎖屏界面，露出下面的相機肝谭。這是在界面中為用戶找出 產(chǎn)品特點的好技術(shù)掘宪。

Takeaway:添加功能可見的元素，幫助用戶在界面中找出 產(chǎn)品特點攘烛。

基于語境(context)的隱藏

iOS上的Google Chrome在發(fā)布之初就有基于語境的隱藏功能魏滚。它大概長這樣：

CBH

基本思路就是一旦往下拖動，控制欄等元素都自動隱藏坟漱。當用戶往上拖動時鼠次，它們會重新出現(xiàn)。這方法提高語境體驗(專注控制欄)和增大可視區(qū)域芋齿。后者對移動設(shè)備尤為重要腥寇。

基本假設(shè)是用戶使用時會去滑動內(nèi)容。當滑動停止時觅捆，可能就對語境有需要赦役；因此控制欄就重新出現(xiàn)。雖然這個方案節(jié)省屏幕位置栅炒，但請檢驗這個假設(shè)在你的項目中是否成立裙顽。

iOS走得更遠膝蜈，當你到達頁面底部時级历，控制欄會自動展開簇秒。它是動態(tài)合并用戶需求的好例子秀鞭。

Takeaway:利用基于語境的隱藏，來提高專注度和節(jié)省空間锋边。

焦點動畫

一周前，Nikita Vasilyev(多倫多的UI設(shè)計師)提出一個主意豆巨。他開發(fā)了一個腳本，是焦點轉(zhuǎn)移的動畫⊥樱現(xiàn)在還是試驗階段贩猎，不過這個概念很有意思萍膛。先看下他的視頻吭服。(記得帶耳機——音樂很……)

但用鍵盤來導航時，用戶不太清楚點擊tab鍵時蝗罗，焦點移動什么位置艇棕。動畫就能指出他的正確位置。動畫很微妙串塑，但對導航很有用沼琉。

Takeaway:為用戶導航，不管用什么形式桩匪。

結(jié)論

這里只有部分示例打瘪，在其他地方也能找到更多。目的并不是展示最新傻昙、最時尚的交互技術(shù)瑟慈，而是指出小的交互細節(jié)可以多大地提高用戶體驗。

如果我們要設(shè)計更好的電子產(chǎn)品屋匕，我們需要挑戰(zhàn)先有的信仰葛碧，看看交互怎么在無形中舒緩用戶生活。我不是說我們要重新發(fā)明輪子过吻，但是停止探索是個很幼稚的行為进泼。所以蔗衡，遠離安逸的環(huán)境，不斷地去探索和測試乳绕。

If you like this article, you can follow me on Twitter, or join me for a bar of Swiss chocolate in Switzerland.

相關(guān)閱讀：

• Meaningful Transitions: Motion Graphics in the User Interface
• “Mission Transition,” Mark Cossey, Smashing Magazine
• “12 Basic Principles of Animation,” by Disney animators Ollie Johnston and Frank Thomas

來源：smashingmagazine / October 23rd, 2013
作者：Adrian Zumbrunnen
翻譯：lyzhie

來討論交互吧绞惦。
其實我不是很喜歡這個設(shè)定，今天好像有評論功能了洋措，想順便探討下這個济蝉。上圖：

有道詞典是肯定不會卸掉的，所以可以讓我關(guān)掉那個用不上的 引用+私信菠发、分享功能王滤？還是說 引用+其他功能(評論，寫日志等)出現(xiàn)滓鸠。

其他人有不同想法雁乡，請評論，謝謝糜俗。