Untitled ỨNG DỤNG THIẾT KẾ WEB 1 Trình bày khái niệm website? Các thành phần cơ bản của website 1 2 Trình bày các cách phân loại website? Ví dụ 2 Phân biệt website tĩnh, động Cho ví dụ 2 Phân biệt web.
ỨNG DỤNG THIẾT KẾ WEB Trình bày khái niệm website? Các thành phần website Trình bày cách phân loại website? Ví dụ .2 - Phân biệt website tĩnh, động Cho ví dụ - Phân biệt web 1.0, web 2.0, web 3.0 Cho ví dụ Quy trình thiết kế website 4 Trình bày nguyên tắc thiết kế UX website Cho ví dụ 5 Vai trị điều hướng thiết kế website? Trình bày cách phân loại điều hướng? 6 Các cách xác định vị trí người dùng Thiết kế dàn trang website cần quan tâm yếu tố nào? Trong website có loại bố cục nào? Hãy trình bày phân tích 10 Phác thảo giao diện khung mẫu cho: website tmđt, website giải trí, website cộng đồng, website tin tfíc 14 Trình bày khái niệm website? Các thành phần bảncủa website - Khái niệm website: Website tập hợp trang web bao gồm hình ảnh, file, âm thường nằm tên miền (domain name) tên miền phụ (subdomain) Một website phải đặt máy chủ - Các thành phần website + Tên miền Tên miền đường dẫn tới trang web hay gọi địa website Tên miền thay cho địa IP máy chủ (là số khó nhớ máy chủ Internet) giúp cho người dễ dàng ghi nhớ, truy cập tim kiếm + Web hosting: Là dịch vụ lưu trữ chia sẻ liệu trực tuyến Để người dùng truy cập trang web cần phải thuê web hosting đặt liệu trang web vào để người dùng truy cập vào trang + Sourse code: mã nguồn web, thị nội dung chức web cho phép người xem đọc truy cập Source code lập trình viên tạo dựa câu lệnh, câu lệnh yêu cầu web server thực hiểnthị nội dung website Trình bày cách phân loại website? Ví dụ - Phân biệt website tĩnh, động Cho ví dụ - Phân biệt web 1.0, web 2.0, web 3.0 Cho ví dụ - Phân loại biệt website tinh, động (Phân loại theo liệu) + Website tinh: hiểu theo nghĩa liệu không thay đổi thường xuyên Với dạng web để thay đổi nội dung trang web người sở hữu phải truy cập trực tiếp vào mã lệnh để thay đổi thông tin, người dùng khơngthể tương tác với trang web • Ưu điểm: Chạy nhanh, tốn tài ngun máy chủ, gần khơng thể hack, chi phí thấp • Nhược điểm: Website tinh tương tự tờ báo giấy, khơng có tương tác người truy cập website, quý khách tự thay đổi nộidung website + Website động: website có sở liệu hỗ trợ phần mềm phát triển web Với web động, thông tin hiển thị gọi từ sở liệu người dùng truy vấn tới trang web Website động có tương tác chiều người truy cập, người quản lý website • Ví dụ: Người truy cập đặt hàng, gửi liên hệ, gửi viết, người quản trịwebsite sửa viết, xóa viết • Ưu điểm, khả tương tác với người dùng, ngơn ngữ lập trình cấp cao cho phép tạo website với nhiều mục đích sử dụng, thỏa mãn nhu cầu truy cập khác hàng -> Ví dụ: vnexpress.net, shopee.vn, vingroup.net… - Phân biệt web 1.0, web 2.0, web 3.0 (Phân loại theo công nghệ) + Web 1.0: thông tin chiều từ website đến người xem, đọc -> Ví dụ: Britannica online… + Web 2.0: có tinh tương tác cao, tham gia xây dựng nộidung website -> Ví dụ: Facebook, Youtube, Reddit, Wikipedia, Twitter… + Web 3.0: kết nối website với nhau, hiểu hành vi người dùng, biết họ muốn cần tim -> Ví dụ: Apple Siri Bằng việc sử dụng cơng nghệ nhận diện giọng nói trí tuệ nhân tạo để ghi nhớ yêu cầu, hành vi, thói quen người sở hữu, từ giúp Siri đưa đề xuất đắn phù hợp cho người sử dụng - Phân loại theo nội dung + Website thông tin: cung cấp thông tin vấn đề cụ thể tổ chức Ví dụ: qldt.ptit.edu.vn + Website giao dịch: sử dụng để thực số giao dịch nhiệm vụ (thương mại điện tử…) Ví dụ: shopee.vn + Website cộng đồng: cung cấp thông tin sở giao dịch liên quan tập trung vào tương tác khách truy cập trang web (forum…) Ví dụ: tinhte.vn + Website giải trí: chơi trị chơi số hình thức tương tác thú vị, bao gồm giao dịch, cộng đồng yếu tố thơng tin Ví dụ: zingmp3.vn +Website khác bao gồm trang web nghệ thuật, thử nghiệm, web cá nhân… - Phân loại theo tổ chức + Website thương mại: xây dựng điều hành tổ chức cá nhân cho lợi ích thương mại Ví dụ: shopee.vn + Website Chính phủ: tổ chức phủ, mục đích trang web để đáp ứng số nhu cầu xã hội pháp lý Ví dụ: chinhphu.vn + Website Giáo dục: Đây trang web số sở giáo dục, đượcsử dụng để hỗ trợ mục tiêu học tập hay nghiên cứu Ví dụ: ted.com + Website phi lợi nhuận: Một trang web từ thiện tồn để thúc đẩy mục tiêu tổ chức phi lợi nhuận, hoạt động từ thiện cá nhân tổ chức Ví dụ: one.org + Các website cá nhân tồn tùy theo định số người nhóm Ví dụ: giangoi.com - Phân loại theo hình ảnh + Hướng văn bản: trang web thiết kế tập trung vào nội dung văn bản(wikipedia) Ví dụ: Wikipedia.org + Phong cách GUI: giao diện hướng đồ họa người dùng, cách sử dụng văn hướng tới toàn diện thiết kế giao diện người dùng Ví dụ: alexbuga.com + Các trang web ẩn dụ: mượn ý tưởng tưởng từ “cuộc sống thực” + Các trang web thực nghiệm: làm khác so với tiêu chuẩn, phi thực tế Quy trình thiết kế website - Quy trình phát triển website: Planning (lập kế hoạch) -> Design -> Development -> Launch (ra mắt) + Bước 1: Lập kế hoạch • Phân tich yêu cầu: xác định mục tiêu người dùng, khách hàng -> xđ tinh • • • • cần thiết -> đề xuất phân tich Các điều lệ dự án: thơng tin thống nhất, tài liệu sử dụng tham khảo suốt dự án Kiến trúc thông tin: xếp, xây dựng, tổ chức thông tin website Lập hợp đồng: điều khoản, sở hữu quyền… Lập kế hoạch thực hiện: tổ chức nhân thực + Bước 2: Thiết kế • • • • Wireframe Visual design Xét duyệt Mã hóa HLML/ CSS + Bước 3: Phát triển • Phát triển • Thử nghiệm • Đẩy nội dung lên website + Bước 4: Ra mắt • • • • • Rà sốt lại toàn sản phẩm Chuyển sang máy chủ Chạy thử nghiệm Kiểm tra trình duyệt Bàn giao khách hàng Trình bày nguyên tắc thiết kế UX website.Cho ví dụ - Khả ghi nhớ + Nguyên lý ± (George A Miller): Số lượng “khối” nhận thức người bình thường giữ nhớ làm việc (một phận nhớ ngắn hạn) ± (từ 5-9) => Áp dụng nguyên tắc 7±2 vào thiết kế độ sâu rộng cho menu website: yếu tố thông tin khoảng từ 5-9 khối Càng nhiều thông tin thêm vào “giao diện”, người dùng trở nên khó khăn thao tác + Nguyên tắc CLICK: Khi cần tim thơng tin website thơng tin phải tim thấy vịng click chuột Nếu không khách hàng kiên nhẫn bỏ - Thời gian đáp ứng + Một hệ thống có thời gian đáp ứng 0,1s cảm nhận phản ứng trựctiếp + Thời gian chờ đợi đến 3s coi không ảnh hưởng đến suy nghĩ conngười + Sau – 10s, người dùng thường bắt đầu quan tâm đến hoạt động xungquanh + Nên có giới hạn – 10s cho người sử dụng để xác định ý nội dung mục đích sau tải trang - Khả di chuyển + Tạo mục tiêu lớn: mục tiêu có độ rộng lớn nhanh chóng đượctruy cập + Giảm thiểu di chuyển chuột: Mục tiêu gần truy cập nhanh - Thị giác: + Sử dụng màu xanh cho liên kết + Màu sắc lựa chọn cách giúp kích thích người dùng thực hànhđộng - Tìm kiếm: Mở rộng hộp tim kiếm lên 27 ký tự chứa 90% nội dung timkiếm - Một số thói quen người dùng + Người dùng khơng quan tâm đến quảng cáo: Một số điều hướng giống banner, quảng cáo bị bỏ qua + Hầu hết người dùng không sử dụng cuộn: Những nội dung quan trọng nên đặt phía trên, nơi mà người dùng khơng phải sử dụng đến cuộn • Tên trang web • Giá trị trang web • Danh mục cho mục có liên quan trang web Vai trò điều hướng thiết kế website? Trìnhbày cách phân loại điều hướng? - Vai trị điều hướng: Điều hướng đóng vai trị quan trọng việc định hình thói quen sử dụng website + Giúp người dùng di chuyển từ trang sang trang khác website + Tìm kiếm định hướng mục tiêu định vị thông tin siêu liên kết + Tất liên kết, nhãn yếu tố khác cung cấp truy cập tới trang web, giúp người dùng định hướng tương tác với website định - Các cách phân loại điều hướng Điều hướng cấu trúc ➢ Điều hướng cấu trúc theo cấu trúc website Nó cho phép người di chuyển lên xuống điểm khác hệ thống phân cấp website ➢ Có loại điều hướng cấu trúc: Điều hướng điều hướng vị trí • Điều hướng o Điều hướng đại diện cho trang cấp cao cấu trúc website trang trang chủ o Vị trí đặt điều hướng chính: xuất vị trí phù hợp không thay đổi tất trang website o Vai trị điều hướng ▪ Cung cấp nhìn tổng quan website ▪ Nhắc nhở nơi người dùng website ▪ Cho phép người dùng chuyển chủ đề thiết lập lại đường dẫn điều hướng ▪ Nó giúp người dùng bị gián đoạn điều hướng nhắc nhở nơi họ website • Điều hướng vị trí: Điều hướng vị trí sử dụng để truy cập cấpthấp cấu trúc, bên trang điều hướng o Điều hướng vị trí dạng L-ngược o Điều hướng vị trí ngang o Điều hướng vị trí dạng nhúng thẳng đứng Điều hướng liên kết: tạo kết nối quan trọng cấp hệ thống phân cấp cấu trúc website ➢ Có loại điều hướng liên kết • Điều hướng theo ngữ cảnh o Phụ thuộc vào ngữ cảnh cảnh cần sử dụng điều hướng để bổ sung thơng tin; chuyển sang nội dung khác tới website o Vị trí điều hướng ngữ cảnh: điều hướng nhúng liên kết liênquan • Liên kết nhanh o Cung cấp quyền truy cập vào nội dung khu vực quan trọng trang web o Nó liên kết đến trang web phụ chí đến website hoàn toàn o Liên kết nhanh thường xuất đầu hai bên trang Trêntrang chủ, vị trí bật khu vực riêng mình, trang nằm drop – down menu động • Điều hướng footer o Nằm trang o Thường đại diện liên kết văn o Nó thường truy cập vào trang khơng có cấu trúc phâncấp thêm o Chứa thông tin bổ sung không liên quan với chủ đề website, chẳng hạn thông tin quyền, điều khoản, điều kiện, khoản tin dụng website o Lợi điều hướng footer khơng xâm nhập vào nội dung chức website Điều hướng tiện ích ➢ Dùng để kết nối công cụ, tinh hỗ trợ người dùng việc sử dụng ➢ ➢ • • • • website thường không nằm hệ thống phân cấp chủ đề củawebsite Điều hướng tiện ích điều hướng thường thường xuất cùngnhau khu vực định vị Các dạng khác điều hướng tiện ích: Điều hướng ngồi website: liên kết đến website khác cơng ty, thường đặt phía bên phải trang Logo liên kết: Liên kết logo điều hướng đến trang chủ Lựa chọn ngôn ngữ, quốc gia: website đa ngôn ngữ, đa quốc gia liên kết tiện ích cho phép khách hang chọn ngôn ngữ quốc giacủa họ Điều hướng nội trang: số trang web dài, điều hướng nội cung cấp nhìn tổng thể trang cho phép người dùng di chuyển đến phần khác trang => cung cấp nhìn tổng quan nội dung trang Các cách xác định vị trí người dùng - Nhãn trang - Màu sắc - Hình ảnh - Phong cách - Vị trí người dùng qua + Sử dụng màu sắc để nhận biết khu vực qua + Lợi dụng nút back - Vị trí người dùng tới + Người dùng lựa chọn điểm đến thông qua trình bày trước mặt họ + Vị trí đặt điều hướng quan trọng Có vị trí đặt điều hướng sau: • • • • • Trên Bên trái Bên phải Dưới Trung tâm Thiết kế dàn trang website cần quan tâm nhữngyếu tố nào? - Bố cục + Tỷ lệ vàng + Nguyên tắc 1/3 + Looking room + Bố cục cân + Bố cục chữ F, Z - Hệ thống lưới + Hệ thống lưới hệ thống quản lý phải xác định trước địnhthiết kế + Tỷ lệ giá trị cốt lõi hệ thống lưới + Lưới giúp trang web trở nên gọn gàng ngắn thông tin dàyđặc + Các hệ thống lưới dùng phổ biến hệ thống lưới 12 cột, 16 cột, 24 cột - Khoảng trắng: Khoảng trắng chia thành loại + Khoảng trắng chủ động không gian cố tinh bỏ trống bố cục để thểhiện ý đồ thiết kế Nhấn mạnh làm bật yếu tố hay nộidung thiết kế, đơn giản khoảng nghỉ mắt người đọc, từđó dẫn người đọc đến yếu tố, nội dung khác thiết kế + Khoảng trắng bị động khơng gian trống xung quanh bên ngồi trang, vùng trống nội dung thiết kế xuất q trình dàn trang, khơng tham gia vào việc thể ý đồ thiết kế Trong website có loại bố cục nào? Hãy trìnhbày phân tích - Tỷ lệ vàng + Nếu hình ảnh chủ đạo mắt hướng khỏi trang, khơng quay phía nội dung => mắt người dùng rời khỏi nội dung - Bố cục cân + Cân đối xứng: tất yếu tố chiều cao, chiều rộng xếp cách đối xứng thiết kế Bố cục cân đối xứng tạo cảm giác ổn định, an toàn cho người xem, đồng thời bố cục tạo điểm nhấn nằm trung tâm thiết kế + Cân không đối xứng: bố cục mà bên phần tử không nhau, tất yếu tố đặt khơng có đối xứng với Cân bất đối xứng tạo từ việc sử dụng yếu tố màu sắc, kích thước, số lượng… - Bố cục chữ F + Các điểm nhìn người dùng di chuyển theo thứ tự > > > theo thói quen đọc người dùng: Từ trái qua phải, từ xuống + Khi độc giả nhìn thấy thứ quan tâm, họ bắt đầu đọc chúng từ từ hìnhthành điểm nhìn theo cột dọc Kết cuối "sơ đồ" đưa mắt họ cóhình chữ F => Các yếu tố quan trọng logo, menu điều hướng, nội dung đượcđặt lên đầu trang web - Bố cục chữ Z + Nguyên tắc thiết kế Z-layout: đặt chữ Z với điểm dừng lên phần trang web, định hướng mắt nhìn người dùng theo thứ tự chữ Z mà điểm kết thúc (4) nơi đặt nút Call-to-aciton • Điểm 1: Vị trí vàng cho logo thương hiệu • Điểm 2: Thường menu • Vị trí trang: Image Placeholder- phần đặt hình ảnh chủ đạo trang web, thường slider chạy hình ảnh tiêu biểu, giới thiệu ngắn gọn trang web để thu hút ý người dùng • Điểm 3: Nội dung • Điểm 4: Điểm kết Z-Pattern, vị trí vàng cho CTA + Z-layout phù hợp với website thiết kế đơn giản, tinh gọn với mục đích nhằm định hướng người dùng click vào Call-to-Aciton Phác thảo giao diện khung mẫu cho: website tmđt, website giải trí, website cộng đồng, website tin tức… - Website tmđt (Moji) Trang Trang nhiệm vụ Trang - Web cộng đồng (webtretho.com) Trang nhiệm vụ