TỔNG QUAN VỀ THIẾT KẾ WEBSITE
2.1.2.1. Tổng quan về thiết kế giao diện cho website
Các độc giả của website không chỉ xem thông tin, mà họ tương tác với website theo cách thức mới, không như các tiền lệ với các tài liệu được thiết kế trên giấy mà là thơng qua màn hình máy tính. Giao diện người dùng đồ hoạ (GUI - Graphical User Interface) của hệ thống các website, cộng thêm các tương tác ẩn dụ, hình ảnh và các quan niệm được
sử dụng nhằm chuyển tải mọi tính năng, thơng tin của website lên màn hình. Trải qua thời gian, các đặc thù trực quan của thành phần giao diện đồ hoạ và sự tương tác của chức năng đã tạo nên nét đặc trưng "nhìn thấy và cảm nhận" của các trang Web. Thiết kế đồ hoạ và các hình ảnh "ký hiệu" trực giác khơng chỉ để làm đẹp trang Web mà trở thành một phần được tích hợp vào kinh nghiệm sử dụng website của độc giả. Thiết kế đồ hoạ trở thành một phần không thể thiếu trong thiết kế giao diện Web.
Giao diện người dùng đồ họa là một phương thức cho phép người dùng giao tiếp với máy tính thơng qua hình ảnh và chữ viết, được các nhà nghiên cứu tại Xerox PARC phát triển trong thập niên 1970. Ngày nay hầu hết các hệ điều hành máy tính đều sử dụng loại giao diện này.
Thành phần điều khiển (hay ô điều khiển) là một thành phần của
GUI mà thông qua chúng, một người sử dụng có thể tương tác với máy tính, thực hiện các thao tác bằng chuột, bàn phím hay thiết bị ngoại vi khác. Thành phần điều khiển thường là các hộp văn bản hay các cửa sổ, chẳng hạn như:
- Các nút điều khiển: Chỉ nhận lệnh và thi hành. - Các hộp văn bản: Dùng để nhận thông tin.
- Đồng hồ hẹn giờ (Timer): Chỉ thi hành thao tác khi nhận được lệnh. - Hộp thông báo (Message Box), hộp xác nhận (Confirm Box) và các gợi ý (Tool Tip): Có chức năng tương tác và thơng báo.
Các thành phần điều khiển thực chất là các thành phần có đặc tính ảo, nghĩa là chúng không phải là các bộ phận vật lý thơng thường. Ví dụ: các nút điều khiển ảo chỉ có thể được sử dụng bởi nhấn chuột, bàn phím hay bằng ngón tay trên màn hình cảm biến (Touch Screen). Hình ảnh các thành phần điều khiển chỉ để so sánh như các nút bấm ở thế giới thực bên ngồi.
Một số thành phần điều khiển có thể khơng nhìn thấy trên giao diện đồ họa nhưng vẫn có tương tác với người dùng qua một vài chức năng xác định nào đó. Thí dụ với các phím “nóng” (Hot Key Control) người ta khơng thể thấy hình dạng của các thành phần này, nhưng nó được cài đặt
để giúp người dùng sử dụng bàn phím (thay vì phải nhấp các nút của chuột). Một thí dụ khác về ơ điều khiển khơng thấy được là đồng hồ hẹn giờ (Timer) rất thông dụng trong ngôn ngữ văn bản. Các đồng hồ hẹn giờ này có thể được cài đặt trong chương trình để tự động làm các thao tác theo đúng một khoảng thời gian mà người lập trình muốn.
Tùy theo hệ điều hành và chuẩn GUI mà các thành phần điều khiển và chức năng của chúng có thể khác nhau. Ngồi ra, những ngơn ngữ lập trình hỗ trợ cho việc tạo ra các chương trình có giao diện đồ họa cũng có thể cung cấp thêm các thành phần điều khiển riêng biệt. Trong hệ thống X Windows, các thành phần điều khiển thường được hỗ trợ chung trong một tập hợp hiển thị trong bộ cơng cụ lập trình. Trong khi đó, các ngơn ngữ lập trình cho Windows thường cung cấp thêm các ô điều khiển bên cạnh những ơ điều khiển sẵn có của hệ điều hành.
Ví dụ về các thành phần điều khiển:
Có nhiều loại thành phần điều khiển, tùy theo GUI và tùy theo các phần mềm thiết kế sẵn cho chúng. Danh sách sau đây chỉ liệt kê một số thành phần thường dùng.
* Các nút: Nút điều khiển * Các lựa chọn:
- Ô đánh đấu (Check Box) - Nút chọn (Radio Button) - Hộp đa hợp (Combo Box) * Các biểu tượng:
- Thanh cơng cụ (Toolbar)
- Trình đơn (cịn được dùng phổ biến là thực đơn mặc dù có ý kiến cho rằng cách dùng này không hợp) (Menu)
- Trình đơn lệnh (thực đơn lệnh) (Command Menu)
- Trình đơn trịn (thực đơn trịn) (Pie Menu) * Đệ quy:
- Hiển thị dạng cây (Tree View) - Hiển thị dạng lưới (Grid View) - Thanh di chuyển/tiến triển - Thanh cuốn (Scrollbar)
- Thanh tiến triển (Progress Bar) - Thanh điều chỉnh (Trackbar) * Văn bản:
- Nhập
- Hộp văn bản (Text Box) - Xuất
- Gợi ý sử dụng (Tooltip) - Thanh trạng thái (Status Bar) * Các cửa sổ:
- Cửa sổ con (hiển thị thay cho cửa sổ chính) (Modal Window) - Hộp thoại (Diaglog Box)
- Cửa sổ tiện ích (Utility Window) * Một số thành phần điều khiển khác: - Thẻ (Tag)
- Đồng hồ hẹn giờ (Timer) - Danh mục hình (Image List) - Lên xuống (Up Down) - Phím nóng (Hot Key)
Hình 2.1. Hình minh họa một số thành phần điều khiển