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: