bài giảng thiết kế và triển khai website chương 2 - gv. bùi quang trường

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... Thiết kế

Trang 1

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

Trang 2

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

Trang 3

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

Trang 4

4

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ì?

Trang 5

5

Các ứng dụng của công nghệ Web:

 Đào tạo

 Dạy học

 Giáo dục

 Tham khao

Trang 6

6

Các ứng dụng của công nghệ Web

Dạo chơi trên Web: VD forum

Trang 7

7

Dạo chơi trên Web: VD Blog

Trang 8

8

Đào tạo

Trang 9

9

Dạy học

Trang 10

10

Giáo dục

Trang 11

11

Tham khao

Trang 12

12

2.1.2 Thiết kế giao diện

- Khái quát

- Thiết kế giao diện cơ bản

Trang 13

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

Trang 14

14

Khái quát

Giao diện người dùng đồ hoạ (GUI):

Trang 15

Trang 16

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

Trang 17

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ả

Trang 18

18

Các giúp đỡ định hướng rõ ràng:

Trang 19

19

Các giúp đỡ định hướng rõ ràng (tiếp):

Trang 20

20

Không có trang cuối cùng (dead-end):

Trang 21

21

Cho phép truy nhập trực tiếp:

Trang 22

22

Dải thông và ảnh hưởng:

Trang 23

23

Đơn giản và nhất quán:

Trang 24

24

 Tính ổn định thiết kế

 Thiết kế cho các trình duyệt khác:

Trang 25

25

Điều khiển đồ hoạ:

Trang 26

26

Tạo ngữ cảnh:

Trang 27

27

Liên kết và điều khiển:

- "Quay lại"và quay về trang trước

Trang 28

28

- Tác dụng của thanh phím ấn

Trang 29

29

- Liên kết cố định và tương đối

Trang 30

30

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

Trang 31

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)

Trang 32

32

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

Trang 33

33

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ử:

Trang 34

34

Đấu giá trực tuyến:

Trang 35

35

Sàn giao dịch B2B

Trang 36

36

Cổng thông tin (Portal)

Trang 37

37

Website thông tin phục vụ việc quảng bá, quảng cáo

Trang 38

38

Website giới thiệu thông tin của doanh nghiệp

Trang 39

- 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

Trang 40

40

2.2.1 Các nguyên tắc chung

Tổ chức website chặt chẽ và dễ sử dụng:

Trang 41

41

Sử dụng từ ngữ dễ hiểu:

Trang 42

42

Dễ dàng khám phá các đường link:

Trang 43

43

Thời gian tải về nhanh:

Trang 44

44

Nội dung không có hình ảnh:

Trang 45

45

Dễ theo dõi "quá trình bán hàng“:

Trang 46

46

Tương thích với đa số trình duyệt web:

Trang 47

47

Một số vấn đề quan trọng khác khi thiết kế website:

Trang 48

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ế

Trang 49

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

Trang 50

Trang 51

51

Sơ đồ phân bố thông tin của website Ngân Hàng Công Thương Việt Nam

Trang 52

Trang 53

53

Sơ đồ hệ thống phân cấp

của một website

Trang 54

54

Trang 55

55

Trang 56

56

Trang 57

* 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

Trang 58

58

Trang 59

59

Trang 60

60

Trang 61

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

Trang 62

62

Trang 63

63

Trang 64

64

(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ả

Trang 65

65

(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

Trang 66

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)

Trang 67

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

Trang 68

68

Trang 69

69

Trang 70

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

Trang 71

71

Trang 72

72

Trang 73

 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

Trang 74

74

Sơ đồ tổng quan cấu trúc ô lưới

Trang 75

75

Trang 76

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

Trang 77

77

Trang 78

78

Trang 79

* 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

Trang 80

Trang 81

81

1 Các nguyên tắc nghệ thuật

Trang 82

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):

Trang 83

Trang 84

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):

Trang 85

85

b Phá vỡ các quy tắc thiết kế - sự cân bằng:

- Sự cân bằng đối xứng:

Trang 86

Trang 87

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

Trang 88

88

c Cung cấp một tiêu điểm:

- Sử dụng sự tương phản:

Định dạng
Số trang	88
Dung lượng	3,75 MB