用戶體驗(yàn)設(shè)計(jì)中的巧妙過渡
一些網(wǎng)站不僅在內(nèi)容，可用性，設(shè)計(jì)，功能等方面，讓人耳目一新；交互設(shè)計(jì)細(xì)節(jié)和動畫更是與眾不同。我們將分享一些模型的經(jīng)驗(yàn)，分析一下這些簡單的模式為什么效果很好。
當(dāng)我們設(shè)計(jì)數(shù)碼產(chǎn)品時(shí)，我們一般使用 Photoshop 和 Sketch 此類軟件。大多數(shù)有數(shù)年行業(yè)經(jīng)驗(yàn)的人顯然明白設(shè)計(jì)不僅僅是視覺傳達(dá)。盡管如此，有些人還是繼續(xù)做靜態(tài)設(shè)計(jì)。Steve Jobs 如此描述設(shè)計(jì)：
“It’s not just what it looks like and feels like. Design is how it works.”
“設(shè)計(jì)不僅僅是看起來和感受到的樣子。設(shè)計(jì)是如何工作。”
我們對于產(chǎn)品的體驗(yàn)和印象來源于諸多因素的集合，交互扮演一個(gè)根基的角色。我們無法想象用戶界面是靜態(tài)設(shè)計(jì)，隨后再添加交互魔法。相反，我們需要在早期加入交互特性，把它當(dāng)成天然的組成部分。
讓我們看看一些巧妙的交互，它們是一些微妙的動畫，優(yōu)雅地改善了用戶體驗(yàn)。
動畫滾動
超鏈接總是褒貶不一，當(dāng)點(diǎn)擊一個(gè)鏈接時(shí)，可以生硬地跳轉(zhuǎn)，結(jié)果是丟失上下文。
對網(wǎng)站而言，特別是長網(wǎng)站，加一個(gè)線性滾動動畫，可以改善用戶體驗(yàn)：
對比下面看看：
對比下默認(rèn)行為和動畫行為，跳過內(nèi)容不再是無意識的行為；它是一個(gè)決定。實(shí)際上，《Hope Lies at 24 Frames Per Second》此文中的菜單按鈕沒有任何動畫，它花了我1分多鐘才明白確切發(fā)生了什么。
要點(diǎn)：界面的突然變化用戶很難適應(yīng)，總是告知他們發(fā)生了什么。
有狀態(tài)的切換
讓我們看看另一個(gè)例子：切換菜單。用戶點(diǎn)擊“+”號增加內(nèi)容或展開元素。通過旋轉(zhuǎn) 45 度，加號變成了叉號，叉號大家廣泛理解為“關(guān)閉”：
簡單的變換完全改變了圖標(biāo)的意義。這個(gè)小細(xì)節(jié)比讓用戶猜測接下來發(fā)生什么，以及理解圖標(biāo)是什么意思容易多了。這個(gè)切換對用戶非常友好。此外，加號旋轉(zhuǎn)總是跟內(nèi)容保持一個(gè)方向，加強(qiáng)了信息的流動。
要點(diǎn)：讓網(wǎng)站元素的每個(gè)狀態(tài)都可理解。
#p#
漸進(jìn)呈現(xiàn)表單和評論
許多博客和新聞網(wǎng)站的評論表單不是很友好，當(dāng)你準(zhǔn)備發(fā)表評論時(shí)，你只想輸入評論而不是干別的，典型的問題是，它會詢問你各種其它的事情，好煩人吶。
為了激發(fā)用戶的評論熱情，我們可以僅顯示最重要的元素：評論框。當(dāng)用戶點(diǎn)擊輸入?yún)^(qū)域時(shí)，展開相應(yīng)的表單。真實(shí)世界漸進(jìn)展現(xiàn)的例子，可以看紐約時(shí)報(bào)的 beta 網(wǎng)站：
你可以更進(jìn)一步，當(dāng)評論框獲得焦點(diǎn)時(shí)展開表單。這么做有個(gè)問題，交互設(shè)計(jì)的基本原則提到：an action should always happen close to where the interaction occurs （一個(gè)行為總是發(fā)生在離交互點(diǎn)最近的地方）（關(guān)注焦點(diǎn)附近）。我們可以再進(jìn)一步，給評論框添加動畫引導(dǎo)用戶：
你還可以把評論框固定在頂部，在下面展開相應(yīng)內(nèi)容，顯示附加字段。
如你所見，這么做減少了混亂，令評論表單更吸引人。
更好的做法是，當(dāng)用戶到達(dá)頁面底部時(shí)自動加載評論。我們應(yīng)該避免強(qiáng)迫用戶去點(diǎn)擊，除非有更好的理由。
要點(diǎn)：漸進(jìn)展現(xiàn)為了減少 UI 組件的呈現(xiàn)，用戶需要它們時(shí)再顯示出來。
Pull To Refresh （拉動刷新）
最令人激動的交互之一是伴隨著 iPhone 出現(xiàn)， Loren Brichter 倡導(dǎo)的 “拉動刷新”。用戶可以更新可卷動的時(shí)序型內(nèi)容。你可以在 Twitter 的應(yīng)用中看到此效果。
為什么效果這么好？在拉動刷新出現(xiàn)之前，用戶必須點(diǎn)擊瀏覽器的刷新按鈕加載更多內(nèi)容。把用戶發(fā)現(xiàn)更多內(nèi)容的愿望和刷新行為聯(lián)系起來，明確的點(diǎn)擊行為變得好古板。
要點(diǎn)：連接意圖和行為，體驗(yàn)變得更加無縫。
Sticky Labels （粘性標(biāo)簽）
粘性標(biāo)簽是另一個(gè)微妙而實(shí)用的組合，它把用戶界面與有意義的過渡結(jié)合起來。看看 Edenspiekermann’s use of this technique 的運(yùn)用。
項(xiàng)目標(biāo)簽一直固定在內(nèi)容的左側(cè)，直到下一個(gè)項(xiàng)目出現(xiàn)。這個(gè)效果類似 iOS 地址本，它為較長區(qū)域提供了上下文。過渡效果不僅增加了方向感，而且提供了基于上下文的描述。
要點(diǎn)：長區(qū)域中添加了有價(jià)值信息的摘要或者標(biāo)題可以使用粘性標(biāo)簽。
#p#
Affordance Transition （自解釋的過渡效果）
自解釋的概念源于認(rèn)知心理學(xué)，指一個(gè)對象的特征，它用于引導(dǎo)用戶。
在用戶界面設(shè)計(jì)的上下文，EU 網(wǎng)站的可用性詞匯 （PDF）中如此定義自解釋性：
“An affordance is a desirable property of a user interface — software which naturally leads people to take the correct steps to accomplish their goals.”
“自解釋性是用戶界面令人滿意的特性 —— 軟件很自然地引導(dǎo)用戶，通過正確的步驟達(dá)到預(yù)期的目標(biāo)。”
Ridges（棱線）常常用于提高自解釋性。按鈕周圍的棱線暗示按鈕是可操作的。這種用戶體驗(yàn)技術(shù)被 iOS 上的相機(jī)應(yīng)用廣泛推廣。
iOS 6 的鎖屏旁邊的相機(jī)圖標(biāo)，暗示可以拖動。Apple 在 iOS 7里移除了它，顯然是因?yàn)橛脩袅?xí)慣讓它看起來更像一個(gè)獨(dú)立的圖標(biāo)。后來是怎么做的：當(dāng)你拖動按鈕，鎖屏彈起，相機(jī)出現(xiàn)在下面。這是一項(xiàng)將用戶指向功能的很好的技術(shù)。
要點(diǎn)：在界面上，給予元素高度自解釋性，它會把用戶指向功能。
Context-Based Hiding（基于上下文隱藏）
iOS 上的 Google Chrome 啟動后有個(gè)基于上下文隱藏功能，見下圖：
基本理念是當(dāng)用戶向下滾動頁面，瀏覽器導(dǎo)航面板自動隱藏。當(dāng)用戶再次向上滾動頁面，控制面板出現(xiàn)。這種方法不僅改善了上下文體驗(yàn)（專注于內(nèi)容本身），而且增加了屏幕可用空間。屏幕空間在移動設(shè)備尤為重要。
首先假設(shè)用戶將一直瀏覽關(guān)注的內(nèi)容。當(dāng)他們停止瀏覽，上下文可能改變；因此，導(dǎo)航面板需要重新出現(xiàn)。這一技術(shù)節(jié)省屏幕空間的同時(shí)，檢查某種假設(shè)是否超出了你的測試用例。
iOS 處理的更好，當(dāng)?shù)竭_(dá)頁面的底部時(shí)，控制面板再次出現(xiàn)。這是一個(gè)動態(tài)整合用戶需求的絕佳的例子。
要點(diǎn)：使用基于上下文的隱藏功能提高用戶關(guān)注度，節(jié)省屏幕空間。
Focus Transition（焦點(diǎn)過渡）
當(dāng)通過鍵盤導(dǎo)航時(shí)，用戶按下 Tab 鍵，常常搞不清焦點(diǎn)移動到哪里了。通過動畫指引他們到達(dá)頁面指定位置。過渡是微妙的，但在指引用戶方面影響巨大。
要點(diǎn)：為用戶指明方向，不管他們?nèi)绾螌?dǎo)航。
總之
這幾個(gè)例子僅僅是九牛一毛罷了，本文要點(diǎn)不是秀一些最新最酷的交互技術(shù)，而是強(qiáng)調(diào)如何通過輕微的交互細(xì)節(jié)大大提高用戶體驗(yàn)。
如果我們想設(shè)計(jì)出更好的數(shù)字產(chǎn)品，我們需要挑戰(zhàn)當(dāng)前的信念，看看何種交互模式更能方便用戶的使用。我沒說要重復(fù)造輪子，但是不要停止探索。因此，走出你的安樂窩，保持探索，勇于嘗試。
如果你喜歡本文，可以在 Twitter 上關(guān)注我，或者到瑞士請我吃一塊瑞士巧克力。
