軟件人機(jī)界面設(shè)計(jì)（第四章 填表和菜單界面設(shè)計(jì)）

1、第二篇 人機(jī)界面設(shè)計(jì)開發(fā)方法第四章 填表和菜單界面設(shè)計(jì)本章學(xué)習(xí)目標(biāo)填表設(shè)計(jì)的概念是什么？填表的設(shè)計(jì)準(zhǔn)則有哪些？菜單設(shè)計(jì)有哪些原則？掌握用VB.NET 進(jìn)行菜單設(shè)計(jì)？填表和菜單界面設(shè)計(jì)填表技術(shù)菜單技術(shù)VB.NET菜單編程技術(shù)圖4.1 填表技術(shù)的一個(gè)實(shí)例 填表技術(shù)填表方式中所有的信息都一目了然，給用戶以掌握對(duì)話的主動(dòng)權(quán)的感覺。用戶必須熟悉鍵盤，會(huì)使用TAB（制表）鍵去移動(dòng)光標(biāo)，會(huì)用Backspace（退格）鍵改錯(cuò)，了解表格欄目標(biāo)號(hào)的含義，知道可以容許的欄目?jī)?nèi)容，以及會(huì)使用ENTER鍵。填表必須在顯示器上執(zhí)行，而不是在硬拷貝設(shè)備上執(zhí)行，而且顯示器必須能支持光標(biāo)移動(dòng)。填表技術(shù)填表方式的設(shè)計(jì)準(zhǔn)則欄目的顯

2、示方式圖4.2 GmailA網(wǎng)站上的填表設(shè)計(jì)填表方式的設(shè)計(jì)準(zhǔn)則使用有意義的表格標(biāo)題給出簡(jiǎn)短的易于理解的說明文字在表格上使用邏輯序列對(duì)字段進(jìn)行邏輯排序和分組表格按直觀性布置使用熟悉的欄目標(biāo)題使用前后一致的術(shù)語(yǔ)和縮寫在數(shù)據(jù)輸入字段周圍建立分界允許光標(biāo)方便地轉(zhuǎn)移允許簡(jiǎn)單的錯(cuò)誤更正輸入無效值時(shí)應(yīng)提供出錯(cuò)信息清楚標(biāo)出任何一個(gè)可選擇的字段各個(gè)欄目應(yīng)有解釋性信息盡可能防止錯(cuò)誤清楚地用信號(hào)告知輸入完成欄目的顯示方式信息的各個(gè)列，都需要針對(duì)數(shù)據(jù)輸入項(xiàng)和屏幕顯示作專門的處理。字母字符欄目，通常不管是在數(shù)據(jù)輸入項(xiàng)還是在屏幕顯示時(shí)都是靠左對(duì)齊的。數(shù)值欄目可以在數(shù)據(jù)輸入時(shí)為靠左對(duì)齊，而在屏幕顯示時(shí)則為靠右對(duì)齊。應(yīng)盡可能

3、在數(shù)值欄目中避免讓最左邊有零出現(xiàn)在數(shù)據(jù)輸入項(xiàng)或屏幕顯示上。有十進(jìn)制小數(shù)點(diǎn)的數(shù)值欄目，應(yīng)該讓小數(shù)點(diǎn)上下對(duì)齊。對(duì)某些公共的欄目應(yīng)當(dāng)給以專門的注意。菜單技術(shù)菜單選擇（menu selection）交互方式是使用較早、最廣泛的人機(jī)交互方式，其特點(diǎn)是提供給用戶的是一系列對(duì)應(yīng)可能動(dòng)作的條目列表，用戶選擇適當(dāng)條目來完成操作并觀察結(jié)果。菜單方法優(yōu)點(diǎn)它可以讓用戶不必接受專門培訓(xùn)，不必去記憶復(fù)雜的命令序列。目前業(yè)界對(duì)各種新式的菜單設(shè)計(jì)技術(shù)展開了廣泛的研究，提出了許多新的極其有創(chuàng)意的菜單設(shè)計(jì)技術(shù)菜單技術(shù)菜單設(shè)計(jì)原則菜單標(biāo)題菜單選項(xiàng)的措詞菜單屏幕的布局和設(shè)計(jì)圖4.3 Ubantu操作系統(tǒng)菜單界面菜單設(shè)計(jì)原則菜單設(shè)計(jì)一

4、般性原則：1.按照系統(tǒng)的功能（即任務(wù)語(yǔ)義）來組織菜單。2.要選用廣而淺的菜單樹，而不是窄而深的菜單樹。3.根據(jù)菜單選項(xiàng)的含義進(jìn)行分組，并且按一定的規(guī)則排序。4.菜單項(xiàng)的安排應(yīng)有利于提高菜單選取速度。5.常用選項(xiàng)要設(shè)置快捷鍵。6.語(yǔ)法、布局、用詞前后一致7.應(yīng)考慮聯(lián)機(jī)求助、新穎選擇機(jī)制、響應(yīng)時(shí)間、顯示速率和屏幕尺寸。菜單標(biāo)題為一本書選擇一個(gè)書名，對(duì)作者、編輯或出版商來說都是一件棘手的事情。一個(gè)富有描述性或易于記憶的標(biāo)題，可以在讀者中產(chǎn)生巨大的反響。同樣，為菜單選擇標(biāo)題也是一件復(fù)雜的事情，應(yīng)該慎重考慮。單一菜單：有一個(gè)表明所處狀態(tài)的簡(jiǎn)單的描述性標(biāo)題就行了。樹結(jié)構(gòu)的菜單，選擇標(biāo)題就比較困難。標(biāo)題的布

5、置和菜單屏幕的其他特征方面做到前后一致。菜單選項(xiàng)的措詞使用熟悉的和前后一致的用語(yǔ)保證選項(xiàng)彼此不雷同使用前后一致的和精確的措詞將關(guān)鍵詞放到左邊菜單項(xiàng)名應(yīng)能體現(xiàn)該選擇項(xiàng)所完成的功能，使用語(yǔ)氣親切、含義明確、易于理解、簡(jiǎn)短明了的單詞、語(yǔ)句或動(dòng)賓短語(yǔ)作菜單項(xiàng)名菜單屏幕的布局和設(shè)計(jì)標(biāo)題：有些人希望標(biāo)題放在正中，可是靠左對(duì)齊列出標(biāo)題也是一種可接受的方法，特別是當(dāng)顯示速率較慢時(shí)。選項(xiàng)的布置：一般情況下，選項(xiàng)是跟選項(xiàng)編號(hào)或者跟選項(xiàng)的描述文字前的字母一起靠左對(duì)齊的。可以用一個(gè)空行把不同含義的選項(xiàng)組分隔開來。如用幾個(gè)豎欄的話，應(yīng)當(dāng)使用前后一致的編號(hào)模式或字母模式。指導(dǎo)說明：在每個(gè)菜單中，指導(dǎo)說明文字應(yīng)當(dāng)是相同的，

6、安排在同一個(gè)位置。這一規(guī)則也包括有關(guān)菜單穿越、求助信息或功能鍵用法的指導(dǎo)說明文字。出錯(cuò)信息：如果用戶作了一個(gè)不可接受的選擇，應(yīng)在指定的位置上顯示出錯(cuò)信息。狀態(tài)報(bào)告：有些系統(tǒng)還指出正在查找的是菜單結(jié)構(gòu)的哪一部分，正在查看的是菜單結(jié)構(gòu)的哪一頁(yè)，這些信息也應(yīng)在一個(gè)統(tǒng)一的位置上顯示。VB.NET菜單編程技術(shù)VB.NET 基本菜單設(shè)計(jì)彈出式菜單的實(shí)現(xiàn)（PopupMenu Method）菜單項(xiàng)的其他屬性Windows菜單設(shè)計(jì)指南一致性：選擇用戶熟悉的術(shù)語(yǔ)，以一致的方式使用這些術(shù)語(yǔ)。使用有特色的條目：菜單條之間的區(qū)分要十分清晰。簡(jiǎn)明性：菜單條應(yīng)使用短名字，如“幫助”就遠(yuǎn)比“你可能想找的有用信息”要好。把關(guān)鍵

7、詞置于菜單條名稱的首位：條目名稱的第一個(gè)詞有助于用戶區(qū)分菜單條目。建立邏輯上相似的條目組：在同一菜單下面每個(gè)菜單條目應(yīng)和其他條目有相似之處。VB.NET 基本菜單設(shè)計(jì)啟動(dòng)Visual Studio .Net。選擇菜單【文件】|【新建】|【項(xiàng)目】后，彈出【新建項(xiàng)目】對(duì)話框。將【項(xiàng)目類型】設(shè)置為【Visual Basic項(xiàng)目】。將【模板】設(shè)置為【W(wǎng)indows應(yīng)用程序】。在【名稱】文本框中輸入【菜單編程】。在【位置】的文本框中輸入【E:VS.NET項(xiàng)目】，然后單擊【確定】按鈕。把Visual Studio .Net的當(dāng)前窗口切換到【Form1.vb（設(shè)計(jì)）】窗口，并從【工具箱】中的【W(wǎng)indows

8、窗體組件】選項(xiàng)卡中往Form1窗體中拖入下列組件。選中“MainMenuStrip1”組件的“Type Here”中，按由上至下順序輸入“文件（&F）”、“新建（&N）”、“-”、“打開（&O）”。這樣一個(gè)簡(jiǎn)單的下拉菜單就完成了。彈出式菜單的實(shí)現(xiàn)在上述項(xiàng)目中，從【工具箱】中的【W(wǎng)indows窗體組件】選項(xiàng)卡中往Form1窗體中拖入一個(gè)ContextMenuStrip組件，名稱為ContextMenuStrip1。選中“ContextMenu1”組件，在所得圖4.1所示界面中可直接輸入菜單選項(xiàng)： 圖4.1 利用菜單設(shè)計(jì)器設(shè)計(jì)彈出菜單彈出式菜單的實(shí)現(xiàn)在圖4.1所示的“上下文菜單”下的“Type H

9、ere”中，按由上至下順序輸入“拷貝（&C）”、“剪切（&X）”、“粘貼（&V）”后，此時(shí)設(shè)計(jì)后的菜單如圖4.2所示：圖4.2 利用菜單設(shè)計(jì)器設(shè)計(jì)后的彈出菜單彈出式菜單的實(shí)現(xiàn)選定Form1的屬性選項(xiàng)卡，并設(shè)定Form1的“ContextMenu”的屬性值為“ContextMenuStrip1”。此時(shí)單擊快捷鍵“F5”運(yùn)行程序，在程序窗體中單擊鼠標(biāo)右鍵，則彈出上面設(shè)計(jì)的彈出菜單，具體如圖4.3所示：對(duì)于其他組件一般也都有“ContextMenuStrip”屬性，只需把組件的“ContextMenuStrip”屬性值設(shè)置為設(shè)計(jì)好的彈出菜單名稱，這樣當(dāng)在此組件中單擊鼠標(biāo)右鍵，就會(huì)彈出對(duì)應(yīng)的彈出菜單。

10、圖4.3 在應(yīng)用程序中使用上述設(shè)計(jì)好的菜單菜單項(xiàng)的其他屬性雖然使用菜單設(shè)計(jì)器能夠設(shè)計(jì)出各種菜單，但要真正掌握VB.NET中的菜單編程，還必須了解并靈活使用MainMenu類、MenuItem類和ContextMenu類。其中MainMenu類和ContextMenu類所起的作用是相似的，它們的作用是提供一個(gè)菜單項(xiàng)容器，里面可以存放各種菜單項(xiàng)。本章小結(jié)本章介紹了人機(jī)界面設(shè)計(jì)的填表技術(shù)和菜單技術(shù)及其在VB上的應(yīng)用。填表方式的優(yōu)點(diǎn)是：所有的信息都一目了然，給用戶以掌握對(duì)話的主動(dòng)權(quán)的感覺。當(dāng)需要同時(shí)輸入許多數(shù)據(jù)域時(shí)，填表技術(shù)是較好的交互方式。填表方式的詳細(xì)設(shè)計(jì)規(guī)則包括：確定欄目的排序，使其為用戶所熟悉

11、；應(yīng)該確定顯示器的寬度和高度；確定如何做到醒目顯示；確定亮度等級(jí)、色彩和字體；確定使用什么鍵來移動(dòng)光標(biāo)；確定欄目的編碼。除此之外，在填表方式設(shè)計(jì)中還應(yīng)包括：多幀屏幕的表格、菜單與表格混合方式、使用圖形、與表格記錄紙的關(guān)系、使用指向裝置、色彩使用、處理特殊情況與文字處理程序的集成。菜單的優(yōu)點(diǎn)是易學(xué)易用，它是由系統(tǒng)驅(qū)動(dòng)的，能大大減輕用戶的記憶量，用戶可以借助菜單界面搜索軟件的功能與操作方法，很快學(xué)會(huì)掌握新系統(tǒng)。在菜單界面中，用戶選擇菜單的輸入量少，不易出錯(cuò)，而且菜單的實(shí)現(xiàn)也較容易。菜單的缺點(diǎn)是交互活動(dòng)受限制，即只能完成預(yù)定的交互功能；其次在大系統(tǒng)中使用速度慢，有時(shí)為完成一個(gè)簡(jiǎn)單的功能，必須經(jīng)過幾級(jí)菜單的選擇；此外因受屏幕顯示空間的限制，每幅菜單顯示的菜單項(xiàng)數(shù)受限制；最后顯示菜單需要空間和顯示時(shí)間，增加了系統(tǒng)開銷。菜單可用文本或圖形方式表示，直接操縱的圖形式菜單現(xiàn)正得到廣泛的應(yīng)用。菜單的使用對(duì)象是要熟悉系統(tǒng)的功能又缺少計(jì)算機(jī)經(jīng)驗(yàn)的用戶，對(duì)于熟練型或?qū)＜倚陀脩羧绻到y(tǒng)響應(yīng)快也可使用，但不如命令語(yǔ)言靈活和高效。習(xí)題四填表技術(shù)有哪些特點(diǎn)？它對(duì)那些交互最