Bài giảng chương 2: Tổng quan về thiết kế web

Nguyễn Quang Trung Bộ môn CNTT Khoa Tin học thương mại Email: trungnq@vcu.edu.vn Chương 2. TỔNG QUAN VỀ THIẾT KẾ WEB 9/8/2010 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/8/2010 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/8/2010 Thiết kế và triển khai website 4/55 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. 9/8/2010 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/8/2010 Thiết kế và triển khai website 6/55 1. Khái quát
Cần phải chia nhỏ các khối thông tin lớn.
Lý do: Con người có giới hạn trong việc lưu giữ và nhớ lại thông tin
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/8/2010 Thiết kế và triển khai website 7/55 1. Khái quát
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ẽ
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/8/2010 Thiết kế và triển khai website 8/55 1. Khái quát
Độc giả rất ít khi ñọc các tài liệu dài, liên tục trên màn hình
Tổ chức các ñoạn tin nhỏ thành các khối thông tin riêng ñể tạo nên hệ thống ñồng nhất, hình thành nên cơ sở các liên kết hypertext.
"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/8/2010 Thiết kế và triển khai website 9/55 2. Các bước tổ chức thông tin
Phân chia thông tin thành các ñơn vị logic
Thiết lập hệ thống phân cấp thông tin
Tạo mối quan hệ giữa các hệ thống phân cấp thông tin
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/8/2010 Thiết kế và triển khai website 10/55 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?
Trên Web bài giới thiệu ngắn không cần ñọc nối tiếp
Độc giả ñánh giá cao các ñoạn thông tin ngắn do có thể nhanh chóng rà soát và ñịnh vị chúng 9/8/2010 Thiết kế và triển khai website 11/55 a. 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 tích - Dựa vào bản chất nội dung 9/8/2010 Thiết kế và triển khai website 12/55 a. Phân chia thông tin thành các ñơn vị logic
Đồng nhất cách tổ chức, hình thức trình bày thông tin
Các ñoạn thông tin ngắn gọn, súc tích sẽ thích hợp hơn với màn hình máy tính
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/8/2010 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/8/2010 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
Hệ thống phân cấp thực sự là cần thiết ñối với web
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/8/2010 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 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/8/2010 Thiết kế và triển khai website 16/55 Sơ ñồ hệ thống phân cấp của một website 9/8/2010 Thiết kế và triển khai website 17/55 9/8/2010 Thiết kế và triển khai website 18/55 9/8/2010 Thiết kế và triển khai website 19/55 9/8/2010 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 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/8/2010 Thiết kế và triển khai website 21/55 9/8/2010 Thiết kế và triển khai website 22/55 9/8/2010 Thiết kế và triển khai website 23/55 9/8/2010 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/8/2010 Thiết kế và triển khai website 25/55 9/8/2010 Thiết kế và triển khai website 26/55 9/8/2010 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/8/2010 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/8/2010 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/8/2010 Thiết kế và triển khai website 30/55 a. Cấu trúc nối tiếp (Sequence)
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
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/8/2010 Thiết kế và triển khai website 31/55 a. Cấu trúc nối tiếp (Sequence)
Ưu ñiểm: * Thông tin ñược hệ thống một cách tuần tự. * Độc giả dễ tiếp cận
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. 9/8/2010 Thiết kế và triển khai website 32/55 9/8/2010 Thiết kế và triển khai website 33/55 9/8/2010 Thiết kế và triển khai website 34/55 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. 9/8/2010 Thiết kế và triển khai website 35/55 9/8/2010 Thiết kế và triển khai website 36/55 9/8/2010 Thiết kế và triển khai website 37/55 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 – Rất tốt với các ñộc giả có kinh nghiệm, những người ñã có sẵn kiến thức về chủ ñề và hệ thống – Các sơ ñồ tổng quát có thể rất hữu ích ñối với các site kiểu lưới
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 9/8/2010 Thiết kế và triển khai website 38/55 Sơ ñồ tổng quan cấu trúc ô lưới 9/8/2010 Thiết kế và triển khai website 39/55 9/8/2010 Thiết kế và triển khai website 40/55 d. Cấu trúc mạng nhện
Ư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. 9/8/2010 Thiết kế và triển khai website 41/55 9/8/2010 Thiết kế và triển khai website 42/55 9/8/2010 Thiết kế và triển khai website 43/55 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. 9/8/2010 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/8/2010 Thiết kế và triển khai website 45/55 2.2.3 Nguyên tắc sử dụng 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ả 9/8/2010 Thiết kế và triển khai website 46/55 1. Các nguyên tắc nghệ thuật a. Tính ñồng nhất về mặt hình ảnh: Không có tính ñồng nhất về mặt hình ảnh Chỉ có tính ñồng nhất về mặt trí tuệ 9/8/2010 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/8/2010 Thiết kế và triển khai website 48/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: • Chapter One - Item - Item • Chapter Two - Item • Chapter Three -Item - Item - Item 9/8/2010 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/8/2010 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/8/2010 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/8/2010 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/8/2010 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/8/2010 Thiết kế và triển khai website 54/55 Nguyên tắc sử dụng hình ảnh, ñồ hoạ, text
Nên kết hợp giữa ñồ họa và văn bản
Điều chỉnh kích cỡ sao cho hợp lý Thỏ 1 năm tuổi 9/8/2010 Thiết kế và triển khai website 55/55 T h a n k y o u !