Download Đề cương thiết kế web and more Exams Web Application Development in PDF only on Docsity!
ỨNG DỤNG THIẾT KẾ WEB
- Trình bày khái niệm website? Các thành phần cơ bản của website....................................... 1
- 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 1.0, web 2.0, web 3.0. Cho ví dụ...................................................................... 2
- Quy trình thiết kế website...................................................................................................... 4
- Trình bày các nguyên tắc thiết kế UX trong website. Cho ví dụ........................................... 5
- Vai trò của điều hướng trong thiết kế website? Trình bày các cách phân loại điều hướng?.. 6
- Các cách xác định vị trí hiện tại của người dùng................................................................... 8
- Thiết kế dàn trang trên website cần quan tâm những yếu tố nào?......................................... 9
- Trong website có những loại bố cục nào? Hãy trình bày và 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 tức…...................................................................................................................... 14 1. Trình bày khái niệm website? Các thành phần cơ bản của website.
- Khái niệm website: Website là một tập hợp các trang web bao gồm hình ảnh, file, âm thanh... thường chỉ nằm trong một tên miền (domain name) hoặc tên miền phụ (subdomain). Một website phải được đặt trên ít nhất 1 máy chủ.
- Các thành phần cơ bản của website
Tên miền là một đường dẫn tới trang web hay còn được gọi là địa chỉ website. Tên miền thay thế cho các địa chỉ IP của máy chủ (là những con số khó nhớ của mỗi máy chủ trên Internet) giúp cho con người dễ dàng ghi nhớ, truy cập và tìm kiếm.
Web hosting: Là dịch vụ lưu trữ và chia sẻ dữ liệu trực tuyến. Để người dùng có thể truy cập trang web thì cần phải thuê web hosting và đặt dữ liệu trang web ấy vào đó để người dùng có thể truy cập vào trang.
Sourse code: là mã nguồn của web, hiện thị nội dung và chức năng của web cho phép người xem có thể đọc và truy cập. Source code do các lập trình viên tạo ra dựa trên các câu lệnh, các câu lệnh yêu cầu web server thực hiện và hiển thị nội dung trên website.
**2. Trình bày các 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 tĩnh, động (Phân loại theo dữ liệu)
- Website tĩnh: được hiểu theo nghĩa là dữ liệu không thay đổi thường xuyên. Với dạng web này để thay đổi nội dung trên trang web người sở hữu phải truy cập trực tiếp vào các mã lệnh để thay đổi thông tin, người dùng hầu như không thể tương tác với trang web
Ưu điểm: Chạy nhanh, tốn ít tài nguyên máy chủ, gần như không thể hack, chi phí thấp Nhược điểm: Website tĩnh tương tự 1 tờ báo giấy, không có sự tương tác giữa người truy cập và website, quý khách không thể tự thay đổi nội dung website
- Website động: là những website có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm phát triển web. Với web động, thông tin hiển thị được gọi ra từ một cơ sở dữ liệu khi người dùng truy vấn tới một trang web. Website động có sự tương tác 2 chiều giữa người truy cập, người quản lý và website.
Ví dụ: Người truy cập đặt hàng, gửi liên hệ, gửi bài viết, người quản trị website có thể sửa bài viết, xóa bài viết Ưu điểm, khả năng 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 ra các website với nhiều mục đích sử dụng, thỏa mãn nhu cầu truy cập của 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 1 chiều từ website đến người xem, chỉ đọc
-> Ví dụ : Britannica online…
- Web 2.0: có tính tương tác cao, bất kì ai cũng có thể tham gia xây dựng nội dung website
-> Ví dụ : Facebook, Youtube, Reddit, Wikipedia, Twitter…
- Web 3.0: kết nối các website với nhau, hiểu được hành vi của người dùng, biết họ muốn gì và cần tìm gì
Ví dụ : one.org
- Các website cá nhân tồn tại tùy theo quyết định của một số người hoặc một nhóm nào đó.
Ví dụ : giangoi.com
- Hướng văn bản: trang web được 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 bản hướng tới toàn diện về 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 đi so với tiêu chuẩn, phi thực tế
3. 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)
Phân tích yêu cầu: xác định mục tiêu người dùng, khách hàng -> xđ các tính năng cần thiết -> đề xuất và phân tích Các điều lệ dự án: các thông tin đã thống nhất, nó là tài liệu được sử dụng tham khảo trong suốt dự án Kiến trúc thông tin: sắp 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 bản quyền… Lập kế hoạch thực hiện: tổ chức nhân sự thực hiện
Wireframe Visual design Xét duyệt Mã hóa bằng HLML/ CSS
Phát triển Thử nghiệm Đẩy nội dung lên website
Rà soát lại toàn bộ sản phẩm Chuyển sang máy chủ Chạy thử nghiệm Kiểm tra trên các trình duyệt Bàn giao khách hàng
4. Trình bày các nguyên tắc thiết kế UX trong website. Cho ví dụ.
- Nguyên lý 7 ± 2 (George A. Miller): Số lượng “khối” nhận thức của một người bình thường có thể giữ trong bộ nhớ làm việc (một bộ phận của bộ nhớ ngắn hạn) là 7 ± 2 (từ 5-9)
=> Áp dụng nguyên tắc 7±2 vào thiết kế độ sâu và rộng cho menu website: các yếu tố thông tin trong 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 càng trở nên khó khăn khi thao tác.
- Nguyên tắc 3 CLICK: Khi cần tìm bất kì thông tin gì trên website thì thông tin đó phải được tìm thấy trong vòng 3 click chuột. Nếu không khách hàng sẽ mất kiên nhẫn và bỏ đi
Một hệ thống có thời gian đáp ứng là 0,1s được cảm nhận là phản ứng trực tiếp
Thời gian chờ đợi đến 3s được coi là không ảnh hưởng đến suy nghĩ của con người
Sau 8 – 10s, người dùng thường bắt đầu quan tâm đến các hoạt động xung quanh
Nên có giới hạn 8 – 10s cho người sử dụng để xác định ý chính cơ bản của nội dung hoặc mục đích sau khi tải của một trang
Có 2 loại điều hướng cấu trúc: Điều hướng chính và điều hướng vị trí Điều hướng chính o Điều hướng chính đại diện cho các trang cấp cao nhất của cấu trúc website hoặc các trang chỉ dưới trang chủ. o Vị trí đặt điều hướng chính: xuất hiện trong vị trí phù hợp không thay đổi trên tất cả các trang của website o Vai trò của điều hướng chính Cung cấp một cái nhìn tổng quan về website Nhắc nhở nơi người dùng đang ở trong một website Cho phép người dùng chuyển chủ đề hoặc có thể thiết lập lại đường dẫn điều hướng. Nó giúp người dùng khi bị gián đoạn trong khi điều hướng và nhắc nhở nơi họ đang ở trong một website. Điều hướng vị trí : Điều hướng vị trí được sử dụng để truy cập các cấp thấp hơn trong một cấu trúc, bên dưới trang điều hướng chính 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
2. Điều hướng liên kết : tạo các kết nối quan trọng giữa các cấp của một hệ thống phân cấp hoặc cấu trúc website.
Có 3 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; có thể là chuyển sang một nội dung khác hoặc tới một website mới o Vị trí của điều hướng ngữ cảnh: điều hướng nhúng và liên kết liên quan Liên kết nhanh o Cung cấp quyền truy cập vào nội dung hoặc các khu vực quan trọng của trang web. o Nó có thể liên kết đến một trang web phụ hoặc thậm chí đến một website hoàn toàn mới. o Liên kết nhanh thường xuất hiện ở đầu hoặc ở hai bên của trang. Trên trang chủ, nó có thể ở vị trí nổi bật trong khu vực riêng của mình, nhưng trên các trang con nó có thể nằm ở drop – down hoặc trong menu động.
Điều hướng footer o Nằm ở dưới cùng của trang o Thường được đại diện bởi các liên kết văn bản. o Nó thường truy cập vào một trang duy nhất không có cấu trúc phân cấp thêm. o Chứa thông tin bổ sung không liên quan với chủ đề chính của website, chẳng hạn như thông tin bản quyền, điều khoản, điều kiện, và các khoản tín dụng website o Lợi thế của điều hướng footer là nó không xâm nhập vào nội dung hoặc chức năng website.
3. Điều hướng tiện ích
Dùng để kết nối các công cụ, tính năng hỗ trợ người dùng trong việc sử dụng website và thường không nằm trong hệ thống phân cấp chủ đề của website Điều hướng tiện ích và điều hướng chính thường thường xuất hiện cùng nhau trong một khu vực định vị Các dạng khác của điều hướng tiện ích: Điều hướng ngoài website : liên kết đến các website khác của công ty, thường đặt ở phía bên phải của 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 : đối với các website đa ngôn ngữ, đa quốc gia thì liên kết tiện ích cho phép khách hang chọn ngôn ngữ và quốc gia của họ. Điều hướng nội bộ trang : một số trang web có thể rất dài, điều hướng nội bộ cung cấp một cái nhìn tổng thể về trang và cho phép người dùng di chuyển đến một phần khác của trang => cung cấp một cái nhìn tổng quan về nội dung của trang.
6. Các cách xác định vị trí hiện tại của người dùng
Tỷ lệ vàng
Nguyên tắc 1/
Looking room
Bố cục cân bằng
Bố cục chữ F, Z
Hệ thống lưới chính là hệ thống quản lý phải xác định trước khi quyết định thiết kế
Tỷ lệ là giá trị cốt lõi của hệ thống lưới
Lưới giúp trang web trở nên gọn gàng và ngay ngắn ngay cả khi thông tin dày đặc
Các hệ thống lưới dùng phổ biến là hệ thống lưới 12 cột, 16 cột, 24 cột
- Khoảng trắng: Khoảng trắng được chia thành 2 loại
Khoảng trắng chủ động là không gian cố tình bỏ trống của một bố cục để thể hiện một ý đồ nào đó của thiết kế. Nhấn mạnh làm nổi bật một yếu tố hay nội dung nào đó của thiết kế, hoặc đơn giản là khoảng nghỉ mắt của người đọc, từ đó dẫn người đọc đến một yếu tố, nội dung khác của thiết kế.
Khoảng trắng bị động là không gian trống xung quanh bên ngoài của trang, hoặc vùng trống của nội dung thiết kế xuất hiện trong quá trình dàn trang, nó không tham gia vào việc thể hiện ý đồ thiết kế.
8. Trong website có những loại bố cục nào? Hãy trình bày và phân tích
Mắt của chúng ta thường có xu hướng hướng mắt nhìn vào trung tâm của đường xoắn ốc, nơi mà các điểm cụ thể nhất, chi tiết nhất được thể hiện => thiết kế bố cục nội dung của thiết kế sao cho hướng về trung tâm của đường xoắn ốc.
Kiểu bố cục hai khung ảnh này rất thích hợp trong thiết kế Web. Nó tạo ra một Website gọn gàng, dễ đọc và có bố cục được tổ chức tốt. Nó đem đến cho người đọc cảm giác ngăn nắp, cân bằng và trật tự trong Website.
- Khi đặt chủ thể (sản phẩm…) nơi các đường kẻ giao nhau thì tạo điểm nhấn mạnh cho chủ thễ hơn là đặt tại trung tâm của ảnh
- Looking room: Là khoảng không gian mà chủ thể đang hướng tới trong khung => Hướng mắt người dùng vào nội dung
- Sử dụng hình ảnh chủ đạo (thường là người, con vật…) đang hướng mắt (quay về) phía nội dung
Các điểm nhìn của người dùng sẽ di chuyển lần lượt theo thứ tự 1 > 2 > 3 > 4 theo đúng thói quen đọc của người dùng: Từ trái qua phải, từ trên xuống dưới.
Khi độc giả nhìn thấy thứ mình quan tâm, họ bắt đầu đọc chúng từ từ và hình thành điểm nhìn theo cột dọc. Kết quả cuối cùng "sơ đồ" đưa mắt của họ sẽ có hình chữ F.
=> Các yếu tố quan trọng như logo, menu điều hướng, nội dung chính ... được đặt lên đầu trang web
- Nguyên tắc thiết kế Z-layout: đặt một chữ Z với 4 điểm dừng lên phần đầu tiên của trang web, định hướng mắt nhìn của người dùng đi theo thứ tự của chữ Z mà ở điểm kết thúc (4) sẽ là 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 là menu
Vị trí giữa trang: Image Placeholder- phần đặt hình ảnh chủ đạo của trang web, thường là một slider chạy những hình ảnh tiêu biểu, giới thiệu ngắn gọn về trang web để thu hút sự chú ý của người dùng
Điểm 3: Nội dung chính
Điểm 4: Điểm kết của Z-Pattern, vị trí vàng cho CTA.
- Z-layout phù hợp nhất với những 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
9. 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…
Trang con
Trang nhiệm vụ
Trang con
- Web cộng đồng (webtretho.com)
