《5-圖書管理系統(tǒng)-GUI設(shè)計》由會員分享，可在線閱讀，更多相關(guān)《5-圖書管理系統(tǒng)-GUI設(shè)計（31頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、,*,Arial,或,Frutiger,55 Roman 25pt,華文細(xì)黑簡,25pt,Arial,或,Frutiger 55 Roman 25pt,華文細(xì)黑簡,25pt,Arial,或,Frutiger 55 Roman 25pt,華文細(xì)黑簡,25pt,Arial,或,Frutiger 55 Roman 25pt,華文細(xì)黑簡,25pt,Arial,或,Frutiger 55 Roman 25pt,華文細(xì)黑簡,25pt,Arial,或,Frutiger Bold 40pt,黑體,簡,40pt,軟件工程實(shí)踐,今天的工作任務(wù),完成圖書管理系統(tǒng),GUI,設(shè)計,提交內(nèi)容,GUI,工程師在課上完成第一

2、個,GUI,設(shè)計，并確定完成的界面?zhèn)€數(shù)（含名稱）。,我們的進(jìn)度，在這里,GUI,工程師的工作并不是從設(shè)計階段才開始的，早在需求分析階段，,GUI,工程師就已經(jīng)參與到用戶訪談中，了解用戶的使用習(xí)慣，喜好等，為設(shè)計用戶界面做準(zhǔn)備,我們的進(jìn)度，在這里,GUI,（圖形用戶界面）設(shè)計概述,對于用戶來說，友好的界面是至關(guān)重要的。,用戶界面（,U,ser,I,nterface,）的設(shè)計質(zhì)量直接影響用戶對軟件產(chǎn)品的評價，從而影響軟件產(chǎn)品的競爭力和使用壽命，因此，對人機(jī)界面的設(shè)計必須給予足夠的重視。,我們的進(jìn)度，在這里,先看一個例子,對比同一界面的以下兩種不同設(shè)計，然后說出哪種要好一些？,我們的進(jìn)度，在這里,我

3、們的進(jìn)度，在這里,我們的進(jìn)度，在這里,良好的設(shè)計原則,1,、關(guān)注用戶及其任務(wù)，而不是技術(shù),2,、首先考慮功能，其次才是表現(xiàn),3,、與用戶對任務(wù)的看法,保持一致,4,、設(shè)計要符合常見情況,5,、不要分散用戶對他們目標(biāo)的注意力,6,、促進(jìn)學(xué)習(xí)，從外,(,用戶,),到里,(,設(shè)計人員,),思考，而不是相反。,7,、傳遞信息，而不僅僅是數(shù)據(jù),8,、設(shè)計應(yīng)滿足響應(yīng)需求,9,、通過用戶試用發(fā)現(xiàn)錯誤，然后修復(fù)它,最好的程序界面就是用戶無需去閱讀操作手冊就知道該如何使用的界面。,我們的進(jìn)度，在這里,關(guān)注用戶及其任務(wù)，而不是技術(shù),對人的理解,程序必須反映用戶的視角和行為。要充分理解用戶開發(fā)者首先要理解人。人類通

4、過辨別比通過記憶學(xué)習(xí)起來更容易。,要經(jīng)常試著提供一個數(shù)據(jù)列表給用戶，而非讓用戶憑記憶自己輸入數(shù)據(jù),。普通人能記住,2000,到,3000,單詞，但卻可以認(rèn)出,50000,單詞。,我們的進(jìn)度，在這里,我們的進(jìn)度，在這里,從用戶的視角看問題，使用用戶的詞匯進(jìn)行描述，保持一致性，引導(dǎo)用戶的使用習(xí)慣,清楚一致的設(shè)計,很多,GUI,程序?qū)ψ罱K用戶常常不夠清楚。一個增強(qiáng)程序清楚表述能力的有效方法是使用列表中的,保留字,進(jìn)行開發(fā)。用戶中最常見的抱怨是某個術(shù)語表述的不清楚或不一致。,在軟件開發(fā)中經(jīng)常出現(xiàn)的情況是，在程序發(fā)布之后，一個屏幕上可能寫著“項目”，而下一屏卻寫著“產(chǎn)品”，而第三屏又變成了“貨物”，可是

5、其實(shí)這三個術(shù)語是指的同一個東西。這種一致性的缺乏導(dǎo)致用戶非常迷惑并產(chǎn)生操作失誤。,我們的進(jìn)度，在這里,保留字列表,文本,含義和行為,是否出現(xiàn)在按鈕上,是否出現(xiàn)在菜單上,MnemonicKeystrokes,熱鍵？,ShortcutKeystrokes,快捷鍵？,OK,接受輸入的數(shù)據(jù)或顯示的響應(yīng)信息，關(guān)掉窗口,Yes,No,None,or,Cancel,不接受輸入的信息，關(guān)掉窗口,Yes,No,None,Esc,Close,結(jié)束當(dāng)前的任務(wù)，讓程序繼續(xù)進(jìn)行；關(guān)掉數(shù)據(jù)窗口,Yes,Yes,Alt+C,None,Exit,推出程序,No,Yes,Alt+X,Alt+F4,Help,調(diào)出程序的幫助信息,

6、Yes,Yes,Alt+H,Fl,Save,保存數(shù)據(jù)，停留在當(dāng)前窗口,Yes,Yes,Alt+S,Shift+Fl2,Save As,用新名字保存數(shù)據(jù),No,Yes,Alt+A,F12,Undo,撤銷前一個動作,No,Yes,Alt+U,Ctrl+Z,Cut,剪切高亮字符,No,Yes,Alt+T,Ctrl+X,Copy,拷貝高亮的文本,No,Yes,Alt+C,Ctrl+C,Paste,在插入點(diǎn)粘貼被拷貝或剪切的文本,No,Yes,Alt+P,Ctrl+V,利用保留字表使得系統(tǒng)詞匯保持一致,提供可視反饋,如果你曾有過傻傻的瞪著自己,電腦上顯示的沙漏等著一個操作結(jié)束的時候，就會明白沒有可視化的

7、反饋信息有多糟糕。,用戶非常希望知道一個操作會花費(fèi)多長的時間以便準(zhǔn)備好足夠的耐心。作為最一般的規(guī)則，當(dāng)一個操作超過,7,10,秒的時候，大多數(shù)用戶希望看到一個帶有進(jìn)度條的消息對話框。時間,的長短要根據(jù)用戶類型和應(yīng)用程序的特點(diǎn)來調(diào)整。,使常用的用戶任務(wù)簡單化，不要讓用戶解決額外的問題,GUI,設(shè)計案例賞析,1):,常用菜單要有命令快捷方式。,2):,完成相同或相近功能的菜單用橫線隔開放在同一位置。,3):,菜單前的圖標(biāo)能直觀的代表要完成的操作。,Good,如果用戶不能理解對話框里的內(nèi)容，這就意味著是這個對話框設(shè)計者的失敗。通常情況下，就,像標(biāo)準(zhǔn)保存對話框或打開文件對話框那樣，所有對話框都應(yīng)該含有

8、一個用來提問或警告的消息,（圖標(biāo)），另外還含有一段附加的描述性文字來提供額外提示譬如“這個操作不可恢復(fù)”,這個問題對話框的標(biāo)題與所提示的信息不符，更糟糕的是沒有任何信息告訴用戶究竟要“確信”,啥（對話框顯示“您確信嗎？”的問題，而窗口標(biāo)題卻是“錯誤”）,Bad,使用彩色用戶界面元素時，要考慮緊接這個界面元素的相鄰界面元素是什么。特別是要注意文本所在的背景底色。,提高對比度才看的清楚。,Bad,第一個例子不會讓用戶知道這個對話框是何用途。沒有對話框里面文字的提示，用戶不可能知道下一步該怎么辦。,相反，第二個例子用意則非常的明顯以致于不需要解釋文字用戶也知道該怎么做。,Bad,Good,第一個例子

9、完全沒有使用空白，按鈕之間的距離都是一樣的，盡管我們知道這三個按鈕點(diǎn)下去造成的后果大不相同。有意思的是，這個會造成數(shù)據(jù)損失的按鈕竟然相當(dāng)不方便的放在中間。,所以，這就造成一種被錯誤選擇的可能性：如果你要點(diǎn)“是（,Yes,）”的右部，或者“取消（,Cancel)”,的左邊，可手不小心一抖錯過了幾個象素就點(diǎn)到“否”按鈕上了！數(shù)據(jù)因此而丟失。,而下面的這組按鈕就有效的利用了空白。既然對話框中的提示是“您想在關(guān)閉文檔前保存內(nèi)容嗎？”，所以這些按鈕的動作結(jié)果和上面的一組一樣：“取消”使關(guān)閉文檔的命令取消；“保存”將保存文檔并且關(guān)閉；因此“不要保存”按鈕是唯一可以造成未保存數(shù)據(jù)丟失的按鈕，所以它和其它兩個

10、按鈕“取消”和“保存”（它們都不會未保存數(shù)據(jù)丟失）之間有一個很大的空白。這樣的分布保證了讓用戶偶然錯誤選擇“不要保存”的可能性非常小。,利用空白分割,Bad,Good,選擇合適的控件。上圖中，,yes,和,no,只能二選一，所以不應(yīng)該使用,checkbox,，而是,radiobutton,Bad,GUI,圖形用戶界面設(shè)計過程,設(shè)計原型,用戶試用,和評估,修改原型,評估,GUI,設(shè)計工具,GUI Design Studio,MS Visio,甚至可以是,MyEclipse,（加入,VE,插件后的）或者,NETBean,等,IDE,。,GUI Design Studio,是什么？,GUI Desi

11、gn Studio,是一款針對,windows,系統(tǒng),的,圖形界面設(shè)計工具,它可以便捷的創(chuàng)建界面圓形文檔而不要任何的腳本和編程知識。,使用標(biāo)準(zhǔn)組件繪制屏幕 窗口或者組建組合,并把它們按照工作流連結(jié)在一起,然后演示你的設(shè)計。,利用,GUI Design Studio,自帶的案例進(jìn)行學(xué)習(xí),打開,GUI Design Studio,文件夾下面的,sample,文件夾，選擇,Design Collection,文件夾，打開案例，使用模擬器進(jìn)行運(yùn)行。查看效果,依次學(xué)習(xí),Standard Components,文件夾和,Tutorial,文件夾中的案例。,幾個要點(diǎn),對齊，和調(diào)整大小使用下面這個工具條,插入

12、圖片的方法：設(shè)計菜單,添加位圖,在,GUI Design Studio,中完成圖書管理系統(tǒng)的,GUI,設(shè)計,建立界面控制流的轉(zhuǎn)換,新建一個設(shè)計，用來設(shè)計另外一個界面“圖書管理系統(tǒng)主界面”,建立界面控制流的轉(zhuǎn)換,在圖書管理登錄,.,gui,中，點(diǎn)擊右鍵選擇“添加組合屏幕”,選擇圖書管理系統(tǒng)主界面添加進(jìn)去。,用鏈接工具 將登陸按鈕與圖書管理系統(tǒng)主界面鏈接起來,將圖書管理系統(tǒng)登錄界面點(diǎn)擊右鍵，“設(shè)置為典型元件”,運(yùn)行模擬器查看效果。,為圖書管理系統(tǒng)主界面增加菜單項,為“注銷”和主界面的關(guān)閉按鈕添加一個確認(rèn)退出系統(tǒng)的對話框,依次類推,畫出其余的,GUI,界面來。交給代碼人員，他們進(jìn)行代碼編寫。,如果你同時擔(dān)任代碼和,GUI,，那么建議你直接在,IDE,里面做,GUI,設(shè)計，省時省力,課程小結(jié),本次課中，用到以下知識,設(shè)計,學(xué)習(xí)使用了工具,GUI Design Studio,我們的進(jìn)度，在這里,