Khoa CNTT CNPM

Chương 8
THIẾT KẾ GIAO DIỆN

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 1
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

1. MỤC ĐÍCH

 Mục đích của việc

thiết kế giao diện là
nhằm mô tả cách
thức giao tiếp giữa
người sử dụng và
phần mềm.

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 2
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

2. KẾT QUẢ

 Danh sách các màn hình.

 Thông tin chi tiết của từng màn hình.
 Màn hình thực đơn (Màn hình chính).
 Sơ đồ màn hình

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 3
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

3. KIẾN TRÚC MÀN HÌNH

Thành phần
nhập liệu

Thông tin
kết quả

Các nút
xử lý

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 4
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

3.1 THÀNH PHẦN NHẬP LIỆU

 Khái niệm: Thành phần nhập liệu cho

phép người sử dụng nhập dữ liệu
dưới nhiều hình thức khác nhau.
 Hình thức 1:

Tiêu đề (Ô nhập liệu)

 Hình thức 2:

Tiêu đề

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 5
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

3.1 THÀNH PHẦN NHẬP LIỆU

 Hình thức 3:

Tiêu đề
▪ Nội dung 1
Nội dung 2
Nội dung n
 Hình thức 4:

Tiêu đề
√ Nội dung 1
Nội dung 2

Nội dung n

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 6
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

3.2 THÀNH PHẦN

THÔNG TIN KẾT QUẢ

 Khái niệm: Thành phần thông tin kết

quả cho phép người dùng xem trực
tiếp kết quả hay các thông tin tương
ứng với dữ liệu nhập trên màn hình.
 Hình thức 1

Tiêu đề (Ô xử lý)

 Hình thức 2
Tiêu đề

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 7
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

3.3 CÁC NÚT XỬ LÝ

 Khái niệm: Các nút xử lý cho phép

người dùng lựa chọn các tác vụ cần
thực hiện trên màn hình giao diện.

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 8
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

4. CÁCH THỨC TIẾN HÀNH

Thiết kế SĐLDL
màn hình
với tính
MH Đúng Đắn Đúng Đắn

Thiết kế
màn hình
với tính
Tiện Dụng MH Tiện Dụng

MH Hiệu Quả Thiết kế

màn hình
với tính
Hiệu Quả
MH Kết Quả
ThS. Nguyễn Tấn Thiết Kế
Trần Minh Khang Giao Diện - 9
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

4. CÁCH THỨC TIẾN HÀNH

Xác định
yêu cầu

Phân tích

Thiết kế

Cài đặt

Kiểm chứng

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 10
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

4. CÁCH THỨC TIẾN HÀNH

Người Dùng

Hệ Thống
Người Dùng
Giao Diện

Mô Hình
Hệ Thống
3 Lớp Xử Lý
Phần Mềm

Hệ Thống Phần Cứng

Dữ Liệu

Phần Cứng

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 11
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

5. LƯU Ý

 Thành phần nhập liệu quyết định tính

đúng đắn của màn hình giao diện. Nói
một cách khác, màn hình giao diện với
tính đúng đắn chỉ thành phần nhập
liệu mà thôi.
 Thành phần thông kết quả quyết định
tính hiệu quả và tiện dụng của màn
hình giao diện.
 Khi thiết kế giao ta không cần thiết kế
các nút xử lý vì trách nhiệm này thuộc
về khâu “Thiết kế xử lý”.

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 12
CuuDuongThanCong.com https://fb.com/tailieudientucntt
 Khoa CNTT CNPM

6. BÀI TẬP LÀM NGAY

 Hãy thiết kế màn hình cho yêu cầu

phần mềm lập phiếu mượn sách với
tính đúng đắn.

ThS. Nguyễn Tấn Thiết Kế

Trần Minh Khang Giao Diện - 13
CuuDuongThanCong.com https://fb.com/tailieudientucntt