一些網(wǎng)站不僅在內(nèi)容，可用性，設(shè)計(jì)，功能等方面，讓人耳目一新；交互設(shè)計(jì)細(xì)節(jié)和動(dòng)畫(huà)更是與眾不同。我們將分享一些模型的經(jīng)驗(yàn)，分析一下這些簡(jiǎn)單的模式為什么效果很好。

當(dāng)我們?cè)O(shè)計(jì)數(shù)碼產(chǎn)品時(shí)，我們一般使用 Photoshop 和 Sketch 此類軟件。大多數(shù)有數(shù)年行業(yè)經(jīng)驗(yàn)的人顯然明白設(shè)計(jì)不僅僅是視覺(jué)傳達(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ì)不僅僅是看起來(lái)和感受到的樣子。設(shè)計(jì)是如何工作。”

我們對(duì)于產(chǎn)品的體驗(yàn)和印象來(lái)源于諸多因素的集合，交互扮演一個(gè)根基的角色。我們無(wú)法想象用戶界面是靜態(tài)設(shè)計(jì)，隨后再添加交互魔法。相反，我們需要在早期加入交互特性，把它當(dāng)成天然的組成部分。

讓我們看看一些巧妙的交互，它們是一些微妙的動(dòng)畫(huà)，優(yōu)雅地改善了用戶體驗(yàn)。

動(dòng)畫(huà)滾動(dòng)

超鏈接總是褒貶不一，當(dāng)點(diǎn)擊一個(gè)鏈接時(shí)，可以生硬地跳轉(zhuǎn)，結(jié)果是丟失上下文。

對(duì)網(wǎng)站而言，特別是長(zhǎng)網(wǎng)站，加一個(gè)線性滾動(dòng)動(dòng)畫(huà)，可以改善用戶體驗(yàn)：

對(duì)比下面看看：

對(duì)比下默認(rèn)行為和動(dòng)畫(huà)行為，跳過(guò)內(nèi)容不再是無(wú)意識(shí)的行為；它是一個(gè)決定。實(shí)際上，《Hope Lies at 24 Frames Per Second》此文中的菜單按鈕沒(méi)有任何動(dòng)畫(huà)，它花了我1分多鐘才明白確切發(fā)生了什么。

要點(diǎn)：界面的突然變化用戶很難適應(yīng)，總是告知他們發(fā)生了什么。

有狀態(tài)的切換

讓我們看看另一個(gè)例子：切換菜單。用戶點(diǎn)擊“+”號(hào)增加內(nèi)容或展開(kāi)元素。通過(guò)旋轉(zhuǎn) 45 度，加號(hào)變成了叉號(hào)，叉號(hào)大家廣泛理解為“關(guān)閉”：

簡(jiǎn)單的變換完全改變了圖標(biāo)的意義。這個(gè)小細(xì)節(jié)比讓用戶猜測(cè)接下來(lái)發(fā)生什么，以及理解圖標(biāo)是什么意思容易多了。這個(gè)切換對(duì)用戶非常友好。此外，加號(hào)旋轉(zhuǎn)總是跟內(nèi)容保持一個(gè)方向，加強(qiáng)了信息的流動(dòng)。

要點(diǎn)：讓網(wǎng)站元素的每個(gè)狀態(tài)都可理解。

#p#

漸進(jìn)呈現(xiàn)表單和評(píng)論

許多博客和新聞網(wǎng)站的評(píng)論表單不是很友好，當(dāng)你準(zhǔn)備發(fā)表評(píng)論時(shí)，你只想輸入評(píng)論而不是干別的，典型的問(wèn)題是，它會(huì)詢問(wèn)你各種其它的事情，好煩人吶。

為了激發(fā)用戶的評(píng)論熱情，我們可以僅顯示最重要的元素：評(píng)論框。當(dāng)用戶點(diǎn)擊輸入?yún)^(qū)域時(shí)，展開(kāi)相應(yīng)的表單。真實(shí)世界漸進(jìn)展現(xiàn)的例子，可以看紐約時(shí)報(bào)的 beta 網(wǎng)站：

你可以更進(jìn)一步，當(dāng)評(píng)論框獲得焦點(diǎn)時(shí)展開(kāi)表單。這么做有個(gè)問(wèn)題，交互設(shè)計(jì)的基本原則提到：an action should always happen close to where the interaction occurs （一個(gè)行為總是發(fā)生在離交互點(diǎn)最近的地方）（關(guān)注焦點(diǎn)附近）。我們可以再進(jìn)一步，給評(píng)論框添加動(dòng)畫(huà)引導(dǎo)用戶：

你還可以把評(píng)論框固定在頂部，在下面展開(kāi)相應(yīng)內(nèi)容，顯示附加字段。

如你所見(jiàn)，這么做減少了混亂，令評(píng)論表單更吸引人。

更好的做法是，當(dāng)用戶到達(dá)頁(yè)面底部時(shí)自動(dòng)加載評(píng)論。我們應(yīng)該避免強(qiáng)迫用戶去點(diǎn)擊，除非有更好的理由。

要點(diǎn)：漸進(jìn)展現(xiàn)為了減少 UI 組件的呈現(xiàn)，用戶需要它們時(shí)再顯示出來(lái)。

Pull To Refresh （拉動(dòng)刷新）

最令人激動(dòng)的交互之一是伴隨著 iPhone 出現(xiàn)， Loren Brichter 倡導(dǎo)的 “拉動(dòng)刷新”。用戶可以更新可卷動(dòng)的時(shí)序型內(nèi)容。你可以在 Twitter 的應(yīng)用中看到此效果。

為什么效果這么好？在拉動(dòng)刷新出現(xiàn)之前，用戶必須點(diǎn)擊瀏覽器的刷新按鈕加載更多內(nèi)容。把用戶發(fā)現(xiàn)更多內(nèi)容的愿望和刷新行為聯(lián)系起來(lái)，明確的點(diǎn)擊行為變得好古板。

要點(diǎn)：連接意圖和行為，體驗(yàn)變得更加無(wú)縫。

Sticky Labels （粘性標(biāo)簽）

粘性標(biāo)簽是另一個(gè)微妙而實(shí)用的組合，它把用戶界面與有意義的過(guò)渡結(jié)合起來(lái)。看看 Edenspiekermann’s use of this technique 的運(yùn)用。

項(xiàng)目標(biāo)簽一直固定在內(nèi)容的左側(cè)，直到下一個(gè)項(xiàng)目出現(xiàn)。這個(gè)效果類似 iOS 地址本，它為較長(zhǎng)區(qū)域提供了上下文。過(guò)渡效果不僅增加了方向感，而且提供了基于上下文的描述。

要點(diǎn)：長(zhǎng)區(qū)域中添加了有價(jià)值信息的摘要或者標(biāo)題可以使用粘性標(biāo)簽。

#p#

Affordance Transition （自解釋的過(guò)渡效果）

自解釋的概念源于認(rèn)知心理學(xué)，指一個(gè)對(duì)象的特征，它用于引導(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)用戶，通過(guò)正確的步驟達(dá)到預(yù)期的目標(biāo)。”

Ridges（棱線）常常用于提高自解釋性。按鈕周圍的棱線暗示按鈕是可操作的。這種用戶體驗(yàn)技術(shù)被 iOS 上的相機(jī)應(yīng)用廣泛推廣。

iOS 6 的鎖屏旁邊的相機(jī)圖標(biāo)，暗示可以拖動(dòng)。Apple 在 iOS 7里移除了它，顯然是因?yàn)橛脩袅?xí)慣讓它看起來(lái)更像一個(gè)獨(dú)立的圖標(biāo)。后來(lái)是怎么做的：當(dāng)你拖動(dòng)按鈕，鎖屏彈起，相機(jī)出現(xiàn)在下面。這是一項(xiàng)將用戶指向功能的很好的技術(shù)。

要點(diǎn)：在界面上，給予元素高度自解釋性，它會(huì)把用戶指向功能。

Context-Based Hiding（基于上下文隱藏）

iOS 上的 Google Chrome 啟動(dòng)后有個(gè)基于上下文隱藏功能，見(jiàn)下圖：

基本理念是當(dāng)用戶向下滾動(dòng)頁(yè)面，瀏覽器導(dǎo)航面板自動(dòng)隱藏。當(dāng)用戶再次向上滾動(dòng)頁(yè)面，控制面板出現(xiàn)。這種方法不僅改善了上下文體驗(yàn)（專注于內(nèi)容本身），而且增加了屏幕可用空間。屏幕空間在移動(dòng)設(shè)備尤為重要。

首先假設(shè)用戶將一直瀏覽關(guān)注的內(nèi)容。當(dāng)他們停止瀏覽，上下文可能改變；因此，導(dǎo)航面板需要重新出現(xiàn)。這一技術(shù)節(jié)省屏幕空間的同時(shí)，檢查某種假設(shè)是否超出了你的測(cè)試用例。

iOS 處理的更好，當(dāng)?shù)竭_(dá)頁(yè)面的底部時(shí)，控制面板再次出現(xiàn)。這是一個(gè)動(dòng)態(tài)整合用戶需求的絕佳的例子。

要點(diǎn)：使用基于上下文的隱藏功能提高用戶關(guān)注度，節(jié)省屏幕空間。

Focus Transition（焦點(diǎn)過(guò)渡）

當(dāng)通過(guò)鍵盤(pán)導(dǎo)航時(shí)，用戶按下 Tab 鍵，常常搞不清焦點(diǎn)移動(dòng)到哪里了。通過(guò)動(dòng)畫(huà)指引他們到達(dá)頁(yè)面指定位置。過(guò)渡是微妙的，但在指引用戶方面影響巨大。

要點(diǎn)：為用戶指明方向，不管他們?nèi)绾螌?dǎo)航。

總之

這幾個(gè)例子僅僅是九牛一毛罷了，本文要點(diǎn)不是秀一些最新最酷的交互技術(shù)，而是強(qiáng)調(diào)如何通過(guò)輕微的交互細(xì)節(jié)大大提高用戶體驗(yàn)。

如果我們想設(shè)計(jì)出更好的數(shù)字產(chǎn)品，我們需要挑戰(zhàn)當(dāng)前的信念，看看何種交互模式更能方便用戶的使用。我沒(méi)說(shuō)要重復(fù)造輪子，但是不要停止探索。因此，走出你的安樂(lè)窩，保持探索，勇于嘗試。

如果你喜歡本文，可以在 Twitter 上關(guān)注我，或者到瑞士請(qǐng)我吃一塊瑞士巧克力。

原文鏈接：http://blog.jobbole.com/51255/