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