Ltudql1 hk1 1718 lt 04 thietkegiaodien

ĐHQG HCM – TRƯỜNG ĐH KHOA HỌC TỰ NHIÊN
KHOA CÔNG NGHỆ THƠNG TIN

Thiết kế giao diện
Lập trình ứng dụng quản lý 1
ThS. Ngô Chánh Đức


Nội dung

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

2


Một số nguyên tắc thiết kế

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

3


Push Button
Cho phép người dùng thực hiện chức năng
chính của Form
Nhãn và vị trí cho phép người dung hiểu được
chức năng của nó

Chỉ sử dụng cho những hành động thường
xuyên/quan trọng
Hạn chế số lượng Push Button

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

4


Push Button
 Sử dụng các nhãn thông dụng
Nhãn

Ý nghĩa

OK

Thực hiện các thay đổi và đóng cửa sổ

Cancel

Khơng thực hiện thay đổi và đóng cửa sổ

Close

Đóng cửa sổ (khi những thay đổi thực hiện không
thể hủy bỏ)

Reset

Đặt lại ban đầu cho các giá trị của cửa sổ

Apply

Thực hiện thay đổi nhưng khơng đóng cửa sổ

Help

Mở cửa sổ giúp đỡ

 Thay đổi tên nhãn (thay vì OK) nếu nút cho phép thực
hiện chức năng cụ thể khác (In, xóa, …)
 Sử dụng dấu >> cho biết hộp thoại sẽ được mở rộng
10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngơ Chánh Đức

5


Push Button
Nhóm các nút cùng chức năng lại với nhau
Cách bố trí nút:
▪Left-aligned
▪Center-aligned
▪Top-right

Nút có chức năng ít dùng  vị trí cần dùng

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

6


Radio button
Dùng khi muốn chọn 1 lựa chọn duy nhất
Bố trí theo chiều dọc thường được dùng hơn
Giới hạn ít lựa chọn
Sắp xếp theo độ thường dùng, alphabet, hoặc
logic nào đó
Tránh dùng cho lựa chọn Yes/No

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

7


Check Box
Cho phép chọn 1 hoặc nhiều lựa chọn
Dùng cho trường hợp Yes/No, On/Off
Nhóm các lựa chọn lại
Bố trí theo chiều dọc
Giới hạn khoảng 10 lựa chọn trở xuống
Sắp xếp giống Radio button

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

8


List Box
Sử dụng khi quá nhiều lựa chọn
▪Có thể chọn 1 hoặc nhiều

Hoặc khi dữ liệu động
Hiển bị khoảng 3 – 8 lựa chọn
Kết hợp bộ lọc cho dữ liệu lớn

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngơ Chánh Đức

9


Data Field (Trường dữ liệu)
Sử dụng TextBox cho dữ liệu nhập thông
thường
Sử dụng Label cho dữ liệu không chỉnh sửa
được
Sử dụng TextBox ở trạng thái Disable cho dữ
liệu tạm thời không chỉnh sửa

Canh độ dài TextBox theo số lượng ký tự cho
phép
Canh trái các trường dữ liệu
Nhóm các trường dữ liệu nếu cần thiết
10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

10


Data Field Label (Nhãn dữ liệu)
Đánh nhãn hết tất cả trường dữ liệu
Đặt bên trái trường dữ liệu
Canh trái chữ

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngơ Chánh Đức

11


Hiện thị cửa sổ
Bố trí giữa các cửa sổ
▪Cascading Windows
• Sử dụng khi người dùng chỉ cần tập trung vào 1 màn
hình
▪Tiled Windows
• Sử dụng khi người dung cần quan sát hết thơng tin

của các màn hình khác

Tránh việc cuộn ngang trên cửa sổ

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

12


Hiển thị của cửa sổ
Modal và Modeless
▪Modal dialog: các cửa sổ khác sẽ không hoạt động
khi cửa sổ Modal chưa được hồn tất
• Dùng cho việc nhập liệu
• Dùng cho những tác vụ nhỏ, lẻ
▪Modeless dialog: người dùng vẫn có thể làm việc với
cửa sổ khác khi cửa số Modeless vẫn cịn hoạt động
• Dùng cho việc thường lặp đi lặp lại
• hoặc để theo dõi hệ thống

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

13


Điều hướng cửa sổ

Mỗi cửa sổ/hộp thoại đại diện cho 1 tác vụ (con)
Nếu tác vụ quá phức tạp thì ta tách làm nhiều
cửa sổ
Cần có nút trở về Màn hình chủ
▪Màn hình chủ khơng nên chỉ là màn hình trống với
menu
▪Màn hình chủ nên gợi ý giúp người dùng sẽ thực hiện
những cơng việc gì, hoặc cung cấp thơng tin hữu ích
khác

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

14


Sơ đồ màn hình

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

15


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àn hình
Cơng việc thứ 1

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
Cơng việc thứ 2

Màn hình
Cơng việc thứ n

Màn hình
Cơng việc trung gian 1

Màn hình
Cơng việc trung gian n
10/24/2017

16


Phân loại màn hình

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

17


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/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

18


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

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

19


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

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngơ Chánh Đức

20


Thực đơn hướng chức năng
Tổ chức

Lưu trữ

Học kỳ
Lớp
Môn học
Hthức ktra

Danh hiệu
QĐ chung
Thốt

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

10/24/2017

Tra cứu
Hsinh

Tính tốn
Xếp loại

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

Kết xuất
Báo cáo
Thống kê

21


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

Thể loại sách
Loại độc giả
Nhà xuất bản
Quy định

10/24/2017

Độc giả

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

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

Sách

Nhận sách
Thanh lý sách
Trả sách
Tra cứu sách
Báo cáo về sách

22


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

Tổ chức
Thao tác 1
Thao tác 2
…
Thao tác n

10/24/2017

Kế hoạch
Thao tác 1
Thao tác 2
…
Thao tác n

Tiếp nhận
Thao tác 1
Thao tác 2
…
Thao tác n

Hoạt động
Thao tác 1
Thao tác 2
…
Thao tác n

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

Tổng kết
Thao tác 1

Thao tác 2
…
Thao tác n

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 tố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ữ)
10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức

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 tốn
Các nút xử lý cơ bản

Các nút xử lý khác

10/24/2017

Lập trình ứng dụng quản lý 1 - ThS. Ngơ Chánh Đức

25