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

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

展開/收起

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

位置變化

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

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

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

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

Gap是一個年輕品牌的服飾

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

六 即時響應(yīng)

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

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

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

即時預(yù)覽

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

實時更新

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

案例

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

最后的最后

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

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

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

在itunes發(fā)布會的前20分鐘，喬布斯還在和其他設(shè)計師針對左上角的字體進行討論，而其他的高層卻急得火燒眉毛，因為他們似乎還有更重要的事等待他確認。

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

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

用戶在每選擇一個操作時都希望當前的任務(wù)是連貫的。頁面刷新會人為的造成用戶體驗――或者說用戶心流的中斷。

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

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

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

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

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

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

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

Gtalk

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

2.用虛擬的視覺效果

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

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

3.緩解長時間的操作疲勞

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

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

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

1.靜態(tài)邀請

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

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

Google docs

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

2.動態(tài)邀請

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

Google map

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

默認

 
鼠標懸停

  

拖拽邀請

案例

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

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

一、直接操縱原則

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

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

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

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

編輯――單擊以后，就立即進入到編輯模式，標題原位置出現(xiàn)了標題表單和”save”“cancel”按鈕，用戶就能非常清楚他們是在編輯標題。（這種方式的缺點就是多出來的按鈕會把照片頂?shù)较乱恍?，造成排版不穩(wěn)定）

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

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

二、保持輕量級

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

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

1.費茨定律

費茨定律指的是：移動到目標上的時間(T)和移動距離(D)的對數(shù)(S)成正比。用公式表示為：

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

D：鼠標達到目標的距離
S：目標的寬度（尺寸）

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

2.實時可見的工具

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

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

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

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

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

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

4.只做一件事情

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

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

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

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

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

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

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

從一個例子開始

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

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

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

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

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

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

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

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

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

3.想象各種可能性