Bộ 30+ câu hỏi trắc nghiệm thiết kế Website (Web) online – Bộ 4

Thuộc tính 'display: flex' trong CSS kích hoạt Flexbox Layout, một mô hình bố cục mạnh mẽ giúp tạo ra các bố cục linh hoạt và dễ dàng căn chỉnh các phần tử con trong một container. Flexbox đặc biệt hữu ích cho việc xây dựng các bố cục phức tạp và responsive.

Typography là nghệ thuật và kỹ thuật sắp xếp chữ để làm cho văn bản trở nên dễ đọc, dễ hiểu, và hấp dẫn về mặt thị giác. Các yếu tố quan trọng của Typography bao gồm font chữ, kích thước chữ, khoảng cách dòng, khoảng cách chữ, màu sắc chữ (trong một mức độ nhất định liên quan đến độ tương phản), và nhiều yếu tố khác liên quan đến hình thức và cách trình bày văn bản. 'Âm thanh của chữ khi đọc' không phải là một yếu tố của Typography trong thiết kế web.

Wireframe là bản phác thảo bố cục trang web ở mức độ thấp (low-fidelity), tập trung vào cấu trúc nội dung, thứ tự ưu tiên và chức năng chính. Mục đích của wireframe là giúp định hình khung sườn trang web trước khi đi vào thiết kế chi tiết về giao diện và đồ họa.

SVG (Scalable Vector Graphics) là định dạng hình ảnh vector dựa trên XML. Ưu điểm chính của SVG so với hình ảnh raster (JPEG, PNG) là khả năng масштабирование (scalability) vô hạn mà không bị vỡ hình hay giảm chất lượng khi phóng to. SVG thường có kích thước file nhỏ hơn, đặc biệt là cho các hình minh họa, biểu tượng và logo, và rất phù hợp cho thiết kế web responsive.

A/B testing là phương pháp thử nghiệm so sánh hai phiên bản (A và B) của một yếu tố thiết kế web (ví dụ: tiêu đề, nút kêu gọi hành động, bố cục trang) để xem phiên bản nào hoạt động tốt hơn về một mục tiêu cụ thể (ví dụ: tỷ lệ nhấp chuột, tỷ lệ chuyển đổi). Dữ liệu thu thập được từ A/B testing giúp đưa ra quyết định thiết kế dựa trên bằng chứng thực tế.

Whitespace (khoảng trắng) là khoảng trống xung quanh các thành phần trên trang web. Nó đóng vai trò quan trọng trong việc cải thiện khả năng đọc, tạo sự rõ ràng, phân cấp thông tin và giúp người dùng tập trung vào nội dung chính. Khoảng trắng không phải là 'vô nghĩa' mà là một yếu tố thiết kế chủ động, giúp trang web trở nên dễ nhìn và dễ sử dụng hơn.

Gestalt Principles là một tập hợp các nguyên tắc tâm lý học thị giác mô tả cách con người tự nhiên nhận thức và tổ chức các yếu tố thị giác thành các nhóm hoặc hình dạng thống nhất. Các nguyên tắc này (ví dụ: gần gũi, tương đồng, liên tục, khép kín) được ứng dụng trong thiết kế UX/UI để tạo ra giao diện trực quan, dễ hiểu và hiệu quả hơn.

Call to Action (CTA) là lời kêu gọi hoặc hướng dẫn người dùng thực hiện một hành động mong muốn trên trang web, ví dụ: 'Mua ngay', 'Đăng ký ngay', 'Tìm hiểu thêm', 'Liên hệ với chúng tôi'. CTA thường được thiết kế nổi bật và đặt ở vị trí dễ thấy để khuyến khích người dùng tương tác và đạt được mục tiêu kinh doanh.

Liquid layout (bố cục lỏng) là một trong những kiểu bố cục quan trọng để tạo ra giao diện responsive. Bố cục lỏng sử dụng các đơn vị phần trăm (%) hoặc viewport (vw, vh) để định kích thước các phần tử, giúp trang web tự động điều chỉnh và thích ứng với kích thước màn hình khác nhau.

Flat Design là phong cách thiết kế tối giản, tập trung vào sự đơn giản và rõ ràng. Nó loại bỏ các hiệu ứng 3D, đổ bóng, gradient và các chi tiết trang trí phức tạp, thay vào đó sử dụng các màu sắc phẳng, typography rõ ràng và các yếu tố giao diện đơn giản. Mục tiêu là tạo ra giao diện trực quan, dễ sử dụng và tải nhanh.

Thuộc tính 'z-index' trong CSS được sử dụng để kiểm soát thứ tự xếp chồng (stacking order) của các phần tử HTML khi chúng chồng lên nhau. Phần tử có 'z-index' giá trị cao hơn sẽ nằm phía trên phần tử có giá trị thấp hơn.

User Experience (UX) tập trung vào toàn bộ trải nghiệm của người dùng khi sử dụng một sản phẩm hoặc dịch vụ, trong trường hợp này là trang web. UX bao gồm sự dễ sử dụng, hiệu quả, sự hài lòng và cảm xúc của người dùng trong quá trình tương tác với trang web. Nó không chỉ giới hạn ở giao diện đẹp mà còn bao gồm cả tính hữu ích và trải nghiệm người dùng tổng thể.

Để cải thiện trải nghiệm người dùng khi điền form trên web, quan trọng nhất là giữ cho form ngắn gọn, dễ điền, chỉ yêu cầu thông tin thực sự cần thiết, và cung cấp phản hồi rõ ràng (ví dụ: thông báo lỗi, xác nhận thành công) cho người dùng. Form quá dài, phức tạp hoặc không rõ ràng sẽ gây khó chịu và làm giảm tỷ lệ hoàn thành form.

Viewport meta tag là một thẻ HTML quan trọng trong thiết kế responsive. Nó được đặt trong phần `` của trang web và cho phép các nhà phát triển web kiểm soát cách trình duyệt di động hiển thị trang web, đặc biệt là thiết lập kích thước viewport (khu vực hiển thị trang web) và tỷ lệ thu phóng ban đầu để trang web hiển thị đúng cách trên các kích thước màn hình khác nhau.

Thẻ `

Semantic HTML (HTML ngữ nghĩa) là cách viết mã HTML sao cho các thẻ HTML được sử dụng đúng mục đích và ý nghĩa của chúng, không chỉ để định dạng giao diện. Ví dụ, sử dụng `

Mobile-First là phương pháp thiết kế bắt đầu từ trải nghiệm người dùng trên thiết bị di động (màn hình nhỏ) trước, sau đó mở rộng và tối ưu cho màn hình lớn hơn (desktop). Cách tiếp cận này đảm bảo trang web hoạt động tốt trên các thiết bị có tài nguyên hạn chế và tập trung vào nội dung cốt lõi.

Lazy Loading là kỹ thuật trì hoãn tải hình ảnh cho đến khi chúng sắp xuất hiện trong khung nhìn (viewport) của người dùng. Điều này giúp giảm lượng dữ liệu phải tải ban đầu khi trang web được truy cập, cải thiện tốc độ tải trang ban đầu, đặc biệt là trên các trang web có nhiều hình ảnh, và nâng cao trải nghiệm người dùng.

Tối ưu hóa hình ảnh cho web nhằm mục đích giảm kích thước file hình ảnh (ví dụ: JPEG, PNG, WebP) để trang web tải nhanh hơn, tiết kiệm băng thông và cải thiện trải nghiệm người dùng. Quá trình này thường bao gồm nén hình ảnh, chọn định dạng phù hợp và điều chỉnh kích thước hình ảnh mà vẫn đảm bảo chất lượng hình ảnh hiển thị tốt trên web.

Tính thân thiện với thiết bị di động (mobile-friendliness) là một yếu tố xếp hạng quan trọng trong SEO, đặc biệt là đối với Google. Google ưu tiên các trang web tối ưu cho thiết bị di động trong kết quả tìm kiếm trên di động vì số lượng người dùng truy cập internet bằng điện thoại ngày càng tăng. Trang web mobile-friendly giúp cải thiện trải nghiệm người dùng trên di động và tăng khả năng được xếp hạng cao hơn.

Dark Mode (chế độ tối) là xu hướng thiết kế giao diện sử dụng tông màu tối chủ đạo (ví dụ: nền đen hoặc xám đậm, chữ trắng hoặc sáng màu). Lợi ích chính của Dark Mode bao gồm giảm mỏi mắt, đặc biệt trong môi trường ánh sáng yếu, và tiết kiệm pin trên các thiết bị sử dụng màn hình OLED (vì màn hình OLED tiêu thụ ít năng lượng hơn khi hiển thị màu đen). Ngoài ra, Dark Mode cũng có thể mang lại vẻ ngoài hiện đại và phong cách cho trang web.

Mặc dù CMS như WordPress có nhiều ưu điểm, nhưng không có hệ thống nào đảm bảo 'bảo mật website tuyệt đối'. CMS vẫn có thể có lỗ hổng bảo mật và cần được cập nhật thường xuyên để vá lỗi. Lựa chọn 2 là một tuyên bố phóng đại và không thực tế. Các lựa chọn 1, 3, 4 đều là những lợi ích chính xác của việc sử dụng CMS.

Breadcrumbs là hệ thống điều hướng phụ trợ, thường hiển thị phía trên nội dung chính, dưới dạng một chuỗi các liên kết dạng văn bản, ví dụ: 'Trang chủ > Danh mục > Sản phẩm'. Breadcrumbs giúp người dùng dễ dàng xác định vị trí của mình trên website, hiểu cấu trúc website và di chuyển ngược lên các trang cấp cao hơn.

Đơn vị 'px' (pixel) là đơn vị đo chiều dài tuyệt đối trong CSS, có nghĩa là nó luôn có kích thước cố định, không phụ thuộc vào kích thước font chữ gốc hay kích thước viewport. Các đơn vị khác như 'em', 'rem', 'vw' là đơn vị tương đối, kích thước của chúng thay đổi dựa trên các yếu tố khác.

Progressive Enhancement là phương pháp tiếp cận xây dựng web đảm bảo trang web hoạt động cơ bản trên mọi trình duyệt (kể cả trình duyệt cũ), sau đó 'nâng cấp' dần trải nghiệm cho các trình duyệt hiện đại hơn bằng cách thêm các tính năng và hiệu ứng tiên tiến. Điều này đảm bảo tính truy cập rộng rãi và trải nghiệm tốt nhất có thể cho mọi người dùng.

Microinteractions là những khoảnh khắc tương tác nhỏ và tinh tế trong giao diện người dùng, ví dụ: hiệu ứng khi nhấp vào nút, hoạt ảnh tải, phản hồi khi nhập liệu. Mục đích của microinteractions là cung cấp phản hồi ngay lập tức và trực quan cho người dùng về hành động của họ, làm cho trải nghiệm người dùng trở nên thú vị, trực quan và hấp dẫn hơn.

Developer Tools (Công cụ dành cho nhà phát triển) được tích hợp sẵn trong hầu hết các trình duyệt web hiện đại (Chrome DevTools, Firefox Developer Tools, v.v.). Chúng cung cấp các tính năng mạnh mẽ để kiểm tra mã HTML, CSS, JavaScript, theo dõi hoạt động mạng, hiệu năng và gỡ lỗi mã JavaScript một cách hiệu quả.

'Above the fold' là thuật ngữ xuất phát từ báo in, chỉ phần nội dung quan trọng nhất hiển thị ngay lập tức khi trang web được tải, mà không cần người dùng phải cuộn chuột xuống. Đây là vị trí quan trọng để thu hút sự chú ý của người dùng.

Keyframes trong CSS Animations cho phép định nghĩa các điểm mốc thời gian trong một chuỗi hoạt hình và chỉ định giá trị thuộc tính CSS tại mỗi điểm mốc đó. Điều này cho phép tạo ra các hiệu ứng hoạt hình phức tạp, nhiều bước và kéo dài theo thời gian, không chỉ giới hạn ở chuyển tiếp giữa hai trạng thái như transitions.

Văn bản thay thế (alt text) cho hình ảnh là yếu tố cực kỳ quan trọng cho khả năng truy cập web. Alt text giúp người dùng khiếm thị hoặc người dùng không tải được hình ảnh vẫn hiểu được nội dung của hình ảnh thông qua trình đọc màn hình hoặc văn bản thay thế hiển thị. Điều này đảm bảo mọi người đều có thể tiếp cận thông tin trên trang web.