phân tích va thiết kế phần mềmch7 thiết kế giao dien sinhvienzone com

om Si nh Vi en Zo ne C Thiết kế giao diện SinhVienZone.com https://fb.com/sinhvienzonevn om Nội dung C Đặt vấn đề ne Thiết kế giao diện nhập nh Vi en Zo Thiết kế giao diện xuất Si Thiết kế đối thoại SinhVienZone.com Các kỹ thuật nâng cao chất lượng giao diện https://fb.com/sinhvienzonevn om Tầm quan trọng giao diện WAN C Multimedia nh Vi en Zo ne LAN Cable Si DSL Dial Giao dịch điện tử Wireless … FR/ATM Xử lý thơng tin SinhVienZone.com Tìm kiếm thơnghttps://fb.com/sinhvienzonevn tin Tài liệu điện tử om Tầm quan trọng giao diện Giao dịch điện tử Zo ne C Multimedia Si nh Vi en Giao diện Tài liệu điện tử Xử lý thơng tin SinhVienZone.com Tìm kiếm thơng tin https://fb.com/sinhvienzonevn Tính dễ dùng thân thiện om –Tính dễ hiểu Phát sai sót Dự trù sẵn phản ứng NSD phạm sai sót Đủ uyển chuyển Trình tự khai thác có tự nhiên hay khơng? Câu hỏi đ/v NSD: Zo ne C Chức nh Vi en –Tôi đâu? –Tơi đến nào? –Tơi làm gi đây? –Sau giao diện này, –Tính đến đâu? “ergonomic”: Si Màu sắc Vị trí Cách SinhVienZone.com giao tiếp hệ thống https://fb.com/sinhvienzonevn om Tính quán: “chuẩn” liệu: tên gọi, chiều dài, kiểu, cách trình bày –Chuẩn mã ne Zo với việc Tin học hóa, có ý nghĩa mặt nghiệp vụ => xem liệu bình thường Do yêu cầu việc Tin học hóa => đừng làm rối cho NSD nh Vi en Độc lập C –Chuẩn –Chuẩn cấu trúc hệ thống trình bày thực đơn Cách trình bày thành phần hình Cách xử lý hình Si Cách –Chuẩn sưu liệu: Hướng dẫn trực tuyến Hướng dẫn tài liệu SinhVienZone.com https://fb.com/sinhvienzonevn nh Vi en Zo ne C Giao diện tương tác om Các thành phần giao diện Si Giao diện Giao diện nhập SinhVienZone.com Giao diện xuất https://fb.com/sinhvienzonevn om Thiết kế giao diện nhập tình trạng cổ chai cho phép nhiều người nhập Tránh tạo hội cho NSD phạm lỗi/sơ xuất Tránh thêm cơng đoạn thừa Quy trình nhập đơn giản nhất, tự nhiên nh Vi en Zo ne C Tránh Nội dung liệu Tránh tượng nút cổ chai: bước xử lý hình –Tránh thường xuyên truy xuất liệu Si –Tận dụng Trình bày: –Phải đảm SinhVienZone.com bảo thói quen xử lý chứng từ gốc https://fb.com/sinhvienzonevn Phát om Thiết kế giao diện nhập sai sót kiểm tra ràng buộc tồn vẹn tra ngay? –Kiểm tra cuối hình? –Kiểm tra cuối kỳ khai thác? => Phải quan sát thói quen người sử dụng Thói quen phải tơn trọng => bắt buộc phải tôn trọng quen chưa hợp lý mâu thuẫn với kỹ thuật => Phải trao đổi, thuyết phục thống với NSD Si Thói nh Vi en Zo ne C –Kiểm SinhVienZone.com https://fb.com/sinhvienzonevn Thiết kế giao diện xuất C Zo ne - Dữ liệu HTTT, - Dữ liệu tính tốn, - Dữ liệu vừa nhập vào… om Nội dung: Ai sử dụng nội dung kết xuất: Đối tượng HTTT: dùng kết xuất cho mục tiêu gì? - Đối tượng ngồi mơi trường: muốn đưa nội dung bên ngồi? Si nh Vi en - - Khối lượng liệu xuất kết xuất - Khi thực kết xuất đó? - Kết xuất dạng gì? Màn hình, giấy in, file theo định dạng nào? SinhVienZone.com https://fb.com/sinhvienzonevn 10 om Thiết kế giao diện xuất nh Vi en Zo ne C Trình bày bảng biểu: - Nếu liệu nhiều lấy nội dung gì? - Cách bố trí nội dung theo cột/dòng/tiểu cột/ tiểu dòng…, tổng tiểu dòng/tiểu cột, thứ tự trình bày tổng trước hay sau thơng tin chi tiết, chữ hoa/thường, thứ tự trình bày liệu, chấm/phẩy số lẻ, canh lề, số lượng số lẻ… => Phải mô nội dung liệu phần thiết kế giao diện, không nên đưa cho NSD xem template rỗng Si Trình bày biểu đồ: - Chỉ chứa liệu tổng hợp, khơng có liệu chi tiết Thể khuynh hướng, so sánh Không hiệu qua cần xác định số liệu cụ thể - Trình bày biểu đồ dạng nào? SinhVienZone.com https://fb.com/sinhvienzonevn 11 om Thiết kế đối thoại Đặc điểm: nh Vi en Zo ne C - Giao diện tương tác - Giao diện đồ họa - Thao tác “trực tiếp” - Ngun tắc: LOOK and FEEL - Mơ hình WIMP: Window – Icon – Menu – Pointer Các mức thiết kế Si - Mức ngữ nghĩa: nội dung liệu,nội dung chức - Mức cú pháp: trình tương tác đối thoại, kịch khai thác diễn nào? - Mức từ vựng: từ ngữ cách trình bày nội dung ngữ nghĩa SinhVienZone.com https://fb.com/sinhvienzonevn 12 Thiết kế đối thoại om Mức ngữ nghĩa Zo ne C - Hệ thống hướng dẫn trực tuyến song song với chức hệ thống thực đơn - Các hộp thoại cần thiết thông báo lỗi/hướng dẫn - Dựa vào hệ thống thực đơn để xác định giao diện đối thoại Si nh Vi en Cần nhớ: tính “ergonomic” tính quán - Gây ý không làm NSD mệt mỏi - Nhất quán - Giá trị mặc định (câu trả lời thường hay xảy nhất) - Nội dung thông báo phải thể nội dung phản ứng hệ thống Mức ngữ nghĩa tốt => Có thể dễ dàng thay đổi ngôn ngữ SinhVienZone.com https://fb.com/sinhvienzonevn 13 Mức cú pháp C - Chọn kiểu đối thoại kiểu điều khiển đối thoại om Thiết kế đối thoại Si nh Vi en Zo ne Kiểu đối thoại: - Hỏi – Trả lời - Thực đơn - Mẫu biểu để điền vào - Ngơn ngữ lệnh nhập qua bàn phím - Dùng phím chức - Ngơn ngữ tự nhiên - Vật thể hành động - Thao tác trực tiếp SinhVienZone.com https://fb.com/sinhvienzonevn 14 Mức cú pháp ne C - Chọn kiểu đối thoại kiểu điều khiển đối thoại om Thiết kế đối thoại Si nh Vi en Zo Kiểu điều khiển đối thoại: - Vẽ câu hỏi trả lời - Đến nhóm chức I theo đường nào? - Khi đến nhóm chức I theo đường khác phép dùng chức nào? - Mô kịch khai thác SinhVienZone.com https://fb.com/sinhvienzonevn 15 om Thiết kế đối thoại Mức từ vựng Si nh Vi en Zo ne C - Nên dùng biểu tượng => chọn lựa biểu tượng thể nội dung mong muốn - Biểu tượng kèm tên gọi ngắn gọn, súc tích quán - Cách sử dụng vật thể: ý nghĩa nhấn bên trái/ phải, nhấn đúp mouse… - Cách di chuyển trỏ - Cách dùng màu: + Phân biệt cửa sổ khác mở + Tạo mối liên hệ đối tượng thơng tin + Tình trạng khác đối tượng + Gây ý đặc biệt - Trên hình nên dùng tối đa màu khác (kể màu màu chữ) - Các màu phải hòa hợp SinhVienZone.com https://fb.com/sinhvienzonevn 16 om Si nh Vi en Zo ne C Các kỹ thuật nâng cao chất lượng giao diện 17 SinhVienZone.com https://fb.com/sinhvienzonevn Các kỹ thuật nâng cao chất lượng nh Vi en Zo ne C om Kỹ thuật bổ sung thông tin Kỹ thuật bổ sung thao tác Kỹ thuật tăng tốc thao tác Kỹ thuật xử lý lỗi Kỹ thuật bổ sung, thay hình thức trình bày … Si       SinhVienZone.com https://fb.com/sinhvienzonevn 18 Các kỹ thuật nâng cao chất lượng nh Vi en Zo ne C om Kỹ thuật bổ sung thông tin Kỹ thuật bổ sung thao tác Kỹ thuật tăng tốc thao tác Hướng dẫn sử dụng Kỹ thuật xử lý lỗi Thuộc Kỹ thuật bổ sung, thay hình thức trình bày tính đối tượng Trạng thái đối tượng … Quan hệ đối tượng Quá trình họat động đối tượng … Si       SinhVienZone.com https://fb.com/sinhvienzonevn 19 Các kỹ thuật nâng cao chất lượng nh Vi en Zo ne C om Kỹ thuật bổ sung thông tin Kỹ thuật bổ sung thao tác Kỹ thuật tăng tốc thao tác Kỹ thuật xử lý lỗi Kỹ thuật bổ sung, thay hình thức trình bày Di chuyển … Chọn cách xem nội dung Xem chi tiết Phím nóng Ơ nhập liệu Si       SinhVienZone.com https://fb.com/sinhvienzonevn 20 Các kỹ thuật nâng cao chất lượng nh Vi en Zo ne C om Kỹ thuật bổ sung thông tin Kỹ thuật bổ sung thao tác Kỹ thuật tăng tốc thao tác Kỹ thuật xử lý lỗi Kỹ thuật bổ sung, thay hình thức trình bày … Giá trị định sẵn Chuyển ô nhập liệu thành cột nhập liệu Giá trị thay … Si       SinhVienZone.com https://fb.com/sinhvienzonevn 21 Các kỹ thuật nâng cao chất lượng nh Vi en Zo ne C om Kỹ thuật bổ sung thông tin Kỹ thuật bổ sung thao tác Kỹ thuật tăng tốc thao tác Kỹ thuật xử lý lỗi Kỹ thuật bổ sung, thay hình thức trình bày Cấm tuyệt đối lỗi … Hạn chế lỗi Nhắc nhở Thông báo lỗi Cơ hội sửa lỗi … Si       SinhVienZone.com https://fb.com/sinhvienzonevn 22 Biểu tượng Các kỹ thuật nâng cao chất lượng nh Vi en Zo ne C om Kỹ thuật bổ sung thông tin Kỹ thuật bổ sung thao tác Kỹ thuật tăng tốc thao tác Kỹ thuật xử lý lỗi Kỹ thuật bổ sung, thay hình thức trình bày … Si       Cây Sơ đồ Thực đơn động Thao tác trực tiếp … SinhVienZone.com https://fb.com/sinhvienzonevn 23 ... Thiết kế giao diện nhập nh Vi en Zo Thiết kế giao diện xuất Si Thiết kế đối thoại SinhVienZone. com Các kỹ thuật nâng cao chất lượng giao diện https://fb .com/ sinhvienzonevn om Tầm quan trọng giao. .. ne C Giao diện tương tác om Các thành phần giao diện Si Giao diện Giao diện nhập SinhVienZone. com Giao diện xuất https://fb .com/ sinhvienzonevn om Thiết kế giao diện nhập tình trạng cổ chai cho... Các màu phải hòa hợp SinhVienZone. com https://fb .com/ sinhvienzonevn 16 om Si nh Vi en Zo ne C Các kỹ thuật nâng cao chất lượng giao diện 17 SinhVienZone. com https://fb .com/ sinhvienzonevn Các kỹ