Phân tích thiết kế hệ thống thông tin - Chương 5: Thiết kế thành phần giao diện pdf

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN – KHOA HTTT PHÂN TÍCH THIẾT KẾ HỆ THỐNG THƠNG TIN Giảng viên: ThS Nguyễn Đình Loan Phương Email: phuongndl@uit.edu.vn Chương THIẾT KẾ THÀNH PHẦN GIAO DIỆN Chương 5-Thiết kế thành phần giao diện • • • • • • • • • • Mục đích, vai trị Chất lượng giao diện Thiết kế hình Thiết kế hình (main window) Thiết kế hệ thống thực đơn (Menu) Thiết kế hệ thống công cụ (Toolbars) Thiết kế hình nhập liệu Thiết kế hộp hội thoại Thiết kế hình thơng báo Thiết kế báo biểu, thống kê Mục đích – Vai trị thiết kế giao diện • Là cầu nối giao tiếp người máy tính • Đóng vai trị quan trọng • Góp phần định hiệu khai thác chương trình ứng dụng • Giao diện tốt, rõ ràng, sáng sủa, phù hợp => gia tăng hiệu khai thác Chất lượng giao diện u cầu chung • Ngơn ngữ thể – Thống – Tránh pha trộn nhiều ngôn ngữ • Màu sắc, phong cách thể – Thống hình hình khác – Nên đưa dạng thể chung Chất lượng giao diện • Đối với ứng dụng liên quan nhiều đến nghiệp vụ người sử dụng Ví dụ: Hệ thống điều hành, quản lý, kinh doanh Phải đảm bảo yêu cầu chất lượng – Tính thân thiện với người dùng – Tính khoa học thiết kế Chất lượng giao diện - Giao diện phân hệ quản lý đơn đặt hàng Chất lượng giao diện • Đối với ứng dụng mang tính tiếp thị, quảng cáo, giải trí,… Ví dụ: WebSite quảng cáo, Games,… Phải đảm bảo yêu cầu chất lượng – Sinh động, lôi – Tránh nhàm chán – Đạt yêu cầu tính mỹ thuật, kích thích trí tưởng tượng người dùng – Đơn giản giao tiếp, tránh rườm rà, phức tạp Chất lượng giao diện - Giao diện ứng dụng Game - Thiết kế hình Đặc điểm hình • Xuất chương trình khởi động • Hoặc xuất sau thao tác nghiệp vụ hồn tất • Thường chứa thơng tin – Giới thiệu (tên chương trình, tác giả,…) – Hệ thống thực đơn – Hệ thống cơng cụ 10 Thiết kế hệ thống thực đơn • Các hướng thiết kế: – – – – Hướng nghiệp vụ Hướng tin học …… …… 15 Thiết kế hệ thống công cụ Đặc điểm công cụ • Thường tạo kèm theo hệ thống thực đơn • Bao gồm chức quan trọng thường xuyên thực 16 Thiết kế hệ thống công cụ Gợi ý xây dựng hệ thống cơng cụ • Phải chọn chức thường xuyên quan trọng để đưa vào công cụ • Những chức cơng cụ phải thể hình ảnh, biểu tượng (icon) gợi lên nội dung chức – Ví dụ biểu tượng máy in thể chức in ấn chương trình ứng dụng 17 Thiết kế hình nhập liệu Đặc điểm hình nhập liệu • Đóng vai trị quan trọng ứng dụng • Quyết định tính đầy đủ, xác liệu đưa vào hệ thống thông tin hay sở liệu • Góp phần hỗ trợ người sử dụng thao tác nhanh xác hơn, ảnh hưởng đến suất nhập liệu người sử dụng 18 Thiết kế hình nhập liệu Gợi ý thiết kế hình nhập liệu • Nên đặt hình, canh chỉnh vị trí, tránh bị lệch hình • Khơng nên để q nhiều đối tượng xuất lúc hình Nếu phải nhập nhiều hạng mục liệu, nên thiết kế thành nhiều trang nhập liệu • Với hình nhập liệu loại 1-n, thường kèm lưới (grid) => Nên đặt lưới bên • Tiêu đề điều khiển (controls) nên đặt ngắn gọn dễ hiểu • Màu sắc nên nhã nhặn, thanh, khơng q lịe loẹt, theo dạng (style) thống Không nên sử dụng nhiều màu sắc hình, ứng dụng • Nên đặt Tab để chuyển control => nhanh • Hạn chế tối đa chuyển đổi liên tục bàn phím chuột để tăng tốc độ thao tác nhập liệu 19 Thiết kế hình nhập liệu Gợi ý thiết kế hình nhập liệu (tt) • Nên cho phép sử dụng phím tắt • Các check box, options group nên trình bày theo hàng dọc nhiều dịng • Các nút chức nên đặt bên theo hàng ngang bên phải theo hàng dọc • Trong option group, nên đặt mặc định cho phần tử thường xuyên chọn => tránh trường hợp rủi ro nhầm lẫn • Trong option group, phần tử chọn phải có màu sắc tương phản để dễ nhận diện phân biệt với tùy chọn khác • Sử dụng controls hợp lý • Các nút chức có kích thước nhau, cầnnên đưa số biểu tượng, hình ảnh vào 20 Thiết kế hình nhập liệu - Màn hình nhập liệu Đơn đặt hàng 21 Thiết kế hộp hội thoại Đặc điểm hộp hội thoại • Thu nhận thơng tin từ người sử dụng • Nhắc hay yêu cầu người sử dụng xác nhận trước thực thao tác xử lý • Thường đặt thêm biểu tượng dấu hỏi • Thường thiết kế đơn giản 22 Thiết kế hộp hội thoại 23 Thiết kế hình thơng báo Mục đích • Thông báo kết xử lý • Thơng báo, thể tiến trình xử lý cơng việc • Thông báo lỗi, sử dụng không qui định, kèm theo thơng báo hướng dẫn • … 24 Thiết kế hình thơng báo Gợi ý thiết kế hình thơng báo: • Nên có biểu tượng đặc trưng cho thơng báo , Ví dụ: • Đối với hình thơng báo kết xử lý thường có trạng thái thành công thất bại (đôi kèm theo nguyên nhân) • Đối với hình thể tiến trình xử lý cơng việc nên có kích thước nhỏ thường bố trí hay bên hình • Đối với hình thơng báo lỗi sai thường nội dung bao gồm: thông báo lỗi hướng dẫn sửa lỗi 25 Thiết kế hình thông báo 26 Thiết kế báo biểu, thống kê Đặc điểm • Báo biểu, thống kê thường dùng với mục đích báo cáo, phân tích, tổng hợp thơng tin Gợi ý thiết kế báo biểu, thống kê • Thường phải tuân theo mẫu qui định (nếu có) để giúp người sử dụng có cảm giác thân thiện tiếp xúc với báo cáo • Những loại báo cáo, thống kê khơng có sẵn mẫu qui định cần thiết phải thiết kế xác, phù hợp với yêu cầu khai thác người sử dụng 27 Thiết kế báo biểu, thống kê TỔNG HỢP CÔNG NỢ (Kỳ tháng 11/2008) Khách hàng Công ty Infor World … Công ty X … Tổng cộng Dư nợ đầu kỳ Số phát sinh nợ kỳ Số tiền thu kỳ Số dư nợ cuối kỳ 20.000.000 7.875.000 5.000.000 22.875.000 … … … … 10.000.000 5.000.000 3.000.000 12.000.000 … … … … 30.000.000 12.875.000 8.000.000 34.875.000 - Báo biểu tổng hợp công nợ tháng 11/200828 Thiết kế báo biểu, thống kê THỐNG KÊ DOANH SỐ BÁN HÀNG Kỳ thống kê: Tháng 11/2008 STT Mã hàng Tên hàng Số lượng bán (cái) Doanh số bán (VND) ECS-845PE-800 Mainboard ECS 845 PE-800 3.750.000 ASUS-P4P800-X Mainboard ASUS P4P800-X 5.025.000 INTELP4 1.8GHz CPU Intel P4 1.8 GHz 1.650.000 INTEL P4 2.4GHz CPU Intel P4 2.4 GHz 0 12 10.425.000 Tổng cộng - Thống kê doanh số bán hàng tháng 11/2008 29 .. .Chương THIẾT KẾ THÀNH PHẦN GIAO DIỆN Chương 5 -Thiết kế thành phần giao diện • • • • • • • • • • Mục đích, vai trị Chất lượng giao diện Thiết kế hình Thiết kế hình (main window) Thiết kế hệ thống. .. (Menu) Thiết kế hệ thống công cụ (Toolbars) Thiết kế hình nhập liệu Thiết kế hộp hội thoại Thiết kế hình thơng báo Thiết kế báo biểu, thống kê Mục đích – Vai trị thiết kế giao diện • Là cầu nối giao. .. tắt phần mềm thơng dụng • Các mục chọn thực đơn kéo xuống nên phân nhóm đường phân cách rõ ràng 13 Thiết kế hệ thống thực đơn - Hệ thống thực đơn chương trình Microsoft Power Point 14 Thiết kế hệ