Bài giảng Công nghệ phần mềm - Chủ đề 4: Thiết kế Phần mềm (Tiếp theo)

COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 1 HIENLTH
Chủ đề 4: Thiết kế Phần mềm (tt)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 2 HIENLTH
USER INTERFACE DESIGN
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 3 HIENLTH
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 4 HIENLTH
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 5 HIENLTH
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 6 HIENLTH
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 7 HIENLTH
Nội dung
• Khái niệm giao diện
• Các thành phần giao diện
• Phân loại màn hình
• Một số tiêu chí thiết kế màn hình
• Sơ đồ màn hình, sitemap
• Mô tả chi tiết màn hình
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 8 HIENLTH
Thiết kế 
giao diện
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 9 HIENLTH
Khái niệm giao diện
• Giao diện là gì?
– Phần mềm không hoạt động độc lập mà luôn 
giao tiếp với:
• Người sử dụng
• Các hệ thống liên quan
 cần thành phần chuyên trách giao tiếp:
Giao diện
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 10 HIENLTH
Khái niệm giao diện
• Đặc điểm:
– Nơi diễn ra tương tác
– Định nghĩa cách thức giao tiếp
– Tiếp nhận thông tin
– Phản hồi thông tin
• Phân loại:
– Giao diện người dung (User interface)
– Giao diện lập trình (Programming interface)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 11 HIENLTH
Khái niệm giao diện
• Thiết kế giao diện người dùng:
– Lập danh sách màn hình
• Xác định ngữ cảnh giao tiếp
• Dựa vào tình huống sử dụng (Use Case)
– Xây dựng sơ đồ màn hình
• 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 - 12 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 - 13 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 - 14 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 - 15 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 - 16 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
Calculator Paint Workflow Editor
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 17 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 - 18 HIENLTH
Màn hình đăng nhập
• Hình thức thể hiện
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 19 HIENLTH
Màn hình đăng nhập
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 20 HIENLTH
Màn hình chính
• Hình thức thể hiện (Windows)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 21 HIENLTH
Màn hình chính (Windows)
• Ví dụ minh họa
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 22 HIENLTH
Màn hình chính (Windows)
• Ví dụ minh họa
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 23 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 - 24 HIENLTH
Màn hình tra cứu
• Hình thức thể hiện Tiêu chí 
cố định
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 25 HIENLTH
Màn hình tra cứu
• Hình thức thể hiện Tiêu chí 
cố định
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 26 HIENLTH
Quy tắc thiết kế giao diện
Nguyên tắc Mô tả
Quen thuộc với 
người dùng
Giao diện nên dùng các thuật ngữ và khái niệm rút ra từ kinh
nghiệm của những người sẽ dùng hệ thống nhiều nhất.
Nhất quán giao diện cần nhất quán sao cho các thao tác gần giống nhau có
thể được kích hoạt theo cùng kiểu.
ngạc nhiên 
tối thiểu
Người dùng không bao giờ bị bất ngờ về hành vi của hệ thống.
khôi phục 
được
Giao diện nên có các cơ chế cho phép người dùng khôi phục lại
tình trạng hoạt động bình thường sau khi gặp lỗi.
hướng dẫn 
người dùng
Giao diện nên có phản hồi có nghĩa khi xảy ra lỗi và cung cấp
các tiện ích trợ giúp theo ngữ cảnh.
người dùng 
đa dạng
Giao diện nên cung cấp các tiện ích tương tác thích hợp cho các
loại người dùng hệ thống khác nhau.
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 27 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
– Tránh lạm dụng màu sắc trong trình bày
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 28 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 - 29 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 - 30 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 - 31 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 - 32 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 33 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 34 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 35 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 36 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 - 37 HIENLTH
Các thông báo lỗi
• Thiết kế thông báo lỗi là việc rất quan trọng
– Các thông báo lỗi kém có thể dẫn đến việc người 
dùng không chấp nhận sử dụng một hệ thống.
• Các thông báo nên lịch sự, ngắn gọn, nhất quán 
và mang tính xây dựng.
• Nên xét đến background và kinh nghiệm của 
người dùng như là nhân tố quyết định khi thiết 
kế các thông báo lỗi.
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 38 HIENLTH
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 39 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 - 40 HIENLTH
Quy trình thiết kế UI
• Thiết kế UI là một quy trình lặp đi lặp lại với sự 
liên lạc chặt chẽ giữa người dùng và người thiết 
kế.
• Ba hoạt động chính trong quy trình:
– User analysis: Tìm hiểu người dùng sẽ làm gì với hệ 
thống;
– System prototyping: phát triển một loạt các bản 
mẫu để thử nghiệm;
– Interface evaluation: thử nghiệm các bản mẫu 
cùng với người dùng.
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 41 HIENLTH
Quy trình thiết kế
Phân tích và 
tìm hiểu các 
hoạt động của 
người dùng
Tạo bản mẫu 
thiết kế trên 
giấy
Cùng người 
dùng đánh giá 
thiết kế
Tạo bản mẫu 
thiết kế động
Cài đặt 
giao diện người 
dùng cuối cùng
Cùng người 
dùng đánh giá 
thiết kế
Bản mẫu 
chạy được
Bản mẫu 
thiết kế
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 42 HIENLTH
Quy trình thực hiện (làm bài)
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 - 43 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 - 44 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 - 45 HIENLTH
Câu hỏi và thảo luận
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 46 HIENLTH
THIẾT KẾ MENU
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 47 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 - 48 HIENLTH
Giới thiệu Menu
Menu Bar
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 49 HIENLTH
Giới thiệu Menu
Popup Menu
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 50 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 - 51 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 - 52 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 - 53 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 - 54 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 - 55 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 - 56 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 - 57 HIENLTH
Ví dụ minh họa report
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 58 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 - 59 HIENLTH
Công cụ tạo Report
• MS Access 2000/XP/2003/2007
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 60 HIENLTH
Công cụ tạo Report
• Crystal Report 8.5/9/10/11
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 61 HIENLTH
Công cụ tạo Report
• ActiveReport – DataDynamics
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 62 HIENLTH
Công cụ tạo Report
• C1Report - ComponentOne
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 63 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 - 64 HIENLTH
Câu hỏi và thảo luận