五、過渡轉(zhuǎn)化的使用

在《mind hack》一書中，揭示了人腦鮮為人知的工作原理。其中提到了“突然的移動(dòng)或閃爍會(huì)吸引人的注意力，這正是負(fù)責(zé)視覺處理的第二塊區(qū)域的功能。這就說明了“動(dòng)畫”或“動(dòng)態(tài)的變換效果”會(huì)成為web界面中吸引人注目的地方。過渡的使用它會(huì)造成視覺干擾，擾亂我們的思維，只有在特定的情況下使用特定的方式才能達(dá)到到理想的效果。

展開/收起

蘋果網(wǎng)站左側(cè)分類導(dǎo)航欄采用了響應(yīng)式展開收起的動(dòng)畫方式，不僅節(jié)省了空間，還把注意力聚焦在當(dāng)前的tab下面。

位置變化

google（不是谷歌）的個(gè)性化搜索幫助在用戶登錄時(shí)對每條搜索信息進(jìn)行相關(guān)操作，你可以發(fā)表評論，將該信息置頂或刪除，用來維護(hù)自己想要的信息。點(diǎn)擊關(guān)閉按鈕后，他就通過瞬間氣體消失的動(dòng)畫生動(dòng)的表現(xiàn)當(dāng)前的信息已經(jīng)刪除。點(diǎn)擊那個(gè)小箭頭，當(dāng)前信息會(huì)動(dòng)態(tài)漂移到最頂部。告訴你他的位置已經(jīng)出現(xiàn)了變化，如果不用這個(gè)動(dòng)畫效果，你可能會(huì)莫名其妙，甚至沒有發(fā)現(xiàn)它的變化。

告訴當(dāng)前的狀態(tài)

flickr批量上傳時(shí)，通常系統(tǒng)處理時(shí)間會(huì)比較長，甚至還有可能產(chǎn)生錯(cuò)誤導(dǎo)致操作中斷。他們采用了對每個(gè)照片的上傳進(jìn)度進(jìn)行實(shí)時(shí)反饋為了，告訴用戶當(dāng)前的狀態(tài)，從而給他們的錯(cuò)覺認(rèn)為 該過程不是那么長，加速了用戶的等待時(shí)間。

igoogle在頁面又是個(gè)告訴當(dāng)前狀態(tài)的例子。用戶帶開頁面時(shí)會(huì)提前顯示各個(gè)組件的樣式框，同時(shí)顯示“正在加載”的狀態(tài)告訴用戶內(nèi)容還在處理中。

Gap是一個(gè)年輕品牌的服飾

購物網(wǎng)站。他們的購物車在默認(rèn)時(shí)顯示在導(dǎo)航欄上，用戶不會(huì)太過關(guān)注。一旦有新的商品被加入“購物車”，就會(huì)以下拉菜單的形式顯示新加入的商品，從而建立起對應(yīng)關(guān)系。

六 即時(shí)響應(yīng)

用戶進(jìn)行的每一步交互，都希望看到清晰、及時(shí)的提示和上下文反饋。Apple Human Interface Guildeline早有提到過“反饋和溝通”原理，對其有如下描述：

……通過提供適當(dāng)?shù)姆答佔(zhàn)層脩臬@得足夠信息，當(dāng)用戶開始某一操作時(shí)，要給出相應(yīng)的提示，以表明應(yīng)用程序已經(jīng)接受用戶輸入且在對其進(jìn)行處理。……

接下來我們看看都有哪些及時(shí)響應(yīng)的方式。

即時(shí)預(yù)覽

同樣還是Gap網(wǎng)站。在鼠標(biāo)移到商品圖片時(shí)，會(huì)默認(rèn)自動(dòng)化分出的區(qū)塊（類似于放大鏡），右側(cè)顯示被放大的預(yù)覽圖片來查看每個(gè)細(xì)節(jié)。

實(shí)時(shí)更新

BingTweets是一個(gè)由微軟、Twitter和Federated Media共同打造即使搜索的獨(dú)立網(wǎng)站。它的好處就是可以搜索twitter上最新最快的消息。你可以從不同tab下的標(biāo)簽里實(shí)時(shí)哪些是當(dāng)前最熱的（大號字體顯示），由于twitter的更新非常頻繁，因此這些標(biāo)簽也是動(dòng)態(tài)變化的，這一分鐘和下一分鐘看到的最熱的標(biāo)簽都不同。

案例

淘寶的注冊頁面交互過程很復(fù)雜，及時(shí)檢驗(yàn)顯得很重要。他能夠告訴用戶當(dāng)前輸入是否正確，而不用再點(diǎn)擊提交時(shí)再做判斷。比如說：在點(diǎn)擊輸入表單給予操作提示；輸入出錯(cuò)離開焦點(diǎn)給予錯(cuò)誤提示；“會(huì)員名”輸入時(shí)有5-20個(gè)字符的限制，為了告訴用戶當(dāng)前輸入的字符數(shù)（有的用戶不理解什么是字符）等。

最后的最后

寫到這里，應(yīng)該結(jié)束了。不過我還想分享關(guān)于“喬布斯”的3個(gè)小故事。

在macintosh系統(tǒng)開發(fā)階段，設(shè)計(jì)團(tuán)隊(duì)竟然花了6個(gè)月時(shí)間用于細(xì)化滾動(dòng)條，以達(dá)到令喬布斯?jié)M意的程度。滾動(dòng)條在任何計(jì)算機(jī)操作系統(tǒng)里都是很重要的部分，但卻從不是用戶界面中最顯眼的要素。盡管如此，喬布斯還是堅(jiān)持要對滾動(dòng)條改成希望的樣子，設(shè)計(jì)團(tuán)隊(duì)不得不修改了一個(gè)版本又一個(gè)版本。

“喬布斯可以一個(gè)像素一個(gè)像素地進(jìn)行對比，來看看是否匹配。”設(shè)計(jì)工程師說，“他會(huì)一直深入到每個(gè)細(xì)節(jié)里去，詳加勘察每一方面到像素的級別上去。若是有出入，“某些工程師可就要挨一頓臭罵了。

在itunes發(fā)布會(huì)的前20分鐘，喬布斯還在和其他設(shè)計(jì)師針對左上角的字體進(jìn)行討論，而其他的高層卻急得火燒眉毛，因?yàn)樗麄兯坪踹€有更重要的事等待他確認(rèn)。

設(shè)計(jì)的品質(zhì)在于細(xì)節(jié)，只有偏執(zhí)狂才能成功。我一直以這些小例子作為激勵(lì)我設(shè)計(jì)路上前進(jìn)的動(dòng)力，每次在我糾結(jié)這個(gè)地方用下拉框還是radio button的時(shí)候，用12號宋體還是14號雅黑體的時(shí)候，我都不會(huì)在認(rèn)為這是 浪費(fèi)時(shí)間，是的，也許 這些微小的細(xì)節(jié)和瞬間我們很容易忽略掉，但是正是這些細(xì)小的東西在潛移默化的  改變著人們的生活，還有什么 比做這些事情跟激動(dòng)人心的呢:- )

三、不要打斷任務(wù)流

用戶在每選擇一個(gè)操作時(shí)都希望當(dāng)前的任務(wù)是連貫的。頁面刷新會(huì)人為的造成用戶體驗(yàn)――或者說用戶心流的中斷。

[在由harper pernnial 出版的《心流：最佳體驗(yàn)的心理學(xué)》一書中，把心流定義為：當(dāng)人們進(jìn)入一種全神貫注的狀態(tài)時(shí)，他會(huì)感覺一切都是水到渠成，不費(fèi)吹灰之力。]

1.三個(gè)重要的交互相應(yīng)參數(shù)

Jakob Nielsen提出了關(guān)于交互的相應(yīng)參數(shù)，這三個(gè)準(zhǔn)則30年后的今天依然是不變的。[Miller 1968; Card et al. 1991]

 0.1秒 是用戶判斷系統(tǒng)瞬時(shí)反應(yīng)的時(shí)間，意味著在該時(shí)間內(nèi)顯示反饋結(jié)果用戶是可以接受的。

 1.0秒 是用戶保持不間斷的思維流的限定時(shí)間，即用戶會(huì)注意到這樣的延遲。如果沒有特別的信息反饋該操作超過0.1而少于1秒，他們會(huì)比較難以忍受。

 10 秒  是保持用戶關(guān)注當(dāng)前對話框的極限時(shí)間。對于長時(shí)間的延遲，用戶會(huì)想在等待計(jì)算機(jī)完成期間處理其它事務(wù)。所以需要顯示計(jì)算機(jī)將要完成的時(shí)間（通常選擇進(jìn)度條或百分比來表示），不然用戶期待會(huì)大打折扣。

另外，用戶的反應(yīng)時(shí)間不僅僅有上限，同時(shí)也有還有下限，也就是說他是一個(gè)閾值區(qū)間。在視覺感知領(lǐng)域，人眼觀看物體成像于視網(wǎng)膜上，并由視神經(jīng)輸入人腦而感覺到物體的像。當(dāng)物體改變時(shí)（時(shí)間小于等于0.05秒），由于視神經(jīng)對物體的印象不會(huì)立即消失，因此感受不到它的變化。人眼的這種性質(zhì)被稱為“變化視盲”（change blindness）。因此我在上述3個(gè)響應(yīng)參數(shù)的基礎(chǔ)上，加入了0.05秒這個(gè)參數(shù)，作為衡量人眼對計(jì)算機(jī)作出反饋的最小值。[注：也有數(shù)據(jù)顯示0.04秒]

Gtalk

我的Gmail里通常嵌入gtalk  組件 ，在我的鼠標(biāo)移動(dòng)相關(guān)好友名字上時(shí)，該好友區(qū)域高亮顯示，且顯示覆蓋層顯示該好友詳情。鼠標(biāo)移出時(shí)該覆蓋層消失。這兩個(gè)過程的覆蓋層響應(yīng)時(shí)間都控制在0.1秒時(shí)間內(nèi)，用于響應(yīng)用戶的反饋。另外，當(dāng)鼠標(biāo)懸停后快速（<0.05秒）離開高亮區(qū)域時(shí)，覆蓋層并沒有隨之消失，這是為什么呢？由上述的用戶最小反應(yīng)時(shí)間可以看出，正常情況下用戶操作鼠標(biāo)移開的時(shí)間也應(yīng)大于0.05秒以上，如果小于這個(gè)值，多半屬于非正常情況下的用戶操作行為。比如：手指不小心碰了鼠標(biāo)一下等。這時(shí)候設(shè)計(jì)師將這種情況判斷為防止用戶誤操作而依舊顯示覆蓋層信息，想的所么體貼啊！

2.用虛擬的視覺效果

當(dāng)頁面加載時(shí)間過長時(shí)，用虛擬的視覺效果提前給用戶展現(xiàn)，來滿足他們的預(yù)期，是個(gè)不錯(cuò)的辦法。

live的圖片搜索在圖片加載過程中將數(shù)據(jù)正在讀取的圖片用灰色背景填充而不是顯示空白，讓用戶感覺這個(gè)加載的時(shí)間不會(huì)太長。

3.緩解長時(shí)間的操作疲勞

TED是一個(gè)關(guān)注分享科技、娛樂、設(shè)計(jì)等領(lǐng)域前沿思想的視頻網(wǎng)站。這個(gè)網(wǎng)站不單單是我常去汲取靈感的好地方，他們的播放器設(shè)計(jì)也是我認(rèn)為做的最細(xì)致的。上圖正在播放一個(gè)教授的演講，鼠標(biāo)移動(dòng)到播放進(jìn)度條上時(shí)我們會(huì)發(fā)現(xiàn)：當(dāng)前視頻被自動(dòng)化分出不同片段，你可以hover查看詳細(xì)文字提示并點(diǎn)擊定位到該片段去播放。很棒對吧？該設(shè)計(jì)充分考慮到用戶長時(shí)間觀看視頻帶來的疲勞，或者被迫中斷以后重新定位的不便，于是將大于16分鐘視頻做了劃分。

四、提供引導(dǎo)邀請

我們有句古話：叫“酒香不怕巷子深”。可是在互聯(lián)網(wǎng)你如果遵循這句話就會(huì)死得很慘。因?yàn)槲覀兊姆?wù)實(shí)在太多了，用戶如果找不到他們想要的信息，會(huì)毫不猶豫的離開。提供邀請有利于幫助他們建立熟悉的體驗(yàn)。

1.靜態(tài)邀請

上圖是Absolutely網(wǎng)站的設(shè)計(jì)師的個(gè)人blog，他的blog獨(dú)特點(diǎn)在于每個(gè)頁面內(nèi)容都經(jīng)過精心設(shè)計(jì)。而Twitter是他積累思想和靈感的常用工具，因此在頁面的首頁都大大的顯示了“follow”的信息提示和邀請。在這里關(guān)于邀請的細(xì)節(jié)他做了很多嘗試，我們不妨來看看。

可以看出，設(shè)計(jì)師僅僅改變了邀請文案，從之前的“我做什么”改成“你可以做什么”到“你可以在哪里做什么”，就將follewers的百分比提高了2倍。

Google docs

Google docs在“share  folder“功能剛上線時(shí)，采用了兩種邀請方式：一個(gè)大大的覆蓋層指向“my folders”，幫助說明告訴用戶如何使用以及share后的提示信息。并提供以后查看或關(guān)閉該邀請?zhí)崾尽ｊP(guān)閉后還可以點(diǎn)擊頁面上方的鏈接查看詳情。

2.動(dòng)態(tài)邀請

動(dòng)態(tài)邀請適合提示用戶當(dāng)前頁面包含什么功能。用戶一般沒有耐心去看文字，利用動(dòng)態(tài)邀請可以在交互過程中吸引用戶，并引導(dǎo)他們進(jìn)行下步操作。

Google map

Googlemap增加的“街景”模式瀏覽用小黃人引導(dǎo)發(fā)現(xiàn)新功能。

默認(rèn)

 
鼠標(biāo)懸停

  

拖拽邀請

案例

我在做淘寶的評價(jià)時(shí)，也用到了邀請引導(dǎo)。為了讓用戶發(fā)表有幫助性的評論，在輸入框運(yùn)用了文案的邀請?zhí)崾尽Ｍ瑫r(shí)“店鋪動(dòng)態(tài)評分”的星星打分的拖拽屬于比較高級的操作，需要告訴用戶怎樣打分，并用圖形將打分后的結(jié)果顯示出來。

好的設(shè)計(jì)絕不是單純的因?yàn)樘觳诺膭?chuàng)意或者靈感爆發(fā)的一瞬間而產(chǎn)生的，只有設(shè)計(jì)師在“持續(xù)改進(jìn)”的迭代方法中才能達(dá)到好的效果，你必須通過不斷的“質(zhì)疑自己”，在不同的設(shè)計(jì)種找到缺點(diǎn)，并尋求 更好的方案來改進(jìn)它。Bill Scott在他的《Web界面設(shè)計(jì)》里提到了關(guān)于富交互設(shè)計(jì)的六個(gè)原則告訴我們?nèi)绾伟l(fā)現(xiàn)并找到解決的辦法，我遵循這些設(shè)計(jì)原則，通過實(shí)例和數(shù)據(jù)來和大家一起分析一些有趣的瞬間，指導(dǎo)我們的設(shè)計(jì)。

一、直接操縱原則

直接操縱原則就像Alan Cooper在《ABOUT FACE 2.0》中陳述的那樣”：“在哪里輸入，就在哪里輸出“。例如編輯內(nèi)容的操作完全可以不用重新打開頁面，而直接在當(dāng)前頁面進(jìn)行就可以了。

flickr是用到即時(shí)編輯照片信息的網(wǎng)站。這種方式更直截了當(dāng)，用戶不用切換當(dāng)前頁面就能完成。他們將更樂意為他們照片改名字，那么也就意味著會(huì)有更多與照片有關(guān)的元數(shù)據(jù)被記錄下來，方便其他用戶更好的搜索和瀏覽。我們先分析一下在這個(gè)操作的交互瞬間。

每個(gè)交互元素在不同觸發(fā)事 件下所表現(xiàn)的響應(yīng)狀態(tài)。其中橘黃色區(qū)域是隱藏在初始狀態(tài)后面發(fā)生的動(dòng)作和出現(xiàn)的元素。

邀請編輯――默認(rèn)情況下，標(biāo)題正常顯示。當(dāng)鼠標(biāo)懸停在標(biāo)題上，標(biāo)題立刻顯示黃色背景條和一個(gè)“click to edit”的提示條出現(xiàn)，這種邀請?zhí)崾镜暮锰幨迁D―告訴用戶當(dāng)前區(qū)域是可編輯的并引導(dǎo)他們?nèi)c(diǎn)擊。

編輯――單擊以后，就立即進(jìn)入到編輯模式，標(biāo)題原位置出現(xiàn)了標(biāo)題表單和”save”“cancel”按鈕，用戶就能非常清楚他們是在編輯標(biāo)題。（這種方式的缺點(diǎn)就是多出來的按鈕會(huì)把照片頂?shù)较乱恍校斐膳虐娌环€(wěn)定）

完成――保存方式有很多種，flickr采用了文本的”saving…“臨時(shí)替換標(biāo)題，一旦保存完成，新標(biāo)題就會(huì)以非編輯的樣式出現(xiàn)。

上述過程中，使用到了一些邀請?zhí)崾居脩敉瓿删庉嫞粷M足了”可操作性“。那么用戶怎樣才能發(fā)現(xiàn)這個(gè)功能呢？這就涉及到”可訪問性“問題。上述例子只有在鼠標(biāo)移上去時(shí)才能被用戶發(fā)現(xiàn)是可編輯性的，那么很可能存在一部分用戶沒有用鼠標(biāo)移上去而忽略這些邀請。為了讓功能更易被發(fā)現(xiàn)，可以采用在標(biāo)題邊放”編輯“鏈接。單擊該鏈接便可觸發(fā)編輯。（不過這也會(huì)影響到頁面的視覺干擾問題，如果有過多的功能提示會(huì)造成頁面噪點(diǎn)過多，可用率下降。）因此，做設(shè)計(jì)是要權(quán)衡易讀性和易編輯性哪個(gè)重要，做出取舍。

二、保持輕量級

Digg在早期的時(shí)候，用戶想要推一篇文章，需要經(jīng)過兩步操作。而現(xiàn)在的改進(jìn)版――只要單擊”digg“馬山就可以記錄一次投票。就因?yàn)椤眴螕簦Y(jié)束“容易了一點(diǎn)，帶來了用戶活躍度和網(wǎng)站點(diǎn)擊率的飛速增長，這正是交互輕量級設(shè)計(jì)的一大作用。

怎樣通過簡化交互，實(shí)現(xiàn)操作更接近內(nèi)容，從而保證設(shè)計(jì)的輕量級呢？

1.費(fèi)茨定律

費(fèi)茨定律指的是：移動(dòng)到目標(biāo)上的時(shí)間(T)和移動(dòng)距離(D)的對數(shù)(S)成正比。用公式表示為：

T = a + b log2 ( D / S + 1 )來計(jì)算。其中

D：鼠標(biāo)達(dá)到目標(biāo)的距離
S：目標(biāo)的寬度（尺寸）

我們可以簡單的理解為：目標(biāo)定位越容易，距離鼠標(biāo)當(dāng)前的位置就應(yīng)該越近，目標(biāo)占用空間應(yīng)該更大。為了簡單，我們可以把功能都集中到一塊（如放在菜單欄和工具欄中）。但是這樣就違反了費(fèi)茨定律（找起來會(huì)很費(fèi)勁，距離也會(huì)增加）。通過上下文工具把操作放在相關(guān)內(nèi)容附近是不錯(cuò)的辦法。[注：上下文工具是桌面右鍵菜單的web版]

2.實(shí)時(shí)可見的工具

digg在每篇文章旁邊，有一個(gè)推舉的記分卡，下方的”digg it“按鈕要比其他的操作顯得明顯。鼠標(biāo)懸停的時(shí)候”digg it“的按鈕邊框變成黑色突出顯示，單擊”digg“后，投票結(jié)果馬上記錄并在記分卡上實(shí)時(shí)更新。同時(shí)”digg“按鈕灰掉不可點(diǎn)，標(biāo)簽文本也變成灰色”dugg“。

和digg一樣，豆瓣的打分也是網(wǎng)站的核心功能。因此明確的操作（評級）邀請非常重要。打分后，用戶可以隨意更改打分分值，對評價(jià)作出刪除和修改。

shutterstock把加入的收藏的圖片總是顯示在頁面底部的遮罩層中，用戶可以隨時(shí)看到并編輯自己添加的圖片。

3.保持關(guān)鍵內(nèi)容可見

Gmail在頁面加載的時(shí)候考慮了用戶慢速連接的使用情況，減少樣式的加載，使用備選方案保證主要內(nèi)容可見。

淘寶的listing頁面一次改版，鼠標(biāo)懸停在寶貝圖片上時(shí)，不僅出現(xiàn)大圖，同時(shí)還在時(shí)間維度上對賣家推薦的商品輪播顯示，用戶同樣可以點(diǎn)擊下方的小圖來選擇查看。不僅保證了關(guān)鍵內(nèi)容可見，同時(shí)解決了多信息的展現(xiàn)和交互。

4.只做一件事情

Llinkdin消息列表中，用戶名承載著兩個(gè)交互行為：鼠標(biāo)點(diǎn)擊后會(huì)跳轉(zhuǎn)到用戶profile頁面，而鼠標(biāo)懸停0.5秒以后出現(xiàn)彈出層，顯示該用戶的簡介。如果我們不做0.5秒的限制，就會(huì)出現(xiàn)用戶在鼠標(biāo)以上去時(shí)立刻顯示彈出層，那么很可能會(huì)有用戶認(rèn)為這個(gè)鏈接只具備這一種操作功能，而忽略了它可以點(diǎn)擊的功能。所以對一個(gè)交互行為只賦予它一種功能，多種功能需要考慮用其它方式去實(shí)現(xiàn)。

Amazon用另外一種方式來解決多功能的展現(xiàn)。星星打分的信息包括兩方面：鼠標(biāo)懸停展現(xiàn)彈出層顯示每顆星的打分人數(shù)；鼠標(biāo)點(diǎn)擊后顯示評價(jià)詳情頁面。如果把這兩個(gè)信息同時(shí)通過點(diǎn)擊星星來實(shí)現(xiàn)就會(huì)出現(xiàn)上述類似問題。amazon則是通過增加一個(gè)類似下拉的按鈕來承載鼠標(biāo)懸停的交互行為，把點(diǎn)擊行為只留給星星。

瞬間設(shè)計(jì)是什么？

良好的用戶體驗(yàn)，全在于那些完美的瞬間。在第一個(gè)瞬間，假設(shè)當(dāng)一位用戶從購物搜索結(jié)果頁面跳轉(zhuǎn)到某個(gè)店鋪的時(shí)候，他此刻可能是想看看這個(gè)店鋪的風(fēng)格及其信用；而下一個(gè)瞬間可能就開始琢磨如何使用頁面中的導(dǎo)航來觀看某個(gè)寶貝介紹。再然后則可能是詢問怎驗(yàn)購買，從哪里注冊，者看看商品是否打折，或者嘗試聯(lián)系這個(gè)賣家。

若想完成優(yōu)秀的設(shè)計(jì)，我們就需要時(shí)刻自問：在希望用戶做些什么，界面應(yīng)該如何鼓勵(lì)他們完成這些任務(wù)？每一個(gè)瞬間對于完整的用戶體驗(yàn)來說，都是不可或缺的一部分，因?yàn)樗麄兌加锌赡芗訌?qiáng)也可能摧毀用戶對某個(gè)產(chǎn)品或公司的信心。為什么這么說呢？因?yàn)槊總€(gè)人在每時(shí)每刻所要完成的任務(wù)，對于此時(shí)此刻的他而言，那就是重要的任務(wù)。

設(shè)計(jì)師要做什么？

我們的工作不是設(shè)計(jì)花哨的頁面，而是要設(shè)計(jì)美好的瞬間，確保每時(shí)每刻都完美，是設(shè)計(jì)師的職責(zé)和價(jià)值所在。在用戶進(jìn)行選擇的瞬間，我們要幫助他們做出正確的決定，我們要留意創(chuàng)建怎樣的交互行為以及鼓勵(lì)人們輸入，編輯，搜索和共享，激勵(lì)他們完成所有的他們希望做的事情，我們還應(yīng)該設(shè)計(jì)各種手段幫助人們提高工作效率――即使他們天生忘性大，老出錯(cuò)，或者總是三心二意。可以說設(shè)計(jì)師的工作就是考慮所有這些瞬間――設(shè)計(jì)一些東西來支持用戶達(dá)成每一個(gè)目標(biāo)，而不會(huì)干擾或者妨礙到他們，同時(shí)，把這些完全不同的部分凝成為一個(gè)整體。只有這樣他們才能相信我們產(chǎn)品，喜歡我們的服務(wù)。

從一個(gè)例子開始

如何設(shè)計(jì)美好的瞬間？在開始之前，請大家先回想一下igoogle界面，這個(gè)產(chǎn)品大家一定很熟悉，有的設(shè)計(jì)師幾乎每天都用到它。igoogle有很多關(guān)于拖拽的操作，而拖拽這個(gè)復(fù)雜的交互行為需要不同的狀態(tài)（我們稱之為瞬間）來表現(xiàn)其交互事件（Event），yahoo模式庫曾對其進(jìn)行詳細(xì)的劃分，他們分別是：

• 頁面加載（Page Load）
• 鼠標(biāo)懸停在拖動(dòng)目標(biāo)上（Mouse Hover Over Drag Object）
• 鼠標(biāo)按下拖動(dòng)目標(biāo)區(qū)域（Mouse Down On Drag Region of Drag Object）
• 拖動(dòng)發(fā)起（Drag Initiate）
  • 拖動(dòng)原位置（Drag Over Original Location）
  • 拖動(dòng)離開原位置（Drag Leaves Original Location）
• 拖動(dòng)重新進(jìn)入原位置（Drag Re-enters Original Location）
• 拖動(dòng)有效區(qū)域（Drag Over Valid Target）
  • 拖動(dòng)進(jìn)入有效的區(qū)域（Drag Enters Valid Target）
  • 拖動(dòng)懸停于有效的區(qū)域（Drag Hovers Over Valid Target）
• 拖動(dòng)推出有效的區(qū)域（Drag Exits Valid Target）
• 拖動(dòng)非操作區(qū)域（Drag Over Invalid Target）
  • 拖動(dòng)進(jìn)入無效的區(qū)域（Drag Enters Invalid Target）
  • 拖動(dòng)懸停于無效的區(qū)域（Drag Hovers Over Invalid Target）
  • 拖動(dòng)退出無效區(qū)域（Drag Exits Invalid Target）
• 拖動(dòng)非具體目標(biāo)（Drag Over No Specific Target）
• 接受放置（Drop Accepted）
  • 接受放置起始（Drop Accepted Begins）
  • 接受放置結(jié)束（Drop Accepted Ends）
• 拒絕放置（Drop Rejected）
• 放置于原位置（Drop On Original Location）

此外，拖動(dòng)的目標(biāo)模塊包含了以下界面元素（Actor)，用于展示以上交互事件的種種有趣的瞬間，他們分別是：

• 頁面（靜態(tài)文字，圖片）Page (static text, images provided)
• 光標(biāo)（Cursor）
• 工具提示（Tool Tip）
• 模塊（Drag module）
• 模塊存放區(qū)（Drag module’s Parent Container）
• 模塊放置區(qū)（Drop Target）

針對每個(gè)界面元素所表現(xiàn)的交互事件不同，我們就可以得到很多有趣的交互瞬間，如以下表格所示：

細(xì)心的你也許會(huì)發(fā)現(xiàn)，為什么這里只列舉了少數(shù)的事件和元素，而沒有都列舉出來。其實(shí)這是因?yàn)椴糠痔厥獾慕换ナ录浅?fù)雜，很難一一列舉。僅僅“拖動(dòng)進(jìn)入到無效的區(qū)域”這個(gè)交互事件就有很多種情況，比如：把模塊拖動(dòng)到瀏覽器地址欄里的情況；把模塊移動(dòng)到toolbar下方時(shí)的情況；還有“移動(dòng)模塊到有效的區(qū)域”過程中，該有效區(qū)內(nèi)的模塊會(huì)被擠到其他的區(qū)域內(nèi)，什么時(shí)候作為判斷來移動(dòng)呢？嘗試后你會(huì)發(fā)現(xiàn)當(dāng)被拖動(dòng)模塊超出了原有模塊尺寸的1/2時(shí)，就會(huì)發(fā)生跳轉(zhuǎn)等等。

由這個(gè)例子我們不難看出要設(shè)計(jì)美好的瞬間，要做到以下幾點(diǎn)：

1.關(guān)注分秒的響應(yīng)（比如說我們要考慮到頁面的加載效果）

2.關(guān)注微妙的細(xì)節(jié)（鼠標(biāo)hover上去的光標(biāo)顯示效果，移到哪里顯示等等）

3.想象各種可能性