中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 藝術(shù)設(shè)計 > 設(shè)計理論 > 互聯(lián)網(wǎng)產(chǎn)品交互事件分析
Web易用性大師Jakob Nielsen訪談 回到列表 音樂與設(shè)計——理解色彩應(yīng)用方法
 互聯(lián)網(wǎng)產(chǎn)品交互事件分析

作者:谷隱 時間: 2009-09-28 文檔類型:合作網(wǎng)站提供 來自:Taobao.com UED Team

挖墳

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

思考

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

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

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

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

分析

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

聽覺交互事件

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

  • 提示:比如很多即時通信軟件的好友上線提示,系統(tǒng)消息提示。
  • 警告:系統(tǒng)操作錯誤的警告音,軟件登錄密碼錯誤,某些游戲中紅血警告,時間限定警告,機會限定警告。
  • 反饋:注冊成功,升級成功,操作按鈕被點擊。
  • 補充:很多FLASH站的背景音樂,游戲中的戰(zhàn)馬嘶鳴、馬蹄絕塵、刀劍鏗鏘,電子雜志翻頁音效。

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

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

  1. 不獨立使用,應(yīng)該與其他交互事件配合使用,至少要與視覺交互配合。
  2. 不強制用戶接受,有選擇項可以讓用戶關(guān)閉,不要期待用戶為你去關(guān)輸出設(shè)備。

視覺交互事件

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

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

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

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

  1. 表達(dá)清晰,有時甚至要犧牲美觀來滿足信息清晰的傳達(dá)
  2. 與目標(biāo)用戶群產(chǎn)生共鳴,從文案、配色、圖案等方面來提高吸引力,讓用戶有深入了解產(chǎn)品的欲望
  3. 配合其他交互事件使用時,盡可能滿足其他交互事件的需求,避免產(chǎn)出好看不中用的華而不實的產(chǎn)品

鼠標(biāo)交互事件

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

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

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

鼠標(biāo)交互事件的注意事項:

  1. 傻瓜式:簡單方便,在滿足用戶使用需求的同時,盡量減少點擊次數(shù)。
  2. 提示明顯:讓用戶知道哪里地方可以點擊,點擊哪里可以最快達(dá)成目標(biāo)。這個需要在界面及文案上對用戶給予引導(dǎo)。
  3. 反饋及時:用戶在鼠標(biāo)交互事件產(chǎn)生之后,能給以及時的反饋,比如鼠標(biāo)經(jīng)過變色,點擊錯誤發(fā)出警告,跳轉(zhuǎn)頁面后能直接到相關(guān)的位置,AJAX請求后要反饋出明顯的視覺提醒或者頁面變化
  4. 層次分明:用戶點擊之后,能有整個操作過程的提示,在操作失誤后可以返回重新操作,已經(jīng)點擊過的是不是需要記錄狀態(tài)等等。

鍵盤交互事件

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

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

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

  1. 安全性:鍵盤交互事件可能透露一些用戶的個人信息,或者泄露一些隱私,好的互聯(lián)網(wǎng)產(chǎn)品應(yīng)該給于用戶以保護。
  2. 穩(wěn)定性:在利用用戶對此交互事件的耐心來收集信息或者獲得反饋的同時,要保證用戶的耐心要有成果,不能讓用戶浪費時間和精力,結(jié)果前功盡棄,或者功虧一簣。
  3. 一致性:不要指望用戶對鍵盤交互事件擁有高超的辨別能力而采取不同的操作方式,如果你采用了一種交互方式,盡量在相同或者相似的交互場景中延續(xù)使用相同的交互方式,退一步說,不要用不一樣的交互方式,再退一步說,千萬不要用相反的交互方式。這一點對視覺交互也很重要,但對于能稱作界面設(shè)計師的人(不包含圖片處理員)來說,一般這種一致性是可以保持的。
  4. 尊重習(xí)慣:目前互聯(lián)網(wǎng)產(chǎn)品中有一些是非常偉大(或者說強大)的產(chǎn)品,不管交互方式是否絕對完美,至少他已經(jīng)用市場占有率和時間的延續(xù)性培養(yǎng)了用戶一些既有的習(xí)慣,交互設(shè)計師不要輕易打破用戶的現(xiàn)有習(xí)慣,這并不是說不能有創(chuàng)新,而是指在現(xiàn)有習(xí)慣上優(yōu)化和提升交互體驗,是對現(xiàn)有交互方式的延展。

總結(jié)

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

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

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

補充

注一:

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

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

注二:

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

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

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

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

本文鏈接:http://m.95time.cn/design/doc/2009/7038.asp 

出處:Taobao.com UED Team
責(zé)任編輯:bluehearts

相關(guān)文章 更多相關(guān)鏈接
小標(biāo)點,大作用
內(nèi)容為空時提交如何處理
交互設(shè)計模式——前言
費茨法則在交互設(shè)計中的應(yīng)用
圖片投射方法的運用
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計比賽 網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大!熬•自然”設(shè)計大賽開啟
國際體驗設(shè)計大會7月將在京舉行
中國國防科技信息中心標(biāo)志征集
云計算如何讓安全問題可控
云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會
阿里行云
云手機年終巨獻,送禮標(biāo)配299起
阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設(shè)計大賽
欄目最新 欄目最新列表
國外創(chuàng)意名片設(shè)計欣賞
情感化界面
線下項目工作流程(歸納篇)
線下項目工作流程(分析篇)
簡約而不簡單-Practise平面設(shè)計
培養(yǎng)用戶的使用習(xí)慣
優(yōu)秀名片設(shè)計
專題頭圖的秘密武器
別讓UED忽悠你(2):多少錢一斤
別讓UED忽悠你(1):天生的矛盾

藍(lán)色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

轉(zhuǎn)載要求:轉(zhuǎn)載之圖片、文件,鏈接請不要盜鏈到本站,且不準(zhǔn)打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設(shè)計作品,如需使用,請與原作者聯(lián)系,版權(quán)歸原作者所有,文章若有侵犯作者版權(quán),請與我們聯(lián)系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項有關(guān)法律法規(guī)
·承擔(dān)一切因您的行為而直接或間接導(dǎo)致的民事或刑事法律責(zé)任
·本站評論管理人員有權(quán)保留或刪除其管轄評論中的任意內(nèi)容
·您在本站發(fā)表的作品,本站有權(quán)在網(wǎng)站內(nèi)轉(zhuǎn)載或引用
·參與本評論即表明您已經(jīng)閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業(yè)書推薦 更多內(nèi)容
網(wǎng)站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網(wǎng)站UI 設(shè)計之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計》
犀利開發(fā)—jQuery內(nèi)核詳解與實踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2