DIALOG LÀ GÌ

Một số nguyên tắc tốt cho thi công Modals/Overlays/ Dialog

Modals, Overlays, Dialogs, bạn cần bất cứ điều gì về chúng thì đó là thời gian xẹp thăm chủng loại UI này. Lúc chúng lầnđầu xuất hiện, cửa sổ modal là 1 trong phương án xuất sắc cho thiết kếUI. Thứ nhất bọn chúng có tác dụng đơn giản và dễ dàng UI, đồ vật nhì, nó tiết kiệm ngân sách diện tích màn hình. Từ kia đa số designer đã dễ dàng áo dụng cửa sổ modal với một vài đang có tác dụng tốt nhất. Modals thời buổi này đang trở thành mọi popup kinh khủng. Người sử dụng phân biệt phần đa pnhân hậu toái của modals và sẽ tự chuyển đổi loại bỏ những cửa sổ này.Quý Khách đang xem: Dialog là gì

Định nghĩa:

Một hành lang cửa số modals là 1 trong element ngơi nghỉ bên trên thuộc của vận dụng. Nó tạo ra một chế độ có tác dụng loại bỏ hóa hành lang cửa số chính nhưng vẫn giữ lại được hiển thị nhỏng một hành lang cửa số con phía đằng trước nó. Người sử dụng đề xuất tác động cùng với hành lang cửa số modal trước khi muốn trở về hành lang cửa số bao gồm.

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

Sử dụng

quý khách rất có thể xem xét câu hỏi sử dụng hành lang cửa số modal khi chúng ta cần:

Thu hút sự chăm chú của fan dùng

Áp dụng Lúc bạn muốn cách trở tác vụ hiện nay của tín đồ dùng làm khiến để ý vào một vài ba thiết bị khác đặc biệt quan trọng rộng.

Cần input đầu vào của tín đồ dùng

Áp dụng lúc bạn có nhu cầu dìm công bố tự người dùng. lấy ví dụ nlỗi đăng kí tốt đăng nhập..

Hiển thị lên tiếng bổ sung mang đến content

Áp dụng khi bạn có nhu cầu hiển thị lên tiếng cơ mà không làm mất đi ngữ chình họa của trang nơi bắt đầu. lấy ví dụ nlỗi hiển thị tấm hình hoặc đoạn Clip lớn hơn.

Hiển thị thông tin( không tồn tại vào content)

Áp dụng khi bạn có nhu cầu hiển thị báo cáo nhưng không tương quan trực kế tiếp trang gốc hoặc các tùy lựa chọn đơn lẻ với trang gốc không giống. lấy một ví dụ nlỗi thông tin.

Ghi chú: Không hiện thông báo lỗi, thành công hoặc chú ý. Đểchúng ngơi nghỉ bên trên page.

 

Bóc tách một cửa sổ modal

Overlays kỉm rất có thể cản trở bài toán kết thúc tác vụ. Để bảo đảm an toàn modal của bạn không bị ngăn cản, hãy chắc hẳn rằng hồ hết hướng dẫn sau:


*

1. Thoát hatch

Cho người tiêu dùng một phương thức để thoát bằng cách để bọn họ close modal. Như vậy rất có thể dành được theo những cách sau:

Nút cancelNút ít closePhím escCliông chồng ra ngoài cửa sổ

Mẹo trợ năng: mỗi một hành lang cửa số modal đề nghị có công dụng điều khiển và tinh chỉnh bằng keyboard nhằm ngừng hoạt động sổ đó. lấy ví dụ như như phím esc hoàn toàn có thể đóng cửa sổ.

2. Mô tả tiêu đề

Cung cấp ngữ chình họa cùng với title của modal tới người tiêu dùng. Điều này có thể chấp nhận được người dùng biết vị trí của họ để chắchọ không rời ra khỏi trang cội.


*

sau khoản thời gian dìm nút Tweet- Tiêu đề modal: Soạn Tweet new. Cung cung cấp ngữ chình ảnh.

Mẹo: tiêu đềbottom( khởi chạy modal) với title modal yêu cầu tương đương nhau

3. Button

Tiêu đề bottom cần mang tên tất cả ý nghĩa sâu sắc, hoàn toàn có thể gọi được. Điều này vận dụng mang đến buttom vào bất cứ trường đúng theo nào. Cho modal, một buttom "close" phải tất cả dạng nút ít "close" hoặc một "x".

Xem thêm: 50+ Những Câu Nói Hay Về Niềm Vui Vẻ Giúp Bạn Cười, Danh Ngôn Về Niềm Vui


*

Invision gồm những buttom được lắp thương hiệu rõ ràng

Lưu ý: Không tạo cho thương hiệu buttom gây lầm lẫn. Nếu người dùng sẽ cố gắng để thoát cùng một modal xuất hiện thêm ANOTHER cancel buttom, dễ gây nên nhầm lần rằng: " Tôi có diệt bài toán diệt vứt không? Hay thường xuyên vấn đề hủy bỏ?"

4. Kích thước cùng vị trí


*

Vị trí- nửa trên của màn hình vì vào chính sách mobile hoàn toàn có thể bị mất nếu đặt thấp hơnKích thước-Không quá 50% màn hình hiển thị cho overlay

5. Tiêu điểm

lúc bạn mở một modal thực hiện cảm giác lightbox( làm cho buổi tối background). Như vậy duyên dáng sự chú ý và cho biết rằng người dùng không thể tương tác cùng với trang cội.

Mẹo trợ năng: đặt tiêu điểm bàn phím vào modal

6. Người dùng new bắt đầu

Đừng có tác dụng người dùng bất ngờ với cùng một modal dạng popup. Hãy nhằm một động tác, như buttom click, following a links hoặc selecting an option, nhằm kích hoạt modal. Các modal từ bỏ nhảy lên hoàn toàn có thể gây bất thần cho tất cả những người sử dụng với tác dụng là bọn họ gấp rút tắt bọn chúng.


*

Modal bật lên Lúc tốt nhất nút ít Log in

Modal trên mobile

Modal với thiệt bị di động cầm tay thường không liên quan xuất sắc với nhau. Hiển thị content khôn xiết khó vì chưng modal rất có thể quá lớn, chiếm phần không ít không gian màn hình hiển thị hoặc vượt nhỏ tuổi. Thêm một element nlỗi keyboard sản phẩm và tkhô giòn cuộn lồng nhau; người dùng bị vướng vàpchờ khổng lồ để cố gắng coi modal. Có những lựa chọn tốt rộng mang lại modal cùng không nên cần sử dụng bọn chúng trên các thiết bị cầm tay.


một modal tốt- facebook

Trợ năng


Bàn phím

lúc chế tạo một modal hãy ghi nhớ thêm vào một trong những phím trợ năng. Hãy cẩn thận đông đảo điều sau:

Mngơi nghỉ modal-element kích hoạt dialog yêu cầu bao gồm phím trợ năng

Di chuyển tiêu điểm vào modal-Khi hành lang cửa số modal trước tiên bật lên, tiêu điểm keyboard đề nghị được chuyển lên đầu.

Quản lí tiêu điểm bàn phím-khi tiêu điểm phím được chuyển vào vỏ hộp thoại, nó sẽ ảnh hưởng "kẹt" bên phía trong cho tới lúc vỏ hộp thoại được đóng.

Đóng hộp thoại-từng cửa sổ overlay yêu cầu hoàn toàn có thể tinh chỉnh bởi bàn phím nhằm đóng cửa sổ đó.

Để hiểu thêm thông báo chi tiết về danh sách bên trên, hãy xem nội dung bài viết trênhttps://www.nomensa.com/blog/2014/how-improve-accessibility-overlay-windows-part-1.

ARIA

Các ứng dụng inteđa dạng (ARIA) khẳng định phương pháp để câu chữ website và ứng dụng website dễ dàng truy vấn hơn.

Các thẻ ARIA tiếp sau đây hoàn toàn có thể có lợi trong vấn đề tạo nên một cách thức modal: Role="dialog", aria-hidden, aria-label

Dường như, hãy ghi nhớ đến những người tiêu dùng tất cả thị lực kém. Họ rất có thể sử dụng kính lúp bên trên màn hình hiển thị nhằm pđợi to nội dung. Sau Lúc pngóng lớn người dùng chỉ rất có thể bắt gặp một trong những phần của screen. Ở ngôi trường hợp này, những modal sẽ sở hữu được chức năng giống hệt như trên Smartphone.

Kết luận

Nếu hầu như người đã được chỉ dẫn nhằm sử dụng biện pháp đóng modal, tại sao bạn lại ko sử dụng bọn chúng chứ?

Thu hút ít sự chú ý của người tiêu dùng, giữ ngữ chình họa và dễ dàng và đơn giản hóa UI là phần nhiều lợi ích hoàn hảo của modal. Tuy nhiên, bao hàm điểm yếu kém như chúng có tác dụng cách quãng luồng truy cập của người tiêu dùng cùng bắt buộc tiếp cận với trang cội bởi việc ẩn đi ngôn từ ẩn dưới modal. Modal rất có thể không hẳn dịp như thế nào cũng có tác dụng. Hãy cân nhắcđông đảo điều dưới đây khi bạn lựa chọn:

Danh mục

khi làm sao chúng ta hiển thịmodal?Chúng ta hiển thị chúng như thế nào?Modal vẫn trông như vậy nào?tin tức mà lại chúng ta hiển thị cùng tích lũy là gì?

Hãy xem bài bác đăng tiếp theo sau của tớ để đọc thêm.

Bài viết được dịch từ:https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c