SlideShare ist ein Scribd-Unternehmen logo
1 von 16
Một số vấn đề về thiết kế giao diện Người trình bày: Trần Minh Triết Nội dung của seminar này trích từ bài giảng  “ Chương 5 – Thiết kế giao diện người – máy”,  học phần Hệ Thống Thông Tin, Cao Học CNTT Khóa 12 của PGS.TS. Đồng Thị Bích Thủy Đại học Quốc gia Thành phố Hồ Chí Minh Trường Đại học Khoa học Tự nhiên
Nội dung Thiết kế giao diện xuất Thiết kế giao diện nhập Đặt vấn đề Thiết kế đối thoại
Tầm quan trọng của giao diện LAN WAN Wireless Cable FR/ATM DSL Dial … .. 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ử
Tầm quan trọng của giao diện 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
Tính dễ dùng ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tính nhất quán: “chuẩn” ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Các thành phần của giao diện Giao diện Giao diện nhập Giao diện xuất Giao diện  tương tác
Thiết kế giao diện nhập ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Thiết kế giao diện nhập ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Thiết kế giao diện xuất Nội dung:  - Dữ liệu trong HTTT,  - Dữ liệu tính toán,  - Dữ liệu vừa được nhập vào… ,[object Object],[object Object],[object Object],[object Object],[object Object],- Khối lượng dữ liệu xuất hiện trên kết xuất - Khi nào thực hiện kết xuất đó? - Kết xuất ra dạng gì? Màn hình, giấy in, file theo  định dạng nào?
Thiết kế giao diện xuất Trình bày bảng biểu: - Nếu dữ liệu nhiều thì lấy những 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 các tiểu dòng/tiểu cột, thứ tự trình bày các tổng trước hay sau thông tin chi tiết, chữ hoa/thường, thứ tự trình bày dữ liệu, chấm/phẩy đối với số lẻ, canh lề, số lượng số lẻ… =>  Phải mô phỏng nội dung dữ liệu trong phần thiết kế giao diện, không nên chỉ đưa cho NSD xem những template rỗng ,[object Object],[object Object],[object Object],[object Object]
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 dữ liệu,nội dung chức năng - Mức cú pháp: quá trình tương tác đối thoại, kịch bản khai thác diễn ra như thế nào? - Mức từ vựng: từ ngữ và cách trình bày nội dung ngữ nghĩa
Thiết kế đối thoại Mức ngữ nghĩa - Hệ thống hướng dẫn trực tuyến đi song song với từng chức năng trong 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 các giao diện đối thoại Cần nhớ: tính “ergonomic” và tính nhất quán - Gây chú ý nhưng không được 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 ra nhất) - Nội dung thông báo phải thể hiện đúng nội dung phản ứng của hệ thống Mức ngữ nghĩa tốt  => Có thể dễ dàng thay đổi ngôn ngữ
Thiết kế đối thoại Mức cú pháp - Chọn kiểu đối thoại và 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 các phím chức năng - Ngôn ngữ tự nhiên - Vật thể hành động - Thao tác trực tiếp
Thiết kế đối thoại Mức cú pháp - Chọn kiểu đối thoại và kiểu điều khiển đối thoại Kiểu điều khiển đối thoại: - Vẽ ra cây câu hỏi và trả lời - Đến được nhóm chức năng I theo những con đường nào? - Khi đến nhóm chức năng I theo những con đường khác nhau thì được phép dùng những chức năng con nào? - Mô phỏng kịch bản khai thác
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ể  hiện đúng nội dung mong muốn - Biểu tượng đi kèm tên gọi ngắn gọn, súc tích và nhất quán - Cách sử dụng các vật thể: ý nghĩa khi nhấn bên trái/ phải, nhấn đúp trên mouse… - Cách di chuyển con trỏ - Cách dùng màu: + Phân biệt các cửa sổ khác nhau lần lượt được mở ra + Tạo mối liên hệ giữa các đối tượng thông tin + Tình trạng khác nhau của đối tượng + Gây chú ý đặc biệt - Trên 1 màn hình nên dùng tối đa 8 màu khác nhau (kể cả màu nền và màu chữ).  - Các màu phải hòa hợp

Weitere ähnliche Inhalte

Ähnlich wie Một số vấn đề về giao diện

Thiết kế giao diện người dùng - Công nghệ phần mềm
Thiết kế giao diện người dùng - Công nghệ phần mềmThiết kế giao diện người dùng - Công nghệ phần mềm
Thiết kế giao diện người dùng - Công nghệ phần mềm
Dong21
 
Dinh thithuhien doan1
Dinh thithuhien doan1Dinh thithuhien doan1
Dinh thithuhien doan1
Alice_Stone
 
Bai16 dinh dang van ban
Bai16 dinh dang van banBai16 dinh dang van ban
Bai16 dinh dang van ban
Võ Trúc
 
Kịch bản dạy học_Tin học 10_Chương 3_Bài 16. Định dạng văn bản
Kịch bản dạy học_Tin học 10_Chương 3_Bài 16. Định dạng văn bảnKịch bản dạy học_Tin học 10_Chương 3_Bài 16. Định dạng văn bản
Kịch bản dạy học_Tin học 10_Chương 3_Bài 16. Định dạng văn bản
Võ Trúc
 

Ähnlich wie Một số vấn đề về giao diện (20)

Ngân hàng đảm bảo chất lượng phần mềm PTIT - Chuẩn SQA
Ngân hàng đảm bảo chất lượng phần mềm PTIT - Chuẩn SQANgân hàng đảm bảo chất lượng phần mềm PTIT - Chuẩn SQA
Ngân hàng đảm bảo chất lượng phần mềm PTIT - Chuẩn SQA
 
HMI.pptx
HMI.pptxHMI.pptx
HMI.pptx
 
Thiết kế giao diện người dùng - Công nghệ phần mềm
Thiết kế giao diện người dùng - Công nghệ phần mềmThiết kế giao diện người dùng - Công nghệ phần mềm
Thiết kế giao diện người dùng - Công nghệ phần mềm
 
Access
AccessAccess
Access
 
ĐỒ ÁN CÔNG NGHỆ THÔNG TIN: QUẢN LÝ TÀI SẢN CỐ ĐỊNH
ĐỒ ÁN CÔNG NGHỆ THÔNG TIN: QUẢN LÝ TÀI SẢN CỐ ĐỊNHĐỒ ÁN CÔNG NGHỆ THÔNG TIN: QUẢN LÝ TÀI SẢN CỐ ĐỊNH
ĐỒ ÁN CÔNG NGHỆ THÔNG TIN: QUẢN LÝ TÀI SẢN CỐ ĐỊNH
 
Tailieu.vncty.com xydngtrangwebgiitr-130918043757-phpapp02
Tailieu.vncty.com   xydngtrangwebgiitr-130918043757-phpapp02Tailieu.vncty.com   xydngtrangwebgiitr-130918043757-phpapp02
Tailieu.vncty.com xydngtrangwebgiitr-130918043757-phpapp02
 
Vsena.Foss.Migration.Guide.V1.01
Vsena.Foss.Migration.Guide.V1.01Vsena.Foss.Migration.Guide.V1.01
Vsena.Foss.Migration.Guide.V1.01
 
Dinh thithuhien doan1
Dinh thithuhien doan1Dinh thithuhien doan1
Dinh thithuhien doan1
 
Bai16 dinh dang van ban
Bai16 dinh dang van banBai16 dinh dang van ban
Bai16 dinh dang van ban
 
Kịch bản dạy học_Tin học 10_Chương 3_Bài 16. Định dạng văn bản
Kịch bản dạy học_Tin học 10_Chương 3_Bài 16. Định dạng văn bảnKịch bản dạy học_Tin học 10_Chương 3_Bài 16. Định dạng văn bản
Kịch bản dạy học_Tin học 10_Chương 3_Bài 16. Định dạng văn bản
 
Workshop CV Infographic
Workshop CV InfographicWorkshop CV Infographic
Workshop CV Infographic
 
Workshop CV Infographic
Workshop CV InfographicWorkshop CV Infographic
Workshop CV Infographic
 
Tiểu luận cơ sở ngành kỹ thuật phần mềm. phần mềm mô phỏng các thuật toán s...
Tiểu luận  cơ sở ngành kỹ thuật phần mềm. phần mềm  mô phỏng các thuật toán s...Tiểu luận  cơ sở ngành kỹ thuật phần mềm. phần mềm  mô phỏng các thuật toán s...
Tiểu luận cơ sở ngành kỹ thuật phần mềm. phần mềm mô phỏng các thuật toán s...
 
Tin học 6
Tin học 6Tin học 6
Tin học 6
 
Ltc 01
Ltc 01Ltc 01
Ltc 01
 
Introduction to data statistics with r - Part I (in Vietnamese)
Introduction to data statistics with r - Part I (in Vietnamese)Introduction to data statistics with r - Part I (in Vietnamese)
Introduction to data statistics with r - Part I (in Vietnamese)
 
Lythuyet thi
Lythuyet thiLythuyet thi
Lythuyet thi
 
Phân Tích Dữ Liệu Phân Hạng Tín Dụng Dựa Trên Bộ Dữ Liệu Xyz Bằng Phần Mềm Or...
Phân Tích Dữ Liệu Phân Hạng Tín Dụng Dựa Trên Bộ Dữ Liệu Xyz Bằng Phần Mềm Or...Phân Tích Dữ Liệu Phân Hạng Tín Dụng Dựa Trên Bộ Dữ Liệu Xyz Bằng Phần Mềm Or...
Phân Tích Dữ Liệu Phân Hạng Tín Dụng Dựa Trên Bộ Dữ Liệu Xyz Bằng Phần Mềm Or...
 
Slide bài giảng về lập trình Scratch dành cho GV
Slide bài giảng về lập trình Scratch dành cho GVSlide bài giảng về lập trình Scratch dành cho GV
Slide bài giảng về lập trình Scratch dành cho GV
 
KichBanDayhoc_TinHoc10
KichBanDayhoc_TinHoc10KichBanDayhoc_TinHoc10
KichBanDayhoc_TinHoc10
 

Mehr von Nguyen Tran (20)

Se 06
Se 06Se 06
Se 06
 
12report
12report12report
12report
 
11script
11script11script
11script
 
10team
10team10team
10team
 
09componentdeployment
09componentdeployment09componentdeployment
09componentdeployment
 
08activity
08activity08activity
08activity
 
07state
07state07state
07state
 
06collaboration
06collaboration06collaboration
06collaboration
 
05sequence
05sequence05sequence
05sequence
 
04class
04class04class
04class
 
03usecase
03usecase03usecase
03usecase
 
02intro
02intro02intro
02intro
 
01about
01about01about
01about
 
Clear case
Clear caseClear case
Clear case
 
Business process excution language
Business process excution languageBusiness process excution language
Business process excution language
 
Vs doc man
Vs doc manVs doc man
Vs doc man
 
Cm mi
Cm miCm mi
Cm mi
 
Sql packager
Sql packagerSql packager
Sql packager
 
Snag it
Snag itSnag it
Snag it
 
Record mydesktop
Record mydesktopRecord mydesktop
Record mydesktop
 

Một số vấn đề về giao diện

  • 1. Một số vấn đề về thiết kế giao diện Người trình bày: Trần Minh Triết Nội dung của seminar này trích từ bài giảng “ Chương 5 – Thiết kế giao diện người – máy”, học phần Hệ Thống Thông Tin, Cao Học CNTT Khóa 12 của PGS.TS. Đồng Thị Bích Thủy Đại học Quốc gia Thành phố Hồ Chí Minh Trường Đại học Khoa học Tự nhiên
  • 2. Nội dung Thiết kế giao diện xuất Thiết kế giao diện nhập Đặt vấn đề Thiết kế đối thoại
  • 3. Tầm quan trọng của giao diện LAN WAN Wireless Cable FR/ATM DSL Dial … .. 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ử
  • 4. Tầm quan trọng của giao diện 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
  • 5.
  • 6.
  • 7. Các thành phần của giao diện Giao diện Giao diện nhập Giao diện xuất Giao diện tương tác
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. 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 dữ liệu,nội dung chức năng - Mức cú pháp: quá trình tương tác đối thoại, kịch bản khai thác diễn ra như thế nào? - Mức từ vựng: từ ngữ và cách trình bày nội dung ngữ nghĩa
  • 13. Thiết kế đối thoại Mức ngữ nghĩa - Hệ thống hướng dẫn trực tuyến đi song song với từng chức năng trong 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 các giao diện đối thoại Cần nhớ: tính “ergonomic” và tính nhất quán - Gây chú ý nhưng không được 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 ra nhất) - Nội dung thông báo phải thể hiện đúng nội dung phản ứng của hệ thống Mức ngữ nghĩa tốt => Có thể dễ dàng thay đổi ngôn ngữ
  • 14. Thiết kế đối thoại Mức cú pháp - Chọn kiểu đối thoại và 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 các phím chức năng - Ngôn ngữ tự nhiên - Vật thể hành động - Thao tác trực tiếp
  • 15. Thiết kế đối thoại Mức cú pháp - Chọn kiểu đối thoại và kiểu điều khiển đối thoại Kiểu điều khiển đối thoại: - Vẽ ra cây câu hỏi và trả lời - Đến được nhóm chức năng I theo những con đường nào? - Khi đến nhóm chức năng I theo những con đường khác nhau thì được phép dùng những chức năng con nào? - Mô phỏng kịch bản khai thác
  • 16. 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ể hiện đúng nội dung mong muốn - Biểu tượng đi kèm tên gọi ngắn gọn, súc tích và nhất quán - Cách sử dụng các vật thể: ý nghĩa khi nhấn bên trái/ phải, nhấn đúp trên mouse… - Cách di chuyển con trỏ - Cách dùng màu: + Phân biệt các cửa sổ khác nhau lần lượt được mở ra + Tạo mối liên hệ giữa các đối tượng thông tin + Tình trạng khác nhau của đối tượng + Gây chú ý đặc biệt - Trên 1 màn hình nên dùng tối đa 8 màu khác nhau (kể cả màu nền và màu chữ). - Các màu phải hòa hợp