《人機交互技術》實驗一

《人機交互技術》實驗一《人機交互技術》試驗報告

軟件091班

王晶

092543

試驗一圖形用戶界面的設計

一試驗目的和要求

1)熟識圖形用戶界面的設計原則

2)利用一種設計工具完成圖形化的用戶界面設計

二預備學問

圖形用戶界面又稱為WIMP界面，由窗口(windows)、圖標(icons)、菜單(menu)、教導設備(pointingdevice)四位一體，形成桌面(desktop)，如圖所示。

圖形用戶界面是當前用戶界面的主流，廣泛應用于各檔臺式微機和圖形工作站。圖形用戶界面的共同特點是以窗口管理系統(tǒng)為核心，使用鍵盤和鼠標器作為輸入設備。窗口管理系統(tǒng)除了基于可重疊多窗口管理技術外，廣泛采納的另一核心技術是大事驅(qū)動(event-driven)技術。

WIMP界面可看作是其次代人機界面，是基于圖形方式的人機界面。在WIMP界面中，人被稱為用戶，人機通過對話進行工作。用戶只能使用手這一種交互通道輸入信息，通過視覺通道獵取信息。在WIMP界面中，界面的輸出可以為靜態(tài)或動態(tài)的二維圖形或圖像等信息。

這種方式能同時輸出不同種類的信息，用戶也可以在幾個工作環(huán)境中切換而不丟失幾個工作之間的聯(lián)系，通過菜單可以執(zhí)行掌握型和對話型任務。由于引入了圖標、按鈕和滾動條技術，大大削減鍵盤輸入，提高了交互效率?；谑髽撕蛨D形用戶界面的交互技術極大地推動了計算機技術的普及。

(1)圖形用戶界面的三個重要思想

1）桌面隱喻(desktopmetaphor)

指在用戶界面中用人們熟識的桌面上的圖例清晰地表示計算機可以處理的力量。隱喻的表現(xiàn)方法:靜態(tài)圖標、動畫、視頻

2）所見即所得(WhatYouSeeIsWhatYouGet，WYSIWYG)

顯示的用戶交互行為與應用程序最終產(chǎn)生的結果是全都的。

3）直接操縱(directmanipulation)

直接操縱是指可以把操作的對象、屬性、關系顯式地表示出來，用光筆、鼠標、觸摸屏或數(shù)據(jù)手套等教導設備直接從屏幕上獵取形象化命令與數(shù)據(jù)的過程。直接操縱的對象是命令、數(shù)據(jù)或是對數(shù)據(jù)的某種操作。

(2)設計圖形用戶界面的原則

1)一般性原則：界面要具有全都性、常用操作要有快捷方式、供應簡潔的錯誤處理、對操作人員的重要操作要有信息反饋、操作可逆、設計良好的聯(lián)機關心、合理劃分并高效地使用顯示屏、保證信息顯示方式與數(shù)據(jù)輸入方式的協(xié)調(diào)全都

2)顏色的使用：顏色是一種有效的強化手段，同時具有美學價值。使用顏色時應留意如下幾點：限制同時顯示的顏色數(shù)；畫面中活動對象的顏色應鮮亮，而非活動對象應暗淡；盡量避開不相容的顏色放在一起，如黃與藍，紅與綠等，除非作對比時用；若用顏色表示某種信息或?qū)ο髮傩?，要使用戶理解這種表示，并盡量采納通用的表示規(guī)章。

3)圖標的設計：圖標是可視地表示實體信息的簡潔、抽象的符號。圖標設計是方寸藝術，需要在很小的范圍內(nèi)表現(xiàn)出圖標的內(nèi)涵。設計圖標時應當著重考慮視覺沖擊力，要使用簡潔的顏色，利用眼睛對顏色和網(wǎng)點的空間混合效果，做出精彩圖標。

4）按鈕的設計：設計按鈕應當具有交互性，應當有3到6種狀態(tài)效果(點擊時的狀態(tài)、鼠標放在上面但未點擊的狀態(tài)、點擊前鼠標未放在上面時的狀態(tài)、點擊后鼠標未放在上面時的狀態(tài)、不能點擊時的狀態(tài)、獨立自動變化的狀態(tài))，按鈕應具備簡潔的圖示效果，應能夠讓使用者產(chǎn)生功能上的關聯(lián)反應。屬于一個群組的按鈕應當風格統(tǒng)一，功能差異大的按鈕應當有所區(qū)分。

5）屏幕布局的設計：設計屏幕布局(Layout)時應當使各功能區(qū)重點突出,

應遵循如下幾條原則：平衡原則、預期原則、經(jīng)濟原則、挨次原則、規(guī)章化6）菜單界面的設計：菜單在圖形界面的應用程序中使用得特別普遍，是軟件界面設計的一個重要組成方面，描述了一個軟件的大致功能和風格。菜單中的選項在功能上與按鈕相當，一般具有下列一種或幾種類型的選項：命令項、菜單項和窗口項。菜單的結構一般有單一菜單、線狀序列菜單、樹狀結構菜單、網(wǎng)狀結構菜單等，其中樹狀結構菜單是最常見的結構。

設計菜單界面時應留意的一般性原則：功能組織菜單，合理分類，并力求簡短，前后全都；合理組織菜單界面的結構與層次；按肯定的規(guī)章對菜單項進行排序；菜單選項的標題要力求文字簡短、含義明確，并且最好以關鍵詞開頭；常用選項要設置快捷鍵；充分利用菜單選項的使能與禁止、可見與隱蔽屬性；使用彈出式菜單。

7）填表輸入界面的設計：在處理大量相關數(shù)據(jù)的場合下，需要輸入一系列的數(shù)據(jù)，這時填表輸入界面是最抱負的數(shù)據(jù)輸入界面。在設計填表輸入界面時應遵循的原則：全都性；有含義的表格標題；使用易于理解的指導性說明文字；我按規(guī)律分組排序；表格的組織結構和用戶任務相全都；光標移動便利；出錯提示；供應關心；表格顯示應美觀、清晰，避開過分擁擠。

三試驗內(nèi)容與步驟

(一)試驗內(nèi)容：

利用常用的設計工具(VC/VB/Delphi/PB等)完成一個通用圖形用戶界面設計，要遵循界面設計的一般原則(全都性、快捷方式、供應錯誤處理)，留意顏色的使用，學會使用圖標、按鈕、屏幕布局、菜單和對話框的設計

(二)試驗步驟

1．設計多個對話框，完成填表輸入界面的設計，合理使用圖標、按鈕、顏色；

2．設計不同形式的菜單，完成對不同對話框的調(diào)用；

3．供應簡潔的錯誤處理、聯(lián)機關心

四、試驗相關：

試驗工具：Myeclipse

語言：Java

試驗內(nèi)容：打開，關閉，保存，查找文件

五、試驗代碼：

importjava.io.*;

importjava.awt.*;

importjava.awt.event.*;

importjavax.swing.*;

importjavax.swing.filechooser.*;

publicclassJFileChooserDemoextendsJFrame{

publicJFileChooserDemo(){

super("使用JFileChooser");

finalJTextAreata=newJTextArea(5,20);

ta.setMargin(newInsets(5,5,5,5));

ta.setEditable(false);

JScrollPanesp=newJScrollPane(ta);

finalJFileChooserfc=newJFileChooser();

JButtonopenBtn=newJButton("打開文件...");

openBtn.addActionListener(newActionListener(){publicvoidactionPerformed(ActionEvente){

intreturnVal=fc.showOpenDialog(

JFileChooserDemo.this);

if(returnVal==JFileChooser.APPROVE_OPTION){Filefile=fc.getSelectedFile();

ta.append("打開:"+file.getName()+".\n");

}elseta.append("取消打開命令.\n");

}

});

JButtonsaveBtn=newJButton("保存文件...");saveBtn.addActionListener(newActionListener(){publicvoidactionPerformed(ActionEvente){

intreturnVal=fc.showSaveDialog(

JFileChooserDemo.this);

if(returnVal==JFileChooser.APPROVE_OPTION){Filefile=fc.getSelectedFile();

ta.append("Saving:"+file.getName()+".\n");

}elseta.append("取消保存命令。\n");

}

});

JPanelbuttonPanel=newJPanel();

buttonPanel.add(openBtn);

buttonPanel.add(saveBtn);

openBtn.setNextFocusableComponent(saveBtn);saveBtn.setNextFocusableComponent(openBtn);Containerc=getContentPane();

c.add(buttonPanel,BorderLayout.NORTH);

c.add(sp,BorderLayout.CENTER);

}

publicstaticvoidmain(Stringargs){

JFrameframe=newJFileChooserDemo();

frame.setDefaultCloseOperation(EXIT_ON_CLOSE);frame.pack();

frame.setVisible(true);

}

}

六、試驗結果：

七、試驗思想：

使用JFileChooser類

JFileChooser類供應對文件的打開、關閉等文件操作的標準對話框。

JFileChooser類繼承于JComponent類，其構造方法有：

JFileChooser()構造一個指向用戶缺省名目的JFileChooser對象。

JFileChooser(FilecurrentDirectory)構造一個以給定File為路徑的JFileChooser對象。

構造JFileChooser對象后，要利用該類的方法showOpenDialog()或showSaveDialog()來顯示文件打開或文件關閉對話框。它們的格式為：

publicintshowOpenDialog(Componentparent)throwsHeadlessException

publicintshowSaveDialog(Componentparent)throwsHeadlessException

它們的參數(shù)都是包含對話框容器的對象。返回值為下面幾種狀況：

JFileChooser.CANCEL_OPTION表示選擇了“撤消”按鈕。

JFileChooser.APPROVE_OPTION表示選擇了“打開”或“保存”按鈕。

JFileChooser.ERROR_OPTION表示消失錯誤。

在打開或關閉文件對話框中作出選擇后，可用JFileChooser類的方法getSelectedFile()返回選取的文件名（File類的對象）。

八、試驗總結：

1、設計原則：

使用圖形界面GUI(GraphicsUserInterface)

圖形界面—用多種媒體顯示信息，用直觀、便利的GUI標準組件來接收命令。掌握權在用戶

界面與操作的風格全都性寬容（容錯）性簡潔與美觀并重2、界面構成：

3、使用嵌套面板：

4、使用Choice下拉選單：

5、使用Scrollbar滾動條：

5、使用聯(lián)機關心：

八、試驗總結：

風格設計分析：針對用戶年輕，更加偏好顏色豐富，但是針對于此軟件要求的功能應符合操作簡潔。則主要用鼠標點擊操作就可以便利的查看文件。雖然要追求界面的時尚和華麗，但是界面過于明麗，簡單導致用戶視覺疲憊。則輕松的淡藍色為主配色，灰色系為主。

用戶導航顯示：簡潔明白，文字描述要明白，通過文字和圖標協(xié)作示意，用戶看到按鈕，可以快速的明白此按鈕功能。布局應當滿意用戶習慣，結合廣闊軟件按鈕布局方式。

為了保持界面在設計過程中，要求各個界面的風格的統(tǒng)一，先做出表格，列出界面制作統(tǒng)一的原則和規(guī)范。

九、對自已設計界面的可用性評估：