WebCourse - Chương 2: Tổng quan về thiết kế WEB

 Web14 Lâm Quang Vũ
2.3 Thiết kế giao diện Website
Table within a table
Tổng quan về thiết kế Web15 Lâm Quang Vũ
2.3 Thiết kế giao diện Website
The outer table
6Tổng quan về thiết kế Web16 Lâm Quang Vũ
2.3 Thiết kế giao diện Website
The inner table
Tổng quan về thiết kế Web17 Lâm Quang Vũ
2.3 Thiết kế giao diện Website
Centered with three columns
Tổng quan về thiết kế Web18 Lâm Quang Vũ
Really complicated design!
7Tổng quan về thiết kế Web19 Lâm Quang Vũ
2.1 Điểm khác biệt giữa tài liệu thông 
thường và trang WEB
l Giống nhau: phải được trải qua sự phát triển 
và chuẩn hóa.
l Khác nhau: các mối liên kết siêu văn bản, 
multimedia…
à cho phép người đọc truy nhập đến một 
trang đơn lẻ mà không cần đến lời tựa đề. 
Tìm kiếm nhanh và đơn giản hơn.
Có thể quay lại một loạt các liên kết.
Tổng quan về thiết kế Web20 Lâm Quang Vũ
2.2 Một số vấn đề liên quan đến việc 
thiết kế giao diện cơ bản.
l Thiết kế hướng tới người sử dụng
l Các giúp đỡ định hướng rõ ràng
l Không có trang cuối cùng (dead-end)
l Băng thông và ảnh hưởng
l Đơn giản và tính nhất quán
l Tính ổn định của các trang Web
l Phản hồi và đối thoại
l Tính tương thích trên các trình duyệt khác nhau 
(thay thế)
Tổng quan về thiết kế Web21 Lâm Quang Vũ
2.2.1 Thiết kế hướng tới người sử
dụng
l Người sử dụng là đối tượng chính quyết định 
sự thành bại của Website
l Yêu cầu mức độ hoàn hảo của thiết kế giao 
diện đồ họa
l Xây dựng các kịch bản mẫu cho các loại đối 
tượng sử dụng khác nhau
l Cách tốt nhất: thử nghiệm à nhận các phản 
hồi từ đọc giả.
8Tổng quan về thiết kế Web22 Lâm Quang Vũ
2.2.2 Các giúp đỡ định hướng rõ ràng
l Đọc giả có thể trả lời các câu hỏi:
– Đang ở đâu ?
– Có thể làm gì ?
– Có thể đi tiếp tới đâu ?
l Biểu tượng nhất quán, dễ hiểu, theo chuẩn 
qui định
l Luôn có khả năng quay lại trang chủ, các 
trang chủ chốt trên Website
Tổng quan về thiết kế Web23 Lâm Quang Vũ
2.2.3 Không có trang cuối cùng (dead-
end)
l Mỗi trang có ít nhất một liên kết
l Trang “dead-end” à thất vọng, mất khả 
năng đến với các trang khác.
l Nên để liên kết về trang chủ trong mọi trang.
Tổng quan về thiết kế Web24 Lâm Quang Vũ
2.2.4 Băng thông và ảnh hưởng
l Sự kiên nhẫn của đọc giả có giới hạn.
l Tốc độ đôi khi là yếu tố quyết định đến việc 
lựa chọn Website.
l Phân biệt giữa thiết kế cho Internet và
Intranet.
9Tổng quan về thiết kế Web25 Lâm Quang Vũ
2.2.5 Đơn giản và tính nhất quán
l Tùy vào loại ứng dụng
l Đọc giả sẽ không ấn tượng và sự phức tạp 
không lý do. Đặc biệt là đọc giả phục thuộc 
vào thời gian và thông tin chính xác.
l Các biểu tượng đơn giản, quen thuộc, nhất 
quán trong tất cả các trang
Tổng quan về thiết kế Web26 Lâm Quang Vũ
2.2.6 Tính ổn định của các trang Web
l Ổn định về cấu trúc và nội dung
l Cấu trúc: các thành phần được đặt đúng chỗ
và hoạt động nhịp nhàng.
l Nội dung: các mối liên kết luôn đảm bảo có 
đích đến, nội dung luôn đảm bảo thích hợp 
và phải cập nhật cho phù hợp với ngữ cảnh 
tại thời điểm đọc giả duyệt Web.
Tổng quan về thiết kế Web27 Lâm Quang Vũ
2.2.7 Phản hồi và đối thoại
l Chuẩn bị trước cho việc trả lời, đáp ứng các 
đòi hỏi, góp ý của đọc giả một cách nhanh 
nhất có thể.
l Luôn có cung cấp địa chỉ để liên kết với 
“Webmaster”
l Lên kế hoạch nhân sự phụ trách lâu dài.
10
Tổng quan về thiết kế Web28 Lâm Quang Vũ
2.2.8 Tính tương thích trên các trình 
duyệt khác nhau (thay thế) 
l Không phải mọi trình duyệt đều hiển thị trang 
web của chúng ta giống nhau.
l Lưu ý khi có đọc giả sử dụng web browser 
không có khả năng hỗ trợ đồ họa.
l Sử dụng nhãn (tag) ALT trong HTML để thay 
thế.
Tổng quan về thiết kế Web29 Lâm Quang Vũ
2.3 Thiết kế giao diện Website
l Xác định kiểu chữ, màu sắc
l Xác định kích thước khung nhìn
l Xác định các kỹ thuật, công cụ thiết kế
l Cắt đoạn, tóm lược thông tin
l Hệ thống Menu điều khiển, các liên kết giữa 
các trang
l Xác định cấu trúc WebSite
Tổng quan về thiết kế Web30 Lâm Quang Vũ
2.3.1 Xác định kiểu chữ, màu sắc
l Phông chữà phụ thuộc vào
– Đặc điểm thông tin
– Độc giả
– Trình duyệt, độ phân giải
– Ngôn ngữ sử dụng
– Font có chân, không chân…
l Gam màu à thống nhất trong toàn bộ Website
l Font tiếng Việt: VNI, TCVN3, Unicode…
11
Tổng quan về thiết kế Web31 Lâm Quang Vũ
2.3.2 Xác định kích thước khung nhìn
l Phải làm cho đọc giả cảm nhận được kích 
thước của trang thông tin, biết họ đang ở 
đâu, có thể làm gì ?
l Lưu ý, hầu hết các trang web đều không vừa 
khớp với màn hình 14-15 inch.
Tổng quan về thiết kế Web32 Lâm Quang Vũ
Ví dụ:
Tổng quan về thiết kế Web33 Lâm Quang Vũ
2.3.3 Xác định các kỹ thuật, công cụ
thiết kế
l Phụ thuộc nhiều yếu tố:
– Môi trường hosting
– Đội ngũ thiết kế
– Chi phí thiết kế
– Băng thông đường truyền
– ….
è Chi phí
12
Tổng quan về thiết kế Web34 Lâm Quang Vũ
2.3.4 Cắt đoạn, tóm lược thông tin
l Luôn có một số lợi điểm:
– Đọc giả có ít thời gian để đọc các tài liệu trên màn hình.
– Luôn có nhu cầu muốn tìm phần thông tin chủ định, không 
nên chia cắt quá nhỏ, tóm lược quá ngắn à gây thất vọng
– Hình thức và cách tổ chức đồng nhất à kinh nghiệm tìm 
kiếm, khám phá.
– Thông tin ngắn gọn, súc tích thích hợp với màn hình máy 
tính (bị giới hạn tầm nhìn).
l Việc áp dụng phải linh động, nhất quán.
Tổng quan về thiết kế Web35 Lâm Quang Vũ
2.3.5 Hệ thống Menu điều khiển, các 
liên kết giữa các trang
l Hệ thống đk đồ họa phong phú, nhất quán, 
mang tính gợi nhớ
l Hệ thống phím ấn đồng nhất, logic
l Có thể liên kết đến một site khác cũng như 
quay lại site trước.
l Các liên kết đến các site có giá trị sẽ tăng giá
trị chính website của chúng ta.
Tổng quan về thiết kế Web36 Lâm Quang Vũ
Ví dụ
13
Tổng quan về thiết kế Web37 Lâm Quang Vũ
2.3.6 Xác định cấu trúc WebSite
l Hệ thống phân cấp
l Hệ thống các trang nối tiếp
l Ô Lưới
l Mạng nhện
Tổng quan về thiết kế Web38 Lâm Quang Vũ
2.3.6.1 Phân cấp
Tổng quan về thiết kế Web39 Lâm Quang Vũ
Hệ thống Phân cấp
l Dùng để tổ chức các khối thông tin phức 
hợp.
l Là hệ thống được dùng thông dụng nhất
l Gần với mô hình tổ chức thế giới thực
l Dễ hình dung tổ chức website
è Cái nhìn tổng quan từ trang chủ
14
Tổng quan về thiết kế Web40 Lâm Quang Vũ
2.3.6.2 Nối tiếp
Tổng quan về thiết kế Web41 Lâm Quang Vũ
Hệ thống các trang nối tiếp
l Biểu diễn thông tin tuần tự, các bảng tường 
thuật nối tiếp theo thời gian
l Các thông tin tra cứu tham khảo: tự điển 
báck khoa, tự điển thuật ngữ
l Thích hợp cho hệ thống website nhỏ.
Tổng quan về thiết kế Web42 Lâm Quang Vũ
2.3.6.2 Ô lưới
15
Tổng quan về thiết kế Web43 Lâm Quang Vũ
Hệ thống Ô lưới
l Danh sách khóa học, các biến cố, sự kiện
l Từng đơn vị trong cấu trúc phải có cùng cấu 
trúc cho các chủ đề lớn và nhỏ
l Khó hiểu đối với khi xác định mối liên quan 
giữa các loại thông tin.
l Rất tốt đối với những đọc giả có kinh 
nghiệm, có sẵn kiến thức về hệ thống, chủ 
đề trong hệ thống
Tổng quan về thiết kế Web44 Lâm Quang Vũ
2.3.6.4 Mạng nhện
Tổng quan về thiết kế Web45 Lâm Quang Vũ
Hệ thống mạng nhện
l Tố chức ít hạn chế cho việc sử dụng mẫu thông tin
l Mô hình tự khám phá, khai thác triệt để ưu điểm của 
hyperlink
l Cấu trúc phi thực tế nhất, khó hiểu, khó dự đoán cho 
đọc giả
l Thích hợp với những site nhỏ, đọc giả chuyên 
nghiệp hoặc trình độ cao, tìm kiếm các kiến thức 
chuyên sâu
16
Tổng quan về thiết kế Web46 Lâm Quang Vũ
Phần 3 – Các thành phần cơ bản của 
Website
l Trang chủ (HomePage)
l Hệ thống Menu, Logo, định danh
l Các trang thành viên
Tổng quan về thiết kế Web47 Lâm Quang Vũ
3.1 Trang chủ
l Mọi website đều được thiết lập quanh 
Homepage
l Điều kiện cơ bản để website thành công
l Lưu ý khi sử dụng hệ thống đồ họa
Tổng quan về thiết kế Web48 Lâm Quang Vũ
3.2 Hệ thống menu,logo, định danh
l Hệ thống menu phải rõ ràng, đầy đủ sẽ giúp 
đọc giả hình dung được cấu trúc, tổ chức 
website.
l Cần quan tâm đến vị trí, các thể hiện (có hay 
không có hiệu ứng)
l Vị trí logo, định danh công ty phải cố định 
nhất quán
17
Tổng quan về thiết kế Web49 Lâm Quang Vũ
3.3 Các trang thành viên
l Xây dựng theo cấu trúc cơ bản của website
l Nhất quán, phù hợp với các thuộc tính đã 
định dạng trước
Tổng quan về thiết kế Web50 Lâm Quang Vũ
Phần 4 – Một số vấn đề cần quan tâm
l Thời gian quản lý
l Liên kết các trang Web, quảng cáo
l Phụ lục, nguồn thông tin, các trang giúp đỡ, 
FAQ
l Thiết kế trang Web cho mạng Interanet
Tổng quan về thiết kế Web51 Lâm Quang Vũ
4.1 Thời gian quản lý
l Website cần được cập nhật thông tin để đọc 
giả luôn cảm nhận được cái mới
l Nếu phần nào đó được cập nhật à thêm ký 
hiệu “New”
l Ghi thời gian cập nhật, số người truy cập…
l Nếu website phức tạp à thêm một trang 
“What new ?”
18
Tổng quan về thiết kế Web52 Lâm Quang Vũ
4.2 Liên kết trang web, quảng cáo
l Tạo liên kết đến các trang thông tin (đối tác, 
khách hàng…) à tăng uy tín
l Khi đã ổn định à chuyển đổi hình thức kinh 
doanh, thu phí: 
– Thuê đặt logo, quảng cáo
– Thu phí thành viên
– ….
Tổng quan về thiết kế Web53 Lâm Quang Vũ
4.3 Phụ lục, nguồn thông tin, các trang 
giúp đỡ, FAQ
l Thông tin báo cáo thường cô đọng à trên 
web có thêm các phụ lục
l FAQ (Frequently Asked Questions) lý tưởng 
cho việc thiết kế website hỗ trợ
l FAQ à giảm thiểu nhân sự và chi phí cho 
việc hỗ trợ, tư vấn khách hàng
Tổng quan về thiết kế Web54 Lâm Quang Vũ
4.4 Thiết kế trang web cho mạng 
Intranet
l Một số site thiết kế riêng cho các tổ chức, sử
dụng mạng LAN
l Mục tiêu : nâng cao thời gian truy cập, dẫn 
dắt vào sâu trong cấu trúc website à đòi hỏi 
thông tin phải hấp dẫn, có giá trị
l Đừng để ý tới băng thông và tốc độà chú
trọng đến nội dung có giá trị và sự hấp dẫn 
cho website.
19
Tổng quan về thiết kế Web55 Lâm Quang Vũ
LAB2 – Khảo sát các Website
l Khảo sát các trang Web và rút ra các nhận 
xét về cách thiết kế trang Web
l Làm quen với cách sử dụng một số công cụ
tiện ích hỗ trợ trong quá trình thiết kế Web
– Swish
– Frontpage
– Dreamweaver
l Sử dụng FTP Server