《信息系統(tǒng)分析與設(shè)計(jì)》課件第9章：詳細(xì)設(shè)計(jì)下

第9章詳細(xì)設(shè)計(jì)下

界面設(shè)計(jì)●

概述●輸入設(shè)計(jì)●輸出設(shè)計(jì)●屏幕界面設(shè)計(jì)本章內(nèi)容1概述

1.1人機(jī)界面的概念

人機(jī)界面(HMI，Human-MachineInterface)，是人與機(jī)器進(jìn)行交互的操作方式,即用戶與機(jī)器相互傳遞信息的媒介,其中包括輸入和輸出，人機(jī)界面也叫用戶界面。

1.2人機(jī)界面的要素

人機(jī)界面是在人機(jī)系統(tǒng)中，人與機(jī)器的軟件和硬件交匯的接口。軟件人機(jī)界面人硬件

1.3對(duì)人機(jī)界面的理解

1開發(fā)者對(duì)人機(jī)界面的理解

人機(jī)界面是信息系統(tǒng)與用戶的交流渠道，是系統(tǒng)向用戶展示功能的界面，是開發(fā)工作的一個(gè)方面。

系統(tǒng)與用戶交互的渠道展現(xiàn)系統(tǒng)功能的手段信息系統(tǒng)開發(fā)的一項(xiàng)工作開發(fā)者看到的人機(jī)界面:2用戶對(duì)人機(jī)界面的理解

⑴人機(jī)界面的物理特征

用戶首先感受到的用戶界面是鍵盤、鼠標(biāo)、觸摸屏、打印機(jī)等物理設(shè)備，對(duì)用戶界面形成這些直觀的物理印象特征。辦公桌椅，鍵盤，鼠標(biāo)，打印機(jī)，觸摸屏，手冊(cè)，書面表格等2用戶對(duì)人機(jī)界面的理解

⑵人機(jī)界面的感知特征

用戶通過界面看到、聽到、觸摸到的所有東西（物理設(shè)備除外）。窗口、菜單、對(duì)話框、按紐，直線、圖形，顏色，語言等2用戶對(duì)人機(jī)界面的理解

⑶人機(jī)界面的概念特征

界面所表現(xiàn)的領(lǐng)域空間中的概念內(nèi)容和軟件空間的內(nèi)容。例如，客戶、產(chǎn)品、訂單、修改、打印、雙擊鍵盤?？蛻簟a(chǎn)品、訂單、添加、刪除、雙擊、修改等

用戶看到的人機(jī)界面:

人機(jī)界面也就是信息系統(tǒng)的全部!客戶、產(chǎn)品、訂單、添加、刪除、雙擊、修改等辦公桌椅，鍵盤，鼠標(biāo)，打印機(jī)，觸摸屏，手冊(cè)，書面表格等窗口、菜單、對(duì)話框、按紐，直線、圖形，顏色，語言等物理特征感知特征概念特征

1.4人機(jī)界面研究涉及的知識(shí)領(lǐng)域

社會(huì)心理學(xué)人機(jī)界面媒體認(rèn)知心理學(xué)語言學(xué)人類學(xué)生理學(xué)工程學(xué)圖形藝術(shù)計(jì)算機(jī)科學(xué)

1.5人機(jī)界面的發(fā)展

1．命令語言界面

命令語言界面是從字符顯示終端出現(xiàn)到20世紀(jì)100年代中期人機(jī)交互界面的主要形式。

1.5人機(jī)界面的發(fā)展

2．菜單界面

菜單界面是通過菜單選項(xiàng)來選擇完成的功能的一種人機(jī)交互界面。

3．圖形用戶界面

圖形用戶界面GUI（GraphicsUserInterface）被稱為第二代用戶界面，也是目前人機(jī)交互采用的主要人機(jī)界面方式。

4．多通道用戶界面

多通道用戶界面是虛擬現(xiàn)實(shí)技術(shù)帶來的未來人機(jī)界面交互形式?！裼脩艨梢允褂米匀坏慕换シ绞剑缯Z音、手勢(shì)、眼神、表情、指點(diǎn)等與系統(tǒng)進(jìn)行協(xié)作工作。

1.6用戶界面設(shè)計(jì)的工作

包括界面需求分析、輸入設(shè)計(jì)、輸出設(shè)計(jì)、屏幕界面設(shè)計(jì)和編寫用戶手冊(cè)等工作，見下圖。2輸入設(shè)計(jì)

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

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

2.1輸入方式設(shè)計(jì)

1.輸入方式的概念和形式

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

形式：批輸入、聯(lián)機(jī)輸入和混合輸入三種方式。

2.輸入方式設(shè)計(jì)

(1)．批輸入方式

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

輸入步驟：

①收集一組相關(guān)數(shù)據(jù)；②把收集到的數(shù)據(jù)先存放到磁帶、磁盤等電子媒體上。③把電子媒體上的一組數(shù)據(jù)成批輸入到系統(tǒng)之中。

(2)．聯(lián)機(jī)輸入方式

聯(lián)機(jī)輸入方式是在業(yè)務(wù)處理過程中，邊輸入數(shù)據(jù)邊處理數(shù)據(jù)的一種數(shù)據(jù)輸入方式。學(xué)生食堂售飯系統(tǒng)數(shù)據(jù)輸入就采用聯(lián)機(jī)輸入方式，數(shù)據(jù)輸入和賣飯業(yè)務(wù)是同時(shí)進(jìn)行的。

(3)．混合輸入方式

是批輸入和聯(lián)機(jī)輸入相結(jié)合的方式。超市售貨系統(tǒng)就采用混合方式。結(jié)賬臺(tái)采用聯(lián)機(jī)方式，每天在確定的時(shí)候POS機(jī)再成批地把數(shù)據(jù)發(fā)送到中心數(shù)據(jù)庫中。2.2數(shù)據(jù)編碼

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

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

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

類型：順序碼、特征碼、類型碼和混合碼四種類型。

2.數(shù)據(jù)編碼的類型

①順序碼

按照事物的時(shí)間順序所進(jìn)行的編碼。如，學(xué)生編碼：0000123324；商品編碼：001234；入庫單編碼：323324。

②

特征碼

特征碼是按照事物的某一方面的固有特征所具有的順序進(jìn)行的編碼。順序碼基于事物發(fā)生的時(shí)間順序，特征碼按照事物固有特征進(jìn)行編碼。

如，張小青：ZHIXIAOQING

王文意：WANGWENYI

③

類型碼

類型碼是對(duì)一組具有相同特性的事物賦予的統(tǒng)一編碼。例如，

35×30的藍(lán)牛仔褲：101；

35×31的藍(lán)牛仔褲：102；

41#鞋：201；

42#鞋：202。

④

混合碼

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

順序碼，男性出生日期鄉(xiāng)縣市省6101236312128873輸出設(shè)計(jì)

●輸出設(shè)計(jì)概念：信息系統(tǒng)輸出設(shè)計(jì)是從信息輸出角度，通過對(duì)輸出設(shè)備、輸出內(nèi)容、輸出界面、輸出控制等方面的分析研究，確定出可行的輸出設(shè)計(jì)方案。輸出設(shè)計(jì)與輸入設(shè)計(jì)有密切的聯(lián)系?！裥畔⒌妮敵鐾緩剑浩聊惠敵觥?bào)表輸出和其它途徑輸出。

屏幕輸出又可分為文本輸出、圖表輸出、圖形圖像輸出和音頻輸出等形式。屏幕輸出又可通過屏幕界面的方式來組織。

3.1輸出報(bào)表

1．明細(xì)表

明細(xì)表用來反映在確定的時(shí)間范圍內(nèi)事務(wù)活動(dòng)的詳實(shí)情況，它強(qiáng)調(diào)對(duì)信息反映的詳實(shí)性。

學(xué)號(hào)姓名課程周學(xué)時(shí)節(jié)次345225612趙蘭C語言42345225612趙蘭計(jì)算機(jī)組成原理41345225613李曉數(shù)據(jù)結(jié)構(gòu)62345225613李曉計(jì)算機(jī)組成原理41345225614張木C語言42345225614張木計(jì)算機(jī)組成原理41學(xué)生選修課程明細(xì)表2002年第2學(xué)期打印日期：2007.9

2．匯總表

匯總表反映業(yè)務(wù)活動(dòng)的綜合信息。

3．分析表

分析表反映信息的對(duì)比和分析情況。圖.6分析表

3.2輸出圖表

1．散點(diǎn)圖

散點(diǎn)圖用來表現(xiàn)數(shù)據(jù)變化趨勢(shì)和規(guī)律，見圖.7。企業(yè)管理通常用散點(diǎn)圖反映業(yè)務(wù)過程的歷史數(shù)據(jù)，并預(yù)測(cè)業(yè)務(wù)未來的變化趨勢(shì)。

圖.7散點(diǎn)圖

2．折線圖

折線圖用來反映一定時(shí)間區(qū)間內(nèi)數(shù)據(jù)變化的波動(dòng)情況，見圖.8。折線圖也可以表現(xiàn)數(shù)據(jù)的變化趨勢(shì)。

3．條形圖

條形圖用來表現(xiàn)各分量之間的關(guān)聯(lián)關(guān)系和比例關(guān)系。

4．餅圖

餅圖通過圓和多個(gè)扇面來表示整體和部分以及各部分在整體中所占的比例，見圖.。

4屏幕界面設(shè)計(jì)

4.1屏幕界面設(shè)計(jì)的準(zhǔn)則

BenShneiderman的八項(xiàng)基本準(zhǔn)則。

圖.11用戶界面設(shè)計(jì)的八項(xiàng)準(zhǔn)則

1、盡量保持一致性

●一致性的含義：是所設(shè)計(jì)界面的按鍵、窗口、色彩、界面布局、界面風(fēng)格等在整個(gè)系統(tǒng)中始終應(yīng)該保持一致。

●一致性的內(nèi)容：

▲按鍵的一致性：系統(tǒng)定義的按鍵含義應(yīng)該一致。例如：復(fù)制:ctrl-C

剪切:ctrl-X

粘切:ctrl-V

●一致性的內(nèi)容：▲窗口的一致性：窗口的格式，定義，布局一致。

●一致性的內(nèi)容：▲色彩的一致性：在不同界面中色彩的含義一致。

●一致性的內(nèi)容：▲界面布局的一致性：界面的布局應(yīng)該一致。●一致性的內(nèi)容：▲界面風(fēng)格的一致性：界面的風(fēng)格保持一致?！褚恢滦缘膬?nèi)容：▲界面風(fēng)格的一致性：界面的風(fēng)格保持一致。

2、為熟練用戶提供快捷鍵●初學(xué)者：提供豐富的聯(lián)機(jī)幫助和界面說明，并更多地使用菜單和選項(xiàng)；

2、為熟練用戶提供快捷鍵●熟練用戶：提供快捷鍵。過多的操作界面反而會(huì)增加操作量，降低使用效率。例如：新建：ctrl+N;

打開：ctrl+O;

打?。篶trl+P;

保存：ctrl+S

3、提供有效反饋

系統(tǒng)應(yīng)該對(duì)用戶的每一個(gè)操作都給出反饋信息，以讓用戶了解系統(tǒng)對(duì)用戶操作的確認(rèn)。及時(shí)的反饋會(huì)提高用戶的注意力，增強(qiáng)用戶使用系統(tǒng)的興趣。例如：在復(fù)制時(shí)系統(tǒng)給出提示：

4、設(shè)計(jì)完整的對(duì)話過程

設(shè)計(jì)的對(duì)話過程應(yīng)該完整，有開始、中間處理和結(jié)束部分，因?yàn)槿颂幚砻恳粋€(gè)業(yè)務(wù)都是一個(gè)完整的過程。但是在業(yè)務(wù)處理過程中應(yīng)該提供例外處理功能。

▲對(duì)話的內(nèi)容：包括輸入的內(nèi)容和輸出的內(nèi)容；

▲對(duì)話的步驟；

▲例外處理。例如

售書處理對(duì)話售書員：用掃描儀掃描三本書的圖書編號(hào)9787111108481，9787111108481和

9787030099402。輸入購買冊(cè)數(shù)：1，1，1。輸入折扣率：0.9,0.9,0.8。系統(tǒng)：在屏幕上顯示出這兩種書的圖書信息：書號(hào)、圖書名稱、作者、出版社、單價(jià)、冊(cè)數(shù)，以及價(jià)格合計(jì)。售書員：點(diǎn)擊“開書單”按紐。系統(tǒng)：顯示圖書銷售單預(yù)覽窗口。售書員：選擇“打印”按鈕。系統(tǒng)：提示用戶等待，啟動(dòng)打印機(jī)打印圖書銷售單，書單打印完成之后，自動(dòng)消除提示窗口。售書員：選擇“收款售書”按鈕。系統(tǒng)：彈出收款售書窗口，準(zhǔn)備接收書款。售書員：輸入書款金額。系統(tǒng)：提示找零。售書員：選擇“確定“按鈕。系統(tǒng)：售書處理結(jié)束，返回準(zhǔn)備下一次售出處理。

5、提供簡(jiǎn)單的錯(cuò)誤處理機(jī)制

界面設(shè)計(jì)應(yīng)提供對(duì)用戶錯(cuò)誤的處理功能，并能夠檢查、提示、糾正用戶出現(xiàn)的常見錯(cuò)誤。否則，所設(shè)計(jì)的系統(tǒng)將是一個(gè)不健壯的系統(tǒng)。

例如：范圍檢查：超出范圍給予報(bào)告；類型檢查：類型出錯(cuò)給予報(bào)告；相關(guān)性檢查：相關(guān)的數(shù)據(jù)出錯(cuò)給予報(bào)告；一致性檢查：數(shù)據(jù)出現(xiàn)不一致問題報(bào)告。6、允許撤消動(dòng)作

對(duì)用戶的一些錯(cuò)誤或試探性動(dòng)作應(yīng)該允許用戶在操作過程中自動(dòng)撤除。人們?cè)趶氖乱豁?xiàng)工作的過程中，經(jīng)常會(huì)做出一些試探動(dòng)作，或不自覺地犯錯(cuò)，撤消這些動(dòng)作并重新進(jìn)行符合用戶的工作習(xí)慣。

7、提供控制的內(nèi)部軌跡

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

8、減少短期記憶負(fù)擔(dān)

短期記憶指在頭腦中儲(chǔ)存1分鐘左右的記憶,心理學(xué)規(guī)律發(fā)現(xiàn):1)人短期沒有復(fù)述,18秒后回憶的正確率僅在15%;2)人短期記憶的容量為7±2。

系統(tǒng)界面設(shè)計(jì)中應(yīng)該盡量減少人的記憶負(fù)擔(dān),通過:

記憶量不大于7;

信息分組;

信息賦予一定意義;

拉長(zhǎng)屏幕之間的切換時(shí)間;

信息提示及時(shí)反饋

等方式增強(qiáng)記憶效果。

4.2圖形屏幕界面

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

1．界面框架(Frame)

●界面框架：是一個(gè)屏幕界面的總構(gòu)架，所有屏幕控件都建立在界面框架之中。

2．窗口

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

3．菜單

●菜單的概念：菜單(Menu)是由系統(tǒng)顯示給用戶的一種可選項(xiàng)目的列表,用戶可以從中選擇一項(xiàng)要做的工作。

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

4．控件控件(Component)是圖形用戶界面對(duì)除窗口和菜單之外的所有界面構(gòu)件的總稱，有些圖書把窗口和菜單也歸到控件之中。標(biāo)簽文本框列表框滾動(dòng)條按鈕單選按鈕復(fù)選框

4.3屏幕界面結(jié)構(gòu)設(shè)計(jì)

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

●概念：屏幕界面結(jié)構(gòu)是由信息系統(tǒng)用戶界面中的所有屏幕界面構(gòu)成的結(jié)構(gòu)框架。一個(gè)信息系統(tǒng)完整的用戶界面可能由幾百幅到幾千幅屏幕界面構(gòu)成。圖.15書務(wù)系統(tǒng)的屏幕界面結(jié)構(gòu)

2．信息系統(tǒng)需求結(jié)構(gòu)決定屏幕界面結(jié)構(gòu)

●屏幕界面結(jié)構(gòu)主要根據(jù)信息系統(tǒng)需求結(jié)構(gòu)來確定.

小區(qū)物業(yè)系統(tǒng)需求結(jié)構(gòu)

小區(qū)物業(yè)系統(tǒng)屏幕界面結(jié)構(gòu):

3．下拉菜單在屏幕界面結(jié)構(gòu)中的作用

●下拉式菜單反映系統(tǒng)的總體功能，通過菜單中的各個(gè)選項(xiàng)可以把屏幕切換到下一級(jí)屏幕界面，所以下拉式菜單是總體屏幕界面結(jié)構(gòu)的核心?！癫藛卧O(shè)計(jì)的方法很簡(jiǎn)單，現(xiàn)在所有可視化工具都提供了十分方便的菜單設(shè)計(jì)的功能。圖“圖書銷售”的下拉菜單“圖書銷售”節(jié)點(diǎn)的下拉菜單界面:案例分析

4.4對(duì)話設(shè)計(jì)

1．對(duì)話過程

●對(duì)話過程：用戶與信息系統(tǒng)之間的交互過程。用戶要通過信息系統(tǒng)完成一個(gè)完整功能，就需要與系統(tǒng)發(fā)生一次對(duì)話過程。●一個(gè)用例功能的實(shí)現(xiàn)過程就是用戶與系統(tǒng)的一次對(duì)話過程。在對(duì)話過程中，用戶向系統(tǒng)提出要求，系統(tǒng)給予應(yīng)答。下面給出“售書處理”用例中，售書員和收款員分別通過各自圖書銷售管理節(jié)點(diǎn)和結(jié)算節(jié)點(diǎn)與書店信息系統(tǒng)的對(duì)話過程。

當(dāng)前條件：

售書員:

在“售書處理”屏幕界面；

收款員:在“收書款”屏幕界面。

讀者:《系統(tǒng)分析與設(shè)計(jì)》兩本,書號(hào):9787111108481《軟件工程技術(shù)概論》一本,書號(hào):9787030099402案例分析

“售書處理”的對(duì)話過程對(duì)話一：銷售圖書節(jié)點(diǎn):售書員與系統(tǒng)的對(duì)話售書員：用掃描儀掃描三本書的圖書編號(hào)9787111108481、9787111108481和9787030099402。系統(tǒng)：在屏幕上顯示出這兩種書的圖書信息，包括圖書編號(hào)、圖書名稱、作者、出版社、單價(jià)、出版日期、冊(cè)數(shù)，以及價(jià)格合計(jì)。售書員：點(diǎn)擊“開書單”按鈕。系統(tǒng)：彈出窗口，提示用戶等待，當(dāng)前正在打印書單，啟動(dòng)打印機(jī)，打印出三聯(lián)書單。書單打印完成之后，自動(dòng)消除提示窗口。注：售書員把三聯(lián)書單交給讀者，讓讀者在收款柜臺(tái)交書款。(a)“售書處理”對(duì)話一案例分析

對(duì)話二：結(jié)算節(jié)點(diǎn):收款員與系統(tǒng)的對(duì)話收款員：輸入書單號(hào)。系統(tǒng)：顯示該書單信息，包括每一種圖書的圖書編號(hào)、圖書名稱、作者、出版社、單價(jià)、出版日期、冊(cè)數(shù)，以及書單圖書的價(jià)格合計(jì)。收款員：收讀者的書款，并按“書款”按鈕。注：收款員給自己留一聯(lián)書單，并給另外兩聯(lián)書單上蓋章，然后把書單交給讀者，讓讀者回到售書員處持書單領(lǐng)書。(b)“售書處理”對(duì)話二對(duì)話三：銷售圖書節(jié)點(diǎn):售書員與系統(tǒng)的對(duì)話(繼續(xù))售書員：輸入書單號(hào)。系統(tǒng)：顯示書單信息，包括每一種圖書的圖書編號(hào)、圖書名稱、作者、出版社、單價(jià)、出版日期、冊(cè)數(shù)，以及書單圖書的價(jià)格合計(jì)。特別顯示“書款已交”。售書員：按“售出圖書”按鈕。注：售書員給自己留存一聯(lián)書單，給讀者一聯(lián)書單，并給圖書上蓋章，把圖書交給讀者，本次售書結(jié)束。(c)“售書處理”對(duì)話三案例分析

2．對(duì)話界面設(shè)計(jì)●對(duì)話界面：能夠?qū)崿F(xiàn)一個(gè)用例對(duì)話過程的一組屏幕界面稱為對(duì)話界面?！駥?duì)話界面設(shè)計(jì)：需要根據(jù)用例的對(duì)話要求，設(shè)計(jì)出一組能夠滿足用例功能需要，并具有友好界面風(fēng)格的屏幕界面。

下圖是“售書處理”用例對(duì)話過程的對(duì)話界面。首先進(jìn)入“售書處理”界面，接收待售圖書的書號(hào)和冊(cè)數(shù)，接收完后，按“開書單”按鈕，則在“售書處理”界面上彈出一個(gè)小窗口，顯示“正在打印書單，請(qǐng)等……”。

圖“售書處理”對(duì)話界面案例分析

圖“收書款”對(duì)話界面案例分析

4.5屏幕界面布局和風(fēng)格設(shè)計(jì)

1屏幕界面布局設(shè)計(jì)

⑴屏幕界面布局設(shè)計(jì)的原則▲實(shí)用：正確地反映這個(gè)界面要顯示內(nèi)容的設(shè)計(jì)要求。

▲美觀：具有美感,能夠吸