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

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

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

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

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

從一個例子開始

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

頁面加載（Page Load）
鼠標(biāo)懸停在拖動目標(biāo)上（Mouse Hover Over Drag Object）
鼠標(biāo)按下拖動目標(biāo)區(qū)域（Mouse Down On Drag Region of Drag Object）
拖動發(fā)起（Drag Initiate）
拖動原位置（Drag Over Original Location）
拖動離開原位置（Drag Leaves Original Location）
拖動重新進(jìn)入原位置（Drag Re-enters Original Location）
拖動有效區(qū)域（Drag Over Valid Target）
拖動進(jìn)入有效的區(qū)域（Drag Enters Valid Target）
拖動懸停于有效的區(qū)域（Drag Hovers Over Valid Target）
拖動推出有效的區(qū)域（Drag Exits Valid Target）
拖動非操作區(qū)域（Drag Over Invalid Target）
拖動進(jìn)入無效的區(qū)域（Drag Enters Invalid Target）
拖動懸停于無效的區(qū)域（Drag Hovers Over Invalid Target）
拖動退出無效區(qū)域（Drag Exits Invalid Target）
拖動非具體目標(biāo)（Drag Over No Specific Target）
接受放置（Drop Accepted）
接受放置起始（Drop Accepted Begins）
接受放置結(jié)束（Drop Accepted Ends）
拒絕放置（Drop Rejected）
放置于原位置（Drop On Original Location）
此外，拖動的目標(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）
針對每個界面元素所表現(xiàn)的交互事件不同，我們就可以得到很多有趣的交互瞬間，如以下表格所示：

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

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

1.關(guān)注分秒的響應(yīng)（比如說我們要考慮到頁面的加載效果）
2.關(guān)注微妙的細(xì)節(jié)（鼠標(biāo)hover上去的光標(biāo)顯示效果，移到哪里顯示等等）
3.想象各種可能性