交互設(shè)計(jì)(精華)課件

交互設(shè)計(jì)基礎(chǔ)Banlon

2008/4/6

交互設(shè)計(jì)基礎(chǔ)Banlon

2008/4/6

www.uese目錄交互設(shè)計(jì)定義和發(fā)展交互設(shè)計(jì)理論交互設(shè)計(jì)方法和原則交互行業(yè)信息QA您可以通過“幻燈片放映”查看這些幻燈片，也可以在普通視圖中通過瀏覽的方式來查看。設(shè)計(jì)這些幻燈片，是為了讓您在瀏覽“界面交互設(shè)計(jì)基礎(chǔ)”中通過作者設(shè)定的目錄結(jié)構(gòu)獲得一些關(guān)于交互設(shè)計(jì)理念的啟發(fā)!目錄交互設(shè)計(jì)定義和發(fā)展交互設(shè)計(jì)理論交互設(shè)計(jì)方法和原則交互行業(yè)先介紹一個(gè)人……先介紹一個(gè)人……Numal男25歲祖籍山東農(nóng)村學(xué)歷大學(xué)本科公司以及職業(yè)任職于知名互聯(lián)網(wǎng)公司，從事設(shè)計(jì)相關(guān)工作性格活潑，愛開玩笑，有時(shí)候會(huì)多愁善感愛好足球、閱讀、旅行、寫blog補(bǔ)充由于生在農(nóng)村，接觸互聯(lián)網(wǎng)的機(jī)會(huì)很少，直到高中畢業(yè)才知道互聯(lián)網(wǎng)是什么?，F(xiàn)在非常迷戀網(wǎng)絡(luò)，每天閑暇的時(shí)候都想在互聯(lián)網(wǎng)上閑逛。Numal男25歲祖籍山東農(nóng)村學(xué)歷大學(xué)本科公司以及職業(yè)任職于8年前，Numal高中畢業(yè)，朋友告訴他注冊(cè)一個(gè)電子郵箱就可以方便的給人寫信，讓他也去弄一個(gè)。于是他就去上網(wǎng)了。他看到注冊(cè)頁面時(shí)，腦袋完全不清楚面前是什么東西。他有了一串疑問：電子郵箱是什么東西？新用戶是什么？郵箱名是什么？……他發(fā)現(xiàn)自己很笨，什么都不懂，非常的懊惱。8年前，Numal高中畢業(yè)，朋友告訴他注冊(cè)一個(gè)電子郵箱就可以兩年前，Numal推薦一個(gè)不常上網(wǎng)的人去使用自己設(shè)計(jì)的網(wǎng)站：豆瓣他朋友說發(fā)現(xiàn)豆瓣的注冊(cè)很簡(jiǎn)潔。他朋友說很清楚自己要做什么事情他朋友說很放心他朋友說沒有出錯(cuò)他朋友說很快完成了注冊(cè)整個(gè)過程他朋友很愉快，很有安全感兩年前，Numal推薦一個(gè)不常上網(wǎng)的人去使用自己設(shè)計(jì)的網(wǎng)站：是什么讓網(wǎng)站體驗(yàn)幾年間變得這么好？是什么讓Numal的朋友如此愉悅有安全感？是什么讓網(wǎng)站體驗(yàn)幾年間變得這么好？交互設(shè)計(jì)定義和發(fā)展交互設(shè)計(jì)定義和發(fā)展Numal大學(xué)上的是設(shè)計(jì)專業(yè)。在大學(xué)最后兩年，他的方向轉(zhuǎn)向了交互設(shè)計(jì)。通過學(xué)習(xí)，他了解了很多交互設(shè)計(jì)的基本概念。Numal大學(xué)上的是設(shè)計(jì)專業(yè)。交互設(shè)計(jì)定義（一）簡(jiǎn)單的說，交互設(shè)計(jì)是人工制品、環(huán)境和系統(tǒng)的行為，以及傳達(dá)這種行為的外形元素的設(shè)計(jì)與定義。不像傳統(tǒng)的設(shè)計(jì)學(xué)科主要關(guān)注形式，最近則是關(guān)注內(nèi)容和內(nèi)涵，而交互設(shè)計(jì)首先旨在規(guī)劃和描述事物的行為方式，然后描述傳達(dá)這種行為的最有效形式。艾蘭.庫珀(alancooper)VB之父交互設(shè)計(jì)之父微軟視窗先鋒獎(jiǎng)軟件夢(mèng)幻獎(jiǎng)得主庫伯交互設(shè)計(jì)公司創(chuàng)始人交互設(shè)計(jì)定義（一）簡(jiǎn)單的說，交互設(shè)計(jì)是人工制品、環(huán)境和系統(tǒng)的交互設(shè)計(jì)定義（二）設(shè)計(jì)支持人們?nèi)粘９ぷ髋c生活的交互式產(chǎn)品。具體地說，交互設(shè)計(jì)就是關(guān)于創(chuàng)建新的用戶體驗(yàn)的問題，其目的是增強(qiáng)和擴(kuò)充人們工作、通信及交互的方式。Winnogard（1997）把交互設(shè)計(jì)描述為“人類交流和交互空間的設(shè)計(jì)”HelenSharp從用戶角度來說，交互設(shè)計(jì)是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術(shù)，它致力于了解目標(biāo)用戶和他們的期望，了解用戶在同產(chǎn)品交互時(shí)彼此的行為，了解“人”本身的心理和行為特點(diǎn)，同時(shí)，還包括了解各種有效的交互方式，并對(duì)它們進(jìn)行增強(qiáng)和擴(kuò)充。交互設(shè)計(jì)還涉及到多個(gè)學(xué)科，以及和多領(lǐng)域多背景人員的溝通。DeDream交互設(shè)計(jì)定義（二）設(shè)計(jì)支持人們?nèi)粘９ぷ髋c生活的交互式產(chǎn)品。具Numal在學(xué)習(xí)時(shí)，接觸到了幾個(gè)很容易混淆的概念。后來經(jīng)過辨析，他這樣理解了……Numal在學(xué)習(xí)時(shí)，接觸到了幾個(gè)很容易混淆的概念。后來經(jīng)過辨幾個(gè)概念交互設(shè)計(jì)設(shè)計(jì)行為，偏向于計(jì)算機(jī)的人機(jī)交互人與機(jī)器相互信息交換交互一種行為幾個(gè)概念交互設(shè)計(jì)幾個(gè)概念可用性標(biāo)準(zhǔn)用戶體驗(yàn)?zāi)繕?biāo)UCD原則方法幾個(gè)概念可用性簡(jiǎn)單復(fù)雜簡(jiǎn)單交互的廣義發(fā)展歷程舊石器時(shí)代簡(jiǎn)單的單一的機(jī)器大工業(yè)時(shí)代復(fù)雜的繁瑣的出錯(cuò)率高的危險(xiǎn)的信息時(shí)代效率易用性簡(jiǎn)單復(fù)雜簡(jiǎn)單交互的廣義發(fā)展歷程舊石器時(shí)代交互設(shè)計(jì)行業(yè)的發(fā)展初創(chuàng)期（1929-1970）1959年，美國學(xué)者B.Shackel提出了人機(jī)界面的第一篇文獻(xiàn)《關(guān)于計(jì)算機(jī)控制臺(tái)設(shè)計(jì)的人機(jī)工程學(xué)》1960年，LikliderJCK首次提出“人機(jī)緊密共棲的概念，被視為人機(jī)界面學(xué)的啟蒙觀點(diǎn)1969年，召開了第一次人機(jī)系統(tǒng)國際大會(huì)，同年第一份專業(yè)雜志"國際人機(jī)研究（IJMMS）"創(chuàng)刊。奠基期（1970-1979）從1970年到1973年出版了四本與計(jì)算機(jī)相關(guān)的人機(jī)工程學(xué)專著1970年成立了兩個(gè)HCI研究中心：一個(gè)是英國的Loughbocough大學(xué)的HUSAT研究中心，另一個(gè)是美國Xerox公司的PaloAlto研究中心發(fā)展期（1980-1995）理論方面，從人機(jī)工程學(xué)獨(dú)立出來，更加強(qiáng)調(diào)認(rèn)知心理學(xué)以及行為學(xué)和社會(huì)學(xué)等學(xué)科的理論指導(dǎo)實(shí)踐范疇方面，從人機(jī)界面拓延開來，強(qiáng)調(diào)計(jì)算機(jī)對(duì)于人的反饋交互作用。"人機(jī)界面"一詞被"人機(jī)交互"所取代。HCI中的"I"，也由"Interface(界面/接口)"變成了"Interaction(交互)"。提高期（1996-

）人機(jī)交互的研究重點(diǎn)放在了智能化交互，多模態(tài)（多通道）-多媒體交互，虛擬交互以及人機(jī)協(xié)同交互等方面，也就是放在"以人為在中心"的人機(jī)交互技術(shù)方面。交互設(shè)計(jì)行業(yè)的發(fā)展初創(chuàng)期（1929-1970）1959年，美學(xué)科人類工程學(xué)心理學(xué)認(rèn)知科學(xué)信息學(xué)工程學(xué)計(jì)算機(jī)科學(xué)軟件工程社會(huì)學(xué)人類學(xué)語言學(xué)美學(xué)……設(shè)計(jì)圖形設(shè)計(jì)產(chǎn)品設(shè)計(jì)商業(yè)美術(shù)電影產(chǎn)業(yè)服務(wù)業(yè)……交互設(shè)計(jì)人機(jī)交互（HCI）交互設(shè)計(jì)的范疇學(xué)科設(shè)計(jì)交互設(shè)計(jì)人機(jī)交互交互設(shè)計(jì)的范疇交互設(shè)計(jì)的一些理論交互設(shè)計(jì)的一些理論交互的三個(gè)要素人界面機(jī)器/系統(tǒng)交互的三個(gè)要素人界面機(jī)器/系統(tǒng)可是，Numal發(fā)現(xiàn)在人機(jī)工程的介紹中，三要素是另外的三個(gè)……可是，Numal發(fā)現(xiàn)在人機(jī)工程的介紹中，三要素是另外的三個(gè)…交互三個(gè)要素人環(huán)境機(jī)器交互三個(gè)要素人環(huán)境機(jī)器交互過程是一個(gè)輸入和輸出的過程，人通過人機(jī)界面向計(jì)算機(jī)輸入指令，計(jì)算機(jī)經(jīng)過處理后把輸出結(jié)果呈現(xiàn)給用戶。人和計(jì)算機(jī)之間的輸入和輸出的形式是多種多樣的，因此交互的形式也是多樣化的。數(shù)據(jù)交互圖像交互聲音交互動(dòng)作交互基礎(chǔ)的交互方式交互過程是一個(gè)輸入和輸出的過程，人通過人機(jī)界面向計(jì)算機(jī)輸入指平衡5E法有效(Effective)效率(Efficient)易學(xué)(EasyToLearn)吸引人(Engaging)容錯(cuò)性(ErrorTolrant)平衡5E法有效(Effective)交互設(shè)計(jì)的方法和原理交互設(shè)計(jì)的方法和原理Numal了解過了交互設(shè)計(jì)的相關(guān)知識(shí)后，想在工作中實(shí)踐一下，可是怎么下手呢？接下來他開始研究交互設(shè)計(jì)的方法……Numal了解過了交互設(shè)計(jì)的相關(guān)知識(shí)后，想在工作中實(shí)踐一下，UCD設(shè)計(jì)理想流程簡(jiǎn)單說明：1.創(chuàng)造一些用戶2.找出重要的活動(dòng)3.找出用戶模型--用戶期望如何完成這些活動(dòng)4.草擬出初版的設(shè)計(jì)5.一直反復(fù)把設(shè)計(jì)修改得更容易,直到虛構(gòu)用戶能輕易使用為止6.找真人來看著他們?cè)囉媚愕能浖邮招枨笳{(diào)研分析交互設(shè)計(jì)視覺設(shè)計(jì)可用性測(cè)試上線UCD設(shè)計(jì)理想流程簡(jiǎn)單說明：接收需求調(diào)研分析交互設(shè)計(jì)視覺設(shè)計(jì)交互設(shè)計(jì)所做的事情可識(shí)別的形狀布局尺寸色彩可感知記憶的語言的含義色彩的隱喻相對(duì)位置層級(jí)、關(guān)系……可物理衡量的流程點(diǎn)擊次數(shù)移動(dòng)距離姿勢(shì)轉(zhuǎn)換方式……交互設(shè)計(jì)所做的事情可識(shí)別的形狀布局尺寸色彩可感知記憶的語言的交互設(shè)計(jì)的核心要素精確描述我們的用戶以及用戶希望達(dá)到的目標(biāo)，定義幾個(gè)典型角色，并用故事的形式表達(dá)出來目標(biāo)用戶產(chǎn)品角色篩選分類腳本任務(wù)場(chǎng)景交互設(shè)計(jì)的核心要素精確描述我們的用戶以及用戶希望達(dá)到的目標(biāo)，目標(biāo)用戶目標(biāo)生活目標(biāo)體驗(yàn)?zāi)繕?biāo)最終目標(biāo)產(chǎn)品目標(biāo)利潤(rùn)市場(chǎng)目標(biāo)是行動(dòng)的驅(qū)動(dòng)力，產(chǎn)品的功能和行為必須通過任務(wù)來解決目標(biāo)產(chǎn)品成功的關(guān)鍵是目標(biāo)，而不是特性成功的交互設(shè)計(jì)師應(yīng)該對(duì)目標(biāo)高度敏感目標(biāo)用戶目標(biāo)目標(biāo)是行動(dòng)的驅(qū)動(dòng)力，產(chǎn)品的功能和行為必須通過任務(wù)Numal在思考，那么豆瓣的目標(biāo)是什么呢？Numal在思考，那么豆瓣的目標(biāo)是什么呢？目標(biāo)用戶目標(biāo)生活目標(biāo)：一種新的消遣方式體驗(yàn)?zāi)繕?biāo)：容易使用、方便、舒適最終目標(biāo)：撰寫瀏覽書評(píng)，找到自己興趣相同的人產(chǎn)品目標(biāo)市場(chǎng)：聚集文化人群，創(chuàng)建文化交流社區(qū)目標(biāo)用戶目標(biāo)角色簡(jiǎn)單的說，角色就是為我們的產(chǎn)品虛擬的一個(gè)典型用戶。我們?cè)谠O(shè)計(jì)是，就可以專門為“他”設(shè)計(jì)。角色是一種強(qiáng)有力的交互設(shè)計(jì)工具角色的確定給設(shè)計(jì)帶來的好處：該做什么便于溝通提高效率解決邊緣設(shè)計(jì)……角色簡(jiǎn)單的說，角色就是為我們的產(chǎn)品虛擬的一個(gè)典型用戶。我們?cè)诮巧话悴怀^兩個(gè)人一男一女一般將用戶定義為初級(jí)用戶和中級(jí)用戶。特殊產(chǎn)品才定義高級(jí)用戶。角色描述中應(yīng)該包含：一張相片人物基本特征于產(chǎn)品相關(guān)的性格、能力、愛好等介紹會(huì)用到的產(chǎn)品、功能介紹角色一般不超過兩個(gè)人Numal感覺角色設(shè)計(jì)很有興趣，于是就針對(duì)自己負(fù)責(zé)的產(chǎn)品，制定了一個(gè)角色Numal感覺角色設(shè)計(jì)很有興趣，于是就針對(duì)自己負(fù)責(zé)的產(chǎn)品，制一個(gè)定義角色的例子小翠女22歲學(xué)歷大學(xué)本科公司以及職業(yè)政府文員性格活潑，愛開玩笑，但很有禮貌愛好讀書、旅行、寫blog補(bǔ)充小翠的單位可以上網(wǎng)，他每天的工作比較輕松，經(jīng)常上網(wǎng)看看電子版的小說、散文、詩歌等。她是文科的學(xué)生，對(duì)電腦知識(shí)了解很少，對(duì)網(wǎng)絡(luò)的認(rèn)識(shí)很淺。她喜歡交朋友，跟人屬于自來熟的那種。一個(gè)定義角色的例子小翠女22歲學(xué)歷大學(xué)本科公司以及職業(yè)政府文Numal做完角色設(shè)計(jì)后，整個(gè)項(xiàng)目組都很認(rèn)可。Numal還發(fā)現(xiàn)有了角色之后項(xiàng)目組成員間的討論變得簡(jiǎn)單和高效了。Numal做完角色設(shè)計(jì)后，整個(gè)項(xiàng)目組都很認(rèn)可。Numal還發(fā)一段經(jīng)典對(duì)話定義角色之前莫名（產(chǎn)品經(jīng)理）：我想豆瓣用戶需要打印功能Numal：我想他們不會(huì)需要打印功能的，打印功能對(duì)豆瓣的用戶沒有什么意義吧莫名：但是也許有人會(huì)希望要打印功能呢？Numal：當(dāng)然有這種可能，但是這種需求很少啊……定義角色之后莫名（產(chǎn)品經(jīng)理）：我想豆瓣用戶需要打印功能Numal：小翠不需要打印功能莫名（產(chǎn)品經(jīng)理）：我想應(yīng)該有人會(huì)用到打印功能的。Numal：我我們是為小翠設(shè)計(jì)的這個(gè)產(chǎn)品，不是為其他的人。我們不需要做這個(gè)功能。莫名：哦，那好吧一段經(jīng)典對(duì)話定義角色之前莫名（產(chǎn)品經(jīng)理）：我想豆瓣用戶需要打腳本人和他們的活動(dòng)組成的故事使用具體的故事來構(gòu)造模擬用戶的可能行為或者講述設(shè)計(jì)方案關(guān)注人物角色以及其心智模型，目標(biāo)和活動(dòng)，有可能包括對(duì)環(huán)境的考慮基于任務(wù)的腳本基于場(chǎng)景的腳本腳本人和他們的活動(dòng)組成的故事基于任務(wù)的腳本一個(gè)場(chǎng)景腳本的例子1.早上，小翠來到辦公室，拿起電話給朋友打了個(gè)電話，然后打開電腦，打開郵箱，開始一天的工作2.在開始工作之前，她上了一下豆瓣，看看是否有朋友給他留言或者回復(fù)了她的評(píng)論。3.小翠收到一封郵件，來此辦公室主任的，告知同事strong今天請(qǐng)假可能來不了，如果有事情幫忙處理一下。4.如往常一樣，把郵件中的一些事情處理一下，需要打印的就打印，需要蓋章的就蓋章。5.在工作過程中，她總是開著QQ，經(jīng)常有朋友給他發(fā)個(gè)鏈接讓她看。當(dāng)她正在閱讀一封剛收到的郵件時(shí)，一個(gè)好友給她發(fā)來了豆瓣的一個(gè)網(wǎng)址，她便會(huì)放下手頭的工作開始瀏覽網(wǎng)頁。......一個(gè)場(chǎng)景腳本的例子1.早上，小翠來到辦公室，拿起電話給朋友打一個(gè)場(chǎng)景腳本的例子該腳本提綱試圖解決的問題：1.產(chǎn)品使用時(shí)的設(shè)置是什么？2.是否會(huì)被使用。角色最終期望的結(jié)果很長(zhǎng)時(shí)間？3.人物角色是否經(jīng)常被打斷？4.和它一起使用的其他產(chǎn)品是什么？5.人物的技巧使用頻繁程度有多高？6.為了滿足人物角色的目標(biāo)，角色需要完成哪些主要活動(dòng)是什么？一個(gè)場(chǎng)景腳本的例子該腳本提綱試圖解決的問題：交互設(shè)計(jì)時(shí)需關(guān)注的可用性指標(biāo)易學(xué)習(xí)容易使用容錯(cuò)性有效性用戶滿意度安全性

ISO9241/11中的定義是：可用性是一個(gè)多因素概念，涉及到容易學(xué)習(xí)、容易使用、系統(tǒng)的有效性、用戶滿意，以及把這些因素與實(shí)際使用環(huán)境聯(lián)系在一起針對(duì)特定目標(biāo)的評(píng)價(jià)。交互設(shè)計(jì)時(shí)需關(guān)注的可用性指標(biāo)易學(xué)習(xí)容易使用容錯(cuò)性有效性用戶滿常用交互設(shè)計(jì)原則可視性功能可性越好，越方便用戶發(fā)現(xiàn)和了解使用方法反饋返回與活動(dòng)相關(guān)的信息，以便用戶能夠繼續(xù)下一步操作限制在特定時(shí)刻顯示用戶操作，以防誤操作映射準(zhǔn)確表達(dá)控制及其效果之間的關(guān)系一致性保證同一系統(tǒng)的同一功能的表現(xiàn)及操作一致啟發(fā)性充分準(zhǔn)確的操作提示常用交互設(shè)計(jì)原則可視性交互設(shè)計(jì)準(zhǔn)則設(shè)計(jì)方案屬性：倫理的（能體諒人，有幫助）不傷害改善人的狀況有意圖的，能幫助用戶實(shí)現(xiàn)他們的目標(biāo)和渴望注重實(shí)效，幫助委托的組織實(shí)現(xiàn)它們的目標(biāo)優(yōu)雅的最簡(jiǎn)單的完整方案擁有內(nèi)部的一致性合適的容納和情感交互設(shè)計(jì)準(zhǔn)則設(shè)計(jì)方案屬性：交互設(shè)計(jì)師的基礎(chǔ)技能要求交互設(shè)計(jì)師的基礎(chǔ)技能要求Numal做完整個(gè)項(xiàng)目后，團(tuán)隊(duì)對(duì)其專業(yè)性和技能都很滿意，于是讓他傳授一下自己的經(jīng)驗(yàn)。Numal做完整個(gè)項(xiàng)目后，團(tuán)隊(duì)對(duì)其專業(yè)性和技能都很滿意，于是常用的交互設(shè)計(jì)工具VisioAxureillustratorFireworksWordPhotoshop常用的交互設(shè)計(jì)工具Visio交互設(shè)計(jì)師需具備的項(xiàng)目意識(shí)成果時(shí)間質(zhì)量QBT交互設(shè)計(jì)師需具備的項(xiàng)目意識(shí)成果時(shí)間質(zhì)量QBT交互設(shè)計(jì)師需了解流程流程的重要性預(yù)防研究、設(shè)計(jì)、評(píng)估過程中的遺漏；規(guī)范研究、設(shè)計(jì)、評(píng)估的步驟；明確與公司研發(fā)流程的銜接；解決整個(gè)過程中責(zé)任不明、任務(wù)不清的問題公司組織結(jié)構(gòu)智能體系組織劃分….研發(fā)流程公司級(jí)流程跨系統(tǒng)流程系統(tǒng)流程設(shè)計(jì)流程交互流程視覺流程用研流程交互設(shè)計(jì)師需了解流程流程的重要性公司組織結(jié)構(gòu)智能體系組織劃分交互行業(yè)的信息交互行業(yè)的信息國內(nèi)部分人機(jī)交互學(xué)術(shù)機(jī)構(gòu)北京大學(xué)計(jì)算機(jī)系人機(jī)交互與多媒體研究室清華大學(xué)工業(yè)工程系人因工程實(shí)驗(yàn)室中國科學(xué)院軟件研究所人機(jī)交互技術(shù)與智能信息處理實(shí)驗(yàn)室歐盟可用性中國中心微軟亞洲研究院—交互設(shè)計(jì)中心UPA中國國內(nèi)部分人機(jī)交互學(xué)術(shù)機(jī)構(gòu)北京大學(xué)計(jì)算機(jī)系人機(jī)交互與多媒體研究業(yè)界公司信息IBM：500人，25個(gè)可用性實(shí)驗(yàn)室微軟：200人，30個(gè)可用性實(shí)驗(yàn)室Philips：100多人西門子：100人Oracle：約70人韓國三星：100多人Adobe：21人eBay：20人Tencent：30HP、Yahoo、Nokia、AOL、Intel、GE、T