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

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

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

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

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

從一個(gè)例子開(kāi)始

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

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

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

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

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

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

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

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

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

3.想象各種可能性