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
1
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
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
Các ứng dụng của công nghệ Web
Tham khao
11/18/2013 Thiết kế và triển khai website
11
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
12
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
13
Khái quát
Giao diện người dùng đồ hoạ (GUI):
11/18/2013 Thiết kế và triển khai website
14
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
15
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
16
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
17
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
18
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
19
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
20
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
21
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
22
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
23
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
24
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
25
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
26
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
27
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
28
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
29
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
30
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
31
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
32
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
33
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
34
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
35
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
36
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
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 giới thiệu thông tin của doanh nghiệp
11/18/2013 Thiết kế và triển khai website
38
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
39
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
40
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
41
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
42
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
43
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
44
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
45
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
46
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
47
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
48
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
49
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
50
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
51
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
52
Sơ đồ hệ thống phân cấp của một website
11/18/2013 Thiết kế và triển khai website
53
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
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
57
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
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
61
11/18/2013 Thiết kế và triển khai website
62
11/18/2013 Thiết kế và triển khai website
63
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
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)
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
65
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
66
a. Cấu trúc nối tiếp (Sequence)
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.
Ư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.
11/18/2013 Thiết kế và triển khai website
67
11/18/2013 Thiết kế và triển khai website
68
11/18/2013 Thiết kế và triển khai website
69
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
70
11/18/2013 Thiết kế và triển khai website
71
11/18/2013 Thiết kế và triển khai website
72
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
11/18/2013 Thiết kế và triển khai website
73
được mối liên quan giữa các loại thông tin.
Sơ đồ tổng quan cấu trúc ô lưới
11/18/2013 Thiết kế và triển khai website
74
11/18/2013 Thiết kế và triển khai website
75
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
76
11/18/2013 Thiết kế và triển khai website
77
11/18/2013 Thiết kế và triển khai website
78
Kết luận
* Đ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.
Sơ đồ phản ánh mối tương quan giữa 4 kiểu cấu trúc
11/18/2013 Thiết kế và triển khai website
79
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
80
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
81
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
82
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
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 (tiếp):
11/18/2013 Thiết kế và triển khai website
84
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
85
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
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 (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
87
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:
11/18/2013 Thiết kế và triển khai website
