OVERLAY LÀ GÌ

     

Overlays, dialog boxes, modal windows, light boxes, chúng ta có thể gọi bọn chúng là ngẫu nhiên thứ gì các bạn muốn, là một trong những cửa sổ nhỏ hiện lên giữa màn hình,để đắm đuối sự để ý của bạn dùnglà một mẫu thiết kế được sử dụng (và lạm dụng tương đối nhiều). Trong những ứng dụng, website và thậm chí trên mobile, modal được sử dụng để thú vị sự để ý của fan dùngvào những nhiệm vụ con, nhưng không cần phải tách bóc chúng ra một trang khác. Sử dụng modal một biện pháp đúng mực có thể rất tiện dụng và hiệu quả, nhưng giống hệt như bia của Bỉ hoặc bánh rán Krispy Kreme sử dụngquá nhiều sẽ khiến người dùng cảm giác không khỏe mạnh và bi ai nôn. Hãy đảm bảo an toàn rằng người tiêu dùng của bạn sẽ không cảm giác khó chịu bằng phương pháp xem xét 10 lời khuyên bên dưới đây.Bạn đang xem: Overlay là gì

1. Thực hiện modal ít nhất có thể

Modal là một trong những chàng trai tồi trong trái đất các mẫu kiến thiết UI. Giống như Justin Bieber tạimột buổi tiệc của Hollywood luôn luôn luôn rất cần được trở thành trung trọng tâm của sự để ý sẽ liên tục yêu cầu bạn: " hãy quan sát tôi, hãy nhình tôi, HÃY NHÌN TÔI". Người dùng sẽ buộc phải xử lý modal trước khi rất có thể tiếp tục với không thể truy vấn trang web bên dưới. Thỉnh thoảng đó là một điều tốt, ví dụ điển hình khi người dùng phải xác nhận một hành động quan trọng, nhưng mà trong đa số các trường hợp nó là không quan trọng và chỉ khiến phiền toái. Núm vì áp dụng modal sẽ giỏi hơn nếu bạn hiểnthị văn bản ngay trong trang web. Ví dụ bằng phương pháp mở rộng những phần của trang web, thực hiện static popover hoặc bằng cách chuyển thay đổi giữa những thành phần UI. Bao gồm một bài viết khá tốt về chủ đề này những mẫu thi công để sửa chữa cho các cửa sổ modal.

Bạn đang xem: Overlay là gì

Trang hồ sơ cá thể của LinkedIn là 1 ví dụ hay đến việc sửa chữa thay thế modal (hình mặt dưới). Vắt vì áp dụng modal nó được cho phép người dùng chỉnh sửa một ngôi trường khi bọn họ click vào trường kia ngay vào trang web.


*

LinkedIn được cho phép người sử dụng edit các trường ngay lập tức trên trang cầm vì thực hiện modal

Thật là lạ lúc Twitter thực hiện modal cho việc viết một tin new họ cũng có thể chấp nhận được người cần sử dụng nhập những tin nhắn vào trang của bản thân (hình mặt dưới). Đây là 1 trải nghiệm người dùng giỏi hơn bởi vì người dùng vẫn rất có thể sử dụng trang (ví dụ nhằm copy với paste văn bản) và không khóa trang web như khi sử dụng modal. Cố gắng vì áp dụng modal tôi suy nghĩ sẽ tốt hơn nếu mở rộng thanh điều phối ởphía trên (xem mock-up ở bên dưới) vì rằng fan dùng luôn luôn luôn hoàn toàn có thể nhập tin nhắn trong trang.


*

Twitter áp dụng modal để cho phép người dùng tạo nên một tin mới
*

Twitter sẽ xuất sắc hơn nếu có thể chấp nhận được người cần sử dụng nhập tin nhắn mới ngay trên trang của họ

Modal hoàn toàn có thể hữu ích trong một số trong những trường đúng theo như khi bạn cần người sử dụng phải tương tác trước lúc tiếp tục, hoặc khi mẫu giá bắt buộc trả cho sai lầm là khôn cùng cao. Ví dụ, khi xác thực xóa một sản phẩm gì đó, hoặc nhập một add email để tải về một cuốn ebook.

2. Đừng đột nhiên mở modal.

Đột nhiên mở modal khi người dùng chưa có tác dụng gì y hệt như lẻn ra sau đó 1 ai đó và bỗng nhiên xuất hiện. Điều sẽ là không tối ưu và bạn không lên làm. Một modal luôn luôn mở ra khi chúng ta làm một điều gì đó. Đó hoàn toàn có thể là lựa chọn một nút, click vào một trong những liên kết hoặc lựa chọn một option. Điều này thậm chí áp dụng cho các modal mời khảo sát. Đừng thực hiện modal, gắng vào kia hiển thị lời mời trên một trang mới, hoặc thậm chí tốt hơn là bao gồm lời mời trong thiết yếu trang hiện tại. Một modal cảnh báo người dùng phiên họp của mình sắp chấm dứt là nước ngoài lệ duy nhất màtôi có thể nghĩ ra.

Tại vemaybay24h.net.vn có khóa huấn luyện "Web cơ bạn dạng HTML5, CSS3 và Javascript" dành cho người mới bắt đầu, không học xây dựng hoặc cho hầu hết ai muốn ôn lại kỹ năng và kiến thức căn phiên bản về thiết kế web.

3. Làm tối trang web dưới modal

Khi mở một modal một điều quan trọng là trang web bên dưới phải tương đối tối. Điều này còn có 2 tác dụng. Đầu tiên nó làm cho người dùng để ý vào modal và thứ hai là cho những người dùng biết rằng website hiện tại ko hoạt động. Hãy cẩn thận với việc áp dụng màu. Vượt tối, người tiêu dùng sẽ không thể khẳng định được trang web hiện tại. Quá sáng, bạn sử dụng hoàn toàn có thể nghĩ là trang web đang hoạt động và thậm chí hoàn toàn có thể không để ý đến modal đầu tiên.

Xem thêm: Username Là Gì ? Định Nghĩa Và Giải Thích Ý Nghĩa Username Là Gì

4. được cho phép người dùng click (hoặc gõ) vào ngẫu nhiên đâu

Modal gồm 2 thành phần chính. Đầu tiên hấp dẫn sự chăm chú vào modal cái buộc người tiêu dùng tương tác với chúng trước lúc tiếp tục. Thứ 2 là phần phía bên cạnh modal cái được cho phép người sử dụng click hoặc gõ để đóng modal. Tất cả một quy tắc thông thường là bạn sẽ chỉ sử dụng modal mang đến cáctương tác quan tiền trọng. Ví dụ khi yêu cầu bạn sử dụng xác nhận họ thực sự ao ước xóa một tài khoản, hoặc họthực sự đồng ý với luật pháp và điều kiện mà họđăng ký (cái mà họ sẽ gọi thật kỹ, như vớ cả họ sẽ làm). Trong hầu như các trường hợp cách sử dụng tốt nhất có thể phần phía ko kể modal là được cho phép người cần sử dụng click (hoặc gõ) để đóng/hủy bỏ nó.

5. Luôn luôn luôn cung ứng một tùy lựa chọn đóng rõ ràng

Tiếp theo phần trước, không nên chỉ sử dụng kĩ năng click (hoặc gõ) ở bên ngoài để đóng góp modal, cũng nên luôn luôn luôn gồm một tùy chọn đóng ở góc cạnh trên mặt phải. Một ý tưởng phát minh hay nữa là bao hàm thêm tùy chọn đóng hoặc hủy trong modal, thường là 1 trong liên kết hoặc nút. Điều này giúp cho người dùng rất có thể quay về trang nơi bắt đầu một phương pháp dễ dàng.


*

John Lewis bao gồm một tùy chọn đóng cụ thể ở góc bên trên bên nên của modal

6. Đừng bao gồm quá những bước

Nếu một liên tưởng đủ phức hợp với nhiều cách bắt buộc, nó nên một trang riêng,sẽ gồm thêm nhiều khoảng trống và linh hoạt rộng so với cùng 1 modal. Nỗ lực tránh thực hiện modal với nhiều bước như hình sau đây từ ngân hàng Barclays Bank. Phân chia một nhiệm vụ phức tạpthành những bước là một ý tưởng hay vời, nhưng lại nói phổ biến nó là một trong những dấu hiệu cho thấy thêm một thứ nào đó quá tinh vi để yêu cầu tín đồ dùng ngừng trong kích thước của modal.


*

Cố chũm tránh con quái thú modal với tương đối nhiều bước như của bank Barclays

7. Đừng nhồi nhét quá nhiều thứ

Bạn không nên cố gắng nhồi nhét quá nhiều thứ vào modal. Hãy giữ mang lại modal rõ ràng và solo giản. Nếu như khách hàng nhận thấy mình đang nỗ lực nhồi nhét vô số thứ vào modal nó thường tức là modal chưa hẳn là giải pháp thiết kế giỏi nhất.

8. Bao gồm nhiều thông tin quan trọng

Một điều đặc trưng là modal không che khuất những thông tin có thể hữu ích cho người dùng chẳng hạn như giá cả, ngày, với danh sách. Trong thực tiễn nhiều thông tin quan trọng đặc biệt lên bên trong modal. Lấy ví dụ như một modal yêu cầu người dùng xác nhận xóa một vài ba mục, nên liệt kê danh sách các mục vẫn xóa.

9. Nỗ lực tránh thực hiện modal cho cácthiết kế di động

Tốt nhất là cần tránh áp dụng modal cho các xây dựng di động chính vì với màn hình nhỏ tuổi một modal đang cần cục bộ chiều rộng màn hình, vậy nguyên nhân không thực hiện một trang riêng? nếu như modal được áp dụng cho một xây đắp responsivesau kia sẽ dễ dàng hơnđể giữ nguyên các hành vi trên các thiết bị. Bởi vì vậy cần bảo đảm an toàn mọi modal được sử dụng sẽ thân mật và gần gũi với di dộng. Lấy ví dụ Bootstrap modals (hình mặt dưới) làm cho việc xuất sắc trên cả desktop cùng di động. Khi thực hiện modal trên mobile người dùng thường nên cuộn lên và xuống, một ý tưởng hay là bao hàm hành động đóng/ hủy ở cả trên với dưới.

Xem thêm: Kích Thước Khổ Giấy A0 Gấp Bao Nhiêu Lần Khổ Giấy A3, Giấy A0 Gấp Bao Nhiêu Lần A3

10. Đảm bảo modal có thể truy cập

Khả năng truy tìm cập cụ thể là một yếu hèn tố quan trọng đặc biệt cần xem xet cho phần nhiều thiết kế vì vậy điều quan trọng là bảo vệ rằng hầu hết modal được sử dụng rất có thể truy cập. Ví dụ, bảo vệ rằng tập trung chính xác vào các đối tượng người tiêu dùng trong modal khi mở (thay vì trang mặt dưới) vì người dùng rất có thể điều hướng bằng cách sử dụng bànphím. Cũng cần chắc hẳn rằng rằng tùy lựa chọn đóng tất cả một nhãn cân xứng với các thiết bị đọc. Một bài xích biết khá xuất xắc về chủ thể này là Làm cụ nào nâng cấp khả năng truy vấn của những modal,tôi khuyên chúng ta lên gọi nó.