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