Bài giảng Lập trình ứng dụng quản lý 1 - Chương 4: Thiết kế giao diện - Ngô Chánh Đức

ĐHQG HCM – TỜ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  
OK  
Ý nghĩa  
Thực hiện cá c thay đổi và đóng cửa sổ  
Khô ng thực hiện thay đổi và đóng cửa sổ  
Cancel  
Close  
Đóng cửa sổ (khi những thay đổi thực hiện khô ng  
thể hủy bỏ)  
Reset  
Apply  
Help  
Đặt lại ban đầu cho cá c giá trị của cửa sổ  
Thực hiện thay đổi nhưng khô ng đóng cửa sổ  
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ệ)  
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ệ)  
Đá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 thcử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 thcủ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 hoà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  
ơ đồ màn hình  
10/24/2017  
Lập trình ứng dụng quản lý 1 - ThS. Ngô Chánh Đức  
15  
 
Màn hình giới  
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  
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ứ 1  
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  
16  
10/24/2017  
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ếkế màn hình chính dùng thựđơ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  
Tải về để xem bản đầy đủ
pdf 44 trang myanh 25500 Free
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình ứng dụng quản lý 1 - Chương 4: Thiết kế giao diện - Ngô Chánh Đức", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pdfbai_giang_lap_trinh_ung_dung_quan_ly_1_chuong_4_thiet_ke_gia.pdf