1. Thiết kế giao diện
Ghi chú: trích từ giáo trình
Nhập môn Công nghệ Phần mềm
của Th.S Nguyễn Tiến Huy
.

2. Thiết kế giao diện
• Khái niệm giao diện: hình thức giao tiếp giữa người sử dụng
và phần mềm khi thực hiện các công việc của mình trên máy
tính.
• Kết quả thiết kế giao diện:
• Sơ đồ màn hình: tổng quát về hệ thống các màn hình và việc di chuyển
điều khiển giữa chúng
• Mô tả chi tiết từng màn hình:
• Nội dung và hình thức trình bày
• Ý nghĩa sử dụng
. 2

3. Sơ đồ màn hình
Màn hình giới thiệu
Màn hình chính Màn hình kết thúc
Màn hình Màn hình Màn hình
Công việc thứ 1 Công việc thứ 2 Công việc thứ n
Màn hình Màn hình
Công việc trung gian 1 Công việc trung gian n
. 3

4. Nội dung màn hình
Thành phần dữ liệu:
Thông tin nhập liệu
Thông tin kết xuất
Thành phần xử lý:
Thực hiện xử lý được yêu cầu
Thực hiện chuyển điều khiển đến màn hình khác
. 4

5. Thông tin nhập liệu
Ký hiệu Ý nghĩa
Nhập liệu trực tiếp
Nhập liệu với giá trị định sẵn (có thể sửa đổi)
(giá trị)
Chọn trong danh sách có trước
(giá trị) Chọn trong danh sách có trước với giá trị định
sẵn(có thể sửa đổi)
. 5

6. Thông tin kết xuất và thành phần xử lý
Thông tin kết xuất
Ký hiệu Ý nghĩa
Giá trị do phần mềm tính toán
Thành phần xử lý
Ký hiệu Ý nghĩa
Xử lý Nút điều khiển
. 6

7. Hình thức trình bày
• Với các màn hình có biểu mẫu liên quan: trình bày màn hình
theo biểu mẫu tương ứng (hóa đơn, danh sách lớp, bảng điểm
danh, v.v…)
• Với các màn hình không có biểu mẫu liên quan: (tìm sách,
tìm hóa đơn, v.v…): hình thức trình bày là sự sáng tạo khi
thiết kế.
• Trường hợp biểu mẫu liên quan là kết quả cuối cùng cần ghi
nhận (thời khóa biểu dạy, lịch thi đấu, bảng phân công trọng
tài, v.v…) trước đó cần thực hiện công việc trung gian không
có trong biểu mẫu (chọn giáo viên, chọn trận đấu, chọn trọng
tài, v.v…): sáng tạo hình thức trình bày các màn hình trung
gian thực hiện các công việc trung gian.
. 7

8. Mô tả ý nghĩa sử dụng theo danh sách các thao tác
STT Thao tác Ý nghĩa Xử lý liên quan Ghi chú
1
2
...
. 8

9. Mô tả ý nghĩa sử dụng theo danh sách các thao tác
STT Thao tác Ý nghĩa Xử lý liên quan Ghi chú
1 Đăng nhập … …
2 Làm mới … … Reset
thông tin
3 Hủy bỏ … … Cancel
…
. 9

10. Phân loại màn hình giao diện
• Màn hình chính
• Màn hình nhập liệu lưu trữ
• Màn hình nhập liệu xử lý
• Màn hình kết quả
• Màn hình thông báo
• Màn hình tra cứu
. 10

11. Màn hình chính
• Nội dung: danh sách các công việc
• Hình thức trình bày:
• Phím nóng
• Thực đơn
• Biểu tượng
• Sơ đồ
• Tích hợp: kết hợp nhiều hình thức
• Thao tác người dùng: chọn công việc
. 11

12. Thiết kế màn hình chính dùng thực đơn
• Thực đơn hướng chức năng
• Thực đơn hướng đối tượng
• Thực đơn hướng quy trình
. 12

13. Thực đơn hướng chức năng
Tổ chức Lưu trữ Tra cứu Tính toán Kết xuất
Học kỳ HSơ hsinh Hsinh Xếp loại Báo cáo
Lớp (bảng xlớp, Thống kê
Môn học bảng điểm
Hthức ktra danh,
Danh hiệu bảng điểm)
QĐ chung
Thoát
. 13

14. Thực đơn hướng đối tượng
Thư viện Độc giả Sách
Thể loại sách Lập thẻ độc giả Nhận sách
Loại độc giả Gia hạn thẻ độc giả Thanh lý sách
Nhà xuất bản Mượn sách Trả sách
Quy định Tra cứu độc giả Tra cứu sách
Báo cáo về độc giả Báo cáo về sách
. 14

15. Thực đơn hướng quy trình
Tổ chức Kế hoạch Tiếp nhận Hoạt động Tổng kết
Thao tác 1 Thao tác 1 Thao tác 1 Thao tác 1 Thao tác 1
Thao tác 2 Thao tác 2 Thao tác 2 Thao tác 2 Thao tác 2
… … … … …
Thao tác n Thao tác n Thao tác n Thao tác n Thao tác n
. 15

16. Màn hình tra cứu
• Nội dung: tìm kiếm và xem thông tin về đối tượng
• Hình thức trình bày:
• Tiêu chuẩn tra cứu: biểu thức logic, cây, tích hợp
• Kết quả tra cứu: thông báo, danh sách đơn, xâu các danh sách, cây danh
sách
• Thao tác người dùng:
• Nhập tiêu chuẩn tra cứu
• Yều cầu tra cứu
• Xem chí tiết kết quả tra cứu
. 16

17. Màn hình tra cứu
Các tiêu chuẩn tra cứu
Các kết quả tra cứu
Các nút điều khiển
. 17

18. Biểu thức logic tra cứu học sinh
Mã học sinh:
Họ và tên: Lớp:
Ngày sinh: từ: đến:
Số ngày vắng: từ: đến:
Điểm trung bình học kỳ: từ: đến:
Tra cứu Thoát
. 18

19. Cây tra cứu học sinh
Trường Danh sách lớp 11A2
-Khối 10
-Lớp 10A1
-Lớp 10A2
…
-Khối 11
-Lớp 11A1
-Lớp 11A2
…
-Khối 12
-Lớp 12A1
-Lớp 12A2
…
. 19

20. Tích hợp
Mã học sinh:
Họ và tên: Lớp:
Ngày sinh: từ: đến:
Số ngày vắng: từ: đến:
Điểm trung bình học kỳ: từ: đến:
Tra cứu Thoát
Trường Danh sách lớp 11A2
-Khối 10
-Lớp 10A1
-Lớp 10A2
…
-Khối 11
-Lớp 11A1
-Lớp 11A2
…
. 20

21. Biểu thức logic tra cứu học sinh
Mã học sinh:
Họ và tên: Lớp:
Ngày sinh: từ: đến:
Số ngày vắng: từ: đến:
Điểm trung bình học kỳ: từ: đến:
STT Học sinh Lớp Ngày sinh Vắng Trung bình
Tra cứu Thoát
. 21

22. Kết quả tra cứu dùng xâu danh sách
Tiêu chuẩn tra cứu sách
STT Sách NXB Năm XB Tác giả Thể loại Tình trạng
Quá trình mượn: từ: đến:
STT Độc giả Địa chỉ Ngày mượn Ngày trả
Tra cứu Thoát
In danh sách sách In quá trình mượn
. 22

23. Màn hình nhập liệu
• Nội dung: nhập liệu thông tin lưu trữ và thông tin tính toán
• Hình thức trình bày:
• Danh sách
• Hồ sơ
• Phiếu
• Tích hợp
• Thao tác người dùng:
• Ghi
• Xóa
• Tìm (tìm và cập nhật lại thông tin đã lưu trữ)
. 23

24. Màn hình nhập liệu
Các thông tin nhập liệu
Các thông tin tính toán
Các nút xử lý cơ bản
Các nút xử lý khác
. 24

25. Màn hình nhập liệu danh sách thể loại
STT Mã thể loại Tên thể loại Ghi chú
Ghi Xóa Thoát
. 25

26. Màn hình nhập liệu hồ sơ học sinh
Mã học sinh: Họ và tên:
Ngày sinh:
Địa chỉ:
Thêm Ghi Xóa Tìm Thoát
. 26

27. Màn hình nhập phiếu mượn sách
Mã phiếu:
Mã độc giả: Họ và tên:
Ngày mượn: (giá trị)
STT Mã sách Tên sách Thể loại Tác giả Năm xuất bản
Thêm chi tiết Sửa chi tiết Xóa chi tiết
Thêm Ghi Xóa Tìm Thoát
. 27