交互設計基礎完整PPT課件

入知遠工作室須知,上班時間,（除有課外）周一到周五上午：8:00-11：30下午：13:30-17:00指紋考勤其它時間由指導教師和學生本人共同安排,工作室為你提供的,良好的學習氛圍必要的軟硬件設備優(yōu)質的指導教師項目機會,你為工作室貢獻的,做好自我定位，努力學習知識技能學會如何和他人合作，分享知識努力營造一個良好的工作氛圍（電話，QQ，游戲，衛(wèi)生，活動）將來提供就業(yè)資訊1年內(nèi)返校一次,行動起來選舉班委,班長生活委員衛(wèi)生委員紀律委員,Question？,交互設計基礎梅成才6369980QQ.com,溫州電子信息研究院軟件研究所,什么是“交互設計”,交互設計是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術，它致力于了解目標用戶和他們的期望，了解用戶在同產(chǎn)品交互時彼此的行為，了解“人”本身的心理和行為特點，同時，還包括了解各種有效的交互方式，并對它們進行增強和擴充。,關注,GUI-GraphicalUserInterface即人機交互圖形化用戶界面設計,交互設計案例（1）,賣當勞的番茄醬,雙匯火腿腸,交互設計案例（2）,失敗的交互設計,失敗的交互設計（1）,失敗的交互設計（2）,失敗的交互設計（3）,失敗的交互設計（4）,教材：GUI設計禁忌2.0【美】JeffJohnson著，機械工業(yè)出版社，2009,參考書1：,參考2：AboutFace3.0【美】AlanCooper著，電子工業(yè)出版社，2008,課程考核,.,課程考核,平時表現(xiàn)50%小組加減分+個人加減分（例）期末成績50%,.,行動起來,選舉課代表（+）成立小組（4人一組，共8組）小組取名,.,請訪問工貿(mào)學院各系部網(wǎng)站并仔細瀏覽。,.,1該網(wǎng)站是否違背GUI設計禁忌中提到的9條原則，如果有請指出網(wǎng)站在何處違背了第幾條原則，并按如下格式填寫。2該網(wǎng)站是否存在使用了錯誤的控件或錯誤的使用控件的情況，如果有請指出并填寫如下表格3該網(wǎng)站是否存在導航禁忌，如果有請指出并填寫如下表格：4該網(wǎng)站是否存在響應性禁忌，如果有請指出并填寫如下表格5請使用學過的網(wǎng)站可用性三大定律進行分析，指出哪些頁面需要改進？6請你提一些對交互設計基礎課程的建議和意見。,.,請大家一起來討論以下的例子,.,例1,下面是軟件或者網(wǎng)頁中進度條的界面，你覺的如何？,.,McInerneyandLi2002列出了用于設計有效的進度指示器的一些指導原則,顯示剩余的工作，而不是已完成的工作。不好的顯示：已復制3個文件。好的顯示：還剩4個文件未復制。顯示總體進度，而不是當前步驟的進度。不好的顯示：此步驟還需5秒。好的顯示：還需15秒。對于百分比的完成，從1%開始，而不是0%。如果進度條在0%上停留超過1秒或2秒，用戶會感到擔憂。同理，100%的顯示要短暫。如果進度條在100%上停留超過1秒或2秒，用戶會認為出了問題。顯示平滑的、線性的進度，而不要顯示不規(guī)則的、突然變化的進度。使用人們熟悉的精度，而不是計算機精度。不好的顯示：27秒。好的顯示：少于1分鐘。,.,例2,.,例3,您認為以下幾個對話框哪個比較恰當？,.,例4,.,例5,.,例6,4.基本原則,基本原則1：關注用戶任務，而不是技術基本原則2：首先考慮功能，然后才是表示基本原則3：與用戶對任務的看法保持一致基本原則4:設計要符合常見情況基本原則5：不要分散用戶對他們目標的注意力基本原則6：促進學習基本原則7：傳遞信息，而不僅僅是數(shù)據(jù)基本原則8：設計應滿足響應需求基本原則9：通過用戶試用發(fā)現(xiàn)錯誤，然后修正它,基本原則1：關注用戶及其任務，而不是技術,誰是目標用戶？誰是目標客戶？目標用戶情況（對計算機的總體了解、任務知識、系統(tǒng)知識）軟件做什么？它能幫助用戶解決什么問題？它將提供什么價值？,誰是用戶？,客戶,用戶,用戶的層次,永遠的“中間用戶”,不可避免的矛盾,商務因素影響產(chǎn)品偏重于初學者,開發(fā)人員影響產(chǎn)品偏重于專家,我們把中間用戶搞丟了！,基本原則2：首先考慮功能，然后才是表示,基本原則3：與用戶對任務的看法保持一致,爭取自然使用用戶的詞匯，而不是你自己的找到正確的功能/復雜度平衡點恰當?shù)哪J值模板或者封裝的解決方案指南性的路徑和向導漸進式顯示通用命令。,示例分析,圖5-6.軟件人員經(jīng)常編寫出“劣質”的消息框，例如措詞生硬、幼稚、蹩腳，甚至有文字、語法錯誤；消息文本、圖形標志和命令按鈕在語義上不一致。,好的,差的,基本原則4:設計要符合常見情況,最少步驟、最高效率越頻繁使用的功能，需要的點擊應越少越多用戶使用某功能，它就應該越明顯設計用戶界面時應當盡可能地替用戶著想，用戶應當用最少的操作步驟完成某項操作任務，獲得最高的使用效率。（手機充值）,基本原則5：不要分散用戶對他們目標的注意力,示例分析,圖5-7(b).不顯眼的菜單排列，常被用戶忽視。至少要讓菜單排列和廣告互換位置。,基本原則5：不要分散用戶對他們目標的注意力,點評：網(wǎng)站使用廣告的用意是為了配合營銷活動的宣傳，這樣的布局更象是出于網(wǎng)站的目標，忽略了用戶的目的，因此未必能達到預期的效果。,基本原則6：促進學習,“從外到里”思考，而不是“從里到外“保持一致性提供一個低風險的環(huán)境,允許用戶犯錯誤,讓用戶可以撤銷動作在執(zhí)行具體的破壞性操作中要求用戶確認。,“用戶界面風格一致”的最大好處就是能夠減少用戶的記憶量、減少出錯幾率，并且迅速積累操作經(jīng)驗。所以熟悉Word軟件的人基本上不用翻閱手冊就能使用PowerPoint軟件，可謂“無師自通”。軟件的用戶界面中同類的界面元素應當有相同的視感和相同的操作方式。例如命令按鈕是最常見的界面元素，所有命令按鈕的形狀、色彩以及對鼠標的響應方式都是一致的同一類型軟件的用戶界面應當有一定程度的相似性。例如Microsoft公司的Office家族里有Word、Excel、PowerPoint、Outlook等軟件，這些軟件提供的“復制、剪切、粘貼”功能的操作方式都是相同的。,基本原則8：設計應滿足響應需求,當用戶進行某項操作后，如果過了一會兒（幾秒鐘）用戶界面一點反應都沒有，這將使用戶感到迷茫和不安，因為他不知道是自己操作錯了還是軟件死機了。及時反饋信息很重要，至少要讓用戶心里有數(shù)，知道該任務處理得怎么樣了，有什么樣的結果。例如下載一個文件，界面上應當顯示“百分比”或相關數(shù)字來表示下載的進度，否則人們不知道要等待多少時間。如果某些事務處理不能提供進度等數(shù)據(jù)，那么至少要給出提示信息如“正在處理，請等待”。最好是提供合適的動畫，讓用戶明白軟件正在干活、沒有死機。,第二章.GUI控件禁忌,21使用了錯誤的控件211禁忌l：混淆復選框和單選按鈕212禁忌2：在非開/關設置中使用復選框213禁忌3：使用命令按鈕作為開關214禁忌4：使用選項卡作為單選按鈕215禁忌5：太多選項卡216禁忌6：為只讀數(shù)據(jù)提供輸入控件217禁忌7：對于有約束的輸入濫用文本框,22錯誤地使用控件221禁忌8：動態(tài)菜單222禁忌9：過于嚴格的數(shù)據(jù)字段223禁忌10：沒有默認值的輸入字段和控件224禁忌11：不恰當?shù)哪J值225禁忌12：反向復選框,一、混淆復選框和單選按鈕,錯誤的用法：單獨的一個單選按鈕。把復選框當作單選按鈕：兩個具有相反值的單選按鈕和一個復選框是等價的，所以不要把復選框當作單選按鈕，從而出現(xiàn)相反值能同時選中的情況。互斥的復選框：復選框的各個選項之間是獨立的，不存在互斥關系,用左右鍵和上下鍵移動，或以及鼠標單擊選中。單選框是一種多選一設置，可選數(shù)目在2-8之間。當空間不夠時，單選框可以用循環(huán)按鈕、下拉菜單、滾動列表框來代替。,在框中用鼠標單擊，或在文本上設置/取消設置，試著用空格鍵做這件事。復選框和選項框按選擇幾率的高底而先后排列。復選框和選項框要有默認選項，并支持Tab選擇。,二、在非開關設置中使用復選框,復選框用于從兩個相反的值中選擇一個，而不僅僅是二選一。所以，遇到“啟用/禁用”,“可見/不可見”等明顯相反的值時，可以使用復選框(也可以用具有兩個值的單選按鈕)。,三、把命令按鈕當作開關,正確的做法是，用復選框當做開關，或者其他專門設計來做開關的控件。,四、把選項卡當作單選按鈕,五、太多的選項卡,六、為永久只讀數(shù)據(jù)提供輸入控件,七、對于本應該有輸入約束的字段使用普通文本框,GUI設計禁忌之二錯誤地使用了控件,一、動態(tài)菜單項,二過于嚴格的數(shù)據(jù)字段,為了確保用戶輸入的內(nèi)容是有效的，應用程序(包括Web表單)都會對一些字段進行各種檢查，比如長度，字符組成等。有時候檢查過于嚴格，也是一種錯誤。程序員為了編程方便，約束用戶的輸入，比如某字段不能包含單引號或者另一個字段能輸入的字符數(shù)不能超過16。這種要求是無理的。不能因為SQL中單引號是特殊字符，就不允許用戶輸入。為用戶提供稍微寬松的輸入字段并不難：使字段寬度和數(shù)據(jù)長度基本一致：字段的寬度足夠容納數(shù)據(jù)，但是也不要長出太多。這樣用戶不會無限制的填寫內(nèi)容。對于一種數(shù)據(jù)所有常見的格式，都要盡量支持。這集中體現(xiàn)在日期和時間，以及小數(shù)的格式上。如果大小寫字母對數(shù)據(jù)來說無關緊要的話，就不要區(qū)分大小寫。為字段提供有效格式示例，放在字段后面，或者上方，或者通過某種技術讓它出現(xiàn)在空白的字段中。不要因為技術原因對用戶提出限制。技術問題應該自己解決，而不是交給用戶解決。,三、沒有默認值,有兩種情況是可以不提供默認值的沒有合理的默認值：比如在“省市縣”三級聯(lián)動下拉菜單中，為“省”設置一個默認值的確不太好選擇，除非該應用僅限某一省的用戶使用。宗教、政治或者法律原因，不能選擇其中一項作為默認值。,四、不恰當?shù)哪J值,五、反向復選框,第3章導航禁忌,禁忌13：未標識窗口或頁面(1),禁忌13：未標識窗口或頁面(2),在站點的導航欄中通過高亮等形式，標記當前頁面的位置，或者在頁面的明顯位置，明確的標記當前頁面的位置。,禁忌14：不同窗口使用同樣的標題,禁忌15：窗口標題與命令或鏈接不符,禁忌16：使用戶偏離正確道路的按鈕和鏈接,禁忌17：自身鏈接,禁忌18：對話框層次過多,禁忌19：互相競爭的搜索框,不管是什么理由讓開發(fā)人員在頁面上放了多個搜索框，都會讓用戶分散注意力。所以，一個頁面應該只有一個搜索框，它應該出現(xiàn)在左上角logo下面，右上角或者左側導航欄的下方。,禁忌20：搜索結果的瀏覽方式不佳,禁忌2l：干擾搜索結果,4.1.1禁忌22：術語不一致,有些術語的概念很清楚，有些術語卻模糊不清，如果開發(fā)項目時沒有字典，就會出現(xiàn)術語和概念不能一一對應的情況。,4.1.2禁忌23：含義不清的術語(1),4.1.2禁忌23：含義不清的術語(2),4.1.3禁忌24：書寫不好,這類錯誤主要是指錯別字，語法錯誤，單詞大小寫錯誤，前后書寫不一致，單復數(shù)(英文)等等。雖然這些問題不會影響軟件的正確性，但是用戶會覺得這個軟件或者網(wǎng)站不夠專業(yè)，進而懷疑這個軟件是不是會給自己造成損失。比如，有兩個字段，一個要求輸入表名，一個要求輸入文件名，但是前者的標簽是“表名”，后者的標簽是“文件”。要么都加上“名”這個字，要么都不加這個字。再比如，有些簡單的只有一句話的提示信息，有的地方加了句號，有的地方?jīng)]有加句號。這樣的細微的錯誤分布在系統(tǒng)各個角落。,4.1.4禁忌25：文字過多,4.2.1禁忌26：用詞晦澀,4.2.2禁忌27：在用戶界面中將用戶稱為“user”,這個錯誤一般存在于英文系統(tǒng)。因為只有兩個行業(yè)把他們的客戶稱為user，一個是計算機軟件行業(yè)，一個是毒品行業(yè)。其他行業(yè)的客戶都不叫做user。我們的客戶可以叫做user，但是我們的user的客戶，卻不一定能再稱為user。一般的替代詞是member、guest等。,4.2.3禁忌28：無用的錯誤消息,好的錯誤信息一定要告訴用戶發(fā)生了什么，為什么會發(fā)生這個錯誤，以及用戶該怎么處理。而且，錯誤信息一定要用和任務相關的詞匯，不要把計算機術語給用戶看。下面這個圖顯示的是使用360瀏覽器訪問谷歌時出現(xiàn)錯誤的頁面：,4.3.1禁忌29：錯誤的消息,4.3.2禁忌30：文字獨立存在時有意義，但在GUI中引起誤導,這種情況比較常見，在各個購物網(wǎng)站或者惠普、戴爾的官網(wǎng)經(jīng)常出現(xiàn)“推薦產(chǎn)品”、“賣家熱推”這類的字眼。其實這些詞單獨出現(xiàn)沒有什么問題，不過在整個網(wǎng)頁中，用戶看了會想，其他產(chǎn)品是“不強力推薦”呢，還是“不推薦”呢，甚至是“強力不推薦”？,4.3.3禁忌31：在命令標簽中錯誤地使用或者不使用“”(1),省略號（.）最早是蘋果公司的設計人員提出的。它用于區(qū)分立即執(zhí)行的命令和先提示用戶輸入附加信息的命令。,4.3.3禁忌31：在命令標簽中錯誤地使用或者不使用“”(2),話框，就應該添加省略號，這是不對的。下面這個例子也是錯誤的：,第5章圖形設計和布局禁忌,5.1.1禁忌32：容易忽略的信息,太小或者太普通：有些重要信息所在的區(qū)域非常非常小，或者它們的字體和顏色與其他內(nèi)容一樣，這樣的信息將湮沒在整個界面中。除非它們在移動或者非常亮。信息位于用戶關注區(qū)域之外：人類的視覺活動只有在視覺中心位置的一小塊地方是敏銳的。把重要信息分散到頁面各個角落，很容易讓用戶來回切換關注點。大量雷同信息：比如下面這個例子中，兩行文本中只有兩個字不同，這讓用戶很難區(qū)分：,5.1.2禁忌33：將對話框控制按鈕與內(nèi)容控制按鈕混合放置,有很多對話框將標準按鈕(確定、應用、關閉、取消、幫助、是、否、重試、放棄等)與控制特定數(shù)據(jù)或設置的按鈕放在了一起。這是一種錯誤。首先，控制特定數(shù)據(jù)的按鈕和數(shù)據(jù)離得太遠，很難發(fā)現(xiàn)其中的聯(lián)系。其次，用于控制整個對話框的按鈕和其他按鈕沒有外觀上的區(qū)別。,5.1.3禁忌34：不恰當?shù)厥褂媒M合框(1),5.1.3禁忌34：不恰當?shù)厥褂媒M合框(2),5.1.4禁忌35：單選按鈕之間間隔太大,5.1.5禁忌36：標簽與數(shù)據(jù)字段距離太遠,5.1.6禁忌37：標簽的對齊方式不一致,5.1.7禁忌38：窗口初始位置不合適,在同一個坐標顯示所有窗口子窗口蓋在父窗口上方不在屏幕上顯示子窗口,字體過小,第6章交互禁忌,禁忌40：將實現(xiàn)暴露給用戶,禁忌41：不必要的限制,禁忌42：令人混淆的概念(1),禁忌42：令人混淆的概念(2),禁忌43：向用戶索取不必要的數(shù)據(jù),禁忌45：無意義的選擇(1),禁忌45：無意義的選擇(2),禁忌46：很難記住的ID,禁忌47：長的說明信息消失過快(1),禁忌47：長的說明信息消失過快(2),禁忌48：不必要或效果不佳的標記模式,禁忌49：自動重排的顯示,第七章響應性禁忌,響應性不好的原因,響應性是決定軟件易用性的一個非常重要的因素（參見基本原則8）。注意這里的“響應性”不是“性能”或“速度”。響應性與性能不同。性能是指軟件計算和顯示結果的速度。高性能軟件很快就能給出用戶所需的結果；低性能軟件生成結果的速度很慢。軟件即使在低性能條件下也可以快速響應。,高響應性的軟件(舉例）,讓用戶立即知道他們的按鍵、鼠標移動和單擊操作被接受了；估算操作要花費多長時間；允許用戶在等待期間做其他事情；巧妙地安排等待隊列中的事件；做一些整理操作或是處理計算機后臺那些低優(yōu)先級的任務；還可以利用這段空閑時間估計一下將來可能的請求。,常見的響應性禁忌,禁忌52：光標跟不上用戶；當操作系統(tǒng)處理鼠標移動時光標四處跳動，當用戶停止移動鼠標時它還在繼續(xù)移動。禁忌53：屏幕上的按鈕響應鼠標點擊的時間太長，或者根本不響應。禁忌54：菜單、滑動條和滾動條的動作落后于用戶操作，破壞了成功操作所需要的手眼動作配合。禁忌55：移動和調整大小的操作跟不上用戶的動作，也沒有提供臨時的進度顯示（rubber-band）作為反饋。禁忌56：應用程序沒有指示它正處于繁忙狀態(tài)，而是忽略了用戶的存在。禁忌57：當應用程序進行內(nèi)部整理時經(jīng)常（而且是不可預測地）不為用戶提供響應。禁忌58：冗長的操作不顯示進度條。禁忌59：冗長的操作不提供取消方式。禁忌60：應用程序浪費空閑時間，而當用戶最終發(fā)出一個可預期的命令時，卻又要花費很長時間才去執(zhí)行。禁忌61：應用程序在掛起時不給出任何反饋，也不指明到底發(fā)生了什么事情。禁忌62：Web站點包含很大的圖像和動畫，只有超高速的因特網(wǎng)連接才能看到。禁忌63：Web站點總是重新加載整個頁面來響應一些小的編輯操作。,長時間操作缺乏進度條,7.3.1響應性七條原則,響應性原則之一：響應性不等同于性能響應性原則之二：處理資源經(jīng)常是有限的響應性原則之三：用戶界面是實時接口響應性原則之四：任務對延遲的要求各異，軟件不必立即做所有的事情響應性原則之五：軟件不必按照任務請求的順序完成工作響應性原則之六：軟件不必執(zhí)行所有請求的任務響應性原則之七：用戶是人而不是計算機程序,原則一響應不等同于性能,舉例：修表師傅例子與20年前相比，現(xiàn)在的個人計算機快了許多倍，但用戶仍然等待很長時間而不知道正在發(fā)生什么事情，因此速度顯然不是決定響應性的一切?，F(xiàn)在大部分等待時間是由于網(wǎng)絡延遲和大量的數(shù)據(jù)傳輸造成的。,原則二處理資源經(jīng)常是有限的,計算機越快，用戶為之加載的軟件就會越多：比如桌面附件/多個應用程序等和即時消息客戶端應用程序。即使擁有最新型號的計算機，也不一定就意味著某個應用程序可以使用更多的計算資源。,原則三：用戶界面是實時接口,與人打交道的軟件也需要滿足實時性約束。人類行為中反映的三個常量給計算機系統(tǒng)響應性設立了必須要達到的目標,響應性原則之四：任務對延遲的要求各異，軟件不必立即做所有的事情,對于特定的用戶操作來說，即時的響應甚至可能是不需要的。更快不一定就更好。,7.3.4響應性原則之四：任務對延遲的要求各異，軟件不必立即做所有的事情,響應性原則之五：軟件不必按照任務請求的順序完成工作,明智地重新安排隊列中的任務可以節(jié)省工作量和時間，進而提高響應性。對任務進行重排也可以使得高優(yōu)先級的任務得到優(yōu)先處理。,響應性原則之六：軟件不必執(zhí)行所有請求的任務,有時用戶的請求是不必要的。例如，假定用戶正在編輯文檔，并指示軟件將它保存。如果此文檔自從上次保存直到現(xiàn)在沒有做過任何改動，那就沒有理由再讓軟件浪費時間來重復保存它。相反，軟件可以只指示此文件已經(jīng)保存過了。很多應用程序都是這