挖墳

交互設計（Interaction Design）產(chǎn)生于二十世紀八十年代，在1984年一次設計會議上，大名鼎鼎的英國交互設計師比爾·莫格里奇首次提出交互設計這個概念，作為一門關注交互體驗的新學科而存在并發(fā)展到今天，他一開始給它命名為“軟面（Soft Face）”，由于這個名字容易讓人想起和當時流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后來把它更名為“Interaction Design”――交互設計。

思考

交互設計是一種如何讓產(chǎn)品易用并盡可能讓人樂在其中的技術，他包括了解目標用戶在產(chǎn)品使用過程中的心理反應，了解用戶在同產(chǎn)品交互時彼此的行為，了解大部分用戶交互行為的習慣，同時，還包括了解各種有效的交互方式，并對它們進行增強和擴充。交互設計還涉及到多個學科，以及和多領域多背景人員的溝通。

交互設計在產(chǎn)品上的使用也越來越得到各大網(wǎng)站以及網(wǎng)民的重視，交互設計的理論也日益豐滿，經(jīng)典的交互案例也漸漸豐富起來。

今天我們來分析一下互聯(lián)網(wǎng)上交互設計的一些事件，為大家的研究和應用提一些個人膚淺的看法。

其實交互可以理解為在使用產(chǎn)品過程中用戶的感覺以及針對感覺的反饋。從這個層面上來看，生活中交互是無處不在的。交互產(chǎn)生的感覺就是我們平時所熟知的五感，即聽覺，視覺，嗅覺，味覺，觸覺。當然你一定要認為交互可以給你帶來第六感，我也不反對，因為確實有好的交互讓你有種神秘莫測的感覺，而且可以讓你沿著設計師預想的方向去使用產(chǎn)品。其中應用于互聯(lián)網(wǎng)的交互設計基本上是沒有嗅覺和味覺的，雖然不排除將來可能會相關硬件產(chǎn)品作為這些感覺的輸出設備（比如不好看的網(wǎng)站，某輸出設備直接散發(fā)出臭味，或者某輸出設備嘗起來很苦），但是我們目前只討論目前絕大部分輸入設備帶來的感覺。（注一）

分析

我們在使用互聯(lián)網(wǎng)產(chǎn)品的時候，聽覺，視覺，觸覺是經(jīng)常被觸發(fā)的。在此我對互聯(lián)網(wǎng)產(chǎn)品的交互事件進行了分類：聽覺交互事件，視覺交互事件，鍵盤交互事件，鼠標交互事件。后兩者雖然都屬于觸覺交互事件，但基于網(wǎng)民的操作習慣（鍵盤流，鼠標流），我覺得分開會比較容易討論這個話題，盡管某些時候他們都混合在一起，難以分開。(注二)

聽覺交互事件

聽覺交互事件顧名思義就是：耳朵聽到的聲音給用戶感覺，并產(chǎn)生的相關反應的過程。比如WINDOWS的系統(tǒng)提示音，網(wǎng)絡游戲中的一些音效，很多論壇的短消息提醒，等等。聽覺交互事件的主要交互目的是有四種：提示，警告，反饋，補充。我分別舉例說明一下。

提示：比如很多即時通信軟件的好友上線提示，系統(tǒng)消息提示。

警告：系統(tǒng)操作錯誤的警告音，軟件登錄密碼錯誤，某些游戲中紅血警告，時間限定警告，機會限定警告。

反饋：注冊成功，升級成功，操作按鈕被點擊。

補充：很多FLASH站的背景音樂，游戲中的戰(zhàn)馬嘶鳴、馬蹄絕塵、刀劍鏗鏘，電子雜志翻頁音效。

聲音交互事件的交互方式很單一，就是默認在交互過程中發(fā)出聲音。它的優(yōu)點是提醒用戶注意，在輸出設備（聽筒、音箱等）齊全的情況下，信息傳達穩(wěn)定，用戶容易接收，交互效果最好。但它也有缺點，就是受制于輸出設備，如果沒有音箱或者聽筒，交互效果就基本沒有。所以聽覺交互事件一般不獨立用在互聯(lián)網(wǎng)產(chǎn)品上。

聽覺交互事件的注意事項：

1.不獨立使用，應該與其他交互事件配合使用，至少要與視覺交互配合。

2.不強制用戶接受，有選擇項可以讓用戶關閉，不要期待用戶為你去關輸出設備。

視覺交互事件

視覺交互事件就是眼睛看到的界面給用戶的感覺，并產(chǎn)生的相關反應的過程。視覺交互事件經(jīng)常和其他交互事件混合在一起使用，但它本身可以獨立使用。比如很多線下活動在線上作的網(wǎng)絡廣告，某些電影的線上海報，某些牛人的個人網(wǎng)站通知，流程圖，注冊時用戶確認已閱讀用戶協(xié)議前不可點擊（或倒計時完成后方可點擊）的按鈕等等。

我再舉一個具體的例子，某網(wǎng)站出現(xiàn)一個震撼的廣告圖，內容為“浙江移動推出充值200送200優(yōu)惠活動，請到附近營業(yè)廳辦理?！庇脩艨赡懿粫c擊，他會打電話給移動公司詢問，或者告知朋友去充值，或者直接就去營業(yè)廳辦理了。這個人只要有了反應，交互事件就進行得很完美，廣告效果就達到了。視覺交互與其他事件交互的結合也比比皆是，我就不一一枚舉了。

視覺交互事件是用戶最直觀最容易獲得的體驗，因此它需要具備美觀，吸引，沖擊，共鳴等特點。這一部分與界面視覺設計需要關注的部分重合，但不完全一樣。

視覺交互事件的注意事項：

1.表達清晰，有時甚至要犧牲美觀來滿足信息清晰的傳達

2.與目標用戶群產(chǎn)生共鳴，從文案、配色、圖案等方面來提高吸引力，讓用戶有深入了解產(chǎn)品的欲望

3.配合其他交互事件使用時，盡可能滿足其他交互事件的需求，避免產(chǎn)出好看不中用的華而不實的產(chǎn)品

鼠標交互事件

鼠標交互事件顧名思義就是用戶使用產(chǎn)品時，通過鼠標操作產(chǎn)生感覺，并產(chǎn)生相關反應的過程。鼠標交互事件是最常用的也是最重要的交互事件。比如導航條，很多性格測試，不計名投票系統(tǒng)，一些網(wǎng)頁版小游戲，某些FLASH廣告，部分網(wǎng)站上出現(xiàn)的快捷菜單等等都屬于鼠標交互事件。鼠標交互事件包括主鍵點擊，懸浮，雙擊，選中，副鍵點擊，滾動等，經(jīng)常體現(xiàn)在超鏈接,JS寫的ON系列事件，F(xiàn)LASH的按鈕等場景中。

鼠標交互事件因為操作比較簡單，得到很多入門級網(wǎng)民的喜愛，我們在用戶體驗研究測試中也確實能找到這一類的用戶，就是傳說中的“鼠標流”，整個交互過程只用鼠標來完成，雖然這不能代表所有網(wǎng)民，但確實代表了一種趨勢，用戶都喜歡簡單的交互方式，只不過我們更關注的是有效，如果用戶點來點去，找不到入口（出口），達不到目的，那么這個鼠標交互事件就是失敗的，需要改進了。

既然鼠標交互事件有這些需求，我們就應該在設計的時候權衡簡單和有效的關系了。必須需要的步驟，我們一步都不能省，我相信用戶不會吝惜一次點擊的。另外一方面，我們不能因為用戶不在乎多一次點擊，就讓用戶不知道先點哪個的地方或者不停地點擊。再舉個例子，網(wǎng)站的快捷菜單，可以直達很多地方。我們不能把所有的頁面都列出來，那樣就變成sitemap了，在某個頁面上的快捷菜單最好只列出重要的，常用的，或者相關的鏈接就行了；也不能只列一個“幫助中心”的快捷鏈接，盡管我相信你的幫助中心作得非常有條理，用戶還是需要點了再點，一級接一級的去找到相關的幫助，如果能直接到本頁面相關的幫助不是更好？這個權衡非常具有挑戰(zhàn)性，希望大家在作交互設計的時候多考慮，多調查，多試驗，相信能找到一個比較好的方案。

鼠標交互事件的注意事項：

1.傻瓜式：簡單方便，在滿足用戶使用需求的同時，盡量減少點擊次數(shù)。

2.提示明顯：讓用戶知道哪里地方可以點擊，點擊哪里可以最快達成目標。這個需要在界面及文案上對用戶給予引導。

3.反饋及時：用戶在鼠標交互事件產(chǎn)生之后，能給以及時的反饋，比如鼠標經(jīng)過變色，點擊錯誤發(fā)出警告，跳轉頁面后能直接到相關的位置，AJAX請求后要反饋出明顯的視覺提醒或者頁面變化

4.層次分明：用戶點擊之后，能有整個操作過程的提示，在操作失誤后可以返回重新操作，已經(jīng)點擊過的是不是需要記錄狀態(tài)等等。

鍵盤交互事件

鍵盤交互事件就是用戶使用產(chǎn)品過程中，通過鍵盤操作產(chǎn)生交互體驗的過程。鍵盤交互在網(wǎng)絡產(chǎn)品的交互過程應用得相當普遍，比如撰寫日志，添加評論，ENTER提交，小鍵盤翻頁，TAB切換焦點，某些網(wǎng)頁游戲的快捷鍵等等。鍵盤交互事件通常和鼠標交互混合使用，構成了互聯(lián)網(wǎng)產(chǎn)品的主要交互行為。用戶在進行鍵盤交互之前，對時間和精力的花費有一定的預期，由于多年互聯(lián)網(wǎng)產(chǎn)品交互過程對用戶習慣的培養(yǎng)，用戶在進行鍵盤交互事件的時候耐心明顯多于其他交互事件。所以鍵盤交互事件要充分利用用戶對此事件的耐心，并且要充分尊重用戶的習慣。舉例說明：文本框里面的提示語在焦點產(chǎn)生的時候要有全選功能或者刪除功能；文本框輸入完成后要有ENTER提交的功能，而文本域輸入完成后則是CTRL+ENTER作為提交，因為ENTER此時會作為換行的用途；有些文本輸入有字數(shù)限制時需要提示剩余字數(shù)；有些文本域輸入有時效性，需要有保存草稿功能，或者有時效性的提示；在需要設置快捷鍵的時候不要和系統(tǒng)默認的一些快捷相沖突，如果沖突了還不如不要。

尊重主流的操作習慣非常重要，在此特別提出。比如我很不喜歡QQ的CTRL+ALT+Z的默認提取消息，因為這是PHOTOSHOP的返回上一步的快捷鍵，這個設置非常干擾我的工作；我很喜歡GOOGLE文檔里的CTRL+Z(俗稱后悔鍵)和CTRL+Y（俗稱恢復鍵），因為它符合大多數(shù)互聯(lián)網(wǎng)產(chǎn)品的操作習慣。雖然有些習慣比較偏向個人，但我相信一定有很多產(chǎn)品自作聰明的設置了一些快捷鍵，反而干擾了一些常用軟件或者系統(tǒng)的默認快捷鍵，本來是一個好的交互意愿，卻取得了相反的交互體驗。

鍵盤交互事件的注意事項：

1.安全性：鍵盤交互事件可能透露一些用戶的個人信息，或者泄露一些隱私，好的互聯(lián)網(wǎng)產(chǎn)品應該給于用戶以保護。

2.穩(wěn)定性：在利用用戶對此交互事件的耐心來收集信息或者獲得反饋的同時，要保證用戶的耐心要有成果，不能讓用戶浪費時間和精力，結果前功盡棄，或者功虧一簣。

3.一致性：不要指望用戶對鍵盤交互事件擁有高超的辨別能力而采取不同的操作方式，如果你采用了一種交互方式，盡量在相同或者相似的交互場景中延續(xù)使用相同的交互方式，退一步說，不要用不一樣的交互方式，再退一步說，千萬不要用相反的交互方式。這一點對視覺交互也很重要，但對于能稱作界面設計師的人（不包含圖片處理員）來說，一般這種一致性是可以保持的。

4.尊重習慣：目前互聯(lián)網(wǎng)產(chǎn)品中有一些是非常偉大（或者說強大）的產(chǎn)品，不管交互方式是否絕對完美，至少他已經(jīng)用市場占有率和時間的延續(xù)性培養(yǎng)了用戶一些既有的習慣，交互設計師不要輕易打破用戶的現(xiàn)有習慣，這并不是說不能有創(chuàng)新，而是指在現(xiàn)有習慣上優(yōu)化和提升交互體驗，是對現(xiàn)有交互方式的延展。

總結

以上是我對互聯(lián)網(wǎng)產(chǎn)品的交互事件所作的分類和分析，盡管現(xiàn)實產(chǎn)品的交互事件都很復雜，但基本是這幾種事件的組合，如果我們能在基礎的事件上作好交互設計，那把復雜的交互事件作好希望就會很大。

另外業(yè)內對一個產(chǎn)品的交互設計作得好不好，沒有一個標準，通過以上分析，雖然我們依然無法制定出這一標準，但是我們可以從上面的分析看出一個交互設計是不是作得不好。在我看來，這也是一個進步了。我希望各位同行都來貢獻自己的力量，將好的交互設計應用在更多的產(chǎn)品，讓用戶得到更好的體驗。

個人的一些分析，難免有不足，希望大家補充和指正。(本文較長，無圖，枯燥，理論，對能讀到這里的朋友表示感謝)

補充

注一:

與宗羲討論時，宗羲認為： “五感”應該是交互的“輸入”(input)，也就是通過人類的“五感”作為外界的信息進入大腦，而交互產(chǎn)生的感覺應該摘引《情感化設計》里所描速的三層來描述，即：本能層、行為層、反思層。

宗羲的解釋非常正確，但我這里說的五感是具體交互事件產(chǎn)生的感覺，是點到線來分析問題的（縱向），而情感化設計里所提到的三層結構是點到面來分析問題（橫向）。個人感覺并不沖突。

注二:

與宗羲繼續(xù)討論時，宗羲認為：我個人覺得應該從輸入和輸出來區(qū)分。聽覺交互事件，視覺交互事件是交互中的輸入(對于人類來說，下同)，即交互設備將信息反饋給人類的過程，鍵盤交互事件，鼠標交互事件是輸出信息，即人類將反饋輸出給交互設備。輸入+輸出就形成了“交互”。

輸入和輸出的區(qū)分方法是可行的，但用來歸納交互事件我覺得有不足的地方，文中有例子表明有些交互事件是直接到達反思層的，可能對交互設備根本沒有輸出任何信息。

所以雖然有了宗羲的提醒，本文還有留下一個遺憾，就是文章結構不夠嚴謹。點到面的結構經(jīng)過疊加，可以形成整體，而點到線的結構是不足的，如果線與線之間的關系沒有明確表達出來，形成的整體是有缺陷的。

原文：http://ued.taobao.com/blog/2009/09/27/guyin/