Overlays Là Gì

Overlays, dialog boxes, modal windows, light boxes, bạn có thể Gọi chúng là bất kỳ sản phẩm gì bạn muốn, là một cửa sổ nhỏ tuổi hiện hữu giữa screen,nhằm hấp dẫn sự để ý của bạn dùnglà 1 trong chủng loại thi công được thực hiện (và lạm dụng quá hơi nhiều). Trong những ứng dụng, website và thậm chí là trên thiết bị di động, modal được thực hiện để duyên dáng sự để ý của tín đồ dùngvào các trách nhiệm bé, nhưng không nhất thiết phải bóc tách bọn chúng ra một trang không giống. Sử dụng modal một biện pháp đúng mực rất có thể hết sức tiện lợi và tác dụng, nhưng lại y như bia của Bỉ hoặc bánh rán Krispy Kreme sử dụngvô số đã khiến cho người tiêu dùng cảm thấy không khỏe khoắn và bi thảm ói. Hãy đảm bảo rằng người tiêu dùng của các bạn sẽ không cảm giác giận dữ bằng cách chăm chú 10 lời khuyên ổn tiếp sau đây.

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

1. Sử dụng modal tối thiểu tất cả thể

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

Trang làm hồ sơ cá nhân của LinkedIn là một ví dụ tốt mang lại bài toán sửa chữa modal (hình mặt dưới). Tgiỏi vì sử dụng modal nó cho phép người dùng sửa đổi một trường Khi bọn họ clichồng vào trường đó ngay vào website.


*
LinkedIn chất nhận được người tiêu dùng edit các ngôi trường tức thì trên trang vậy bởi vì sử dụng modal

Thật là kỳ lạ Khi Twitter áp dụng modal mang đến vấn đề viết một tin new chúng ta cũng chất nhận được người tiêu dùng nhập các tin nhắn vào trang của chính mình (hình bên dưới). Đây là 1 trong đề xuất người tiêu dùng xuất sắc hơn chính vì người dùng vẫn có thể sử dụng trang (ví dụ nhằm copy và paste văn bản) và ko khóa trang web như lúc thực hiện modal. Tgiỏi do sử dụng modal tôi nghĩ sẽ giỏi rộng giả dụ không ngừng mở rộng tkhô nóng điều hướng ởphía trên (coi mock-up ngơi nghỉ mặt dưới) do rằng người tiêu dùng luôn luôn luôn hoàn toàn có thể nhập tin nhắn trong trang.


*
Twitter sử dụng modal nhằm chất nhận được người tiêu dùng tạo ra một tin mới
*
Twitter đang tốt hơn ví như được cho phép người tiêu dùng nhập lời nhắn bắt đầu ngay lập tức trên trang của họ

Modal có thể hữu ích trong một số ngôi trường đúng theo như khi chúng ta buộc phải người sử dụng bắt buộc can hệ trước khi liên tiếp, hoặc khi chiếc giá bán yêu cầu trả mang lại sai lạc là rất lớn. ví dụ như, khi xác thực xóa một vật dụng gì đấy, hoặc nhập một cửa hàng gmail nhằm tải về một cuốn nắn ebook.

2. Đừng đột nhiên msinh hoạt modal.

Đột nhiên msinh sống modal khi người tiêu dùng không làm cái gi hệt như lẻn ra sau đó 1 ai kia cùng tự nhiên lộ diện. Điều chính là ko hoàn hảo với chúng ta ko lên có tác dụng. Một modal luôn luôn lộ diện khi chúng ta làm một điều nào đó. Đó có thể là lựa lựa chọn một nút ít, cliông chồng vào một trong những link hoặc lựa chọn 1 option. Vấn đề này thậm chí là áp dụng cho những modal mời khảo sát. Đừng sử dụng modal, cố gắng vào kia hiển thị lời mời trên một trang new, hoặc thậm chí còn tốt rộng là bao hàm lời mời trong chính trang bây chừ. Một modal cảnh báo người dùng phiên họp của họ chuẩn bị dứt là ngoại lệ độc nhất màtôi hoàn toàn có thể suy nghĩ ra.


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

Xem thêm: Cập Nhật Liên Minh Huyền Thoại Bị Đứng, Cập Nhật Thủ Công Lmht Qua Garena Pc


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

khi mở một modal một điều quan trọng là website dưới đề nghị khá buổi tối. Điều này còn có 2 chức năng. trước hết nó có tác dụng cho tất cả những người dùng để ý vào modal cùng thứ 2 là cho những người dùng hiểu được website bây giờ ko vận động. Hãy cẩn trọng cùng với bài toán áp dụng color. Quá buổi tối, người sử dụng sẽ không còn thể xác định được website hiện thời. Quá sáng sủa, người tiêu dùng hoàn toàn có thể nghĩ rằng trang web đã vận động với thậm chí là có thể ko để ý cho modal thứ nhất.

4. Cho phxay người dùng click (hoặc gõ) vào bất kỳ đâu

Modal tất cả 2 nhân tố bao gồm. trước hết say mê sự để ý vào modal chiếc buộc người sử dụng xúc tiến cùng với bọn chúng trước lúc thường xuyên. Thứ đọng 2 là phần phía ngoại trừ modal mẫu có thể chấp nhận được người dùng clichồng hoặc gõ nhằm đóng modal. Có một quy tắc tầm thường là các bạn sẽ chỉ áp dụng modal mang đến cácxúc tiến đặc trưng. lấy một ví dụ Khi yên cầu người sử dụng xác thực họ đích thực ý muốn xóa một tài khoản, hoặc họthực sự gật đầu cùng với luật pháp với điều kiện mà lại họĐK (loại mà họ đang gọi thật kỹ, như toàn bộ họ đã làm). Trong đa số những trường đúng theo phương pháp sử dụng tốt nhất phần phía ko kể modal là có thể chấp nhận được người dùng cliông xã (hoặc gõ) để đóng/hủy vứt nó.

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

Tiếp theo phần trước, không nên chỉ có thể thực hiện tài năng click (hoặc gõ) làm việc bên phía ngoài nhằm đóng modal, cũng đề nghị luôn luôn luôn bao gồm một tùy lựa chọn đóng góp ở góc bên trên mặt nên. Một ý tưởng xuất xắc nữa là bao hàm thêm tùy lựa chọn đóng góp hoặc bỏ vào modal, thường xuyên là một trong links hoặc nút ít. Điều này giúp cho những người dùng rất có thể trở lại trang gốc một biện pháp dễ dàng.


*
John Lewis bao gồm một tùy chọn đóng góp cụ thể ở góc cạnh trên bên đề xuất của modal

6. Đừng bao gồm rất nhiều bước

Nếu một xúc tiến đầy đủ tinh vi với tương đối nhiều bước nên, nó buộc phải một trang riêng rẽ,sẽ sở hữu được thêm các không gian cùng linch hoạt rộng so với một modal. Cố nắm tránh áp dụng modal với nhiều bước nhỏng hình sau đây từ bank Barclays Bank. Chia một trọng trách phức tạpthành nhiều bước là 1 ý tưởng phát minh hoàn hảo nhất, nhưng nói tầm thường nó là một trong những dấu hiệu cho thấy thêm một trang bị nào đó thừa phức tạp để hưởng thụ người dùng xong vào kích cỡ của modal.


*
Cố gắng rời con quái vật modal với rất nhiều bước nhỏng của ngân hàng Barclays

7. Đừng nhồi nhét rất nhiều thứ

quý khách tránh việc nỗ lực nhồi nhét quá nhiều trang bị vào modal. Hãy giữ lại mang lại modal cụ thể và dễ dàng. Nếu các bạn phân biệt mình vẫn nỗ lực nhồi nhét vô số thiết bị vào modal nó thường tức là modal không hẳn là giải pháp xây đắp rất tốt.

8. Bao gồm nhiều đọc tin quan trọng

Một điều quan trọng là modal không bịt chết thật những ban bố có thể hữu dụng cho những người cần sử dụng ví dụ như Ngân sách, ngày, với danh sách. Trong thực tiễn các công bố đặc biệt lên nằm trong modal. lấy ví dụ như một modal kinh nghiệm người dùng xác thực xóa một vài mục, bắt buộc liệt kê danh sách những mục sẽ xóa.

9. Cố rứa tách thực hiện modal mang đến cácxây cất di động

Tốt duy nhất là buộc phải tách thực hiện modal cho các kiến thiết di động bởi vì với màn hình nhỏ dại một modal đã cần cục bộ chiều rộng lớn màn hình hiển thị, vậy tại sao ko sử dụng một trang riêng? Nếu modal được áp dụng cho 1 xây cất responsivetiếp đến vẫn dễ dãi hơnđể giữ nguyên các hành vi trên những sản phẩm. Vì vậy yêu cầu bảo đảm an toàn đông đảo modal được áp dụng vẫn gần gũi với di dộng. lấy ví dụ như Bootstrap modals (hình bên dưới) làm việc tốt bên trên cả desktop và di động cầm tay. lúc thực hiện modal bên trên sản phẩm điện thoại người tiêu dùng hay phải cuộn lên và xuống, một ý tưởng phát minh tuyệt là bao gồm hành động đóng/ diệt ở cả bên trên với dưới.


10. Đảm bảo modal có thể tróc nã cập

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