Bài giảng Thiết kế và triển khai website - Chương 2: Tổng quan về thiết kế Website

11/18/2013 Thiết kế và triển khai website 1 
Thiết kế và triển khai website 
Chương 2. Tổng quan về thiết kế Website 
2.1. Các bước xây dựng Website 
 2.1.1. Khái quát chung 
 2.1.2. Thiết kế giao diện 
 2.1.3. Thiết kế nội dung 
2.2. Các nguyên tắc thiết kế website 
 2.2.1. Các nguyên tắc chung 
 2.2.2. Nguyên tắc phân bố thông tin 
 2.2.3. Nguyên tắc sử dụng các hiệu ứng 
11/18/2013 Thiết kế và triển khai website 2 
2.1. Các bước xây dựng Website 
2.1.1. Khái quát chung 
 - Mục đích của Web site cần thiết kế 
 - Chiến lược thiết kế 
 - Các ứng dụng của công nghệ Web 
11/18/2013 Thiết kế và triển khai website 3 
2.1.1. Khái quát chung 
Mục đích của Web site cần thiết kế: 
 Xác định đối tượng độc giả của web site. 
 Web site có mục đích rõ ràng. 
 Thiết lập các chủ đề chính của web site. 
 Thiết kế các khối thông tin chủ yếu mà web site sẽ 
cung cấp 
11/18/2013 Thiết kế và triển khai website 4 
2.1.1. Khái quát chung 
Chiến lược thiết kế: 
 - Bạn muốn nói gì? 
 - Tại sao thông tin của bạn là cần thiết? 
 - Bạn muốn mọi người thực hiện điều gì? 
11/18/2013 Thiết kế và triển khai website 5 
2.1.1. Khái quát chung 
Các ứng dụng của công nghệ Web: 
 Đào tạo 
 Dạy học 
 Giáo dục 
 Tham khao 
11/18/2013 Thiết kế và triển khai website 6 
Các ứng dụng của công nghệ Web 
Dạo chơi trên Web: VD forum 
11/18/2013 Thiết kế và triển khai website 7 
Các ứng dụng của công nghệ Web 
Dạo chơi trên Web: VD Blog 
11/18/2013 Thiết kế và triển khai website 8 
Các ứng dụng của công nghệ Web 
Đào tạo 
11/18/2013 Thiết kế và triển khai website 9 
Các ứng dụng của công nghệ Web 
Dạy học 
11/18/2013 Thiết kế và triển khai website 10 
Các ứng dụng của công nghệ Web 
Giáo dục 
11/18/2013 Thiết kế và triển khai website 11 
Các ứng dụng của công nghệ Web 
Tham khao 
11/18/2013 Thiết kế và triển khai website 12 
2.1. Các bước xây dựng Website 
2.1.2. Thiết kế giao diện 
 - Khái quát 
 - Thiết kế giao diện cơ bản 
11/18/2013 Thiết kế và triển khai website 13 
2.1.2. Thiết kế giao diện 
Khái quát : 
 - Giao diện người dùng đồ hoạ (GUI) 
 - Trang Web đối lập với thiết kế tài liệu thông thường 
 - Các tiền lệ trong in ấn 
 - Một số câu hỏi đặt ra: 
 + Ai? 
 + Cái gì? 
 + Khi nào? 
 + Nơi nào? 
11/18/2013 Thiết kế và triển khai website 14 
Khái quát 
Giao diện người dùng đồ hoạ (GUI): 
11/18/2013 Thiết kế và triển khai website 15 
Khái quát 
 Trang Web đối lập với thiết kế tài liệu thông 
thường 
 Các tiền lệ trong in ấn 
 Một số câu hỏi đặt ra: 
 + Ai? 
 + Cái gì? 
 + Khi nào? 
 + Nơi nào? 
11/18/2013 Thiết kế và triển khai website 16 
2.1.2. Thiết kế giao diện 
Thiết kế giao diện cơ bản: 
- Thiết kế hướng tới người sử dụng 
- Các giúp đỡ định hướng rõ ràng 
 - Không có trang cuối cùng (dead-end) 
 - Cho phép truy nhập trực tiếp 
 - Dải thông và ảnh hưởng 
 - Đơn giản và nhất quán 
- Tính ổn định thiết kế 
- Phản hồi và đối thoại 
 - Thiết kế cho các trình duyệt khác 
 - Điều khiển đồ hoạ 
 - Tạo ngữ cảnh 
 - Liên kết và điều khiển 
11/18/2013 Thiết kế và triển khai website 17 
Thiết kế giao diện cơ bản 
Thiết kế hướng tới người sử dụng: 
 - Giao diện đồ hoạ cho người sử dụng 
 - Tìm hiểu nhu cầu và tâm lý độc giả 
11/18/2013 Thiết kế và triển khai website 18 
Thiết kế giao diện cơ bản 
Các giúp đỡ định hướng rõ ràng: 
11/18/2013 Thiết kế và triển khai website 19 
Thiết kế giao diện cơ bản 
Các giúp đỡ định hướng rõ ràng (tiếp): 
11/18/2013 Thiết kế và triển khai website 20 
Thiết kế giao diện cơ bản 
Không có trang cuối cùng (dead-end): 
11/18/2013 Thiết kế và triển khai website 21 
Thiết kế giao diện cơ bản 
Cho phép truy nhập trực tiếp: 
11/18/2013 Thiết kế và triển khai website 22 
Thiết kế giao diện cơ bản 
Dải thông và ảnh hưởng: 
11/18/2013 Thiết kế và triển khai website 23 
Thiết kế giao diện cơ bản 
Đơn giản và nhất quán: 
11/18/2013 Thiết kế và triển khai website 24 
Thiết kế giao diện cơ bản 
 Tính ổn định thiết kế 
 Phản hồi và đối thoại 
 Thiết kế cho các trình duyệt khác: 
11/18/2013 Thiết kế và triển khai website 25 
Thiết kế giao diện cơ bản 
Điều khiển đồ hoạ: 
11/18/2013 Thiết kế và triển khai website 26 
Thiết kế giao diện cơ bản 
Tạo ngữ cảnh: 
11/18/2013 Thiết kế và triển khai website 27 
Thiết kế giao diện cơ bản 
Liên kết và điều khiển: 
 - "Quay lại"và quay về trang trước 
11/18/2013 Thiết kế và triển khai website 28 
Thiết kế giao diện cơ bản 
Liên kết và điều khiển: 
 - Tác dụng của thanh phím ấn 
11/18/2013 Thiết kế và triển khai website 29 
Thiết kế giao diện cơ bản 
Liên kết và điều khiển: 
 - Liên kết cố định và tương đối 
11/18/2013 Thiết kế và triển khai website 30 
2.1. Các bước xây dựng Website 
2.1.3. Thiết kế nội dung: 
 - Các phần nội dung cơ bản trong 1 Webiste 
 - Một số chức năng thường gặp của website 
 và mục đích sử dụng 
 - Nội dung cơ bản của một số website TMĐT 
11/18/2013 Thiết kế và triển khai website 31 
2.1.3. Thiết kế nội dung 
Các phần nội dung cơ bản trong 1 Webiste: 
 - Trang chủ (home page) 
 - Trang liên hệ (contact us) 
 - Trang thông tin giới thiệu về doanh nghiệp (about us) 
 - Trang giới thiệu về sản phẩm dịch vụ (products/services) 
 - Trang hướng dẫn hoặc chính sách (Policies) 
11/18/2013 Thiết kế và triển khai website 32 
2.1.3. Thiết kế nội dung 
Một số chức năng thường gặp của website và mục 
đích sử dụng : 
 - Diễn đàn (forum) 
 - Đăng ký nhận bản tin 
 - Thông báo, tin tức mới 
 - Giỏ mua hàng (shopping cart) 
 - Download miễn phí 
 - Thành viên 
11/18/2013 Thiết kế và triển khai website 33 
2.1.3. Thiết kế nội dung 
Nội dung cơ bản của một số website TMĐT: 
Cửa hàng điện tử, siêu thị điện tử: 
11/18/2013 Thiết kế và triển khai website 34 
2.1.3. Thiết kế nội dung 
Nội dung cơ bản của một số website TMĐT: 
Đấu giá trực tuyến: 
11/18/2013 Thiết kế và triển khai website 35 
2.1.3. Thiết kế nội dung 
Nội dung cơ bản của một số website TMĐT: 
Sàn giao dịch B2B 
11/18/2013 Thiết kế và triển khai website 36 
2.1.3. Thiết kế nội dung 
Nội dung cơ bản của một số website TMĐT: 
Cổng thông tin (Portal) 
11/18/2013 Thiết kế và triển khai website 37 
2.1.3. Thiết kế nội dung 
Nội dung cơ bản của một số website TMĐT: 
Website thông tin phục vụ việc quảng bá, quảng cáo 
11/18/2013 Thiết kế và triển khai website 38 
2.1.3. Thiết kế nội dung 
Nội dung cơ bản của một số website TMĐT: 
Website giới thiệu thông tin của doanh nghiệp 
11/18/2013 Thiết kế và triển khai website 39 
2.2. Các nguyên tắc thiết kế website 
2.2.1. Các nguyên tắc chung 
 - Tổ chức website chặt chẽ và dễ sử dụng. 
 - Sử dụng từ ngữ dễ hiểu. 
 - Dễ dàng khám phá các đường link. 
 - Thời gian tải về nhanh. 
 - Nội dung không có hình ảnh. 
 - Dễ theo dõi "quá trình bán hàng". 
 - Tương thích với đa số trình duyệt web. 
 - Một số vấn đề quan trọng khác khi thiết kế website. 
11/18/2013 Thiết kế và triển khai website 40 
2.2.1. Các nguyên tắc chung 
Tổ chức website chặt chẽ và dễ sử dụng: 
11/18/2013 Thiết kế và triển khai website 41 
2.2.1. Các nguyên tắc chung 
Sử dụng từ ngữ dễ hiểu: 
11/18/2013 Thiết kế và triển khai website 42 
2.2.1. Các nguyên tắc chung 
Dễ dàng khám phá các đường link: 
11/18/2013 Thiết kế và triển khai website 43 
2.2.1. Các nguyên tắc chung 
Thời gian tải về nhanh: 
11/18/2013 Thiết kế và triển khai website 44 
2.2.1. Các nguyên tắc chung 
Nội dung không có hình ảnh: 
11/18/2013 Thiết kế và triển khai website 45 
2.2.1. Các nguyên tắc chung 
Dễ theo dõi "quá trình bán hàng“: 
11/18/2013 Thiết kế và triển khai website 46 
2.2.1. Các nguyên tắc chung 
Tương thích với đa số trình duyệt web: 
11/18/2013 Thiết kế và triển khai website 47 
2.2.1. Các nguyên tắc chung 
Một số vấn đề quan trọng khác khi thiết kế website: 
11/18/2013 Thiết kế và triển khai website 48 
2.2. Các nguyên tắc thiết kế website 
2.2.2. Nguyên tắc phân bố thông tin 
 1. Các bước tổ chức thông tin 
 2. Các kiểu cấu trúc thiết kế 
11/18/2013 Thiết kế và triển khai website 49 
 1. Các bước tổ chức thông tin 
a. Phân chia thông tin thành các đơn vị logic 
b. Thiết lập hệ thống phân cấp thông tin 
c. Các mối quan hệ giữa các hệ thống phân 
cấp thông tin 
d. Phân tích sự thành công về chức năng và 
thẩm mỹ của các hệ thống thông tin 
11/18/2013 Thiết kế và triển khai website 50 
a. Phân chia thông tin thành các đơn vị 
logic 
* Tại sao phải phân chia thông tin thành 
các đơn vị logic? 
* Nguyên tắc phân chia: 
 - Linh động, nhất quán 
 - Ngắn gọn, súc thích 
 - Dựa vào bản chất nội dung 
11/18/2013 Thiết kế và triển khai website 51 
Sơ đồ phân bố thông tin của website 
Ngân Hàng Công Thương Việt Nam 
11/18/2013 Thiết kế và triển khai website 52 
b. Thiết lập hệ thống phân cấp thông 
tin 
Nguyên tắc cơ bản để thiết lập hệ thống 
phân cấp thông tin: 
 - Xác định hợp lý các mức ưu tiên 
 - Xác định mức độ quan hệ giữa các 
thành phần 
11/18/2013 Thiết kế và triển khai website 53 
Sơ đồ hệ thống phân cấp 
của một website 
11/18/2013 Thiết kế và triển khai website 54 
11/18/2013 Thiết kế và triển khai website 55 
11/18/2013 Thiết kế và triển khai website 56 
11/18/2013 Thiết kế và triển khai website 57 
c. Các mối quan hệ giữa các hệ thống phân 
cấp thông tin 
Nguyên tắc cơ bản: 
 * Các mối liên hệ giữa chủ đề và nội dung thông tin 
phải được liên kết chặt chẽ và rõ ràng. 
 * Các hệ thống phân cấp thông tin phải được sắp xếp 
và liên kết với nhau một cách cân xứng, hợp lý, dễ 
hiểu, dễ tìm. 
11/18/2013 Thiết kế và triển khai website 58 
11/18/2013 Thiết kế và triển khai website 59 
11/18/2013 Thiết kế và triển khai website 60 
11/18/2013 Thiết kế và triển khai website 61 
d. Phân tích sự thành công về chức năng 
và thẩm mỹ của các hệ thống thông tin 
• Tạo sự cân bằng cấu trúc 
giữa quan hệ của menu và các 
trang nội dung. 
• Xây dựng một hệ thống phân 
cấp menu của từng trang web 
sao cho tự nhiên, tạo sự thân 
thiện và không gây trở ngại 
cho người truy cập website. 
• Tạo một cây phân lớp thích 
hợp có khả năng truy cập 
thông tin nhanh, dễ dàng. 
11/18/2013 Thiết kế và triển khai website 62 
11/18/2013 Thiết kế và triển khai website 63 
11/18/2013 Thiết kế và triển khai website 64 
d. Phân tích sự thành công về chức năng 
và thẩm mỹ của các hệ thống thông tin 
(tiếp) 
Các web site quá nông, chỉ có một mức liên kết, uỷ thác vào các 
trang menu nặng nề mà sau một thời gian sẽ giống như một mớ 
hỗn độn các thông tin không liên quan đến nhau, được liệt kê không 
theo một trật tự nào cả. 
11/18/2013 Thiết kế và triển khai website 65 
d. Phân tích sự thành công về chức năng 
và thẩm mỹ của các hệ thống thông tin 
(tiếp) 
Hệ thống thông tin lại có thể quá sâu, cất giấu thông tin dưới nhiều lớp 
menu. Bắt người truy cập phải định vị qua nhiều mức menu lồng nhau trước 
khi tìm được thông tin, tạo ra cho người truy cập sự khó chịu. Và như thế 
menu sẽ mất đi giá trị chuyển tải. 
11/18/2013 Thiết kế và triển khai website 66 
2. Các kiểu cấu trúc thiết kế Website 
a. Cấu trúc nối tiếp (Sequence) 
b. Cấu trúc phân cấp (Hierarchy) 
c. Cấu trúc ô lưới (Grid) 
d. Cấu trúc mạng nhện (Web) 
11/18/2013 Thiết kế và triển khai website 67 
a. Cấu trúc nối tiếp (Sequence) 
Ưu đi ểm: 
 * Thông tin được hệ thống 
theo một dãy tuần tự. 
 * Thông tin nối tiếp nhau như 
một bản tường thuật, theo 
thời gian, nó là ý tưởng cho 
sự luận bàn nối tiếp. 
Nhược điểm: 
 * Chỉ thích hợp với các 
website nhỏ 
 * Chuỗi thông tin càng dài 
sẽ càng trở nên phức 
tạp và khó hiểu. 
11/18/2013 Thiết kế và triển khai website 68 
11/18/2013 Thiết kế và triển khai website 69 
11/18/2013 Thiết kế và triển khai website 70 
b.Cấu trúc phân cấp (Hierarchy) 
 Là một trong những 
cách tốt nhất để tổ chức 
các khối thông tin phức 
hợp. 
 Cấu trúc phân cấp đặc 
biệt thích hợp cho các 
website vì các website 
luôn được thực hiện rẽ 
nhánh từ một trang chủ 
duy nhất. 
11/18/2013 Thiết kế và triển khai website 71 
11/18/2013 Thiết kế và triển khai website 72 
11/18/2013 Thiết kế và triển khai website 73 
c. Cấu trúc ô lưới (Grid) 
 Ưu điểm: 
 * Cấu trúc là cách tốt để phản ánh tương quan 
các biến số như sự kiên, công nghệ , văn hoá . . . 
 * Các chủ đề không có sự phân cấp về mức độ 
quan trọng. 
 Nhược điểm: 
 * Khó hiểu với độc giả khi độc giả chưa xác định 
được mối liên quan giữa các loại thông tin. 
11/18/2013 Thiết kế và triển khai website 74 
Sơ đồ tổng quan cấu trúc ô lưới 
11/18/2013 Thiết kế và triển khai website 75 
11/18/2013 Thiết kế và triển khai website 76 
 d. Cấu trúc mạng nhện (Web) 
 Ưu điểm: 
 - Khai thác triệt để năng lực 
của các trang web trong việc liên 
kết và kết hợp. 
 - Ý tưởng liên kết giống nhau 
và tự do. 
 Nhược điểm: 
 - Các khối thông tin dễ phát 
triển thành một mớ hỗn độn, lộn 
xộn. 
 - Nhắm vào các độc giả 
chuyên nghiệp tịm kiếm những 
kiến thức chuyên sâu. 
11/18/2013 Thiết kế và triển khai website 77 
11/18/2013 Thiết kế và triển khai website 78 
11/18/2013 Thiết kế và triển khai website 79 
Kết luận 
Sơ đồ phản ánh mối tương 
quan giữa 4 kiểu cấu trúc 
 * Đa số các website đều sử 
dụng cả 4 kiểu cấu trúc 
thông tin trên. 
 * Tuy nhiên hệ thống thông 
tin vẫn phải trình bày một 
cách minh bạch, nhất quán 
để hỗ trợ cho các mục 
đích của website. 
11/18/2013 Thiết kế và triển khai website 80 
2.2. Các nguyên tắc thiết kế website 
2.2.3. Nguyên tắc sử dụng các hiệu ứng 
 1. Các nguyên tắc nghệ thuật 
 2. Các nguyên tắc sử dụng hình ảnh, đồ hoạ, text. 
 3. Sử dụng lưới 
 4. Kết hợp tất cả 
11/18/2013 Thiết kế và triển khai website 81 
1. Các nguyên tắc nghệ thuật 
a. Tính đồng nhất về mặt hình ảnh: 
11/18/2013 Thiết kế và triển khai website 82 
Tính đồng nhất về mặt hình ảnh 
Tính đồng nhất bằng cách đặt kề gần nhau (kết nhóm): 
11/18/2013 Thiết kế và triển khai website 83 
Tính đồng nhất về mặt hình ảnh 
Tính đồng nhất bằng cách lặp lại: 
• Chapter One 
- Item 
- Item 
• Chapter Two 
- Item 
• Chapter Three 
 -Item 
- Item 
- Item 
11/18/2013 Thiết kế và triển khai website 84 
Tính đồng nhất về mặt hình ảnh 
Tính đồng nhất bằng cách lặp lại (tiếp): 
11/18/2013 Thiết kế và triển khai website 85 
1. Các nguyên tắc nghệ thuật 
b. Phá vỡ các quy tắc thiết kế - sự cân bằng: 
 - Sự cân bằng đối xứng: 
11/18/2013 Thiết kế và triển khai website 86 
Phá vỡ các quy tắc thiết kế - sự cân 
bằng: 
- Sự cân bằng đối xứng không đối xứng: 
11/18/2013 Thiết kế và triển khai website 87 
Phá vỡ các quy tắc thiết kế - sự cân 
bằng: 
- Sự cân bằng đối xứng không đối xứng (tiếp): 
The quick brown fox jumped 
over the lazy brown dog. The 
quick brown fox jumped over 
the lazy brown dog. The quick 
brown fox jumped over the 
lazy brown dog. The quick 
brown fox jumped over the 
lazy brown dog. 
11/18/2013 Thiết kế và triển khai website 88 
1. Các nguyên tắc nghệ thuật 
c. Cung cấp một tiêu điểm: 
 - Sử dụng sự tương phản: