成熟的ERP系統的界面應該都是從模板中拷貝出來的,各類功能的界面有規律可遵循。軟件界面設計模式化或是藝術性的創作,我認可前者,模式化的界面客戶容易舉一反三,降低學習門檻。除了一些小部分的功能界面設計特殊一些,ERP絕大部分的功能的界面都相似。以我接觸和設計的ERP系統,總結常見的界面設計模式,供讀者參考。
模式1 單據 Entry
常用於各種單據的輸入界面,也可用於主文件/主檔(客戶,供應商,部門等)界面,參考下面的圖片。
我在圖中作了標識,A區是工具條按鈕,所有的界面共享工具條按鈕,接着是數據輸入區,數據輸入分為主表和明細表。
主表中關鍵的字段放在界面最頂層,其它各字段根據功能相似的類別組合在一起,B區中除了放置表頭數據,還需要用新增加選項卡的方式放置明細數據。C區是單據狀態欄,上圖中顯示了當前單據的創建時間和創建人,也可以增加顯示當前單據的狀態(未審核,未過帳)。D區是功能狀態欄,顯示與當前功能關聯最重要的會計期間,登入用戶和帳套等信息。
模式2 單據查詢 Enquiry
這是第一個界面的只讀版,去掉了工具條中的新增,刪除和編輯功能。代碼的實現也非常容易,只需要設定相關屬性。
public class PurchaseOrderEnquiry: Sales.PurchaseOrderEntry { public PurchaseOrderEnquiry() { this.SupportAdd=false; this.SupportDelete=false; this.SupportEdit=false; } }
模式3 數據查詢 Query
這種模式常用來作數據列表查詢,上面的兩個界面解決了單個數據的編輯,另一種情景中我們常常想要一個列表查詢(List),看一下根據指定的過濾條件看一下系統有多少筆數據。
數據查詢界面設計模式包含四個部分,A區是過濾條件,B區是按鈕動作,可以執行查詢或是清除A區的過濾條件,C區是數據結果呈現區域,D區是插足結果瀏覽,打印或是導出Excel。
這個界面模式中的C區結果數據帶有鑽取功能,看上圖中的User Id列,帶有藍色的下划線,雙擊可以進入指定的功能。
模式4 功能操作 Perform Action
ERP系統中有一部分功能是為了執行一項數據操作,比如日歷初始化功能,根據用戶輸入的日期范圍生成日歷數據。
這部分界面簡單,只需要放置相應的控件,從控件中取值之后執行數據操作。
參考下面的數據存檔功能的界面,選擇要存檔的單據類型,點擊處理(Process)即可執行單據存檔操作。
Perform Action模式因為是完全自定義的界面,所以要用后台線程組件(BackgroundWorker)處理按鈕事件(Process中的事件)避免死鎖主界面,執行過程中光標也應該是等待狀態(Cursors.Waiting)。
模式5 批次處理(過帳,批核) Batch Process(Posting,Approve)
批次處理界面用於簡化單據通用操作,比如需要將今天各部門提交上來的物料采購申請一次性或部分的批核完成。將銷售訂單部分全部過帳完成。通用的操作界面方便了管理層對數據的操作。
批次處理功能分五個區,A區是數據過濾條件區,用於輸入過濾條件,B區是根據A區中的過濾條件查詢到的未過帳的數據,C區是B區中的每筆數據的顯示,最后,通過D區中的全選或反選,點擊處理(Process)按鈕,完成批次處理。
E區可以對B區中的數據進行瀏覽,或是打印,導出。
這個界面模式與模式3操作相似,先根據過濾條件得到數據,再進行數據操作。
再舉一個批次申請加班的例子,參考下面的圖片,用於批次申請員工加班。
A區是過濾條件區,用於選擇一個部門或是班次的一組員工,B區是根據過濾條件得到的員工列表,在C區中填寫員工加班的開始時間和結束時間,最后點擊D區中的處理(Process)按鈕,批次生成加班記錄申請表。
模式6 Excel導入 Excel Import
這種模式用於單據的Excel數據文件導入,即使是上線完成,ERP系統中也會包含一部分從Excel導入的功能和數據。
具體見我的文章《解析大型.NET ERP系統 設計通用Microsoft Excel導入功能》,這篇文章中詳細講到了這種模式。
這種模式包含三個區域,A區是模板操作區,比如新建,保存或是加載現有的模板,B區是模板的預覽結果,將模板導出到Excel文件,按照欄位順序要求一次填入數據,最后到C區中,選擇包含數據的Excel文件,執行導入。
對於非通用的Excel導入,界面設計稍微有所區別,參考下面的圖片。
非標准化的Excel導入功能包含三個區域,A區選擇Excel文件,B區顯示A區中選擇的文件的數據,相當於預覽數據,C區執行導入數據,導入完成后會提示導入成功和失敗的數據項,C區還提供一個模板導出功能,方便用戶填寫數據。
模式7 大量更改 Mass Change
這個模式來源於ERP中的大量工程更改。對已經發行的物料清單要作出調整,需要用ECN(Engineering Change Notice)功能完成。大量工程更改是ECN的批次處理方法實現。ECN每次只能選一個物料清單,而大量工程更改可以根據過濾條件,選擇一個范圍內的物料清單對它們進行修改(增減物料或工序)。
大量更改設計模式隨業務不同稍微有所變化,但大致如上圖所示分為四個區域。A區是過濾條件,B區是要執行的動作,比如對物料清單增加物料或刪除工序,C區中有一些選項卡,用於顯示受影響的數據,這樣讓用戶可以知曉哪些數據會被修改。D區是執行修改動作。四個區域的設計,由過濾條件(A)到受影響的數據(C),增加要執行的動作(B),最后執行。
模式8 數據查找 Lookup
數據查找窗體用於簡化數據輸入,提供系統可用性。比如輸入供應商時,可以彈出供應商選反對話框,輸入客戶編號的地方,可以彈出客戶編號對話框。
數據查找窗體設計模式包含三個區域,A區是數據結果區,顯示滿足條件的查詢數據,B區可以對A區的數據進行搜索,借助於Infragistics WinGrid的功能,A區也可以對數據進行搜索,重排序,分組,統計(求和,求數量,求平均值),C區是確定按鈕,用於返回A區中光標所選中的行。
以上是單一數據查找窗體,參考下面的多筆數據查詢窗體,支持選擇一行或多行數據,只是在C區中多增加了幾個按鈕。
相比於前面的圖片,上圖中的圖片多了兩個選擇項按鈕。
模式9 附件 Attachment
ERP功能中的單據支持附件管理,比如客戶主檔功能中,將客戶的資質等信息以附件文檔的形式保存在客戶主檔功能中。每次想查看客戶的資料,直接從系統中查看附件。
具體見我的文章《解析大型.NET ERP系統 通用附件管理功能》,這篇文章中詳細講到了這種模式。
附件管理功能界面包含四個區域,A區是工具條,用於增刪改單據的附件數據,B區是單據的附件數據列表,C區是B區的附件文件瀏覽窗口,D區用於對C區的附件文件進行操作。可另存到本機或是在操作系統進程中打開附件文件。
附件界面設計模式中,附件文件可以保存在數據庫,共享文件夾或是FTP服務器中,這樣D區的實現代碼會因存儲位置的不同,稍微有所變化。
模式10 報表 Report
ERP系統包含數量龐大的報表庫,設計一個通用的報表閱讀界面給系統增色不少,報表界面支持常見的報表操作(打印,導出,縮放尺寸,搜索)。
報表界面模式包含二個區域,A區域是工具條,常見的功能是報表導出,打印設置,縮放,查找。B區域是水晶報表控件。
模式11 消息中心 Message Center
ERP系統中包含數據流轉和消息推送,一些要批核的單據,要處理的待辦事項,需要有一個統一集中的地方進行管理。
消息中心模式抄襲了Outlook Express的界面設計方法,參考了下面的消息中心的模式圖片。
消息中心模式分三個區域,A區是目錄,常見的收個箱,發件箱,待批核,已批核,B區是項目列表,比如收件箱郵件列表,C區是B區的詳細內容顯示。工具條可以增加新增消息,回復消息,刪除消息等功能對項目進行操作。
模式12 批核 Approval
批核模式用於單據或文檔的批核,ERP系統中包含固化的流程,也包含一些隨條件變化而不同的流程,最后都在同一個界面中完成批核功能。
批核模式包含五個區域,A區是過濾條件區,B區根據過濾條件查詢得到的待批核的數據,C區用於填寫備注文字,D區執行批核功作(批准或拒絕),E區顯示批核的進度。
注意B區網格前列有一個可以打勾的小方框,表示批核可以批次處理,節省領導處理批核時的寶貴時間。
模式13 圖形報表 Graph Report
圖形報表模式是以圖形化的方法顯示數據,柱狀圖,餅圖,曲線圖直觀的看出數據的變化。.NET 內置了圖形報表控件。
圖形報表設計模式包含三個區域,A區是過濾條件,B區是根據過濾條件得到的數據,B區也支持以常規的網格Grid的方式呈現數據,以圖表的形式則更受歡迎,最后是C區對B區的圖表進行打印設置,輸入圖形文件。
標准化的界面方便了用戶快速掌握ERP系統的功能和操作方法,供讀者參考。每種模式都預先設計好通用的抽象窗體基類,具體的功能只需要繼承基類,重寫相應的方法即可達到目的。