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

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

展開/收起

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

位置變化

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

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

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

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

Gap是一個年輕品牌的服飾

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

六 即時響應(yīng)

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

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

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

即時預(yù)覽

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

實時更新

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

案例

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

最后的最后

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

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

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

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

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