交互設(shè)計基礎(chǔ)完整PPT課件

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