THIẾT KẾ GIAO DIỆN I.- GIỚI THIỆU CHUNG: 1/- Khái niệm :  Màn hình là một trong các hình thức giao tiếp giữa người sử dụng và phần mềm khi họ thực hiện các công việc trên máy tính.  Mục tiêu chính của thiết kế giao diện là mô tả hệ thống các màn hình này. 2/- Kết quả của thiết kế màn hình: Kết quả của thiết kế giao diện gồm 2 phần:  : mô tả các thông tin tổng quát về hệ thống các màn hình cùng với việc chuyển điều khiển giữa chúng.  : mô tả chi tiết về nội dung, hình thức trình bày và các thao tác mà người dùng có thể thực hiện trên từng màn hình. 3/- Phân loại các màn hình: Quá trình sử dụng một phần mềm thông thường gồm những bước sau:  Chọn công việc muốn thực hiện trên máy tính.  Cung cấp các thông tin cần thiết tương ứng với công việc đã chọn.  Yêu cầu phần mềm thực hiện.  Xem kết quả thực hiện. Dựa vào quá trình trên, các màn hình có thể được chia thành nhiều loại (tùy theo ý nghóa sử dụng) như sau: Loại màn hình nghóa sử dụng Nội dung chính Màn hình chính Cho phép người sử dụng chọn công việc muốn thực hiện trên máy tính. Danh sách các công việc. Màn hình nhập liệu lưu trữ Cho phép người sử dụng thực hiện việc lưu trữ các thông tin được phát sinh trong thế giới thực. Các thông tin cần lưu trữ. Màn hình nhập liệu xử lý Cho phép người sử dụng cung cấp các thông tin cần thiết cho việc thực hiện một công việc nào đó. Các thông tin phải cung cấp. Màn hình kết quả Trình bày cho người sử dụng kết quả việc thực hiện của một công việc nào đó. Các kết qua.û Màn hình tra cứu Cho phép tìm kiếm các thông tin đã được lưu trữ. Các tiêu chuẩn tra cứu. Màn hình thông báo Thông báo, nhắc nhở người sử dụng trong quá trình thực hiện một công việc nào đó. Các thông báo. Màn hình hỏi đáp Nhận thêm thông tin từ người dùng trước khi thực hiện một xử lý nào đó Nội dung thông tin cần cung cấp Tùy theo bản chất công việc liên quan mà màn hình có thể thuộc một trong các loại trên hay cũng có thể tích hợp từ nhiều màn hình cơ sở thuộc vào các loại trên. 4/- Dựa trên relationship để phân lọai các nhóm Màn Hình Nhập Liệu: Thông thường, một table được thiết kế vào duy nhất 1 màn hình nhập liệu (form nhập liệu). 4.1- : : (form dạng Main/Sub)  Dạng form: hay để tiện trình bày, từ đây trở đi sẽ minh họa form dạng này như sau: Mã phiếu : Họ và tên : Ngày hiện hành Ngày mượn : STTMã sáchNgày trảMã TLoạiMã các TGiảNăm XB Mã đọc giả : !"#$ Số lượng sách chưa trả: Main Form  Các table có nguồn gốc phát sinh từ mối kết hợp giữa Loại thực thể chính và Loại thực thể quan hệ sẽ làm sub form. Thứ tự để xét các table sẽ làm MainForm thuộc nhóm này: • (1a) Table có nguồn gốc là loại thực thể quan hệ. • (1b) Table có nguồn gốc là loại thực thể chính.  Nếu table mới phát sinh từ các mối kết hợp được “kẹp” giữa 2 thực thể chính thì việc quyết đònh table này là sub của form này do người thiết kế quy đònh (dựa trên nhu cầu thực tế, kinh nghiệm của người thiết kế, . . .) . • (1c) !#%&'$  Cả 2 phía của table (làm subform) đều không phải là loại thực thể chính hay lọai thực thể quan hệ: form được chọn làm mainform là form của table phát sinh từ lọai thự thể có “vò trí gần” với loại thực thể chính hay lọai thực thể quan hệ. Trong đo:ù Lọai thực thể chính là Phòng Lọai thực thể phụ là Lọai Phòng và Trang thiết bò.  Trong Relationship, khi table ngoài cùng chỉ có đầu nhiều (n) gắn vào, table này trở thành SubForm cho table phía đầu 1(Main): ()#: trong hình dưới, ta có 1 form dạng Main-sub, với MainForm là nhân viên và SubForm là thân nhân.  Tương tự như trường hợp trước, (khi table ngoài cùng chỉ có đầu nhiều (n) gắn vào), Khi đó đang có table “ẩn” (có trong thực tế nhưng do ta không đưa vào mô hình): Phòng Ban Nhân viên Thân nhân . . . Sub Form LọaiPhòng Trang bò Trang thiết bò Phòng ()#: trong hình dưới, cho dù có hay không có table “Ngày”. Ta vẫn có thể tổ chức 1 form Main –Sub. Tùy vào nhu cầu thực tế, ta có thể chọn 1 trong 2 Form Main-Sub sau:  Main(Ngày) –Sub (Tỷ Giá).  Main(Nguyên Tệ) –Sub (Tỷ Giá).  ()# : trong đề tài Quản lý thư viện đang thực hiện, ta có: • (1a) 1 form: Phiếu mượn-Chi Tiết phiếu mượn. • (1b) 1 form: Sách- Ngôn ngữ Sách – Viết sách. • (1c) không có form. 4.2- *: *: (dạng form đơn -Single Form)  Dạng form: • Dạng ! • Dạng + Quy đònh mượn sách Các Quy đònh khác Đọc giả Thủ thư Phiếu mượn Sách Loại đọc giả Nhà xuất bản Nhóm sách Ngôn Ngữ Vò trí lưu trữ Tác giả Thể loại ChiTiết PhiếuMượn NgNgữ_Sách Viết sách Users Đầu Sách Nguyên tệ Tỷ giá Ngày . . . Mã ĐG: Họ tên: Phái nữ: Ngày sinh: Đòa chỉ: Mã lọai ĐG: MãĐG Họ tên Phái Ngày sinh Đòa chỉ MãLọaiĐG  Gồm form của các table thuộc 1 trong 2 dạng sau: • (2a) Chỉ có (một hoặc nhiều) quan hệ đầu 1 gắn vào. • (2b) Độc lập (không có mối quan hệ với các table khác).  ()# : trong đề tài Quản lý thư viện đang thực hiện, ta có: • Loại 2a: ,##-(-(.+#-/'-"-  01)+". • Loại 2b: 2!!-341#!- 5416. 4.3- 7:  Phân biệt Form của nhóm 2 và 3 : • Form nhóm 2 : không có quan hệ với các table khác hoặc nếu có thì chỉ có quan hệ phia đầu 1 gắn vào. • Form nhóm 3 gồm cả quan hệ phía đầu 1 và đầu n cùng gắn vào. • Form nhóm 3 sau khi thiết kế xong sẽ có các nút dùng để mở 1 form khác.  7: các table còn lại, mỗi table là 1 form riêng.  ()# : trong đề tài Quản lý thư viện đang thực hiện, ta có 3 form: 8#, 8, !. 4.4- 9: Tùy vào nhu cầu thực tế và tính tiện dụng, ta hiệu chỉnh lại các form kết quả của 3 bước trước:  Thí dụ 1 : Trong đề tài Quản lý học sinh, giả sử ta có Relationship như sau: (i) Giả sử, 2 table MonHoc và KetQua đã được gộp chung để tạo thành 1 form dạng Main/Sub. (ii) Nếu thực hiện theo 3 bước trước, đến đây ta sẽ có: Quy đònh mượn sách Các Quy đònh khác Đọc giả Thủ thư Phiếu mượn Sách Loại đọc giả Nhà xuất bản Nhóm sách NgNgữ Vò trí lưu trữ Tác giả Thể loại ChiTiết PhiếuMượn NgNgữ_Sách Viết sách Users Đầu Sách MonHoc KetQua  Form daïng 2: coù 1 form: :;  Form daïng 3: coù 2 form: ,%-<; (iii) Tuy nhiên, tùy nhu cầu sử dụng trong thực tế, ta có thể hiệu chỉnh lại các form như sau: • Đối với trường hợp (i):  Tạo 1 form cho table Kết Quả, trong đó bổ sung thêm 2 điều kiện lớp và môn học để giúp lọc danh sách sinh viên cần nhập điểm (nhập điểm theo lớp và theo môn học): • Đối với trường hợp (ii):  : tạo 1 form dạng Main/Sub nhiều cấp:    *: tạo 1 form dạng Main/Sub, 1 form dạng 1:    7: tạo 1 form dạng Main/Sub, 1 form dạng 3:  Thí dụ 2 : Trong đề tài Quản lý bệnh nhân nội trú (nằm điều trò tại bệnh viện), giả sử ta có 1 phần của Relationship như sau: • Nếu thực hiện theo 3 bước trước, đến đây ta sẽ có:  Form dạng 2: (Single Form): có 3 form: =, 4, ,>.  Form dạng 1: (Main/Sub form): có 2 form: Khoa Lop HocSinh Lop HocSinh Khoa Khoa Lop HocSinh Điều kiện lọc là MônHọc và Lớp KetQua  /_=;  ?:/ (>. • Tuy nhiên, tùy nhu cầu sử dụng trong thực tế, ta có thể nhập 2 form dạng Main/Sub lại thành 1 form dạng Main/Sub nhiều cấp như sau: :5#: Trong thí dụ Quản lý thư viện đang xét, ta có 14 form nhập liệu, chia ra: • Dạng 1 : có 2 form: Phiếu mượn-Chi Tiết phiếu mượn, Sách- Ngôn ngữ Sách – Viết sách. • Dạng 2 : có 9 form: ,##-(-(.+#-/'-  "-01)+", 2!!-341#!- 541  6. • Dạng 3 : có 3 form: 8#, 8, ! 5/- Thực hành phân lọai các nhóm màn hình nhập liệu: a)- : Phần mềm bình chọn album nhạc:  ERD: Trong đó: • Lọai thực thể quan hệ là ?'#; • Lọai thể chính là '#, @+'. • Mỗi phiếu chỉ bình chọn được 1 Album. BenhNhan BenhNhan_Giuong PhieuKhamBenh ChiTietXetNghiem BenhNhan BenhNhan_ Giuong Phieu KhamBenh ChiTietXetNghiem Nghệ sỹ Loại Album Album Thang điểm bình chọn Phiếu bình chọn Kỳ bình chọn Người bình chọn Gồm Cho Của Thuộc Có Thuộc (0,n) (1,n) (0,n) (1,1) (1,1) (0,n) (1,1) (0,n) (0,n) (0,n) (1,1) (0,n) [...]... Tính toán Kết xuất Học kỳ Lớp Môn học Hình thức kiểm tra Danh hiệu Quy đònh chung Thoát Hồ sơ học sinh Bảng xếp lớp Bảng điểm danh Bảng điểm Học sinh Xếp loại Báo cáo tổng kết  Thí dụ 3 : màn hình chính của phần mềm quản lý giải bóng đá Lưu trữ Tra cứu Tính toán Kết xuất Đăng ký đội bóng Lòch thi đấu Phân công trọng tài Kết quả Cầu thủ Lòch thi đấu Phân công trọng tài Xếp hạng Lập báo cáo tổng kết Tổ... động của đối tượng  Tính toán : các tính toán liên quan đối tượng  Kết xuất : các báo cáo liên đến đối tượng Thế giới thực Đối tượng 1 ĐT 2 ĐT n  Minh họa : Thành phần 1 Thành phần 2 Lưu trữ đối tượng 1 Lưu trữ đối tượng 2 Quy đònh riêng 1 Quy đònh riêng 2 Lưu trữ quan hệ 1 Lưu trữ quan hệ 2 Quy đònh chung Tính toán 1 Tính toán 2 Tra cứu đối tượng Tính toán 1 Tính toán 2 Báo cáo 1 Báo cáo 2... tác với các thiết bò nhập liệu khác (bút, micro, .) Tuy có rất nhiều loại thao tác khác nhau có thể cung cấp cho người sử dụng trên một màn hình, nhưng trong tài liệu này chỉ giới hạn xem xét việc mô tả các thao tác khi người dùng nhấn vào một nút điều khiển hoặc kết thúc việc nhập liệu tại một thành phần nhập liệu nào đó 5/- Nguyên tắc thiết kế màn hình:  Tính nhất quán : là nhất quán về mặt nội... loại thực thể chính, loại thực thể quan hệ)  Tính toán: các công việc liên quan đến tính toán (các lọai thực thể quy đònh)  Kết xuất : các công việc liên quan đến các báo cáo đònh kỳ và không đònh kỳ (có trong yêu cầu)  Minh họa : Tổ chức Thành phần 1 Thành phần 2 Quy đònh riêng 1 Quy đònh riêng 2 Quy đònh chung Thoát Lưu trữ Tra cứu Tính toán Kết xuất Biểu mẫu 1 Biểu mẫu 2 Đối tượng 1 Đối tượng... cầu thủ Thay đổi quy đònh về tổ chức Thay đổi quy đònh về tính điểm Thoát  Thí dụ 5: Phần mềm quản lý bán hàng Màn hình chính 1 2 3 4 5 Nhập hàng mới Bán hàng Thu tiền Thanh lý hàng Theo dõi tình hình bán hàng 6 7 8 9 Lập báo cáo công nợ khách hàng Lập báo cáo tồn kho các mặt hàng Thay đổi quy đònh bán hàng Thoát 2/- Trình bày màn hình chính : có thể chọn 1 trong các cách trình bày sau: a.- Trình bày... chọn chức năng chính trong vùng  thì các chức năng con tương ứng sẽ được trình bày trong vùng  C)- THIẾT KẾ MÀN HÌNH CHÍNH DÙNG THỰC ĐƠN (menu): 1/- Tổ chức của thực đơn: Trong trường hợp ứng dụng có rất nhiều chức năng (tương ứng nhóm các công việc) thì thực đơn chính của ứng dụng nên được thiết kế làm nhiều cấp Chức năng trong mỗi nhóm con cuối cùng sẽ tương ứng với một công việc 2/- Một số lưu... thanh lý nhận và nhận và mượn/ trả sách Gia hạn thanh lý thanh thể loại/ trễ/ thẻ ĐG/ theo thể lý /năm năm tháng tháng/ Sách ngày loại/năm năm e)- B5: Dựa vào relationship của mô hình quan hệ, bổ sung liên kết giữa các màn hình sao cho việc thực hiện các công việc nhanh hơn (thông thường là liên kết giữa màn hình của lọai thực thể chính với màn hình của các lọai thực thể phụ có liên quan) MÀN HÌNH CHÍNH... chức Lưu trữ Tra cứu Tính toán Kết xuất Quản trò người dùng Cấp và thay đổi mật khẩu Sao lưu dữ liệu Phục hồi dữ liệu Thay đồi các quy đònh Tác giả Nhà xuất bản Ngôn ngữ Vò trí lưu trữ Thể loại Nhóm sách Thoát Sách Đọc giả Sách Đọc giả Lập phiếu mượn Trả sách Phiếu Mượn Phạt khi trả sách trễ hạn Bồi thường khi Sách mới nhận theo ngày/tháng/năm Sách thanh lý theo ngày/tháng/năm Lượt sách mượn theo thể... 1 hóa đơn mới  Thoát: yêu cầu phần mềm kết thúc màn hình hiện thời và chuyển điều khiển về màn hình trước đó 3/- Hình thức trình bày: tùy thuộc vào biểu mẫu liên quan trong thực tế có hay không:  Nếu có: tốt nhất là trình bày màn hình đúng với biểu mẫu tương ứng (hóa đơn, danh sách lớp, bảng điểm danh, )  Nếu không có: hoàn toàn là sự sáng tạo khi thiết kế Trường hợp này thường gồm các màn hình... thứ 2 Màn hình công việc trung gian 1 Màn hình kết thúc Màn hình công việc thứ 3 Màn hình công việc trung gian 2 2/- Các bước thiết kế sơ đồ màn hình: a)- B1: Xác đònh số lượng form cần có, bao gồm các loại  1 màn hình chính cho phép chọn công việc  Các form nhập liệu  Các form tra cứu-tìm kiếm: Tối thiểu phải có 1 form Có thể có thêm các form thể hiện kết quả tra cứu  Các form thực hiện chức năng . Mục tiêu chính của thiết kế giao diện là mô tả hệ thống các màn hình này. 2/- Kết quả của thiết kế màn hình: Kết quả của thiết kế giao diện gồm 2 phần: . THIẾT KẾ GIAO DIỆN I.- GIỚI THIỆU CHUNG: 1/- Khái niệm :  Màn hình là một trong các hình thức giao tiếp giữa người sử dụng