Bài giảng Nhập môn Công nghệ phần mềm: Chương 5 - Đỗ Thị Thanh Tuyền

Mời các bạn tham khảo bài giảng Nhập môn Công nghệ phần mềm: Chương 5 - Thiết kế phần mềm thiết kế giao diện sau đây để bổ sung thêm kiến thức về thiết kế giao diện người dùng, sơ đồ liên kết các màn hình, phân loại màn hình, kiến trúc màn hình, thiết kế màn hình với tính tiện dụng và một số kiến thức khác.

NHẬP MÔN CÔNG NGHỆ PHẦN MỀM Giảng viên: Đỗ Thị Thanh Tuyền Email: dothithanhtuyen@gmail.com Nội dung môn học n Tổng quan Cơng nghệ phần mềm n Xác định mơ hình hóa yêu cầu phần mềm n Thiết kế phần mềm: - Thiết kế GIAO DIỆN n Cài đặt phần mềm n Kiểm thử bảo trì n Đồ án mơn học Nhập mơn Cơng nghệ Phần mềm January 15 Thiết kế giao diện người dùng n Nội dung hình thức trình bày hình giao tiếp phần mềm n Hệ thống thao tác mà người dùng thực hình giao tiếp xử lý tương ứng phần mềm Nhập môn Công nghệ Phần mềm January 15 Kết đạt n Danh sách hình n Sơ đồ liên kết hình n Mơ tả hình: Ø  Mơ tả đối tượng hình; Ø  Danh sách biến cố xử lý tương ứng Nhập môn Công nghệ Phần mềm January 15 Danh sách hình STT Màn hình Loại hình Màn hình Tiếp Màn hình nhập liệu nhận bảo trì xe Màn hình Lập Màn hình nhập liệu phiếu sửa chữa Màn hình Tra Màn hình tra cứu cứu xe Màn hình Lập Màn hình nhập liệu phiếu thu tiền Màn hình Báo Báo biểu cáo tháng Nhập môn Công nghệ Phần mềm January 15 Chức Cho phép nhập lưu trữ thông tin xe sửa chữa Cho phép nhập lưu trữ thông tin phiếu sửa chữa Cho phép nhập tiêu chuẩn tra cứu trình bày kết tra cứu Cho phép nhập lưu trữ thơng tin phiếu thu tiền Trình bày kết báo cáo Sơ đồ liên kết hình n Hệ thống hình với quan hệ việc chuyển điều khiển chúng n Hệ thống hình = Màn hình + Các hình thực cơng việc phần mềm n Ký hiệu: Tên hình Nhập mơn Cơng nghệ Phần mềm January 15 Mơ tả chi tiết hình n Mơ tả đối tượng hình STT Tên Kiểu txtSĐT TextBox Ràng buộc Nhập ký số 0-9 Chức Nhập số điện thoại chủ xe n Danh sách biến cố xử lý tương ứng hình STT Biến cố Chọn button Cập nhật Nhập môn Công nghệ Phần mềm Xử lý Lưu thông tin xe sửa chữa xuống CSDL January 15 Phân loại hình n Màn hình chính: cho phép người sử dụng chọn công việc thực với phần mềm n Màn hình nhập liệu: cho phép người sử dụng nhập vào thông tin để lưu trữ tính tốn n Màn hình tra cứu: cho phép tìm kiếm thông tin lưu trữ với tiêu chuẩn tìm kiếm n Màn hình thơng báo: hiển thị thơng báo, nhắc nhở n Báo biểu: báo cáo thống kê theo mốc thời gian định sẵn Nhập môn Công nghệ Phần mềm January 15 Kiến trúc hình Thành phần nhập liệu Các nút xử lý Thông tin kết Nhập môn Công nghệ Phần mềm January 15 Thành phần nhập liệu n Cho phép người sử dụng nhập liệu nhiều hình thức khác nhau: Ø  Text Box Ø  Combo Box Ø  List Box Ø  Radio Button/Option Button Ø  Check Box/Tick Box Nhập môn Công nghệ Phần mềm 10 January 15 Thông tin kết n Cho phép người sử dụng xem thông tin kết nhiều hình thức khác nhau: Ø  Label Ø  Text Box Ø  List Box Nhập môn Công nghệ Phần mềm 12 January 15 Các bước thực Sơ đồ luồng liệu Thiết kế hình với tính đắn Màn hình đắn Thiết kế hình với tính tiện dụng Màn hình hiệu Màn hình tiện dụng Thiết kế hình với tính hiệu Màn hình kết Nhập môn Công nghệ Phần mềm 13 January 15 Thiết kế hình với tính Tiện dụng n Giao diện quen thuộc (dựa biểu mẫu tương ứng) n Bố trí hợp lý n Cung cấp thêm thông tin cho người dùng n Cho phép nhập nhiều giá trị đồng thời (trên List Box) Nhập môn Công nghệ Phần mềm 14 January 15 Thiết kế hình với tính Hiệu n Chọn control thích hợp (Text Box/Combo Box ) n Cung cấp giá trị mặc định cho ô nhập liệu n Hiển thị kết cách trực quan (dùng màu sắc, hình vẽ, thích ) Nhập mơn Cơng nghệ Phần mềm 15 January 15 Thiết kế hình n Từ danh sách yêu cầu phần mềm (nghiệp vụ, chất lượng hệ thống), tiến hành phân nhóm cơng việc: Ø  Theo chức Tin học: •  Hệ thống •  Lưu trữ •  Tra cứu •  Báo biểu Nhập môn Công nghệ Phần mềm 16 January 15 Thiết kế hình (tt) Ø  Theo đối tượng: danh sách đối tượng công việc thực đối tượng Ø  Theo nghiệp vụ, qui trình: trình bày cơng việc theo trình tự cơng việc qui trình Nhập mơn Cơng nghệ Phần mềm 17 January 15 Thiết kế hình (tt) n Lựa chọn hình thức trình bày: Ø  Thực đơn (kết hợp sử dụng phím nóng) Ø  Biểu tượng Ø  Sơ đồ Nhập mơn Cơng nghệ Phần mềm 18 January 15 Thiết kế hình Tra cứu n Cho phép tra cứu theo nhiều tiêu chuẩn khác nhau, ưu tiên chọn tiêu chuẩn tra cứu quen thuộc dễ dàng cho người sử dụng n Cho phép tìm cập nhật lại thơng tin lưu trữ n Kết tra cứu = Thông tin đối tượng trình hoạt động đối tượng n Hỗ trợ xem kết tra cứu nhiều hình thức khác (danh sách, biểu đồ, hình ảnh…) n Bổ sung nút điều khiển cho nhu cầu kết xuất máy in, tập tin Nhập môn Công nghệ Phần mềm 19 January 15 Thiết kế hình Nhập liệu n  Thành phần nhập liệu: kiểm tra tất liệu nhập dựa vào ràng buộc tự nhiên ràng buộc nghiệp vụ (qui định liên quan) Thông thường mã số phát sinh tự động n  Các nút xử lý: Ø  Thêm mới, Lưu… Ø  Bổ sung nút chuyển điều khiển đến hình có liên quan n  Thơng tin kết quả: trình bày kết nhập liệu Nên bổ sung thơng tin tính tốn (số sách mượn, tổng số tiền hóa đơn…) Nhập môn Công nghệ Phần mềm 20 January 15 Thiết kế hình thơng báo n Thơng báo kết thực yêu cầu (thành công/thất bại + nguyên nhân) n Thông báo lúc n Cung cấp phản hồi hệ thống cần thiết (progress bar, thông báo chờ hệ thống thực xử lý nhiều thời gian…) n Thiết kế đơn giản, gồm thông tin cần thông báo (cô đọng dễ hiểu) nút chọn Chú ý không thiết kế nhiều nút chọn, chọn nút mặc định theo cách xử lý thông thường Nhập môn Công nghệ Phần mềm 21 January 15 Thiết kế Báo biểu n Giữ lại tiêu đề báo cáo qua trang khác kéo trượt lên xuống n Lưu ý kích thước khác khơng gian hiển thị báo biểu in giấy báo biểu xuất hình n Chỉ hiển thị thơng tin thật cần thiết, tránh làm rối báo biểu Nhập môn Công nghệ Phần mềm 22 January 15 Một số nguyên tắc thiết kế giao diện n Tất hình phải có tên n Thiết kế phù hợp với đối tượng sử dụng n Dễ học, dễ nhớ, phù hợp với người sử dụng, đồng thời hỗ trợ cách làm nhanh, làm tắt cho người sử dụng có kinh nghiệm n Chú ý mơi trường triển khai ứng dụng địi hỏi nguyên tắc thiết kế khác có khác tốc độ thực xử lý (web form, win form…) n Thứ tự trình bày hình phải phù hợp với văn hóa, thói quen người sử dụng Nhập môn Công nghệ Phần mềm 23 January 15 Một số nguyên tắc thiết kế giao diện (tt) n Chỉ trình bày nội dung thật cần thiết, khơng trình bày q nhiều thơng tin hình n Chọn font chữ rõ ràng, cỡ chữ phù hợp, dùng chữ in hoa trường hợp n Màu sắc hài hòa, nên dùng màu lạnh, dùng màu nóng cần gây ý (hoặc dùng chớp, nháy) n Kết hợp màu màu chữ hợp lý n Không dùng nhiều màu sắc hình Nhập mơn Cơng nghệ Phần mềm 24 January 15 Một số nguyên tắc thiết kế giao diện (tt) n Nhất quán toàn hệ thống về: Ø  Cách trình bày: font chữ, màu sắc, vị trí mục Ø  Tên nút điều khiển Ø  Ý nghĩa biểu tượng n Số bước để đến hình cơng việc phải