瞬間設(shè)計(jì)(四)

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

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

展開(kāi)/收起

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

位置變化

google（不是谷歌）的個(gè)性化搜索幫助在用戶(hù)登錄時(shí)對(duì)每條搜索信息進(jìn)行相關(guān)操作，你可以發(fā)表評(píng)論，將該信息置頂或刪除，用來(lái)維護(hù)自己想要的信息。點(diǎn)擊關(guān)閉按鈕后，他就通過(guò)瞬間氣體消失的動(dòng)畫(huà)生動(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à)效果，你可能會(huì)莫名其妙，甚至沒(méi)有發(fā)現(xiàn)它的變化。

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

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

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

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

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

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

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

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

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

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

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

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

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

案例

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

最后的最后

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

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

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

在itunes發(fā)布會(huì)的前20分鐘，喬布斯還在和其他設(shè)計(jì)師針對(duì)左上角的字體進(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號(hào)宋體還是14號(hào)雅黑體的時(shí)候，我都不會(huì)在認(rèn)為這是 浪費(fèi)時(shí)間，是的，也許 這些微小的細(xì)節(jié)和瞬間我們很容易忽略掉，但是正是這些細(xì)小的東西在潛移默化的  改變著人們的生活，還有什么 比做這些事情跟激動(dòng)人心的呢:- )