chủ đề 4: thiết kế phần mềm (tt)...cần thành phần chuyên trách giao tiếp: giao...
TRANSCRIPT
![Page 1: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/1.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 1 HIENLTH
Chủ đề 4: Thiết kế Phần mềm (tt)
![Page 2: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/2.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 2 HIENLTH
USER INTERFACE DESIGN
![Page 3: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/3.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 3 HIENLTH
![Page 4: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/4.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 4 HIENLTH
![Page 5: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/5.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 5 HIENLTH
![Page 6: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/6.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 6 HIENLTH
![Page 7: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/7.jpg)
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
![Page 8: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/8.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 8 HIENLTH
Thiết kế giao diện
![Page 9: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/9.jpg)
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
![Page 10: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/10.jpg)
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)
![Page 11: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/11.jpg)
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
![Page 12: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/12.jpg)
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ệnnhập liệu Giao diện
kết xuất
Giao diện tương tác
![Page 13: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/13.jpg)
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
![Page 14: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/14.jpg)
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
![Page 15: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/15.jpg)
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
![Page 16: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/16.jpg)
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
![Page 17: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/17.jpg)
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…
![Page 18: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/18.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 18 HIENLTH
Màn hình đăng nhập
• Hình thức thể hiện
![Page 19: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/19.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 19 HIENLTH
Màn hình đăng nhập
![Page 20: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/20.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 20 HIENLTH
Màn hình chính
• Hình thức thể hiện (Windows)
![Page 21: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/21.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 21 HIENLTH
Màn hình chính (Windows)
• Ví dụ minh họa
![Page 22: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/22.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 22 HIENLTH
Màn hình chính (Windows)
• Ví dụ minh họa
![Page 23: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/23.jpg)
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)
![Page 24: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/24.jpg)
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
![Page 25: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/25.jpg)
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
![Page 26: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/26.jpg)
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.
![Page 27: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/27.jpg)
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
![Page 28: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/28.jpg)
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
![Page 29: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/29.jpg)
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
![Page 30: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/30.jpg)
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.
![Page 31: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/31.jpg)
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
![Page 32: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/32.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 32 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
![Page 33: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/33.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 33 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
![Page 34: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/34.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 34 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
![Page 35: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/35.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 35 HIENLTH
Quy tắc thiết kế giao diện
• Tính trực quan
![Page 36: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/36.jpg)
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
![Page 37: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/37.jpg)
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.
![Page 38: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/38.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 38 HIENLTH
![Page 39: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/39.jpg)
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”
![Page 40: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/40.jpg)
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.
![Page 41: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/41.jpg)
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ế
![Page 42: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/42.jpg)
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ý
![Page 43: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/43.jpg)
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
… … … … …
![Page 44: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/44.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 44 HIENLTH
Mô tả sự kiệnSTT Đ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)
![Page 45: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/45.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 45 HIENLTH
Câu hỏi và thảo luận
![Page 46: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/46.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 46 HIENLTH
THIẾT KẾ MENU
![Page 47: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/47.jpg)
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)
![Page 48: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/48.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 48 HIENLTH
Giới thiệu MenuMenu Bar
![Page 49: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/49.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 49 HIENLTH
Giới thiệu MenuPopup Menu
![Page 50: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/50.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 50 HIENLTH
Các thành phần trên Menu barPopup Menu
Popup Menu
Menu Bar
Menu Item
Separator
Popup Menu
Popup Menu
![Page 51: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/51.jpg)
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)
![Page 52: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/52.jpg)
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ự
![Page 53: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/53.jpg)
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
– ….
![Page 54: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/54.jpg)
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
![Page 55: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/55.jpg)
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
![Page 56: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/56.jpg)
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,…
![Page 57: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/57.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 57 HIENLTH
Ví dụ minh họa report
![Page 58: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/58.jpg)
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,…
– …
![Page 59: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/59.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 59 HIENLTH
Công cụ tạo Report
• MS Access 2000/XP/2003/2007
![Page 60: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/60.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 60 HIENLTH
Công cụ tạo Report
• Crystal Report 8.5/9/10/11
![Page 61: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/61.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 61 HIENLTH
Công cụ tạo Report
• ActiveReport – DataDynamics
![Page 62: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/62.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 62 HIENLTH
Công cụ tạo Report
• C1Report - ComponentOne
![Page 63: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/63.jpg)
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.
![Page 64: Chủ đề 4: Thiết kế Phần mềm (tt)...cần thành phần chuyên trách giao tiếp: Giao diện. ... •Ràng buộc nghiệp vụ ... COMP1026 –Introduction to Software](https://reader033.vdocuments.pub/reader033/viewer/2022042411/5f28d8aac1d3a10147169b92/html5/thumbnails/64.jpg)
COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 64 HIENLTH
Câu hỏi và thảo luận