›
›

Bài giảng Thiết kế và triển khai Website - Chương 2: Tổng quan về thiết kế Website

pdf 88 trang hapham 1800
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế và triển khai Website - Chương 2: Tổng quan về thiết kế Website", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_thiet_ke_va_trien_khai_website_chuong_2_tong_quan.pdf

Nội dung text: Bài giảng Thiết kế và triển khai Website - Chương 2: Tổng quan về thiết kế 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 1 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 2 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 3 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ì? 4 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 5 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 6 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 7 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 8 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 9 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 10 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 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 12 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? 13 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): 14 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? 15 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 16 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ả 17 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: 18 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): 19 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): 20 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: 21 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: 22 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: 23 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: 24 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ạ: 25 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: 26 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 27 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 28 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 29 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 30 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) 31 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 32 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ử: 33 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: 34 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 35 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) 36 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 37 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 38 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. 39 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: 40 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: 41 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: 42 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: 43 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: 44 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“: 45 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: 46 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: 47 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ế 48 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 49 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 50 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 51 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 52 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 53 11/18/2013 Thiết kế và triển khai website
  54. 54 11/18/2013 Thiết kế và triển khai website
  55. 55 11/18/2013 Thiết kế và triển khai website
  56. 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. 57 11/18/2013 Thiết kế và triển khai website
  58. 58 11/18/2013 Thiết kế và triển khai website
  59. 59 11/18/2013 Thiết kế và triển khai website
  60. 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. 61 11/18/2013 Thiết kế và triển khai website
  62. 62 11/18/2013 Thiết kế và triển khai website
  63. 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ả. 64 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. 65 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) 66 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: Nhược điểm: * Thông tin được hệ thống * Chỉ thích hợp với các theo một dãy tuần tự. website nhỏ * Thông tin nối tiếp nhau như * Chuỗi thông tin càng dài một bản tường thuật, theo sẽ càng trở nên phức thời gian, nó là ý tưởng cho tạp và khó hiểu. sự luận bàn nối tiếp. 67 11/18/2013 Thiết kế và triển khai website
  68. 68 11/18/2013 Thiết kế và triển khai website
  69. 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. 70 11/18/2013 Thiết kế và triển khai website
  71. 71 11/18/2013 Thiết kế và triển khai website
  72. 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. 73 11/18/2013 Thiết kế và triển khai website
  74. Sơ đồ tổng quan cấu trúc ô lưới 74 11/18/2013 Thiết kế và triển khai website
  75. 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. 76 11/18/2013 Thiết kế và triển khai website
  77. 77 11/18/2013 Thiết kế và triển khai website
  78. 78 11/18/2013 Thiết kế và triển khai website
  79. 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 79 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ả 80 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: 81 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): 82 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 83 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): 84 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: 85 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: 86 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. 87 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: 88 11/18/2013 Thiết kế và triển khai website