Ltudql1 hk1 1718 lt 04 thietkegiaodien

Thiết kế giao diệnLập trình ứng dụng quản lý 1 ĐHQG HCM – TRƯỜNG ĐH KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN... Push Button Sử dụng các nhãn thông dụng Nhãn Ý nghĩa Cancel Không thực

Thiết kế giao diện

Lập trình ứng dụng quản lý 1

ĐHQG HCM – TRƯỜNG ĐH KHOA HỌC TỰ NHIÊN

KHOA CÔNG NGHỆ THÔNG TIN

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ế

Push Button

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

Nhãn Ý nghĩa

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ổ

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

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

 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

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ữ

Hiển thị của cửa sổ

Modal và Modeless

• 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

Đ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ủ

menu

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

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

Phân loại màn hình giao diện

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ữ Tra cứu Tính toán Kết xuất

bảng điểm)

Hsinh Xếp loại Báo cáo

Thống kê

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

Mượn sách Tra cứu độc giả Báo cáo về độc giả

Nhận sách Thanh lý sách Trả sách

Tra cứu sách Báo cáo về sách

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

Tổ chức Kế hoạch Tiếp nhận Hoạt động Tổng kết

… Thao tác n

Thao tác 1 Thao tác 2

… Thao tác n

Thao tác 1 Thao tác 2

… Thao tác n

Thao tác 1 Thao tác 2

… Thao tác n

Màn hình nhập liệu danh sách thể loại

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

STT Mã thể loại Tên thể loại Ghi chú

Ghi Xóa Thoát

Màn hình nhập liệu hồ sơ học sinh

Màn hình nhập phiếu mượn sách

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

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

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:

▪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

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 30

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

Biểu thức logic tra cứu học sinh

Cây tra cứu học sinh

-Khối 10

Biểu thức logic tra cứu học sinh

Tra cứu Thoát

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

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

Quá trình mượn: từ: đến:

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

Các công cụ thiết kế giao diện

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

Vẽ bằng tay

Sử dụng các cộng cụ hỗ trợ

Visio (Desktop app)

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

Nên sử dụng vì được cấp license Imagine

Sử dụng các cộng cụ hỗ trợ

Mockflow.com

Nên sử dụng vì được cấp

2 project free

Sử dụng các cộng cụ hỗ trợ

Moqups

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

Sử dụng các cộng cụ hỗ trợ

Fluid UI

Sử dụng các cộng cụ hỗ trợ

Axure

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

Sử dụng các cộng cụ hỗ trợ

Mockingbird

Sử dụng các cộng cụ hỗ trợ

 Các công cụ miễn phí

▪Lovely Charts

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