HCI lec5 final

BÀI 5

MÔ HÌNH VÀO-RA DỮ LIỆU
PGS.TS. Đặng Văn Đức


HÀ NỘI – 2007/10


Chủ đề












Giới thiệu về HCI
Tính sử dụng được của hệ thống
Thiết kế hướng người sử dụng
Khả năng con người
Mô hình vào – ra dữ liệu
Nguyên lý thiết kế giao diện
Xây dựng prototype
Thiết kế đồ họa và tương tác
Đánh giá và 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 dữ liệu

2/34


Nội dung bài này








dvduc-2007/10

Lỗi thiết kế trong hệ thống tương tác
Mô hình ra
Mô hình trong thiết kế UI
Mô hình màu
Mô hình vào
Tổng kết bài

Bài 5: Mô hình vào-ra dữ liệu

3/34

1. Lỗi thiết kế?





Màn hình máy bán xăng dầu



Nhầm lẫn tổng giá và tổng số xăng bán



Hiển thị nhãn không nhất quán ở dưới màn hình

Rational Software

dvduc-2007/10

Bài 5: Mô hình vào-ra dữ 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 dữ liệu

5/34


Lỗi thiết kế?



Phần mềm RealCD của IBM



Thiết kế trên cơ sở đối tượng thực: Vỏ nhựa đựng CD -> thiết kế này có ẩn dụ. User dự đoán được cách sử
dụng phần mềm.



Logo RealCD được thiết kế cầu kỳ và nổi bật, tuy nhiên nếu nhấn chuột trên chúng, không có gì xảy ra.



Vị trí xếp đặt các phím điều khiển theo chiều dọc không phù hợp



Để mở vỏ CD, khó tìm ra phím điều khiển (đáng lẽ ra chỉ cần nhấn phím chuột trên logo). Phím kết thúc
chương trình ở đâu?



dvduc-2007/10

Trợ giúp ở đâu? Danh sách bài hát thường ở sau vỏ CD?

Bài 5: Mô hình vào-ra dữ liệu

6/34


Lỗi thiết kế?



Win XP Search Tool



Đặc trưng thú vị:



Hỗ trợ tìm kiếm các loại tệp khác nhau theo
các tiêu chí khác nhau



Khi chọn “Picture, music, and video”, bước tiếp
theo sẽ không hỏi word hay phrase trong tệp



Khi chọn “Documents”, bước tiếp theo không
chỉ hỏi keywords mà còn cả thời gian.



dvduc-2007/10

Vấn đề



HTML là Documents hay chỉ tệp Doc của MS?



Tại sao tách Internet thành nhóm riêng?

Bài 5: Mô hình vào-ra dữ liệu

7/34


Lỗi thiết kế?



Trang khởi động của Google



Thiết kế tối thiểu nhất có thể, Load trang Web nhanh



Người lần đầu sử dụng sẽ gặp khó khăn:



dvduc-2007/10



Google làm cái gì?



Cần gõ gì trong text Box (không có tiêu đề)



Nhãn trên phím sai ngữ pháp ("Google Search" và "I'm Feeling Lucky" là gì?)



Trợ giúp ở đâu?

Tuy nhiên, giao diện của Google rất đơn giản, học sử dụng nhanh.

Bài 5: Mô hình vào-ra dữ liệu

8/34


2. Các mô hình ra dữ liệu




Bài này tập trung vào các cơ chế cài đặt UI
Ba mô hình cơ bản trình diễn trên GUI (Output Models)









Thành phần (components)



Các đối tượng đồ họa được sắp xếp trong cây với khả năng tự vẽ.



Ví dụ: các đối tượng nhãn, đối tượng đoạn thẳng



Còn gọi là widgets, controls,...

Nét vẽ (strokes)



Vẽ đầu ra bằng cách gọi các hàm nguyên thủy mức cao



Ví dụ: drawLine, drawRectangle, drawArc, và drawText

Điểm ảnh (pixels)



Xem màn hình như mảng các pixels, tương tác trực tiếp với pixels



Còn gọi là 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 dữ 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ị của các nút và các cạnh

A
B

C



Mỗi ứng dụng đều sử dụng cả 3 mô hình





Khi nào trong ứng dụng sẽ chuyển đến mô hình mức thấp hơn?

Tiệm cận mô hình Component thuần túy



Nút và cạnh trong đồ thị được biểu diễn bằng thành phần nguyên thủy từ thư viện đồ họa



Mô hình stroke và pixel vẫn còn xuất hiện, nhưng chúng ở bên trong các thành phần nguyên thủy.

dvduc-2007/10

Bài 5: Mô hình vào-ra dữ liệu

10/34


Ví dụ thiết kế khung nhìn đồ thị







Tiệm cận mô hình Stroke thuần túy



Cửa sổ mức đỉnh không có subcomponents



Có thể vẽ đồ thị bằng cách gọi drawRectangle cho nút và drawText cho nhãn và drawLine cho cạnh đồ thị.

Tiệm cận mô hình Pixel thuần túy



Có thể hiển thị từng pixel một để tạo nên đồ thị



Nhãn: Có thể copy ảnh ký tự lên màn hình



Ngày nay ít sử dụng vì đòi hỏi nhiều công sức của lập trình viên

Tiệm cận mô hình lai



Sử dụng các mô hình ra khác nhau cho các nhóm đối tượng khác nhau



Ví dụ: sử dụng mô hình components cho nút và text, sử dụng mô hình Stroke cho các cạnh đồ thị

dvduc-2007/10

Bài 5: Mô hình vào-ra dữ liệu

11/34


Vẽ trong mô hình Component





Vẽ trong mô hình Component được thực hiện theo tiến trình top-down



Bắt đầu từ gốc của cây thành phần



Mỗi thành phần tự vẽ



Lặp để vẽ con của nó

Kỹ thuật cắt xén vùng đối với mỗi thành phần để tối ưu tiến trình vẽ



Ví dụ các nút B, C
không cần vẽ



Vẽ một phần các cạnh



Giải thuật



Sutherland-Cohen



...

A
B

Clip region

C

dvduc-2007/10

Bài 5: Mô hình vào-ra dữ liệu

12/34


Vẽ trong mô hình Component



Với thành phần ở gốc cây vùng cắt xén là cả màn hình, khi vẽ xuống các cây thành phần thì vùng
cắt xén là chữ nhật bao (minimum bounding boxes - MBB) thành phần.



Việc sử dụng MMB thay cho hình dạng thực của thành phần là để nâng cao tốc độ thực hiện của
hệ thống.



Để tăng cường hiệu ứng thị giác, ví dụ cắt xén xâu ký tự, thì vùng cắt xén cần phải là hình dạng
bất kỳ trên màn hình.



Postscript là mô hình stroke đầu tiên sử dụng vùng cắt xén không phải chữ nhật



Hiện nay hầu hết Toolkits đồ họa (kể cả Windows) hỗ trợ vùng cắt xén không phải chữ nhật.

dvduc-2007/10

Bài 5: Mô hình vào-ra dữ liệu

13/34


Vấn đề tự động vẽ lại



Khi thành phần cần thay đổi "diện mạo" thì nó không vẽ trực tiếp mà yêu cầu hệ thống đồ họa vẽ
lại vào thời điểm sau đó



Yêu cầu gửi đi bao gồm cả vùng màn hình cần vẽ lại (damaged region)



Vùng vẽ lại là chữ nhật bao thành phần.

dvduc-2007/10

Bài 5: Mô hình vào-ra dữ liệu

14/34


Vấn đề tự động vẽ lại



Khi dịch chuyển thành phần trên màn hình và sử dụng thuật toán vẽ lại có thể dẫn tới một phần
màn hình nhấp nháy.

dvduc-2007/10

Bài 5: Mô hình vào-ra dữ liệu

15/34


Double-Bufering



Sử dụng vùng đệm đúp để giải quyết vấn đề nhấp nháy trên màn hình



Một bản sao màn hình được lưu trữ trong vùng đệm



Thuật toán vẽ lại thực hiện trên buffer, sau đó copy khối pixel lên màn hình

dvduc-2007/10

Bài 5: Mô hình vào-ra dữ liệu

16/34


Mô hình Strokes



Mô tả ảnh bởi các nét vẽ với thuộc tính kèm theo





Màu, độ rộng, kiểu nét vẽ, kiểu tô

Phần lớn các UI Toolkit có các hàm cơ sở để vẽ các đối
tượng như drawLine, drawRectangle, drawArc, và
drawText



Biểu diễn các nét vẽ bằng cách nào?



Rời rạc hóa các đường "toán học" để có các pixels tạo nên
các đường "đồ họa".

dvduc-2007/10

Bài 5: Mô hình vào-ra dữ liệu

17/34


Antialiasing




Các đối tượng trơn tru có thể xuất hiện với răng cưa trên các thiết bị với độ phân giải quá thấp
Chống răng cưa: kỹ thuật vẽ bổ sung vào vị trí răng cưa



Pixels với độ xám khác nhau



Màu sơ cấp (Subpixel rendering)

dvduc-2007/10



Mỗi pixel được tạo bởi ba thành phần R, G, B gần nhau.



Màn hình LCD sẽ tăng mật độ 3 lần theo chiều ngang



Không sử dụng cho màn hình CRT vì các pixels sắp xếp theo tam giác

Bài 5: Mô hình vào-ra dữ liệu

18/34


Sử dụng mô hình Stroke




Có thể sử dụng mô hình stroke để vẽ thành phần trên UI
Các font Postscript & TrueType sử dụng stroke để vẽ đường bao, sau đó được chuyển đổi sang
bitmap trước khi hiển thị

dvduc-2007/10

Bài 5: Mô hình vào-ra dữ liệu

19/34


3. Mô hình trong thiết kế UI



Mô hình của hệ thống là cách mô tả hệ thống hoạt động như thế nào





Ví dụ Photoshop sử dụng mô hình pixel, Visio sử dụng mô hình đồ họa có cấu trúc.

Ba loại mô hình trong thiết kế UI

Interface model



System model

Mô hình hệ thống (mô hình cài đặt)





Là mô hình mà hệ thống trình diễn tới người sử dụng

Mô hình người sử dụng (mô hình khái niệm - conceptual)



dvduc-2007/10

Hệ thống làm việc như thế nào

Mô hình giao diện (mô hình trình diễn - manifest)





User model

Người sử dụng nghĩ về hệ thống làm việc như thế nào.

Bài 5: Mô hình vào-ra dữ liệu

20/34


4. Mô hình màu




Các mô hình màu sử dụng trong 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 dữ liệu

21/34


Mô hình màu





HSV



Hue: Loại màu



Saturation: Mức độ tinh khiết của 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 dữ 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ị min 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 dữ 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 dữ liệu

24/34


Gợi ý gỡ lỗi đầu ra



Khi vẽ đối tượng đồ họa nhưng không nhìn thấy trên màn hình, tại sao?



Sai vị trí hiển thị: Gốc hệ trục tọa độ ở đâu? Thước đo của chúng như thế nào?



Sai kích thước: Đối tượng có 0 độ rộng và 0 độ cao.



Sai màu: Vẽ đối tượng cùng màu với màu nền. Sử dụng giá trị 100% alpha.



Sai trình tự z (z-order): Vẽ đối tượng khác đè lên trên.

dvduc-2007/10

Bài 5: Mô hình vào-ra dữ liệu

25/34