Bài giảng Nhập môn công nghệ phần mềm - Lương Trần Hy Hiến - Chủ đề 4: Thiết kế phần mềm (Phần 3)

 Chuyển tiếp giữa các ngữ cảnh
• Mối quan hệ giữa các màn hình
– Bố trí các thành phần màn hình
• Sắp xếp các đơn vị giao diện màn hình
– Đặc tả màn hình
• Mô tả các thành phần màn hình
• Mô tả kịch bản sử dụng
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 8 HIENLTH
Multimedia
Tìm kiếm thông tin
Giao dịch điện tử
Xử lý thông tin
Tài liệu điện tử
Giao diện
Các thành phần của giao diện
Giao diện
nhập liệu Giao diện
kết xuất
Giao diện 
tương tác 
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 9 HIENLTH
Các thành phần giao diện
• Thành phần tiếp nhận thông tin
– Ra lệnh: Button
– Nhập liệu: TextBox
– Lựa chọn: ComboBox, ListBox, CheckBox, 
RadioButton
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 10 HIENLTH
Các thành phần giao diện
• Thành phần phản hồi thông tin
– Thông tin đơn: Label, Textbox, MessageBox
– Thông tin phức: ListView, GridView, Report
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 11 HIENLTH
Phân loại giao diện
• Giao diện DOS
• Giao diện Windows
• Giao diện Web
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 12 HIENLTH
Các thành phần giao diện đồ họa - GUI
 Dialog
 SDI – Single Document Interface
 MDI – Multiple Document Interface
 Có một cửa sổ làm việc
 Thường có kích thước cố định
 Thường không có menu bar
 Có một cửa sổ làm việc
 Cho phép thay đổi kích thước cửa sổ (Resizeable)
 Không có cửa sổ con
 Có một cửa sổ làm việc chính (Main frame) và nhiều cửa sổ con (Child 
Frame)
 Cho phép thay đổi kích thước cửa sổ (Resizeable)
 Cho phép Minimize/Maximize/Close/Arrange/Cascade cửa sổ con
The linked image cannot be displayed. The file may have been mov ed, renamed, or deleted. Verify that the link points to the cor rect file and location.
Calculator Paint Workflow Editor
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 13 HIENLTH
Phân loại màn hình
• Màn hình đăng nhập
• Màn hình giới thiệu
• Màn hình chính
• Màn hình tác giả
• Màn hình danh mục
• Màn hình nhập liệu
– Nhập liệu trực tiếp
– Nhập liệu gián tiếp (import)
• Màn hình tra cứu
• Màn hình xử lý tính toán
• Màn hình thể hiện báo biểu/thống kê
• Màn hình thể hiện đối tượng: sơ đồ, cây, biểu tượng…
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 14 HIENLTH
Màn hình đăng nhập
• Hình thức thể hiện
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 15 HIENLTH
Màn hình đăng nhập
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 16 HIENLTH
Màn hình chính
• Hình thức thể hiện (Windows)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 17 HIENLTH
Màn hình chính (Windows)
• Ví dụ minh họa
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 18 HIENLTH
Màn hình chính (Windows)
• Ví dụ minh họa
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 19 HIENLTH
Màn hình tra cứu
• Tiêu chuẩn tra cứu (Search/Filter)
– Thiết kế cố định
• Dễ thiết kế/lập trình
• Không có tính mở rộng
– Cho phép người dùng thêm/xóa các tiêu chuẩn trong 
quá trình tìm kiếm
• Dễ dụng, mở rộng, tùy biến
• Khó thiết kế/lập trình
• Tham khảo: Microsoft Outlook 2007,…
– Đối với danh sách (Grid, Sheet), cho phép người dùng 
chọn trực tiếp từ thanh filter (tương tự như Excel)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 20 HIENLTH
Màn hình tra cứu
• Hình thức thể hiện
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 21 HIENLTH
Quy tắc thiết kế giao diện
• Quy tắc về màu sắc:
– Dùng màu nhất quán
– Giới hạn số lượng màu
– Không dùng màu sặc sỡ
– Cẩn trọng các màu tương phản
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 22 HIENLTH
Quy tắc thiết kế giao diện
• Tính nhất quán
– Màu sắc
– Vị trí của các đối tượng
– Sử dụng ký hiệu
• Tính trực quan
– Hình thức thể hiện
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 23 HIENLTH
Quy tắc thiết kế giao diện
• Tính nhất quán:
– Vị trí của đối tượng
Không nhất quán
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 24 HIENLTH
Quy tắc thiết kế giao diện
• Tính nhất quán:
Không nhất quán vì:
•Màn hình 1: sử dụng màu sắc để biểu diễn các thuộc tính bắt buộc.
•Màn hình 2: sử dụng ký hiệu (*) để biểu diễn các thuộc tính bắt buộc.
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 25 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
– Hình thức thể hiện: sử dụng sơ đồ, biểu 
tượng, hình ảnh, cây để biểu diễn dữ liệu
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 26 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 27 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 28 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 29 HIENLTH
Quy tắc thiết kế giao diện
• Quy tắc về thông báo:
– Nhất quán
– Lịch sự
– Cô đọng nhưng dễ hiểu
– Nên kèm diễn giải, gợi ý
– Không dùng ngôn ngữ: đại chúng, chuyên 
dụng, kỹ thuật
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 30 HIENLTH
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 31 HIENLTH
Quy tắc thiết kế giao diện
• Quy tắc về kiểm tra nhập liệu
– Kiểm tra tất cả dữ liệu nhập
– Dựa trên:
• Ràng buộc tự nhiên
• Ràng buộc nghiệp vụ
– “Phòng bệnh hơn chữa bệnh”
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 32 HIENLTH
Quy trình
1. Mục đích màn hình
2. Vẽ giao diện màn hình. Trong đó có ghi 
chú các control đặc biệt dạng 
,,,,… và đánh dấu rõ các sự kiện 
dạng (1), (2),…
3. Mô tả các control
4. Mô tả các sự kiện (biến cố) và cách xử lý
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 33 HIENLTH
Mô tả các control
STT Tên Kiểu Ý nghĩa Ghi chú
1 txtHoTen TextBox Tên học sinh Không được rỗng
2 txtDiemThi TextBox Điểm thi Chỉ cho nhập số 
nguyên từ 0 đến 10
… … … … …
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 34 HIENLTH
Mô tả sự kiện
STT Điều kiện kích hoạt Xử lý
0 Khởi động màn hình ???
1 Chọn lớp ???
… … …
(0)
(1)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 35 HIENLTH
Câu hỏi và thảo luận
•
?
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 36 HIENLTH
THIẾT KẾ MENU
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 37 HIENLTH
Hệ thống thực đơn (Menu)
• Hệ thống thực đơn chính
– Hệ thống thực đơn trong màn hình chính của 
mỗi phân hệ (module)
• Hệ thống thực đơn ngữ cảnh
– Thực đơn sử dụng khi click chuột phải lên một 
hoặc một nhóm đối tượng trên màn hình
– Thực đơn sử dụng khi click chuột phải lên một 
dòng trong lưới (Grid)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 38 HIENLTH
Giới thiệu Menu
Menu Bar
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 39 HIENLTH
Giới thiệu Menu
Popup Menu
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 40 HIENLTH
Các thành phần trên Menu bar
Popup Menu
Popup Menu
Menu Bar
Menu Item
Separator
Popup Menu
Popup Menu
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 41 HIENLTH
Tổ chức hệ thống thực đơn chính
• Hệ thống
• Danh mục
• Nhóm chức năng 1 (nghiệp vụ 1)
• Nhóm chức năng 2 (nghiệp vụ 2)
• Tra cứu
• Báo cáo (Report)
• Công cụ/tiện ích (Tools/Utilities)
• Trợ giúp (Help)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 42 HIENLTH
Tổ chức hệ thống thực đơn 
(Menu)
• Hệ thống thực đơn Microsoft Word 2003
• Hệ thống thực đơn Microsoft PowerPoint 2003
• Hệ thống thực đơn Total Commander
• Hệ thống thực đơn chương trình QL thư viện
• Hệ thống thực đơn chương trình QL nhân sự
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 43 HIENLTH
Hệ thống thực đơn
• Hệ thống
– Cấu hình hệ thống
– Đăng nhập
– Đổi mật khẩu
– Thoát
• Danh mục
– Danh mục nhân viên
– Danh mục quận huyện
– Danh mục tỉnh thành
– Danh mục hàng hóa
– ….
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 44 HIENLTH
Hệ thống thực đơn
• Nhóm chức năng 1
– Chức năng 1.1
– Chức năng 1.2
– Chức năng 1.3
– Chức năng 1.4
• Nhóm chức năng 2
– Chức năng 2.1
– Nhóm chức năng 2.2
– Chức năng 2.3
– Chức năng 2.4
– ….
DEMO
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 45 HIENLTH
Biểu diễn hệ thống thực đơn
• Ví dụ: hệ thống
chức năng ứng
dụng quản lý
học sinh
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 46 HIENLTH
Thiết kế báo cáo (Report)
• Phân loại Report
– Report theo mẫu qui định
– Report không theo mẫu
• Công cụ sử dụng
– Sử dụng Tools và Controls 
– Sử dụng excel/word,…
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 47 HIENLTH
Ví dụ minh họa report
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 48 HIENLTH
Thiết kế báo cáo
• Công cụ sử dụng
– MS Access 2000/XP/2003
– Crystal Report 8.5/9/10/11
– ActiveReport - DataDynamics
– C1Report – ComponentOne
– MS Excel, Word,…
– …
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 49 HIENLTH
Công cụ tạo Report
• MS Access 2000/XP/2003/2007
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 50 HIENLTH
Công cụ tạo Report
• Crystal Report 8.5/9/10/11
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 51 HIENLTH
Công cụ tạo Report
• ActiveReport – DataDynamics
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 52 HIENLTH
Công cụ tạo Report
• C1Report - ComponentOne
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 53 HIENLTH
References
Bài giảng này tham khảo từ nguồn:
• Slide CNPM, Nguyễn Minh Huy, ĐH KHTN 
TpHCM.
• Slide CNPM, Trần Ngọc Bảo, ĐH Sư phạm 
TpHCM
• Slide Thiết kế PM hướng đối tượng, Trần 
Minh Triết, ĐH KHTN TpHCM.
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 54 HIENLTH
Câu hỏi và thảo luận
?