Chương 2: TỔNG QUAN VỀ THIẾT KẾ WEB ppsx

Các bước tổ chức thông tin z Phân chia thông tin thành các đơn vị logic z Thiết lập hệ thống phân cấp thông tin z Tạo mối quan hệ giữa các hệ thống phân cấp thông tin z Phân tích sự thà

Bộ môn CNTT, Khoa Tin học thương mại – ĐHTM

Email: cntt@vcu.edu.vn

Chương 2 TỔNG QUAN

VỀ THIẾT KẾ WEB Chương 2 TỔNG QUAN

VỀ THIẾT KẾ WEB

9/3/2009 Thiết kế và triển khai website 2/55

NỘI DUNG

2.1 Các bước xây dựng Website

2.2 Các nguyên tắc thiết kế website

9/3/2009 Thiết kế và triển khai website 3/55

2.2 Các nguyên tắc thiết kế Web

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

9/3/2009 Thiết kế và triển khai website 4/55

2.2.1 Các nguyên tắc chung

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

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

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

z Thời gian tải về nhanh

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

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

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

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

9/3/2009 Thiết kế và triển khai website 5/55

2.2.2 Nguyên tắc phân bố thông tin

1 Khái quát

2 Các bước tổ chức thông tin

3 Các kiểu cấu trúc thiết kế

9/3/2009 Thiết kế và triển khai website 6/55

1 Khái quát

z Cần phải chia nhỏ các khối thông tin lớn.

z Lý do: Con người có giới hạn trong việc

lưu giữ và nhớ lại thông tin

z Các nhà tâm lý học nhận thức: đại đa số

chúng ta chỉ có thể lưu giữ khoảng 4 đến

7 mẫu thông tin rời rạc trong trí trong m ộ t

kho ả ng th ờ i gian ng ắ n

9/3/2009 Thiết kế và triển khai website 7/55

1 Khái quát

z Giúp ghi nhớ dễ hơn bằng việc sử dụng kết hợp giữa thiết kế đồ hoạ, qui ước lớp và biên tập thông tin thành các đơn vị riêng rẽ

z Thực tế với độc giả các tin ngắn gọn, riêng biệt sẽ chức năng hoá hơn và dễ định vị hơn khối thông tin dài

9/3/2009 Thiết kế và triển khai website 8/55

z "Nhỏ" chỉ có thể được xác định trong ngữ cảnh của tài liệu cần trình bày

9/3/2009 Thiết kế và triển khai website 9/55

2 Các bước tổ chức thông tin

z Phân chia thông tin thành các đơn vị logic

z Thiết lập hệ thống phân cấp thông tin

z Tạo mối quan hệ giữa các hệ thống phân

cấp thông tin

z 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

9/3/2009 Thiết kế và triển khai website 10/55

a Phân chia thông tin thành

9/3/2009 Thiết kế và triển khai website 11/55

a Phân chia thông tin thành

9/3/2009 Thiết kế và triển khai website 12/55

a Phân chia thông tin thành

z Việc áp dụng phân chia thông tin phải linh

động, và nhất quán với hệ thống logic và với

sự thuận tiện cho độc giả web

9/3/2009 Thiết kế và triển khai website 13/55

Sơ đồ phân bố thông tin của

website Ngân Hàng Công Thương

9/3/2009 Thiết kế và triển khai website 14/55

b Thiết lập hệ thống phân cấp

thông tin

z Tại sao?

z Vì ý tưởng trang chủ liên kết phụ thuộc vào

sự phân cấp, di chuyển từ cái nhìn khái quát

nhất của toàn website (trang chủ), qua các

menu con xuống đến trang nội dung

9/3/2009 Thiết kế và triển khai website 15/55

b Thiết lập hệ thống phân cấp

thông tin

z 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

9/3/2009 Thiết kế và triển khai website 16/55

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

của một website

9/3/2009 Thiết kế và triển khai website 17/55

9/3/2009 Thiết kế và triển khai website 18/55

9/3/2009 Thiết kế và triển khai website 19/55

9/3/2009 Thiết kế và triển khai website 20/55

c Mối quan hệ giữa các hệ

thống phân cấp thông tin

z 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

9/3/2009 Thiết kế và triển khai website 21/55

9/3/2009 Thiết kế và triển khai website 22/55

9/3/2009 Thiết kế và triển khai website 23/55

9/3/2009 Thiết kế và triển khai website 24/55

d Phân tích sự thành công về chức

năng và thẩm mỹ của các HTTT

• 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

9/3/2009 Thiết kế và triển khai website 25/55

9/3/2009 Thiết kế và triển khai website 26/55

9/3/2009 Thiết kế và triển khai website 27/55

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, không theo một trật tự nào cả.

d Phân tích sự thành công về chức

năng và thẩm mỹ của các HTTT

9/3/2009 Thiết kế và triển khai website 28/55

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.

d Phân tích sự thành công về chức

năng và thẩm mỹ của các HTTT

9/3/2009 Thiết kế và triển khai website 29/55

2.1.3 Các kiểu cấu trúc thiết kế Web

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)

9/3/2009 Thiết kế và triển khai website 30/55

a Cấu trúc nối tiếp (Sequence)

z Thể hiển thị thông tin một cách tuần tự, tiếp nối nhau

như một bản tường thuật, theo thời gian

z Ví dụ như một chuỗi logic các chủ đề được phát triển từ tổng quát đến cụ thể, hoặc cũng có thể theo thứ tự abc, như các chỉ số, tự điển bách khoa, từ điển thuật ngữ

9/3/2009 Thiết kế và triển khai website 31/55

a Cấu trúc nối tiếp (Sequence)

* Chuỗi thông tin càng dài sẽ càng trở nên phức tạp và khó hiểu.

9/3/2009 Thiết kế và triển khai website 32/55

9/3/2009 Thiết kế và triển khai website 33/55

9/3/2009 Thiết kế và triển khai website 34/55

b Cấu trúc phân cấp (Hierarchy)

9/3/2009 Thiết kế và triển khai website 35/55

9/3/2009 Thiết kế và triển khai website 36/55

9/3/2009 Thiết kế và triển khai website 37/55

c Cấu trúc ô lưới (Grid)

z Ư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

– Rất tốt với các độc giả có kinh nghiệm, những người đã có

9/3/2009 Thiết kế và triển khai website 38/55

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

9/3/2009 Thiết kế và triển khai website 39/55

9/3/2009 Thiết kế và triển khai website 40/55

d Cấu trúc mạng nhện

- Khai thác triệt để năng lực

của các trang web trong việc liên

chuyên nghiệp tìm kiếm những

kiến thức chuyên sâu.

9/3/2009 Thiết kế và triển khai website 41/55

9/3/2009 Thiết kế và triển khai website 42/55

9/3/2009 Thiết kế và triển khai website 43/55

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

9/3/2009 Thiết kế và triển khai website 44/55

2.2 Các nguyên tắc thiết kế Web

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

9/3/2009 Thiết kế và triển khai website 45/55

9/3/2009 Thiết kế và triển khai website 46/55

9/3/2009 Thiết kế và triển khai website 47/55

Tính đồng nhất về mặt hình ảnh

Đồng nhất bằng cách đặt kề gần nhau (kết nhóm):

9/3/2009 Thiết kế và triển khai website 48/55

9/3/2009 Thiết kế và triển khai website 49/55

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

9/3/2009 Thiết kế và triển khai website 50/55

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:

9/3/2009 Thiết kế và triển khai website 51/55

Phá vỡ các quy tắc thiết kế

-sự cân bằng:

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

9/3/2009 Thiết kế và triển khai website 52/55

Phá vỡ các quy tắc thiết kế

-sự cân bằng:

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

Sự cân bằng không đối xứng (tiếp):

9/3/2009 Thiết kế và triển khai website 53/55

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:

9/3/2009 Thiết kế và triển khai website 54/55

Nguyên tắc sử dụng hình ảnh,

đồ hoạ, text

z Nên kết hợp giữa đồ họa và văn bản

z Điều chỉnh kích cỡ sao cho hợp lý

Thỏ 1 năm tuổi

9/3/2009 Thiết kế và triển khai website 55/55

Thank you!