|
挖墳
交互設(shè)計(jì)（InteractionDesign）產(chǎn)生于二十世紀(jì)八十年代，在1984年一次設(shè)計(jì)會(huì)議上，大名鼎鼎的英國(guó)交互設(shè)計(jì)師比爾·莫格里奇首次提出交互設(shè)計(jì)這個(gè)概念，作為一門(mén)關(guān)注交互體驗(yàn)的新學(xué)科而存在并發(fā)展到今天，他一開(kāi)始給它命名為“軟面（SoftFace）”，由于這個(gè)名字容易讓人想起和當(dāng)時(shí)流行的玩具“椰菜娃娃（CabbagePatchdoll）”，他后來(lái)把它更名為“InteractionDesign”――交互設(shè)計(jì)。
思考
交互設(shè)計(jì)是一種如何讓產(chǎn)品易用并盡可能讓人樂(lè)在其中的技術(shù)，他包括了解目標(biāo)用戶在產(chǎn)品使用過(guò)程中的心理反應(yīng)，了解用戶在同產(chǎn)品交互時(shí)彼此的行為，了解大部分用戶交互行為的習(xí)慣，同時(shí)，還包括了解各種有效的交互方式，并對(duì)它們進(jìn)行增強(qiáng)和擴(kuò)充。交互設(shè)計(jì)還涉及到多個(gè)學(xué)科，以及和多領(lǐng)域多背景人員的溝通。
交互設(shè)計(jì)在產(chǎn)品上的使用也越來(lái)越得到各大網(wǎng)站以及網(wǎng)民的重視，交互設(shè)計(jì)的理論也日益豐滿，經(jīng)典的交互案例也漸漸豐富起來(lái)。
今天我們來(lái)分析一下互聯(lián)網(wǎng)上交互設(shè)計(jì)的一些事件，為大家的研究和應(yīng)用提一些個(gè)人膚淺的看法。
其實(shí)交互可以理解為在使用產(chǎn)品過(guò)程中用戶的感覺(jué)以及針對(duì)感覺(jué)的反饋。從這個(gè)層面上來(lái)看，生活中交互是無(wú)處不在的。交互產(chǎn)生的感覺(jué)就是我們平時(shí)所熟知的五感，即聽(tīng)覺(jué)，視覺(jué)，嗅覺(jué)，味覺(jué)，觸覺(jué)。當(dāng)然你一定要認(rèn)為交互可以給你帶來(lái)第六感，我也不反對(duì)，因?yàn)榇_實(shí)有好的交互讓你有種神秘莫測(cè)的感覺(jué)，而且可以讓你沿著設(shè)計(jì)師預(yù)想的方向去使用產(chǎn)品。其中應(yīng)用于互聯(lián)網(wǎng)的交互設(shè)計(jì)基本上是沒(méi)有嗅覺(jué)和味覺(jué)的，雖然不排除將來(lái)可能會(huì)相關(guān)硬件產(chǎn)品作為這些感覺(jué)的輸出設(shè)備（比如不好看的網(wǎng)站，某輸出設(shè)備直接散發(fā)出臭味，或者某輸出設(shè)備嘗起來(lái)很苦），但是我們目前只討論目前絕大部分輸入設(shè)備帶來(lái)的感覺(jué)。（注一）
分析
我們?cè)谑褂没ヂ?lián)網(wǎng)產(chǎn)品的時(shí)候，聽(tīng)覺(jué)，視覺(jué)，觸覺(jué)是經(jīng)常被觸發(fā)的。在此我對(duì)互聯(lián)網(wǎng)產(chǎn)品的交互事件進(jìn)行了分類(lèi)：聽(tīng)覺(jué)交互事件，視覺(jué)交互事件，鍵盤(pán)交互事件，鼠標(biāo)交互事件。后兩者雖然都屬于觸覺(jué)交互事件，但基于網(wǎng)民的操作習(xí)慣（鍵盤(pán)流，鼠標(biāo)流），我覺(jué)得分開(kāi)會(huì)比較容易討論這個(gè)話題，盡管某些時(shí)候他們都混合在一起，難以分開(kāi)。(注二)
聽(tīng)覺(jué)交互事件
聽(tīng)覺(jué)交互事件顧名思義就是：耳朵聽(tīng)到的聲音給用戶感覺(jué)，并產(chǎn)生的相關(guān)反應(yīng)的過(guò)程。比如WINDOWS的系統(tǒng)提示音，網(wǎng)絡(luò)游戲中的一些音效，很多論壇的短消息提醒，等等。聽(tīng)覺(jué)交互事件的主要交互目的是有四種：提示，警告，反饋，補(bǔ)充。我分別舉例說(shuō)明一下。
提示：比如很多即時(shí)通信軟件的好友上線提示，系統(tǒng)消息提示。
警告：系統(tǒng)操作錯(cuò)誤的警告音，軟件登錄密碼錯(cuò)誤，某些游戲中紅血警告，時(shí)間限定警告，機(jī)會(huì)限定警告。
反饋：注冊(cè)成功，升級(jí)成功，操作按鈕被點(diǎn)擊。
補(bǔ)充：很多FLASH站的背景音樂(lè)，游戲中的戰(zhàn)馬嘶鳴、馬蹄絕塵、刀劍鏗鏘，電子雜志翻頁(yè)音效。
聲音交互事件的交互方式很單一，就是默認(rèn)在交互過(guò)程中發(fā)出聲音。它的優(yōu)點(diǎn)是提醒用戶注意，在輸出設(shè)備（聽(tīng)筒、音箱等）齊全的情況下，信息傳達(dá)穩(wěn)定，用戶容易接收，交互效果最好。但它也有缺點(diǎn)，就是受制于輸出設(shè)備，如果沒(méi)有音箱或者聽(tīng)筒，交互效果就基本沒(méi)有。所以聽(tīng)覺(jué)交互事件一般不獨(dú)立用在互聯(lián)網(wǎng)產(chǎn)品上。
聽(tīng)覺(jué)交互事件的注意事項(xiàng)：
1.不獨(dú)立使用，應(yīng)該與其他交互事件配合使用，至少要與視覺(jué)交互配合。
2.不強(qiáng)制用戶接受，有選擇項(xiàng)可以讓用戶關(guān)閉，不要期待用戶為你去關(guān)輸出設(shè)備。
視覺(jué)交互事件
視覺(jué)交互事件就是眼睛看到的界面給用戶的感覺(jué)，并產(chǎn)生的相關(guān)反應(yīng)的過(guò)程。視覺(jué)交互事件經(jīng)常和其他交互事件混合在一起使用，但它本身可以獨(dú)立使用。比如很多線下活動(dòng)在線上作的網(wǎng)絡(luò)廣告，某些電影的線上海報(bào)，某些牛人的個(gè)人網(wǎng)站通知，流程圖，注冊(cè)時(shí)用戶確認(rèn)已閱讀用戶協(xié)議前不可點(diǎn)擊（或倒計(jì)時(shí)完成后方可點(diǎn)擊）的按鈕等等。
我再舉一個(gè)具體的例子，某網(wǎng)站出現(xiàn)一個(gè)震撼的廣告圖，內(nèi)容為“浙江移動(dòng)推出充值200送200優(yōu)惠活動(dòng)，請(qǐng)到附近營(yíng)業(yè)廳辦理?！庇脩艨赡懿粫?huì)點(diǎn)擊，他會(huì)打電話給移動(dòng)公司詢問(wèn)，或者告知朋友去充值，或者直接就去營(yíng)業(yè)廳辦理了。這個(gè)人只要有了反應(yīng)，交互事件就進(jìn)行得很完美，廣告效果就達(dá)到了。視覺(jué)交互與其他事件交互的結(jié)合也比比皆是，我就不一一枚舉了。
視覺(jué)交互事件是用戶最直觀最容易獲得的體驗(yàn)，因此它需要具備美觀，吸引，沖擊，共鳴等特點(diǎn)。這一部分與界面視覺(jué)設(shè)計(jì)需要關(guān)注的部分重合，但不完全一樣。
視覺(jué)交互事件的注意事項(xiàng)：
1.表達(dá)清晰，有時(shí)甚至要犧牲美觀來(lái)滿足信息清晰的傳達(dá)
2.與目標(biāo)用戶群產(chǎn)生共鳴，從文案、配色、圖案等方面來(lái)提高吸引力，讓用戶有深入了解產(chǎn)品的欲望
3.配合其他交互事件使用時(shí)，盡可能滿足其他交互事件的需求，避免產(chǎn)出好看不中用的華而不實(shí)的產(chǎn)品
鼠標(biāo)交互事件
鼠標(biāo)交互事件顧名思義就是用戶使用產(chǎn)品時(shí)，通過(guò)鼠標(biāo)操作產(chǎn)生感覺(jué)，并產(chǎn)生相關(guān)反應(yīng)的過(guò)程。鼠標(biāo)交互事件是最常用的也是最重要的交互事件。比如導(dǎo)航條，很多性格測(cè)試，不計(jì)名投票系統(tǒng)，一些網(wǎng)頁(yè)版小游戲，某些FLASH廣告，部分網(wǎng)站上出現(xiàn)的快捷菜單等等都屬于鼠標(biāo)交互事件。鼠標(biāo)交互事件包括主鍵點(diǎn)擊，懸浮，雙擊，選中，副鍵點(diǎn)擊，滾動(dòng)等，經(jīng)常體現(xiàn)在超鏈接,JS寫(xiě)的ON系列事件，F(xiàn)LASH的按鈕等場(chǎng)景中。
鼠標(biāo)交互事件因?yàn)椴僮鞅容^簡(jiǎn)單，得到很多入門(mén)級(jí)網(wǎng)民的喜愛(ài)，我們?cè)谟脩趔w驗(yàn)研究測(cè)試中也確實(shí)能找到這一類(lèi)的用戶，就是傳說(shuō)中的“鼠標(biāo)流”，整個(gè)交互過(guò)程只用鼠標(biāo)來(lái)完成，雖然這不能代表所有網(wǎng)民，但確實(shí)代表了一種趨勢(shì)，用戶都喜歡簡(jiǎn)單的交互方式，只不過(guò)我們更關(guān)注的是有效，如果用戶點(diǎn)來(lái)點(diǎn)去，找不到入口（出口），達(dá)不到目的，那么這個(gè)鼠標(biāo)交互事件就是失敗的，需要改進(jìn)了。
既然鼠標(biāo)交互事件有這些需求，我們就應(yīng)該在設(shè)計(jì)的時(shí)候權(quán)衡簡(jiǎn)單和有效的關(guān)系了。必須需要的步驟，我們一步都不能省，我相信用戶不會(huì)吝惜一次點(diǎn)擊的。另外一方面，我們不能因?yàn)橛脩舨辉诤醵嘁淮吸c(diǎn)擊，就讓用戶不知道先點(diǎn)哪個(gè)的地方或者不停地點(diǎn)擊。再舉個(gè)例子，網(wǎng)站的快捷菜單，可以直達(dá)很多地方。我們不能把所有的頁(yè)面都列出來(lái)，那樣就變成sitemap了，在某個(gè)頁(yè)面上的快捷菜單最好只列出重要的，常用的，或者相關(guān)的鏈接就行了；也不能只列一個(gè)“幫助中心”的快捷鏈接，盡管我相信你的幫助中心作得非常有條理，用戶還是需要點(diǎn)了再點(diǎn)，一級(jí)接一級(jí)的去找到相關(guān)的幫助，如果能直接到本頁(yè)面相關(guān)的幫助不是更好？這個(gè)權(quán)衡非常具有挑戰(zhàn)性，希望大家在作交互設(shè)計(jì)的時(shí)候多考慮，多調(diào)查，多試驗(yàn)，相信能找到一個(gè)比較好的方案。
鼠標(biāo)交互事件的注意事項(xiàng)：
1.傻瓜式：簡(jiǎn)單方便，在滿足用戶使用需求的同時(shí)，盡量減少點(diǎn)擊次數(shù)。
2.提示明顯：讓用戶知道哪里地方可以點(diǎn)擊，點(diǎn)擊哪里可以最快達(dá)成目標(biāo)。這個(gè)需要在界面及文案上對(duì)用戶給予引導(dǎo)。
3.反饋及時(shí)：用戶在鼠標(biāo)交互事件產(chǎn)生之后，能給以及時(shí)的反饋，比如鼠標(biāo)經(jīng)過(guò)變色，點(diǎn)擊錯(cuò)誤發(fā)出警告，跳轉(zhuǎn)頁(yè)面后能直接到相關(guān)的位置，AJAX請(qǐng)求后要反饋出明顯的視覺(jué)提醒或者頁(yè)面變化
4.層次分明：用戶點(diǎn)擊之后，能有整個(gè)操作過(guò)程的提示，在操作失誤后可以返回重新操作，已經(jīng)點(diǎn)擊過(guò)的是不是需要記錄狀態(tài)等等。
鍵盤(pán)交互事件
鍵盤(pán)交互事件就是用戶使用產(chǎn)品過(guò)程中，通過(guò)鍵盤(pán)操作產(chǎn)生交互體驗(yàn)的過(guò)程。鍵盤(pán)交互在網(wǎng)絡(luò)產(chǎn)品的交互過(guò)程應(yīng)用得相當(dāng)普遍，比如撰寫(xiě)日志，添加評(píng)論，ENTER提交，小鍵盤(pán)翻頁(yè)，TAB切換焦點(diǎn)，某些網(wǎng)頁(yè)游戲的快捷鍵等等。鍵盤(pán)交互事件通常和鼠標(biāo)交互混合使用，構(gòu)成了互聯(lián)網(wǎng)產(chǎn)品的主要交互行為。用戶在進(jìn)行鍵盤(pán)交互之前，對(duì)時(shí)間和精力的花費(fèi)有一定的預(yù)期，由于多年互聯(lián)網(wǎng)產(chǎn)品交互過(guò)程對(duì)用戶習(xí)慣的培養(yǎng)，用戶在進(jìn)行鍵盤(pán)交互事件的時(shí)候耐心明顯多于其他交互事件。所以鍵盤(pán)交互事件要充分利用用戶對(duì)此事件的耐心，并且要充分尊重用戶的習(xí)慣。舉例說(shuō)明：文本框里面的提示語(yǔ)在焦點(diǎn)產(chǎn)生的時(shí)候要有全選功能或者刪除功能；文本框輸入完成后要有ENTER提交的功能，而文本域輸入完成后則是CTRL+ENTER作為提交，因?yàn)镋NTER此時(shí)會(huì)作為換行的用途；有些文本輸入有字?jǐn)?shù)限制時(shí)需要提示剩余字?jǐn)?shù)；有些文本域輸入有時(shí)效性，需要有保存草稿功能，或者有時(shí)效性的提示；在需要設(shè)置快捷鍵的時(shí)候不要和系統(tǒng)默認(rèn)的一些快捷相沖突，如果沖突了還不如不要。
尊重主流的操作習(xí)慣非常重要，在此特別提出。比如我很不喜歡QQ的CTRL+ALT+Z的默認(rèn)提取消息，因?yàn)檫@是PHOTOSHOP的返回上一步的快捷鍵，這個(gè)設(shè)置非常干擾我的工作；我很喜歡GOOGLE文檔里的CTRL+Z(俗稱(chēng)后悔鍵)和CTRL+Y（俗稱(chēng)恢復(fù)鍵），因?yàn)樗洗蠖鄶?shù)互聯(lián)網(wǎng)產(chǎn)品的操作習(xí)慣。雖然有些習(xí)慣比較偏向個(gè)人，但我相信一定有很多產(chǎn)品自作聰明的設(shè)置了一些快捷鍵，反而干擾了一些常用軟件或者系統(tǒng)的默認(rèn)快捷鍵，本來(lái)是一個(gè)好的交互意愿，卻取得了相反的交互體驗(yàn)。
鍵盤(pán)交互事件的注意事項(xiàng)：
1.安全性：鍵盤(pán)交互事件可能透露一些用戶的個(gè)人信息，或者泄露一些隱私，好的互聯(lián)網(wǎng)產(chǎn)品應(yīng)該給于用戶以保護(hù)。
2.穩(wěn)定性：在利用用戶對(duì)此交互事件的耐心來(lái)收集信息或者獲得反饋的同時(shí)，要保證用戶的耐心要有成果，不能讓用戶浪費(fèi)時(shí)間和精力，結(jié)果前功盡棄，或者功虧一簣。
3.一致性：不要指望用戶對(duì)鍵盤(pán)交互事件擁有高超的辨別能力而采取不同的操作方式，如果你采用了一種交互方式，盡量在相同或者相似的交互場(chǎng)景中延續(xù)使用相同的交互方式，退一步說(shuō)，不要用不一樣的交互方式，再退一步說(shuō)，千萬(wàn)不要用相反的交互方式。這一點(diǎn)對(duì)視覺(jué)交互也很重要，但對(duì)于能稱(chēng)作界面設(shè)計(jì)師的人（不包含圖片處理員）來(lái)說(shuō)，一般這種一致性是可以保持的。
4.尊重習(xí)慣：目前互聯(lián)網(wǎng)產(chǎn)品中有一些是非常偉大（或者說(shuō)強(qiáng)大）的產(chǎn)品，不管交互方式是否絕對(duì)完美，至少他已經(jīng)用市場(chǎng)占有率和時(shí)間的延續(xù)性培養(yǎng)了用戶一些既有的習(xí)慣，交互設(shè)計(jì)師不要輕易打破用戶的現(xiàn)有習(xí)慣，這并不是說(shuō)不能有創(chuàng)新，而是指在現(xiàn)有習(xí)慣上優(yōu)化和提升交互體驗(yàn)，是對(duì)現(xiàn)有交互方式的延展。
總結(jié)
以上是我對(duì)互聯(lián)網(wǎng)產(chǎn)品的交互事件所作的分類(lèi)和分析，盡管現(xiàn)實(shí)產(chǎn)品的交互事件都很復(fù)雜，但基本是這幾種事件的組合，如果我們能在基礎(chǔ)的事件上作好交互設(shè)計(jì)，那把復(fù)雜的交互事件作好希望就會(huì)很大。
另外業(yè)內(nèi)對(duì)一個(gè)產(chǎn)品的交互設(shè)計(jì)作得好不好，沒(méi)有一個(gè)標(biāo)準(zhǔn)，通過(guò)以上分析，雖然我們依然無(wú)法制定出這一標(biāo)準(zhǔn)，但是我們可以從上面的分析看出一個(gè)交互設(shè)計(jì)是不是作得不好。在我看來(lái)，這也是一個(gè)進(jìn)步了。我希望各位同行都來(lái)貢獻(xiàn)自己的力量，將好的交互設(shè)計(jì)應(yīng)用在更多的產(chǎn)品，讓用戶得到更好的體驗(yàn)。
個(gè)人的一些分析，難免有不足，希望大家補(bǔ)充和指正。(本文較長(zhǎng)，無(wú)圖，枯燥，理論，對(duì)能讀到這里的朋友表示感謝)
補(bǔ)充
注一:
與宗羲討論時(shí)，宗羲認(rèn)為：“五感”應(yīng)該是交互的“輸入”(input)，也就是通過(guò)人類(lèi)的“五感”作為外界的信息進(jìn)入大腦，而交互產(chǎn)生的感覺(jué)應(yīng)該摘引《情感化設(shè)計(jì)》里所描速的三層來(lái)描述，即：本能層、行為層、反思層。
宗羲的解釋非常正確，但我這里說(shuō)的五感是具體交互事件產(chǎn)生的感覺(jué)，是點(diǎn)到線來(lái)分析問(wèn)題的（縱向），而情感化設(shè)計(jì)里所提到的三層結(jié)構(gòu)是點(diǎn)到面來(lái)分析問(wèn)題（橫向）。個(gè)人感覺(jué)并不沖突。
注二:
與宗羲繼續(xù)討論時(shí)，宗羲認(rèn)為：我個(gè)人覺(jué)得應(yīng)該從輸入和輸出來(lái)區(qū)分。聽(tīng)覺(jué)交互事件，視覺(jué)交互事件是交互中的輸入(對(duì)于人類(lèi)來(lái)說(shuō)，下同)，即交互設(shè)備將信息反饋給人類(lèi)的過(guò)程，鍵盤(pán)交互事件，鼠標(biāo)交互事件是輸出信息，即人類(lèi)將反饋輸出給交互設(shè)備。輸入+輸出就形成了“交互”。
輸入和輸出的區(qū)分方法是可行的，但用來(lái)歸納交互事件我覺(jué)得有不足的地方，文中有例子表明有些交互事件是直接到達(dá)反思層的，可能對(duì)交互設(shè)備根本沒(méi)有輸出任何信息。
所以雖然有了宗羲的提醒，本文還有留下一個(gè)遺憾，就是文章結(jié)構(gòu)不夠嚴(yán)謹(jǐn)。點(diǎn)到面的結(jié)構(gòu)經(jīng)過(guò)疊加，可以形成整體，而點(diǎn)到線的結(jié)構(gòu)是不足的，如果線與線之間的關(guān)系沒(méi)有明確表達(dá)出來(lái)，形成的整體是有缺陷的。
|