BÀI MÔ HÌNH VÀO-RA DỮ LIỆU PGS.TS Đặng Văn Đức dvduc@ioit.ac.vn HÀ NỘI – 2007/10 Chủ đề           Giới thiệu HCI Tính sử dụng hệ thống Thiết kế hướng người sử dụng Khả người Mô hình vào – liệu Nguyên lý thiết kế giao diện Xây dựng prototype Thiết kế đồ họa tương tác Đánh giá kiểm thử giao diện Các chủ đề nghiên cứu dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 2/34 Nội dung       dvduc-2007/10 Lỗi thiết kế hệ thống tương tác Mô hình Mô hình thiết kế UI Mô hình màu Mô hình vào Tổng kết Bài 5: Mô hình vào-ra liệu 3/34 Lỗi thiết kế?   Màn hình máy bán xăng dầu  Nhầm lẫn tổng giá tổng số xăng bán  Hiển thị nhãn không quán hình Rational Software dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 4/34 Lỗi thiết kế?  Microsoft's Access 95  GIF Construction Set dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 5/34 Lỗi thiết kế?  Phần mềm RealCD IBM  Thiết kế sở đối tượng thực: Vỏ nhựa đựng CD -> thiết kế có ẩn dụ User dự đoán cách sử dụng phần mềm  Logo RealCD thiết kế cầu kỳ bật, nhiên nhấn chuột chúng, xảy  Vị trí xếp đặt phím điều khiển theo chiều dọc không phù hợp  Để mở vỏ CD, khó tìm phím điều khiển (đáng lẽ cần nhấn phím chuột logo) Phím kết thúc chương trình đâu?  dvduc-2007/10 Trợ giúp đâu? Danh sách hát thường sau vỏ CD? Bài 5: Mô hình vào-ra liệu 6/34 Lỗi thiết kế?  Win XP Search Tool  Đặc trưng thú vị:  Hỗ trợ tìm kiếm loại tệp khác theo tiêu chí khác  Khi chọn “Picture, music, and video”, bước không hỏi word hay phrase tệp  Khi chọn “Documents”, bước không hỏi keywords mà thời gian  dvduc-2007/10 Vấn đề  HTML Documents hay tệp Doc MS?  Tại tách Internet thành nhóm riêng? Bài 5: Mô hình vào-ra liệu 7/34 Lỗi thiết kế?  Trang khởi động Google  Thiết kế tối thiểu có thể, Load trang Web nhanh  Người lần đầu sử dụng gặp khó khăn:  dvduc-2007/10  Google làm gì?  Cần gõ text Box (không có tiêu đề)  Nhãn phím sai ngữ pháp ("Google Search" "I'm Feeling Lucky" gì?)  Trợ giúp đâu? Tuy nhiên, giao diện Google đơn giản, học sử dụng nhanh Bài 5: Mô hình vào-ra liệu 8/34 Các mô hình liệu   Bài tập trung vào chế cài đặt UI Ba mô hình trình diễn GUI (Output Models)     Thành phần (components)  Các đối tượng đồ họa xếp với khả tự vẽ  Ví dụ: đối tượng nhãn, đối tượng đoạn thẳng  Còn gọi widgets, controls, Nét vẽ (strokes)  Vẽ đầu cách gọi hàm nguyên thủy mức cao  Ví dụ: drawLine, drawRectangle, drawArc, drawText Điểm ảnh (pixels)  Xem mảng pixels, tương tác trực tiếp với pixels  Còn gọi raster, image, bitmap Ví dụ sử dụng mô hình  HTML (component); Postscript laser printer (stroke input, pixel output); plotter (stroke input and output); PDF (stroke); LCD panel (pixel) dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 9/34 Ví dụ thiết kế khung nhìn đồ thị  Nhiệm vụ: Xây dựng khung nhìn để hiển thị đồ thị nút cạnh A B C  Mỗi ứng dụng sử dụng mô hình   Khi ứng dụng chuyển đến mô hình mức thấp hơn? Tiệm cận mô hình Component túy  Nút cạnh đồ thị biểu diễn thành phần nguyên thủy từ thư viện đồ họa  Mô hình stroke pixel xuất hiện, chúng bên thành phần nguyên thủy dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 10/34 Mô hình màu   Các mô hình màu sử dụng hệ thống UI: RGB, HSV, CMYK RGB Blue (0,0,1) Cyan (0,1,1) Magenta (1,0,1) White (1,1,1) Green (0,1,0) Red (1,0,0) dvduc-2007/10 Yellow (1,1,0) Bài 5: Mô hình vào-ra liệu 21/34 Mô hình màu   HSV  Hue: Loại màu  Saturation: Mức độ tinh khiết màu  Value: Độ chói CMYK  Dành cho máy in Blue (1,1,0) Cyan (1,0,0) Magenta (0,1,0) Cyan Blue Magenta White (0,0,0) Black Black (1,1,1) Green (1,0,1) Green Red Yellow Red (0,1,1) dvduc-2007/10 Yellow (0,0,1) Bài 5: Mô hình vào-ra liệu 22/34 Mô hình màu  Chuyển đổi mô hình màu RGB sang CMYK void RGB2CMYK(float R,float G,float B,float &C,  C  1  R   M  = 1 − G        Y  1  B  float &M,float &Y,float &K) { RGB2CMY(R, G, B, C, M, Y); K = min3(C, M, Y); // Cho lại giá trị từ ba đối số C = C - K; M = M - K; Y = Y - K; }   Chuyển đổi mô hình màu RGB sang HSV Chuyển đổi mô hình màu HSV sang RGB dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 23/34 Mô hình màu  Ví dụ sử dụng HSV Chọn Hue-Saturation Bổ sung sáng/tối dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 24/34 Gợi ý gỡ lỗi đầu  Khi vẽ đối tượng đồ họa không nhìn thấy hình, sao?  Sai vị trí hiển thị: Gốc hệ trục tọa độ đâu? Thước đo chúng nào?  Sai kích thước: Đối tượng có độ rộng độ cao  Sai màu: Vẽ đối tượng màu với màu Sử dụng giá trị 100% alpha  Sai trình tự z (z-order): Vẽ đối tượng khác đè lên dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 25/34 Các mô hình vào liệu   Lập trình trình tự với UI  Hệ thống in dấu nhắc chờ người sử dụng nhập đáp ứng  Sau nhận trả lời người sử dụng, hệ thống lại hiển thị dấu nhắc chờ trả lời  Chương trình nắm hoàn toàn điều khiển trình đối thoại Ví dụ: Vào/ra console sử dụng lời gọi thủ tục print ( Enter name: ) name = readLine(); print ( Enter phone number: ) name = readLine(); dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 26/34 Các mô hình vào liệu   GUI tương tác  Người sử dụng nhấn chuột đâu cửa sổ  Có thể kích hoạt lệnh sẵn sàng  Có thể tương tác với View mà họ nhìn thấy  Do vậy, viết chương trình GUI theo phong cách tuần tự, prompt-response GUI cần thiết kế để chúng có khả quản lý đầu vào dị bộ, hệ thống chờ đầu vào từ người sử dụng   Toàn giao tiếp từ người sử dụng đến máy tính thông qua "sự kiện" Sự kiện xảy hệ thống  Nhấn phím chuột  Di đối tượng đồ họa hình  Gõ phím bàn phím dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 27/34 Các loại kiện vào  Hai nhóm kiện vào  Các kiện vào thô:  Đi đến từ trình điều khiển thiết bị  Hầu hết hệ thống đồ họa có kiện dịch chuyển chuột, nhấn phím chuột, nhấc phím chuột, nhấn phím bàn phím nhấc phím bàn phím   Nếu không tách riêng nhấn nhả phím thiết kế hiệu ứng vào di-nhả (drag-and-drop) Sự kiện vào chuyển đổi (mức cao)  Nhấn nhả phím chuột chuyển đổi thành nhấp phím chuột (sự kiện click)  Sự kiện nhấn nhả phím bàn phím chuyển đổi thành kiện gõ phím ký tự sinh mã ASCII  Khi di chuột vào hay chữ nhật bao thành phần kiện Entry Exit phát sinh Các thành phần phản hồi thay đổi cách hiển thị, thay đổi hình dạng chạy chuột dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 28/34 Hàng đợi kiện   Các thuộc tính kiện chuột  Vị trí (x,y),  Trạng thái phím (nhấn, nhả),  Thời điểm nhận kiện Lưu trữ kiện vào hàng đợi  Các kiện “sườn” (như nhấn chuột nhả chuột) lưu trữ trực tiếp hàng đợi  Đa kiện mô tả trạng thái liên tục (ví dụ dịch chuyển chuột) nhóm lại thành kiện trước lưu trữ để chờ xử lý  dvduc-2007/10 Cái xảy di đối tượng lớn hình không nhóm kiện di chuột hàng đợi? Bài 5: Mô hình vào-ra liệu 29/34 Vòng lặp kiện  Trong chạy, chương trình  Chờ kiện sẵn sàng  Nhận kiện từ hàng đợi  Đôi chuyển đổi kiện thô mức thấp thành kiện mức cao (ví dụ phát sinh nhấn đúp chuột, ký tự, focus, enter/exit )    Gửi (dispatch) kiện đến thành phần đích Ai cung cấp vòng lặp kiện?  Các Toolkits mức thấp yêu cầu ứng dụng tạo vòng lặp (MS Windows, Palm, SWT)  Các Toolkits mức cao tạo lập vòng lặp kiện bên chúng (Java, VB, C#) Gửi kiện đến thành phần đích  dvduc-2007/10 Chọn kiện đích để gửi kiện  Sự kiện bàn phím chuyển đến thành phần có focus bàn phím  Sự kiện chuột gửi đến thành phần chạy chuột Bài 5: Mô hình vào-ra liệu 30/34 Ví dụ xử lý kiện Windows dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 31/34 Thiết kế Controller  Cấu trúc thành phần quản lý đầu vào   Controller máy trạng thái hữu hạn Ví dụ Push Button  Trạng thái Idle: người sử dụng không hướng đầu vào đến  Hover: Khi dịch chuyển chuột lên phím  Armed: Khi nhấn phím chuột Push Button  Disarmed: Dịch chuyển chuột khỏi Push Button  Nhả phím chuột thành phần: Trở trạng thái Hover dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 32/34 Tổng kết    Nghiên cứu ba mô hình  Component  Stroke  Pixel Khảo sát ba mô hình màu thiết kế GUI  RGB  HSV  CMYK Hai mô hình vào liệu  Mô hình I/O Console  Mô hình vào theo kiện dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 33/34 Các chủ đề nghiên cứu  Anh /chị sử dụng Output model hệ thống phần mềm anh/chị phát triển? Tại sao?   Các phần mềm mà anh chị sử dụng có Output model nào? Phân tích đánh giá Anh chị sử dụng Input model phát triển phần mềm? Tại sao? Trả lời gửi eMail: hci.dvduc@gmail.com dvduc-2007/10 Bài 5: Mô hình vào-ra liệu 34/34 Câu hỏi? [...]... phát triển? Tại sao?   Các phần mềm mà các anh chị đã sử dụng có Output model nào? Phân tích và đánh giá Anh chị đã sử dụng Input model nào trong khi phát triển phần mềm? Tại sao? Trả lời gửi về eMail: hci. dvduc@gmail.com dvduc-2007/10 Bài 5: Mô hình vào-ra dữ liệu 34/34 Câu hỏi?