Bài giảng Nhập môn công nghệ phần mềm - Đỗ Thị Thanh Tuyền - Chương 3: Hệ thống giao diện

NHẬP MÔN 
CÔNG NGHỆ PHẦN MỀM
Giảng viên: Đỗ Thị Thanh Tuyền
Email: dothithanhtuyen@gmail.com
2Nhập môn Công nghệ Phần mềm January 14
Nội dung môn học
 Tổng quan về Công nghệ phần mềm
Xác định và mô hình hóa yêu cầu phần mềm
 Thiết kế phần mềm: - Thiết kế GIAO DIỆN
 Cài đặt phần mềm
Kiểm thử và bảo trì
Đồ án môn học
3Nhập môn Công nghệ Phần mềm January 14
Hệ thống giao diện
Nội dung và hình thức trình bày các màn hình giao tiếp
của phần mềm.
Hệ thống các thao tác mà người dùng thực hiện trên
màn hình giao tiếp và xử lý tương ứng của phần mềm.
4Nhập môn Công nghệ Phần mềm January 14
Kết quả đạt được
Danh sách các màn hình
 Sơ đồ màn hình
Mô tả từng màn hình:
 Mô tả các đối tượng trên màn hình;
 Danh sách biến cố và xử lý tương ứng.
5Nhập môn Công nghệ Phần mềm January 14
Danh sách các màn hình
STT Màn hình Loại màn hình Chức năng
1 Màn hình Tiếp
nhận bảo trì xe Màn hình nhập liệu
Cho phép nhập và lưu trữ
thông tin về các xe sửa chữa.
2 Màn hình Lập
phiếu sửa chữa
Màn hình nhập liệu
Cho phép nhập và lưu trữ
thông tin về các phiếu sửa
chữa.
3 Màn hình Tra
cứu xe Màn hình tra cứu
Cho phép nhập các tiêu chuẩn
tra cứu và trình bày các kết
quả tra cứu được.
4 Màn hình Lập
phiếu thu tiền Màn hình nhập liệu
Cho phép nhập và lưu trữ
thông tin về các phiếu thu tiền.
5 Màn hình Báocáo tháng Báo biểu Trình bày kết quả báo cáo.
6Nhập môn Công nghệ Phần mềm January 14
Sơ đồ màn hình
Hệ thống các màn hình cùng với quan hệ về việc chuyển
điều khiển giữa chúng.
Hệ thống các màn hình = Màn hình chính + Các màn hình
thực hiện các công việc của phần mềm.
Ký hiệu:
Tên màn hình 
7Mô tả các đối tượng trên màn hình
Danh sách biến cố và xử lý tương ứng trên màn hình
Nhập môn Công nghệ Phần mềm January 14
Mô tả chi tiết từng màn hình
STT Tên Kiểu Chức năng
1 txtBienSoXe TextBox Nhập biển số xe
STT Biến cố Xử lý Mã số xử lý
1 Chọn button Cập nhật Lưu thông tin về xe sẽ
sửa chữa xuống CSDL XLx
8Nhập môn Công nghệ Phần mềm January 14
Phân loại màn hình
Màn hình chính: cho phép người sử dụng chọn các công
việc sẽ thực hiện với phần mềm.
Màn hình nhập liệu: cho phép người sử dụng nhập vào
các thông tin để lưu trữ hoặc tính toán.
Màn hình tra cứu: cho phép tìm kiếm thông tin đã được
lưu trữ với các tiêu chuẩn tìm kiếm.
Màn hình thông báo: hiển thị các thông báo, nhắc nhở.
 Báo biểu: các báo cáo thống kê theo một mốc thời gian
định sẵn.
9Nhập môn Công nghệ Phần mềm January 14
Kiến trúc màn hình
Thành phần nhập liệu
Các nút xử lý
Thông tin kết quả
10Nhập môn Công nghệ Phần mềm January 14
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:
 Text Box
 Combo Box
 List Box
 Radio Button/Option Button
 Check Box/Tick Box
11Nhập môn Công nghệ Phần mềm January 14
Các nút xử lý
Các nút xử lý cho phép người sử dụng yêu cầu phần
mềm thực hiện một xử lý nào đó.
 Tên các nút xử lý:
 Không quá dài
 Gợi nhớ
 Nhất quán trong toàn hệ thống
12Nhập môn Công nghệ Phần mềm January 14
Thông tin kết quả
Cho phép người sử dụng xem thông tin kết quả dưới
nhiều hình thức khác nhau:
 Label
 Text Box
 List Box
13Nhập môn Công nghệ Phần mềm January 14
Các bước thực hiện
Thiết kế màn hình với tính đúng đắn
Thiết kế màn hình với tính tiện dụng
Thiết kế màn hình với tính hiệu quả
Màn hình đúng đắn
Màn hình hiệu quả
Màn hình kết quả
Màn hình tiện dụng
Sơ đồ luồng dữ liệu
14Nhập môn Công nghệ Phần mềm January 14
Thiết kế màn hình với tính Tiện dụng
Giao diện quen thuộc (dựa trên biểu mẫu tương ứng).
 Bố trí hợp lý.
Cung cấp thêm thông tin cho người dùng.
Cho phép nhập nhiều giá trị đồng thời (trên List Box).
15Nhập môn Công nghệ Phần mềm January 14
Thiết kế màn hình với tính Hiệu quả
Chọn control thích hợp (Text Box/Combo Box...).
Cung cấp giá trị mặc định cho ô nhập liệu.
Hiển thị kết quả một cách trực quan (dùng màu sắc,
hình vẽ, chú thích...).
16Nhập môn Công nghệ Phần mềm January 14
Thiết kế màn hình chính
 Từ danh sách các yêu cầu phần mềm (nghiệp vụ, chất
lượng và hệ thống), tiến hành phân nhóm các công việc:
 Theo chức năng Tin học:
• Hệ thống
• Lưu trữ
• Tra cứu
• Báo biểu
17Nhập môn Công nghệ Phần mềm January 14
Thiết kế màn hình chính (tt)
 Theo đối tượng: danh sách các đối tượng và các công
việc sẽ thực hiện trên từng đối tượng.
 Theo nghiệp vụ, qui trình: trình bày các công việc
theo trình tự của công việc trong qui trình.
18Nhập môn Công nghệ Phần mềm January 14
Thiết kế màn hình chính (tt)
 Lựa chọn hình thức trình bày:
 Thực đơn (kết hợp sử dụng phím nóng)
 Biểu tượng
 Sơ đồ
19Nhập môn Công nghệ Phần mềm January 14
Thiết kế màn hình Tra cứu
 Cho phép tra cứu theo nhiều tiêu chuẩn khác nhau, ưu tiên
chọn các tiêu chuẩn tra cứu quen thuộc và dễ dàng cho
người sử dụng.
 Cho phép tìm và cập nhật lại thông tin đã lưu trữ.
Kết quả tra cứu = Thông tin của đối tượng và quá trình hoạt
động của đối tượng.
Hỗ trợ xem kết quả tra cứu dưới nhiều hình thức khác nhau
(danh sách, biểu đồ, hình ảnh…).
 Bổ sung các nút điều khiển cho nhu cầu kết xuất ra máy in,
tập tin...
20Nhập môn Công nghệ Phần mềm January 14
Thiết kế màn hình Nhập liệu
 Thành phần nhập liệu: kiểm tra tính hợp lệ của các giá trị nhập
vào dựa vào qui định liên quan.
Thông thường mã số được phát sinh tự động.
 Các nút xử lý:
 Thêm mới, Lưu…
 Bổ sung các nút chuyển điều khiển đến màn hình có
liên quan.
 Thông tin kết quả: trình bày kết quả nhập liệu.
Nên bổ sung thông tin tính toán (số sách đã mượn, tổng số tiền
hiện tại của hóa đơn…).
21Nhập môn Công nghệ Phần mềm January 14
Thiết kế màn hình thông báo
 Thông báo đúng lúc.
 Thông báo về kết quả thực hiện yêu cầu (thành
công/thất bại, nguyên nhân).
Cung cấp phản hồi của hệ thống khi cần thiết (progress
bar, thông báo chờ khi hệ thống đang thực hiện một xử
lý mất nhiều thời gian…).
 Thiết kế đơn giản, gồm thông tin cần thông báo và các
nút chọn.
Chú ý không thiết kế quá nhiều nút chọn, chọn nút mặc
định theo cách xử lý thông thường.
22Nhập môn Công nghệ Phần mềm January 14
Thiết kế Báo biểu
Giữ lại tiêu đề báo cáo khi qua trang khác hoặc khi kéo
thanh trượt lên xuống.
 Lưu ý kích thước khác nhau về không gian hiển thị giữa
báo biểu in ra giấy và báo biểu xuất ra màn hình.
Chỉ hiển thị những thông tin thật sự cần thiết, tránh
làm rối báo biểu.
23Nhập môn Công nghệ Phần mềm January 14
Một số nguyên tắc trong thiết kế giao diện
 Tất cả màn hình phải có tên.
 Thiết kế phù hợp với đối tượng sử dụng.
Dễ học, dễ nhớ, phù hợp với người mới sử dụng, đồng
thời hỗ trợ các cách làm nhanh, làm tắt cho người sử
dụng có kinh nghiệm.
Chú ý môi trường triển khai ứng dụng cũng đòi hỏi
những nguyên tắc thiết kế khác nhau do có sự khác
nhau về tốc độ xử lý (web form, win form…).
 Thứ tự trình bày trên màn hình phải phù hợp với văn
hóa, thói quen của người sử dụng.
24Nhập môn Công nghệ Phần mềm January 14
Một số nguyên tắc trong thiết kế giao diện (tt)
Chỉ trình bày những nội dung thật sự cần thiết, không
trình bày quá nhiều thông tin trên một màn hình.
Chọn font chữ rõ ràng, cỡ chữ phù hợp, dùng chữ in
hoa đúng trường hợp.
Màu sắc hài hòa, nên dùng màu lạnh, chỉ dùng màu
nóng khi cần gây chú ý (hoặc có thể dùng chớp, nháy).
Kết hợp màu nền và màu chữ hợp lý.
Không dùng quá nhiều màu sắc trên một màn hình.
25Nhập môn Công nghệ Phần mềm January 14
Một số nguyên tắc trong thiết kế giao diện (tt)
Nhất quán trong toàn bộ hệ thống về:
 Cách trình bày
 Tên các nút điều khiển
 Ý nghĩa biểu tượng
 Vị trí các mục
 Số bước để đi đến một màn hình công việc chính phải
<=3
26Nhập môn Công nghệ Phần mềm January 14
Q & A