五、過渡轉化的使用

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

展開/收起

蘋果網站左側分類導航欄采用了響應式展開收起的動畫方式，不僅節省了空間，還把注意力聚焦在當前的tab下面。

位置變化

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

告訴當前的狀態

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

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

Gap是一個年輕品牌的服飾

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

六 即時響應

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

……通過提供適當的反饋讓用戶獲得足夠信息，當用戶開始某一操作時，要給出相應的提示，以表明應用程序已經接受用戶輸入且在對其進行處理。……

接下來我們看看都有哪些及時響應的方式。

即時預覽

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

實時更新

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

案例

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

最后的最后

寫到這里，應該結束了。不過我還想分享關于“喬布斯”的3個小故事。

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

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

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

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

三、不要打斷任務流

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

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

1.三個重要的交互相應參數

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

 0.1秒 是用戶判斷系統瞬時反應的時間，意味著在該時間內顯示反饋結果用戶是可以接受的。

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

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

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

Gtalk

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

2.用虛擬的視覺效果

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

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

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

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

四、提供引導邀請

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

1.靜態邀請

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

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

Google docs

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

2.動態邀請

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

Google map

Googlemap增加的“街景”模式瀏覽用小黃人引導發現新功能。

默認

 
鼠標懸停

  

拖拽邀請

案例

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

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

一、直接操縱原則

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

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

每個交互元素在不同觸發事 件下所表現的響應狀態。其中橘黃色區域是隱藏在初始狀態后面發生的動作和出現的元素。

邀請編輯――默認情況下，標題正常顯示。當鼠標懸停在標題上，標題立刻顯示黃色背景條和一個“click to edit”的提示條出現，這種邀請提示的好處是――告訴用戶當前區域是可編輯的并引導他們去點擊。

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

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

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

二、保持輕量級

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

怎樣通過簡化交互，實現操作更接近內容，從而保證設計的輕量級呢？

1.費茨定律

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

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

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

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

2.實時可見的工具

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

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

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

3.保持關鍵內容可見

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

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

4.只做一件事情

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

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

瞬間設計是什么？

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

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

設計師要做什么？

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

從一個例子開始

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

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

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

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

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

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

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

1.關注分秒的響應（比如說我們要考慮到頁面的加載效果）

2.關注微妙的細節（鼠標hover上去的光標顯示效果，移到哪里顯示等等）

3.想象各種可能性