交互設計基礎Banlon

2008/4/6

交互設計基礎Banlon

2008/4/6

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

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

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