第8章 界面設計

第8章界面設計8.1概述8.2界面需求分析8.3輸入設計8.4輸出設計8.5屏幕界面設計8.1概述

8.1.1用戶界面的概念

用戶界面(UserInterface)是對用戶與系統(tǒng)之間進行交互所采用的方式、途徑、內(nèi)容、布局及結(jié)構(gòu)的總稱，用戶界面也叫人機界面、人機接口、人機輸入輸出或人機交互界面等。

用戶界面的不同觀點：●開發(fā)者：用戶界面是信息系統(tǒng)與用戶的交流渠道，是系統(tǒng)向用戶展示功能的界面，是開發(fā)工作的一個方面。

●用戶：用戶界面就是信息系統(tǒng)的全部和信息系統(tǒng)本身?！ㄟ^主機、顯示器、鍵盤、鼠標等物件構(gòu)成了對信息系統(tǒng)的物理印象；▲通過窗口、菜單、控件，聲音構(gòu)成了對信息系統(tǒng)感知印象；▲通過所反映問題域中的客戶、產(chǎn)品、定單、圖表、輸入、修改等事物和功能形成對信息系統(tǒng)的概念印象。用戶界面的形式：

●輸入界面：用戶向系統(tǒng)輸入信息的人機界面；

●輸出界面：系統(tǒng)向用戶展示信息、功能和作用的人機界面；

●輸入輸出界面：同時能夠進行輸入、輸出處理的混合界面，用戶界面更多的是混合型的輸入輸出界面?！镉脩艚缑孢€涉及到人機交互方式、人機交互流程、輸入輸出設備和媒體等內(nèi)容。

8.1.2用戶界面發(fā)展的三個階段

1．命令用戶界面命令用戶界面也稱為命令行用戶界面(CommandLineUserInterface)，它是從字符顯示終端出現(xiàn)到20世紀80年代中期人機交互界面的主要形式。用戶通過系統(tǒng)提供的命令語言使用系統(tǒng)，在字符終端上顯示命令接收狀態(tài)，系統(tǒng)從字符終端上接收用戶輸入的操作命令，并對命令進行解釋執(zhí)行，最后把命令處理結(jié)果輸出給用戶。

2．圖形用戶界面圖形用戶界面GUI（GraphicsUserInterface）被稱為第二代用戶界面，也是目前人機交互采用的主要人機界面方式。與命令用戶界面相比，圖形用戶界面人機交互的自然性和效率都有較大的提高。但是,圖形用戶界面屬于二維界面，與人之間的信息通信方式主要依靠手和眼，與人之間進行信息交互的途徑和方式仍然存在局限性。

3．多通道用戶界面為使人機交互能夠更自然化，支持時變媒體，實現(xiàn)三維、非精確及隱含的人機交互，隨著虛擬現(xiàn)實技術的研究和發(fā)展，近年來提出了多通道用戶界面的概念。在多通道用戶界面中，人與機器被看成主動參與者，通過虛擬現(xiàn)實環(huán)境，人機以自然的通信方式進行交流。在這種方式下，用戶可以使用自然的交互方式，如語音、手勢、眼神、表情、指點等與系統(tǒng)進行協(xié)作工作。

8.1.3用戶界面設計的原則●合理性：指在用戶界面設計過程中應該盡量做到全面、系統(tǒng)、客觀、美觀和協(xié)調(diào)?！裼行裕褐赣脩艚缑嬖O計應該作到界面友好、操作方便、快速高效、一致規(guī)范、靈活適應。

●安全性：指設計的用戶界面保證系統(tǒng)的數(shù)據(jù)、操作和功能被可靠使用的能力。包括使用權限的設置、檢測、保護和修改，對錯誤的診斷、報告、糾正和保護，以及對輸入數(shù)據(jù)的正確性檢查、報告和糾錯等方面的能力。

8.1.4用戶界面設計的工作包括界面需求分析、輸入設計、輸出設計、屏幕界面設計和編寫用戶手冊等工作，見圖8.1。圖8.1輸入輸出界面設計的工作8.2界面需求分析界面需求分析是從人機交互處理的角度，對人機交互處理過程所反映的系統(tǒng)功能和信息的交互處理需求、界面的分布、人機交互方式、人機交互流程、輸入輸出設備及工作性質(zhì)和用戶特征等方面所做的分析工作。界面需求分析的依據(jù)是系統(tǒng)需求文檔。界面需求分析是用戶界面設計工作的基礎，其包含的工作見圖8.2。圖8.2界面分析的工作

1．交互需求分析

●收集、分析、整理信息系統(tǒng)和用戶之間所存在的人機交互處理的需要和內(nèi)容；

●分析的主要依據(jù)是系統(tǒng)需求文檔；●分析用例圖和順序圖中參與者與系統(tǒng)交互的內(nèi)容；●用對話設計的形式描述出交互需求。

2．界面分布分析

●從總體上確定信息系統(tǒng)中各節(jié)點的類型、構(gòu)成和分布情況，設計的所有用戶界面將來就要分布在這些節(jié)點上。●主要依據(jù)是系統(tǒng)結(jié)構(gòu)設計中的系統(tǒng)節(jié)點分布。

3．交互方式分析●確定信息系統(tǒng)各個節(jié)點所采用的人機交互方式?！裼新?lián)機、脫機和混合交互方式。●對采用混合方式的節(jié)點還要確定具體的聯(lián)機方式處理和脫機方式處理的分工和時間分配。

4．交互流程分析

●交互流程指人機交互過程的順序程式；●交互流程分為固定流程和隨機流程兩種形式；●交互流程分析可以在對話設計的基礎上進行，每一個對話設計本身就已經(jīng)描述了人機交互的過程和順序，但對話設計只是描述一個個單一功能的交互過程，沒有反映具有復合功能的完整業(yè)務的交互流程。因此需要我們從完整的業(yè)務處理過程的需要出發(fā)，設計出所有交互的固定流程。

5．輸入輸出設備分析各節(jié)點上的輸入輸出設備的類型、性能進行分析。因為交互處理工作最后就要落實到各個具體的輸入輸出設備上，交互處理所采用的設備性能會加強或制約輸入輸出效果。例如：

▲在字符終端上就顯示不出圖形；

▲激光打印機雖然具有很高的打印質(zhì)量，但打印速度不高。▲CCD手持式條形碼掃描儀比筆式條形碼掃描儀的識別率高。

6．用戶分析對用戶類型及其喜好、習慣等特征進行認真分析，以設計出滿足用戶需要的用戶界面。把用戶分為：

▲外行型▲初學型▲熟練型▲專家型根據(jù)不同的用戶類型進行界面設計。8.3輸入設計

信息系統(tǒng)輸入設計是從輸入角度，通過對輸入設備、輸入方式、輸入內(nèi)容、輸入形式、輸入編碼、輸入安全控制等方面的分析研究，確定出可行的輸入設計方案。

目的是根據(jù)信息系統(tǒng)目標和用戶的特點，確定出使用戶滿意的輸入設計方案。輸入設計與輸出設計有密切的聯(lián)系，需要綜合考慮。

8.3.1輸入方式設計1.輸入方式的概念和形式

概念：輸入方式是指在向信息系統(tǒng)輸入數(shù)據(jù)的過程中所采用的策略和形式。

形式：批輸入、聯(lián)機輸入和混合輸入三種方式。2.輸入方式設計(1)．批輸入方式

概念：批輸入方式也叫脫機輸入方式，它是指組織一批數(shù)據(jù)并集中輸入到系統(tǒng)之中的輸入方式。

設計步驟：

①收集一組相關數(shù)據(jù)；

②把收集到的數(shù)據(jù)先存放到磁帶、磁盤等電子媒體上。

③把電子媒體上的一組數(shù)據(jù)成批輸入到系統(tǒng)之中。

(2)．聯(lián)機輸入方式聯(lián)機輸入方式是在業(yè)務處理過程中，邊輸入數(shù)據(jù)邊處理數(shù)據(jù)的一種數(shù)據(jù)輸入方式。學生食堂售飯系統(tǒng)數(shù)據(jù)輸入就采用聯(lián)機輸入方式，數(shù)據(jù)輸入和賣飯業(yè)務是同時進行的。(3)．混合輸入方式是批輸入和聯(lián)機輸入相結(jié)合的方式。超市售貨系統(tǒng)就采用混合方式。結(jié)賬臺采用聯(lián)機方式，每天在確定的時候POS機再成批地把數(shù)據(jù)發(fā)送到中心數(shù)據(jù)庫中。

8.3.2輸入表單設計輸入表單設計應考慮的方面：首先，內(nèi)容的完整性：把本用例或本界面的輸入數(shù)據(jù)全部包括在所設計的表單之中；其次，數(shù)據(jù)的一致性：表單中不應該出現(xiàn)冗余數(shù)據(jù)或派生的數(shù)據(jù)；最后，規(guī)范合理性：表單格式應該簡單、規(guī)范，符合用戶習慣。圖8.3是書店信息系統(tǒng)中的圖書訂單表單格式。圖8.3書店信息系統(tǒng)的圖書訂單

8.3.3數(shù)據(jù)編碼1.數(shù)據(jù)編碼的概念和作用

概念：數(shù)據(jù)編碼是由字母、數(shù)字或特殊字符組成的一組編碼序列，是用來標記和描述信息系統(tǒng)中的有關事物的，簡稱編碼。電話號碼、學生編號、產(chǎn)品編碼、銀行賬戶編碼、信用卡編碼、車輛編號、汽車牌照號等都是數(shù)據(jù)編碼。

作用：提高數(shù)據(jù)輸入的效率和惟一性。

類型：順序碼、特征碼、類型碼和混合碼四種類型。2.數(shù)據(jù)編碼的類型

①順序碼按照事物的時間順序所進行的編碼。如，某學生編碼是“0000123324”，表示該生報到順序是第123324個。

②特征碼特征碼是按照事物的某一方面的固有特征所具有的順序進行的編碼。如，按照學生名字的漢語拼音順序?qū)W號編碼。順序碼基于事物發(fā)生的時間順序，特征碼按照事物固有特征進行編碼。

③類型碼類型碼是對一組具有相同特性的事物賦予的統(tǒng)一編碼。例如，服裝商店要按照不同的尺碼、款式、顏色、種類來標記服裝，像35×30的藍牛仔褲、35×31的藍牛仔褲等?？梢越o35×30的藍牛仔褲賦予101編碼，給35×31的藍牛仔褲賦予102編碼。

④混合碼混合碼是可以表示事物多種特征的編碼。身份證號就是混合碼，它可以反映一個人所在的省、縣、鄉(xiāng)，出生日期，性別以及在同一個鄉(xiāng)中的順序編碼號等特征。通常企業(yè)編碼、汽車車輛編碼、產(chǎn)品編碼都是混合碼。

8.3.4輸入安全性設計

1.輸入安全性涉及的因素

輸入設備、輸入數(shù)據(jù)、輸入規(guī)程、輸入權限、輸入人員都會影響輸入的安全性，因此，輸入安全性應該考慮多方面的因素。

2.輸入數(shù)據(jù)正確性檢查輸入數(shù)據(jù)正確性檢查是輸入安全性的一方面內(nèi)容。數(shù)據(jù)檢查由人工和系統(tǒng)兩方面承擔?！袢斯z查是指在輸入數(shù)據(jù)之前，由檢查人員對要輸入的數(shù)據(jù)進行檢查。要求對采集和整理的數(shù)據(jù)認真進行核對檢查，以保證數(shù)據(jù)的正確性。

●自動檢查：通過系統(tǒng)中設計的輸入數(shù)據(jù)錯誤檢查程序?qū)斎氲臄?shù)據(jù)自動進行正確性檢查。例如，為了保證人員檔案數(shù)據(jù)中郵政編碼的正確性，可以在系統(tǒng)中裝配一個國家和地區(qū)郵政編碼數(shù)據(jù)庫，把輸入的每一個人的郵政編碼和地區(qū)與數(shù)據(jù)庫中正確的郵政編碼進行對照檢查，這樣就能夠保證人員郵政編碼的正確性。注意：保證輸入正確性一方面要由系統(tǒng)來進行檢查，但更需要輸入人員認真而仔細的檢查，因為信息系統(tǒng)不能自動檢查出所有輸入問題。例如，智能化再高的系統(tǒng)也不可能知道一個人的名字是“趙藍”而不是“趙曉”。2.輸入數(shù)據(jù)檢查技術

①校驗數(shù)位校驗數(shù)位常常被用在對銀行信用卡、存款賬戶、盤存物品號、客戶和會員賬戶的檢查。其含義是通過一種算法對原編碼進行計算得出一個數(shù)字，然后把這個數(shù)字與原編碼結(jié)合起來組成輸入編碼，并對輸入編碼按照給定的算法進行檢查。

②相關檢查相關檢查的含義是用事物兩個或多個相關屬性來檢查輸入數(shù)據(jù)。例如，城市與國家，城市與省，地區(qū)與它的郵政編碼等。通常，一個城市肯定屬于一個確定的國家和省，而一個國家或省(地區(qū))也有它確定的郵政編碼。通過對事物相關屬性進行檢查，可以提高輸入數(shù)據(jù)的正確性。

③界限檢查界限和范圍檢查一般用于數(shù)字型輸入數(shù)據(jù)。界限包括下界和上界，輸入必須大于或等于下界，而小于或等于上界。例如，輸入數(shù)據(jù)的下界是1，上界是10，則輸入數(shù)據(jù)應該大于或等于1，小于或等于10。有時可以省略下界或上界，這樣輸入的數(shù)據(jù)的自由度會更大一些。例如，大于0作為下界，而沒有上界。

④完整性檢查完整性檢查用來保證輸入數(shù)據(jù)的完整性，以避免在輸入過程中漏掉必要的輸入數(shù)據(jù)項。例如，人員檔案數(shù)據(jù)包括姓名、住址、城市、國家、郵政編碼等數(shù)據(jù)，完整性檢查就要檢查人員檔案數(shù)據(jù)是否已經(jīng)完整地輸入了這些數(shù)據(jù)項。8.4輸出設計

●輸出設計概念：信息系統(tǒng)輸出設計是從信息輸出角度，通過對輸出設備、輸出內(nèi)容、輸出界面、輸出控制等方面的分析研究，確定出可行的輸出設計方案。輸出設計與輸入設計有密切的聯(lián)系?！裥畔⒌妮敵鐾緩剑浩聊惠敵?、報表輸出和其它途徑輸出。屏幕輸出又可分為文本輸出、圖表輸出、圖形圖像輸出和音頻輸出等形式。屏幕輸出又可通過屏幕界面的方式來組織。

8.4.1輸出信息的類型及區(qū)別1．輸出信息系統(tǒng)類型

①內(nèi)部信息內(nèi)部信息是由信息系統(tǒng)所屬的組織內(nèi)部人員使用的信息。例如，教師用的學生名冊，銷售人員看到的銷售報表等都屬于內(nèi)部信息。

②外部信息外部信息是由信息系統(tǒng)所屬的組織外部人員使用的信息。例如，企業(yè)向上級主管部門上報的各種統(tǒng)計報表就屬于外部信息。2.內(nèi)外部信息的區(qū)別

①內(nèi)部信息具有機密性，只限于組織內(nèi)部。

②外部信息的輸出形式應該比內(nèi)部信息規(guī)范。因為外部信息是向組織外部提供的，其表示形式應該精細、講究。例如，采用高質(zhì)量的激光或彩色打印機輸出，在報表上打印出企業(yè)商標，用規(guī)則的帶網(wǎng)格線的報表輸出信息，使用陰影和加框等方法以提高輸出效果等。

8.4.2輸出報表

1．明細表明細表用來反映在確定的時間范圍內(nèi)事務活動的詳實情況，它強調(diào)對信息反映的詳實性。圖8.4的《學生選修課程明細表》反映趙蘭等同學2002年第2學期每一門課程的選修情況。在明細表中也會出現(xiàn)一些冗余信息和匯總信息。圖8.4明細表學號姓名課程周學時節(jié)次345225612趙蘭C語言42345225612趙蘭計算機組成原理41345225613李曉數(shù)據(jù)結(jié)構(gòu)62345225613李曉計算機組成原理41345225614張木C語言42345225614張木計算機組成原理41學生選修課程明細表2002年第2學期打印日期：2002.9

2．匯總表匯總表反映業(yè)務活動的綜合信息。圖8.5的《課程匯總表》反映2002年第2學期各門課程學時的匯總情況，這個報表是在《學生選修課程明細表》的基礎上，對課程明細信息匯總得到的。組織中的不同人員對匯總信息有不同的要求，一般在信息系統(tǒng)開發(fā)階段很難設計出用戶需要的所有匯總表，實際上很多匯總表是在系統(tǒng)運行過程中根據(jù)用戶的需要臨時生成的。因此，信息系統(tǒng)應該提供由用戶自己設計匯總表格式，并提取匯總數(shù)據(jù)的功能。圖8.5匯總表課程號課程名周學時總學時周數(shù)Act102會計電算化36020Bio101計算機導論44010Chm102管理學44812Mis111人機工程35418課程匯總表2002年第2學期打印日期：2002.9

3．分析表分析表反映信息的對比和分析情況。根據(jù)報表中信息的詳細程度，可以分為明細分析表和匯總分析表兩種形式，但一般以匯總分析表見多。圖8.6是一張分析表，反映2001年與2002年某企業(yè)債務和資本的增減分析情況。項目2001年2002年相差量相差比(%)資產(chǎn)：

現(xiàn)金0.60.80.233

應收賬款3.33.70.412.1

辦公設備5.25.50.35.8

小計9.110.00.99.9債務：

應付賬款1.11.20.19.1長期借款3.22.8-0.4-12.5小計4.34.0-0.37.0資本：

一般存貨3.03.00.00.0

雇傭收益1.83.01.266.7小計4.86.01.225.0債務和資本9.110.00.99.9圖8.6分析表

4．歷史表歷史表用來反映業(yè)務活動的歷史記錄。歷史表并不是一種單一的報表類型，它可以采用明細表、匯總表或分析表的形式來反映歷史信息。在歷史表中主要反映的是過去的信息。

8.4.3輸出圖表1．散點圖散點圖用來表現(xiàn)數(shù)據(jù)變化趨勢和規(guī)律，見圖8.7。企業(yè)管理通常用散點圖反映業(yè)務過程的歷史數(shù)據(jù)，并預測業(yè)務未來的變化趨勢。圖8.7散點圖

2．折線圖折線圖用來反映一定時間區(qū)間內(nèi)數(shù)據(jù)變化的波動情況，見圖8.8。折線圖也可以表現(xiàn)數(shù)據(jù)的變化趨勢，但與散點圖的區(qū)別在于折線圖增加了時間維數(shù)，因此，它能夠表現(xiàn)出數(shù)據(jù)隨時間變化的趨勢。折線圖可以用來比較在相同時間范圍內(nèi)，兩個或多個事件的變化情況。它可以表現(xiàn)產(chǎn)品銷售業(yè)務、銷售人員的銷售活動、學生對課程的登記情況等業(yè)務活動。需要注意的是，折線圖中X軸一般用來表示時間，而Y軸表示業(yè)務值。圖8.8折線圖

3．條形圖條形圖用來表現(xiàn)各分量之間的關聯(lián)關系和比例關系。按照圖中的條棒的方向，可以把條形圖分為水平條形圖和垂直條形圖。水平條形圖用來對相同時間區(qū)間內(nèi)的不同項目進行比較，而垂直條形圖用來比較不同時間區(qū)間中同一項目的情況，圖8.9是垂直條形圖的例子。條形圖的缺點是不能反映相同時間區(qū)間中所有項目的合計和不同時間區(qū)間中同一項目的合計。圖8.9條形圖4．餅圖餅圖通過圓和多個扇面來表示整體和部分以及各部分在整體中所占的比例，見圖8.10。餅圖也可以設計成多種不同的形式，如可以設計成如圖8.10的二維結(jié)構(gòu)，也可以設計成三維結(jié)構(gòu)。為了突出其中某一部分或多個部分，可以在圖中突出某一個扇形或多個扇形。另外，在每一個扇形中也可以標出所表示的比例數(shù)字。圖8.10餅圖8.5屏幕界面設計

8.5.1屏幕界面設計的準則

BenShneiderman的八項基本準則。

圖8.11用戶界面設計的八項準則

①盡量保持一致性

●一致性的含義：是所設計界面的按鍵、窗口格式、色彩、界面布局等在整個系統(tǒng)中始終應該保持一致。

●一致性的作用：

▲一致性是人習慣的需要，人慣于用已經(jīng)形成的習慣來進行觀察和行動。

▲一致性既可以保持界面的規(guī)整、簡潔，又可以減輕人們學習和使用信息系統(tǒng)的負擔。

②為熟練用戶提供快捷鍵

●快捷鍵能夠提高系統(tǒng)的操作速度。

●初學者：提供豐富的聯(lián)機幫助和界面說明，并更多地使用菜單和選項；

●熟練用戶：提供快捷鍵。過多的操作界面反而會增加操作量，降低使用效率。

③提供有效反饋

系統(tǒng)應該對用戶的每一個操作都給出反饋信息，以讓用戶了解系統(tǒng)對用戶操作的確認。及時的反饋會提高用戶的注意力，增強用戶使用系統(tǒng)的興趣。

④設計完整的對話過程設計的對話過程應該完整，有開始、中間處理和結(jié)束部分，因為人處理每一個業(yè)務都是一個完整的過程。但是在業(yè)務處理過程中應該提供例外處理功能。

⑤提供簡單的錯誤處理機制界面設計應提供對用戶錯誤的處理功能，并能夠檢查、提示、糾正用戶出現(xiàn)的常見錯誤。否則，所設計的系統(tǒng)將是一個不健壯的系統(tǒng)。

⑥允許撤消動作對用戶的一些錯誤或試探性動作應該允許用戶在操作過程中自動撤除，這符合人們?nèi)粘Ｔ囂叫院屯鶑托缘墓ぷ髁晳T。人們在從事一項工作的過程中，經(jīng)常會做出一些試探動作，或不自覺地犯錯，撤消這些動作并重新進行符合用戶的工作習慣。

⑦提供控制的內(nèi)部軌跡系統(tǒng)隨時把控制的內(nèi)部軌跡提示給用戶，用戶會感覺到自己一直在控制著系統(tǒng)，最起碼能夠了解系統(tǒng)的工作過程。這樣會增加用戶使用系統(tǒng)的親和感。

⑧減少短期記憶負擔

心理學規(guī)律發(fā)現(xiàn)，人在同一時間只能記憶7條信息。系統(tǒng)界面設計中應該盡量減少人的記憶負擔?？赏ㄟ^信息提示、反饋等方式減輕對人記憶信息的要求。

8.5.2圖形屏幕界面

●圖形屏幕界面也叫圖形用戶界面(GUI)，它主要由窗口、菜單和控件三要素構(gòu)成。1．界面框架(Frame)

●界面框架：是一個屏幕界面的總構(gòu)架，所有屏幕控件都建立在界面框架之中?！窠缑婵蚣苄问剑骸鴨挝臋n界面SDI(SimpleDocumentInterface)：是指在同一時間只能打開一個文檔的用戶界面。在SDI方式下，如果要打開另外一個文檔，需要先關閉當前打開的文檔。▲多文檔界面MDI(MultipleDocumentInterface)：是指允許在同一屏幕界面上同時打開多個文檔的用戶界面。每一個文檔都顯示在自己的文檔窗口中，并且可以在不同文檔之間進行切換。MicrosoftWord、MicrosoftExcel、VisualBasic、Delphi等都采用多文檔界面方式工作。

2．窗口

●窗口的概念：窗口(Window)也叫窗體，是屏幕界面上帶有邊界的矩形區(qū)域，用戶通過窗口與系統(tǒng)進行交互處理。

●窗口的作用：可以把窗口視為虛擬屏幕，而把顯示器屏幕看成物理屏幕。虛擬屏幕一般比物理屏幕小，并且在同一個物理屏幕上可以同時顯示多個窗口。在窗口上只能同時顯示用戶需要的一部分信息，可以采用窗口滾動技術看到整個用戶空間的全貌?！翊翱诘膶傩裕捍翱跇祟}、大小、位置、顏色、圖標、最大化和最小化等。滾動條、工具條等?！翊翱诘念愋停鹤源翱凇⒅骺卮翱?、數(shù)據(jù)處理窗口、事務處理窗口和信息查詢窗口等類型。

3．菜單

●菜單的概念：菜單(Menu)是由系統(tǒng)顯示給用戶的一種可選項目的列表,用戶可以從中選擇一項要做的工作。菜單是通俗名稱，其規(guī)范名稱是選單(“全國自然科學名詞審定委員會”1994年定)。

●菜單的形式：下拉式菜單，彈出式菜單。

1)下拉式菜單

●概念：下拉式菜單是一種應用于主控界面的菜單類型，被用來描述系統(tǒng)的功能結(jié)構(gòu)?！窠Y(jié)構(gòu)：兩層。

▲第一層：主菜單，各選項名水平排成一行被放在窗口最上方的一個帶形區(qū)域中?！诙樱鹤硬藛危粋€子菜單隸屬一個主菜單項。垂直方向排列，放置在其對應的主菜單項的下方。平常各個子菜單被隱藏起來，只有當單擊主菜單項時，對應的子菜單才被彈出。每次只能顯示被選中主菜單項的子菜單。圖8.12是MicrosoftWord的下拉式菜單。圖8.12MicrosoftWord的下拉式菜單

2)彈出式菜單彈出式菜單是垂直排列功能選項的矩形框，可被下拉式菜單或其它窗口功能選項驅(qū)動彈出，因此被稱為彈出式菜單。彈出式菜單可以是單層結(jié)構(gòu)或多層結(jié)構(gòu)，位置可以根據(jù)用戶操作或當時的操作環(huán)境確定。圖8.13是在WindowsXP下按鼠標右鍵所彈出的一個彈出式菜單。圖8.13在WindowsXP下按鼠標右鍵所彈出的菜單

4．控件

●控件的概念：控件(Component)是圖形用戶界面對除窗口和菜單之外的所有界面構(gòu)件的總稱，有些圖書把窗口和菜單也歸到控件之中。

●控件的作用：通過在界面中設置菜單或各種不同的控件，構(gòu)成完成確定功能的人機交互界面。在前端開發(fā)平臺中，提供了大量可以自動生成的控件，程序員可以利用系統(tǒng)提供的各種控件，設計出所需要的人機交互界面。窗口及控件見圖8.14。圖8.14窗口及控件

①標簽(Label)

標簽用來在窗口中顯示一段不能編輯的文本。使用標簽，可以對文本框、列表框等控件進行解釋或描述，也可在窗口中輸出一段說明性文字信息，還可向用戶輸出提示、出錯等信息。

②文本框(TextBox)

文本框是用來接收用戶輸入信息的正文編輯區(qū)域，用戶可以在文本框中的光標位置輸入信息。文本框可以分為單行和多行，輸入內(nèi)容超出編輯框?qū)挾葧r，可以自動滾動。

③列表框(ListBox)

列表框是向用戶提供功能、信息或參數(shù)的選項列表。進入列表框后，光條顯示在列表框的第一個選項上面，用戶可以把光條移動到所要選擇的選項上。當列表框中的選項超過列表框的長度時，列表框上會顯示滾動條，可通過按滾動條來移動選項。滾動條可以設計成上下方式、左右方式或上下左右方式，一般為單列的上下滾動方式。

④滾動條(ScrollBar)

通過滾動條可以實現(xiàn)應用程序中輸出信息的水平或垂直滾動，以方便地瀏覽和顯示大量信息。滾動條分為水平滾動條和垂直滾動條兩種類型。一般在列表框、文本框中的控件會自帶滾動條。滾動條控件主要應用于那些不能自動提供滾動條的控件或應用界面，以實現(xiàn)信息的滾動輸出。

⑤按鈕(Button)

按鈕是在屏幕上顯示的小矩形框，通過單擊按鈕可以觸發(fā)確定的功能操作。例如，單擊“OK”按鈕可以對當前操作進行確認；單擊“Cancel”按鈕則忽略或放棄當前操作；而單擊“Help”按鈕可以觸發(fā)聯(lián)機幫助功能。

⑥單選按鈕(RadioButton)

單選按鈕用來實現(xiàn)從多項選項中，選且僅選擇一項的應用。一個單選按鈕表示一個選項，用小圓圈表示，在圓圈中帶小點的單選按鈕表示當前要選擇的選項。

⑦復選框(CheckBox)

復選框表示對某個選項是否選擇。復選框用一個小方框表示。如果選中復選框所表示的選項，則復選框中顯示一個小對號，沒有選中不顯示對號。上面我們介紹了在圖形用戶界面中常用的7個控件,一般客戶端開發(fā)平臺都提供了大量豐富的控件，程序員可以利用這些控件設計自己所需要的窗口界面。不同的開發(fā)平臺所提供的控件種類和形式也有差異。因此，應該根據(jù)具體選擇的開發(fā)平臺，從事控件設計工作。

8.5.3屏幕界面結(jié)構(gòu)設計

1．屏幕界面結(jié)構(gòu)的含義

●概念：屏幕界面結(jié)構(gòu)是由信息系統(tǒng)用戶界面中的所有屏幕界面構(gòu)成的結(jié)構(gòu)框架。一個信息系統(tǒng)完整的用戶界面可能由幾百幅到幾千幅屏幕界面構(gòu)成，每一個屏幕界面就相當于科教片中的一個幻燈鏡頭，把這些幻燈鏡頭按照確定的順序放映，就完整地向人們介紹了一項科教知識。在信息系統(tǒng)中，為了完成用戶需要的交互處理，每幅屏幕界面也有其顯示順序和切換條件，由這些屏幕界面按照一定的切換聯(lián)系就構(gòu)成了信息系統(tǒng)的屏幕界面結(jié)構(gòu)。圖8.15是MicrosoftWord的樹形屏幕界面結(jié)構(gòu)。圖8.15MicrosoftWord的屏幕界面結(jié)構(gòu)

2．信息系統(tǒng)功能結(jié)構(gòu)

●概念：信息系統(tǒng)功能結(jié)構(gòu)是信息系統(tǒng)功能的總體構(gòu)成框架，它決定著信息系統(tǒng)的屏幕界面結(jié)構(gòu)。

●分析依據(jù)：系統(tǒng)用例圖、系統(tǒng)邏輯結(jié)構(gòu)、系統(tǒng)的拓撲結(jié)構(gòu)和系統(tǒng)處理的基本要求。由用例圖和邏輯結(jié)構(gòu)確定信息系統(tǒng)的總體功能結(jié)構(gòu)；

▲功能到節(jié)點界面的分布；

▲增加狀態(tài)設置、日志、備份、恢復、聯(lián)機幫助等輔助功能。

●書店信息系統(tǒng)的基本功能結(jié)構(gòu)見圖8.16。

●書店信息系統(tǒng)的功能分布到六個節(jié)點：

?“計劃采購”，?“書庫管理”，?“圖書銷售”

?“結(jié)算”，?“事務管理”，?“系統(tǒng)管理”●增加輔助功能。書店系統(tǒng)各個節(jié)點的功能結(jié)構(gòu)見圖8.17～圖8.22。這里沒有考慮數(shù)據(jù)庫服務器節(jié)點上的功能設置。書店信息系統(tǒng)功能結(jié)構(gòu)計劃采購管理計劃管理：編輯圖書計劃，查詢圖書計劃，輸出圖書計劃，計劃執(zhí)行統(tǒng)計訂單管理：編輯圖書訂單，查詢訂單信息，輸出圖書訂單合同管理：編輯合同，查詢合同，輸出合同，合同執(zhí)行情況統(tǒng)計書目管理：編輯書目，查詢書目，輸出書目信息到貨處理：登記到貨圖書，打印入庫單，統(tǒng)計到貨情況供書商管理：編輯供書商信息，查詢供書商信息，輸出供書商信息書庫管理入庫管理：編輯入庫信息，查詢?nèi)霂煨畔?，輸出入庫信息出庫管理：編輯出庫信息，查詢出庫信息，輸出出庫信息盤庫管理：盤庫處理，打印盤庫單報損管理：報損處理，打印報損單圖書銷售管理領書處理：編輯出庫圖書，查詢出庫圖書，打印出庫單圖書上架：編輯上架圖書，查詢上架圖書，打印架存報表銷售圖書：售書處理：打印書單，收書款，出售圖書瀏覽圖書銷售信息打印圖書銷售報表結(jié)賬：銷售匯總，打印銷售賬單盤架：盤架處理，打印盤架單資金結(jié)算：匯總收款數(shù)據(jù)，打印結(jié)算單事務管理員工基本信息管理：編輯員工基本信息，瀏覽員工基本信息，輸出員工信息員工工資管理：員工工資管理，員工工資發(fā)放員工勤績管理：編輯員工勤績信息，瀏覽員工勤績信息，員工勤績統(tǒng)計日常事務管理圖8.16書店信息系統(tǒng)的總體功能結(jié)構(gòu)書店系統(tǒng)計劃采購節(jié)點功能結(jié)構(gòu)計劃管理到貨處理編輯圖書計劃登記到貨圖書查詢圖書計劃打印入庫單輸出圖書計劃統(tǒng)計到貨情況計劃執(zhí)行情況統(tǒng)計供書商管理訂單管理編輯供書商信息編輯圖書訂單查詢供書商信息查詢訂單信息輸出供書商信息輸出圖書訂單系統(tǒng)維護合同管理打印機設置編輯合同備份與恢復查詢合同幫助輸出合同關于書店信息系統(tǒng)合同執(zhí)行情況統(tǒng)計目錄搜索書目管理主題搜索編輯書目聯(lián)機幫助查詢書目輸出書目信息圖8.17“計劃采購”節(jié)點的功能結(jié)構(gòu)書店系統(tǒng)書庫管理節(jié)點功能結(jié)構(gòu)入庫管理報損管理編輯入庫信息報損處理查詢?nèi)霂煨畔⒋蛴髶p單輸出入庫信息系統(tǒng)維護出庫管理打印機設置編輯出庫信息備份與恢復查詢出庫信息幫助輸出出庫信息關于書店書庫系統(tǒng)盤庫管理目錄搜索盤庫處理主題搜索打印盤庫單聯(lián)機搜索圖8.18“書庫管理”節(jié)點的功能結(jié)構(gòu)書店系統(tǒng)圖書銷售節(jié)點功能結(jié)構(gòu)領書處理結(jié)賬編輯出庫圖書銷售匯總查詢出庫圖書打印銷售賬單打印出庫單盤架圖書上架盤架處理編輯上架圖書打印盤架單查詢上架圖書系統(tǒng)維護打印架存報表打印機設置銷售圖書備份與恢復售書處理幫助瀏覽圖書銷售信息關于書店圖書銷售系統(tǒng)打印圖書銷售報表目錄搜索主題搜索

圖8.19“圖書銷售”節(jié)點的功能結(jié)構(gòu)書店系統(tǒng)結(jié)算節(jié)點功能結(jié)構(gòu)收書款幫助資金結(jié)算關于書店結(jié)算系統(tǒng)收款目錄搜索打印結(jié)算單主題搜索系統(tǒng)維護打印機設置備份與恢復

圖8.20“結(jié)算”節(jié)點的的功能結(jié)構(gòu)書店系統(tǒng)事務管理節(jié)點功能結(jié)構(gòu)員工基本信息管理系統(tǒng)維護編輯員工基本信息打印機設置瀏覽員工基本信息備份與恢復輸出員工信息幫助員工工資管理關于書店事務管理系統(tǒng)員工工資管理目錄搜索員工工資發(fā)放主題搜索員工勤績管理聯(lián)機幫助編輯員工勤績信息瀏覽員工勤績信息員工勤績統(tǒng)計日常事務管理圖8.21“事務管理”節(jié)點的功能結(jié)構(gòu)系統(tǒng)管理節(jié)點功能結(jié)構(gòu)系統(tǒng)設置幫助節(jié)點設置關于系統(tǒng)節(jié)點配置設置目錄搜索用戶設置主題搜索權限設置系統(tǒng)檢測節(jié)點檢測用戶檢測出錯檢測圖8.22“系統(tǒng)管理”節(jié)點的功能結(jié)構(gòu)

3．屏幕界面結(jié)構(gòu)設計

1)屏幕界面結(jié)構(gòu)設計的任務●屏幕界面結(jié)構(gòu)包括總體屏幕界面結(jié)構(gòu)和支細屏幕界面結(jié)構(gòu)?！傮w屏幕界面結(jié)構(gòu)是信息系統(tǒng)從頂層屏幕界面向下兩到三層的屏幕界面結(jié)構(gòu)，它是信息系統(tǒng)屏幕界面結(jié)構(gòu)的主體骨架，在屏幕界面中起核心作用?！Ъ毱聊唤缑娼Y(jié)構(gòu)則是總體屏幕界面下層的各個分支界面結(jié)構(gòu)。●屏幕界面結(jié)構(gòu)設計的任務是確定總體屏幕界面結(jié)構(gòu)。

2)下拉式菜單設計

●下拉式菜單反映系統(tǒng)的總體功能，通過菜單中的各個選項可以把屏幕切換到下一級屏幕界面，所以下拉式菜單是總體屏幕界面結(jié)構(gòu)的核心。

●信息系統(tǒng)功能結(jié)構(gòu)是每一個節(jié)點的下拉菜單設計的依據(jù)，菜單的內(nèi)容就反映了各節(jié)點的功能結(jié)構(gòu)?！癫藛卧O計的方法很簡單，現(xiàn)在所有可視化工具都提供了十分方便的菜單設計的功能。圖8.23是利用Jbuider設計的書店信息系統(tǒng)“圖書銷售”節(jié)點的下拉菜單界面。圖8.23“圖書銷售”的下拉菜單

3)屏幕界面結(jié)構(gòu)事實上，下拉菜單的內(nèi)容就已經(jīng)確定了信息系統(tǒng)應該具有的屏幕界面結(jié)構(gòu)。每一個菜單項描述一個系統(tǒng)功能，點擊該菜單項，就能把完成對應功能的屏幕界面切換為當前屏幕界面。書店信息系統(tǒng)“圖書銷售”節(jié)點的屏幕界面結(jié)構(gòu)見圖8.24。圖8.24“圖書銷售”屏幕界面結(jié)構(gòu)

8.5.4對話設計

1．對話過程

●對話過程：用戶與信息系統(tǒng)之間的交互過程。用戶要通過信息系統(tǒng)完成一個完整功能，就需要與系統(tǒng)發(fā)生一次對話過程?！褚粋€用例功能的實現(xiàn)過程就是用戶與系統(tǒng)的一次對話過程。在對話過程中，用戶向系統(tǒng)提出要求，系統(tǒng)給予應答。下面給出“售書處理”用例中，售書員和收款員分別通過各自圖書銷售管理節(jié)點和結(jié)算節(jié)點與書店信息系統(tǒng)的對話過程。條件：假定售書員已經(jīng)把銷售圖書節(jié)點上的系統(tǒng)啟動，并處在“售書處理”屏幕界面；收款員已經(jīng)把結(jié)算節(jié)點系統(tǒng)啟動，并處在“收書款”屏幕界面。讀者從書架上找到兩本《系統(tǒng)分析與設計》及一本《軟件工程技術概論》，拿到售書員柜臺前，希望購買這三本書?！断到y(tǒng)分析與設計》的圖書編號是9787111108481，《軟件工程技術概論》的圖書編號是9787030099402。圖8.25是在售書處理過程中，售書員和收款員分別與系統(tǒng)的三個對話過程。對話一：在銷售圖書節(jié)點售書員與系統(tǒng)的對話售書員：用掃描儀掃描三本書的圖書編號9787111108481、9787111108481和9787030099402。系統(tǒng)：在屏幕上顯示出這兩種書的圖書信息，包括圖書編號、圖書名稱、作者、出版社、單價、出版日期、冊數(shù)，以及價格合計。售書員：點擊“開書單”按鈕。系統(tǒng)：彈出窗口，提示用戶等待，當前正在打印書單，啟動打印機，打印出三聯(lián)書單。書單打印完成之后，自動消除提示窗口。注：售書員把三聯(lián)書單交給讀者，讓讀者在收款柜臺交書款。(a)“售書處理”對話一圖8.25“售書處理”的三個對話過程圖8.25“售書處理”的三個對話過程對話二：在結(jié)算節(jié)點收款員與系統(tǒng)的對話收款員：輸入書單號。系統(tǒng)：顯示該書單信息，包括每一種圖書的圖書編號、圖書名稱、作者、出版社、單價、出版日期、冊數(shù)，以及書單圖書的價格合計。收款員：收讀者的書款，并按“書款”按鈕。注：收款員給自己留一聯(lián)書單，并給另外兩聯(lián)書單上蓋章，然后把書單交給讀者，讓讀者回到售書員處持書單領書。(b)“售書處理”對話二圖8.25“售書處理”的三個對話過程對話三：在銷售圖書節(jié)點售書員與系統(tǒng)的對話(繼續(xù))售書員：輸入書單號。系統(tǒng)：顯示書單信息，包括每一種圖書的圖書編號、圖書名稱、作者、出版社、單價、出版日期、冊數(shù)，以及書單圖書的價格合計。特別顯示“書款已交”。售書員：按“售出圖書”按鈕。注：售書員給自己留存一聯(lián)書單，給讀者一聯(lián)書單，并給圖書上蓋章，把圖書交給讀者，本次售書結(jié)束。(c)“售書處理”對話三

2．對話界面設計●對話界面：能夠?qū)崿F(xiàn)一個用例對話過程的一組屏幕界面稱為對話界面?！駥υ捊缑嬖O計：需要根據(jù)用例的對話要求，設計出一組能夠滿足用例功能需要，并具有友好界面風格的屏幕界面。圖8.26是“售書處理”用例對話過程的對話界面。首先進入“售書處理”界面，接收待售圖書的書號和冊數(shù)，接收完后，按“開書單”按鈕，則在“售書處理”界面上彈出一個小窗口，顯示“正在打印書單