.

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

. 3

Sơ đồ màn hình

Màn hình giới thiệu

Màn hình chínhMàn hình kết

thúc

Màn hìnhCông việc thứ 1

Màn hìnhCông việc thứ 2

Màn hìnhCông việc thứ n

Màn hìnhCông việc trung gian

1

Màn hìnhCông việc trung gian

n

. 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

. 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)

Chọn trong danh sách có trước

Chọn trong danh sách có trước với giá trị định sẵn(có thể sửa đổi)

(giá trị)

(giá trị)

. 6

Thông tin kết xuất và thành phần xử lý

Ký hiệu Ý nghĩaGiá trị do phần mềm tính toán

Ký hiệu Ý nghĩa

Nút điều khiểnXử lý

Thông tin kết xuất

Thành phần xử lý

. 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.

. 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

...

. 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 thông tin

… … Reset

3 Hủy bỏ … … Cancel

…

. 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

. 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

. 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

. 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ỳLớpMôn họcHthức ktraDanh hiệuQĐ chungThoát

HSơ hsinh(bảng xlớp,bảng điểm danh,bảng điểm)

Hsinh Xếp loại Báo cáoThống kê

. 14

Thực đơn hướng đối tượng

Thư viện Độc giả Sách

Thể loại sáchLoại độc giảNhà xuất bảnQuy định

Lập thẻ độc giảGia hạn thẻ độc giảMượn sáchTra cứu độc giảBáo cáo về độc giả

Nhận sáchThanh lý sáchTrả sáchTra cứu sáchBáo cáo về sách

. 15

Thực đơn hướng quy trình

Tổ chức Kế hoạchTiếp nhận

Hoạt động

Tổng kết

Thao tác 1Thao tác 2…Thao tác n

Thao tác 1Thao tác 2…Thao tác n

Thao tác 1Thao tác 2…Thao tác n

Thao tác 1Thao tác 2…Thao tác n

Thao tác 1Thao tác 2…Thao tác n

. 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

. 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

. 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:

Điểm trung bình học kỳ:

từ: đến:

từ: đến:

Tra cứu Thoát

. 19

Cây tra cứu học sinh

Danh sách lớp 11A2Trường -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 …

. 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:

Điểm trung bình học kỳ:

từ: đến:

từ: đến:

Tra cứu Thoát

Danh sách lớp 11A2Trường -Khối 10 -Lớp 10A1 -Lớp 10A2 … -Khối 11 -Lớp 11A1 -Lớp 11A2 …

. 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:

Điểm trung bình học kỳ:

từ: đến:

từ: đến:

Tra cứu Thoát

STT Học sinh Lớp Ngày sinh Vắng Trung bình

. 22

Kết quả tra cứu dùng xâu danh sách

STT Sách NXB Năm XB Tác giả Thể loại Tình trạng

STT Độc giả Địa chỉ Ngày mượn Ngày trả

Quá trình mượn:

từ: đến:

Tra cứu Thoát

In danh sách sách

In quá trình mượn

Tiêu chuẩn tra cứu sách

. 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ữ)

. 24

Màn hình nhập liệu

Các thông tin nhập liệuCá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

. 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óaThoá

t

. 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

. 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