Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 23 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
23
Dung lượng
1,53 MB
Nội dung
Thiết kế giao diện CuuDuongThanCong.com https://fb.com/tailieudientucntt Nội dung Đặt vấn đề Thiết kế giao diện nhập Thiết kế giao diện xuất Thiết kế đối thoại Các kỹ thuật nâng cao chất lượng giao diện CuuDuongThanCong.com https://fb.com/tailieudientucntt Tầm quan trọng giao diện WAN Multimedia LAN Dial Giao dịch điện tử DSL Wireless … FR/ATM Cable Xử lý thông tin CuuDuongThanCong.com Tìm kiếm thơnghttps://fb.com/tailieudientucntt tin Tài liệu điện tử Tầm quan trọng giao diện Multimedia Giao dịch điện tử Giao diện Tài liệu điện tử Xử lý thông tin CuuDuongThanCong.com Tìm kiếm thơng tin https://fb.com/tailieudientucntt Tính dễ dùng –Tính thân thiện Chức 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: –Tôi đâu? –Tôi đến nào? –Tôi làm gi đây? –Sau giao diện này, tơi –Tính đến đâu? “ergonomic”: Màu sắc Vị trí Cách CuuDuongThanCong.com giao tiếp hệ thống https://fb.com/tailieudientucntt Tính quán: “chuẩn” –Chuẩn liệu: tên gọi, chiều dài, kiểu, cách trình bày –Chuẩn mã Độc lập 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 –Chuẩn cấu trúc hệ thống Cách 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 –Chuẩn sưu liệu: Hướng dẫn trực tuyến Hướng dẫn tài liệu CuuDuongThanCong.com https://fb.com/tailieudientucntt Các thành phần giao diện Giao diện tương tác Giao diện Giao diện nhập CuuDuongThanCong.com Giao diện xuất https://fb.com/tailieudientucntt Thiết kế giao diện nhập Tránh 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 Nội dung liệu Tránh tượng nút cổ chai: –Tận dụng bước xử lý hình –Tránh thường xuyên truy xuất liệu Trình bày: –Phải đảm CuuDuongThanCong.com bảo thói quen xử lý chứng từ gốc https://fb.com/tailieudientucntt Thiết kế giao diện nhập Phát sai sót kiểm tra ràng buộc toàn vẹn –Kiểm 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 Thói 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt Thiết kế giao diện xuất Nội dung: - Dữ liệu HTTT, - Dữ liệu tính tốn, - Dữ liệu vừa nhập vào… 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 ngoài? - - 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? CuuDuongThanCong.com https://fb.com/tailieudientucntt 10 Thiết kế giao diện xuất 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 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? CuuDuongThanCong.com https://fb.com/tailieudientucntt 11 Thiết kế đối thoại Đặc điểm: - Giao diện tương tác - Giao diện đồ họa - Thao tác “trực tiếp” - Nguyên tắc: LOOK and FEEL - Mơ hình WIMP: Window – Icon – Menu – Pointer Các mức thiết kế - 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 12 Thiết kế đối thoại Mức ngữ nghĩa - 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 Cần nhớ: tính “ergonomic” tính qn - 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ữ CuuDuongThanCong.com https://fb.com/tailieudientucntt 13 Thiết kế đối thoại Mức cú pháp - Chọn kiểu đối thoại kiểu điều khiển đối thoại 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 14 Thiết kế đối thoại Mức cú pháp - Chọn kiểu đối thoại kiểu điều khiển đối thoại 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 15 Thiết kế đối thoại Mức từ vựng - 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 16 Các kỹ thuật nâng cao chất lượng giao diện 17 CuuDuongThanCong.com https://fb.com/tailieudientucntt Các kỹ thuật nâng cao chất lượng 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 … CuuDuongThanCong.com https://fb.com/tailieudientucntt 18 Các kỹ thuật nâng cao chất lượng 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 … CuuDuongThanCong.com https://fb.com/tailieudientucntt 19 Các kỹ thuật nâng cao chất lượng 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 20 Các kỹ thuật nâng cao chất lượng 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 … CuuDuongThanCong.com https://fb.com/tailieudientucntt 21 Các kỹ thuật nâng cao chất lượng 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 … CuuDuongThanCong.com https://fb.com/tailieudientucntt 22 Biểu tượng Các kỹ thuật nâng cao chất lượng Cây Sơ đồ Thực đơn động Thao tác trực tiếp … 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 … CuuDuongThanCong.com https://fb.com/tailieudientucntt 23