Bài giảng Tương tác người máy: Chương 4 - Lê Quý Lộc

Bài giảng "Tương tác người máy" Chương 4: Bố cục, được biên soạn gồm các nội dung chính sau: cơ bản của bố cục; phân cấp trực quan; dòng trực quan; sử dụng phối hợp các kỹ thuật trên; đặc tính hiển thị động của máy tính; các mẫu thiết kế;...Mời các bạn cùng tham khảo!
Nội dung trích xuất từ tài liệu:
Bài giảng Tương tác người máy: Chương 4 - Lê Quý Lộc Chương 4: Bố Cục Lê Quý Lộc Khoa Công Nghệ Thông Tin Đại học Bách Khoa – ĐHĐNCuuDuongThanCong.com https://fb.com/tailieudientucntt Cơ Bản Của Bố Cục• Phân cấp trực quan• Dòng trực quan• Phân nhóm• Sử dụng phối hợp các kỹ thuật trên• Đặc tính hiển thị động của máy tính CuuDuongThanCong.com https://fb.com/tailieudientucnttPhân Cấp Trực QuanCuuDuongThanCong.com https://fb.com/tailieudientucnttPhân Cấp Trực QuanCuuDuongThanCong.com https://fb.com/tailieudientucntt Dòng Trực Quan• Định nghĩa: Trình tự người dụng xem nội dung của page/window – Người dùng sẽ xem nội dung của page/window từ trên xuống dưới, trái sang phải – Những điểm nhấn sẽ thu hút sự chú ý của người dùng trước – Khi dòng trực quan thay đổi, người dùng sẽ hiểu nội dung trên page/window theo một ý nghĩa khác CuuDuongThanCong.com https://fb.com/tailieudientucntt Dòng Trực QuanCuuDuongThanCong.com https://fb.com/tailieudientucntt Phân Nhóm• Đặt gần nhau• Tương tự nhau• Sự liên tục• Sự đóng kín CuuDuongThanCong.com https://fb.com/tailieudientucntt Phân NhómCuuDuongThanCong.com https://fb.com/tailieudientucnttSử Dụng Phối Hợp Các Kỹ Thuật Trên CuuDuongThanCong.com https://fb.com/tailieudientucnttSử Dụng Phối Hợp Các Kỹ Thuật Trên CuuDuongThanCong.com https://fb.com/tailieudientucnttSử Dụng Phối Hợp Các Kỹ Thuật Trên CuuDuongThanCong.com https://fb.com/tailieudientucnttĐặc Tính Hiển Thị Động Của Máy Tính• 4 đặc tính trước trình bày các khía cạnh tĩnh của bố cục• Điểm mạnh của máy tính là khả năng hiển thị động: scrollbar, tabs, slideshow,… CuuDuongThanCong.com https://fb.com/tailieudientucntt Các Mẫu Thiết Kế• Phân cấp trực quan – Visual Framework – Center Stage• Tổ chức nội dung – Titled Sections – Card Stack – Closable Panels – Movable Panels• Dòng trực quan – Right/Left Alignment – Diagonal Balance – Property Sheet• Bố cục động – Responsive Disclosure – Liquid Layout CuuDuongThanCong.com https://fb.com/tailieudientucntt Visual Framework• Mô tả: sử dụng cùng một bố cục căn bản, màu sắc, các thành phần style cho tất cả các page/window• Sử dụng: xây dựng website/ứng dụng lớn, mà muốn tất cả các page/window trông giống nhau CuuDuongThanCong.com https://fb.com/tailieudientucntt Visual FrameworkCuuDuongThanCong.com https://fb.com/tailieudientucntt Visual FrameworkCuuDuongThanCong.com https://fb.com/tailieudientucntt Center Stage• Mô tả: đặt phần quan trọng nhất vào vùng lớn nhất đặt ở trung tâm của page/window, các chức năng khác đặt xung quanh• Sử dụng: xây dựng ứng dụng thiết kế tài liệu, thiết kế đồ họa, hiển thị nội dung chính của website CuuDuongThanCong.com https://fb.com/tailieudientucntt Center StageCuuDuongThanCong.com https://fb.com/tailieudientucntt Titled Sections• Mô tả: xác định mỗi vùng nội dung riêng biệt trên website bằng một title rõ ràng• Sử dụng: có nhiều nội dung trên một page/window, muốn làm cho người dùng dễ đọc và dễ hiểu, nên nhóm các nội dung liên quan lại CuuDuongThanCong.com https://fb.com/tailieudientucntt Titled SectionsCuuDuongThanCong.com https://fb.com/tailieudientucntt