Dialog là gì

Một số luật lệ xuất sắc đến xây đắp Modals/Overlays/ Dialog

Modals, Overlays, Dialogs, bạn phải bất kể điều gì về bọn chúng thì đó là thời gian ké thăm mẫu UI này. Khi bọn chúng lầnđầu xuất hiện thêm, hành lang cửa số modal là 1 trong phương án giỏi mang lại thiết kếUI. Thứ nhất bọn chúng có tác dụng dễ dàng UI, máy nhị, nó tiết kiệm ngân sách diện tích S screen. Từ đó đông đảo designer đang thuận lợi áo dụng cửa sổ modal cùng một vài ba đã có tác dụng tốt nhất. Modals ngày này đã trở thành gần như popup kinh khủng. Người dùng nhận thấy hầu hết phiền toái của modals với đang trường đoản cú đổi khác đào thải các hành lang cửa số này.

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

Định nghĩa:

Một hành lang cửa số modals là 1 trong những element ngơi nghỉ trên thuộc của vận dụng. Nó tạo thành một cơ chế có tác dụng loại bỏ hóa hành lang cửa số bao gồm nhưng lại vẫn giữ lại được hiển thị nlỗi một cửa sổ bé phía đằng trước nó. Người cần sử dụng buộc phải thúc đẩy cùng với cửa sổ modal trước khi mong mỏi quay trở lại cửa sổ thiết yếu.

Sử dụng

quý khách hoàn toàn có thể suy nghĩ câu hỏi áp dụng hành lang cửa số modal khi chúng ta cần:

Thu hút ít sự để ý của bạn dùng

Áp dụng Khi bạn muốn ngăn cách tác vụ ngày nay của tín đồ dùng để làm khiến chú ý vào một trong những vài ba thứ không giống đặc biệt hơn.

Cần input đầu vào của bạn dùng

Áp dụng Lúc bạn có nhu cầu thừa nhận báo cáo tự người dùng. lấy ví dụ như đăng kí tuyệt singin..

Hiển thị thông tin bổ sung cập nhật mang đến content

Áp dụng khi bạn muốn hiển thị đọc tin nhưng không làm mất 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 to hơn.

Hiển thị thông tin( không có vào content)

Áp dụng lúc bạn muốn hiển thị công bố cơ mà không liên quan trực tiếp đến trang cội hoặc các tùy chọn đơn nhất với trang cội không giống. lấy ví dụ như thông báo.

Ghi chú: Không hiển thị thông báo lỗi, thành công xuất sắc hoặc chú ý. Đểchúng làm việc bên trên page.

 

Bóc bóc một hành lang cửa số modal

Overlays kém nhẹm hoàn toàn có thể ngăn trở bài toán chấm dứt tác vụ. Để đảm bảo modal của doanh nghiệp không bị ngăn cản, hãy chắc chắn là đều hướng dẫn sau:

*

1. Thoát hatch

Cho người dùng một thủ tục để tránh bằng cách để chúng ta cthất bại modal. Như vậy rất có thể đã có được theo những cách sau:

Nút cancelNút ít closePhím escClichồng ra phía bên ngoài cửa sổ

Mẹo trợ năng: từng một cửa sổ modal phải có chức năng điều khiển và tinh chỉnh bằng keyboard để ngừng hoạt động sổ đó. lấy một ví dụ nhỏng phím esc rất có thể ngừng hoạt động sổ.

2. Mô tả tiêu đề

Cung cung cấp ngữ chình họa cùng với title của modal tới người dùng. Điều này có thể chấp nhận được người dùng biết vị trí của họ nhằm chắcchúng ta chưa rời khỏi trang gốc.


*
sau khoản thời gian thừa nhận nút ít Tweet- Tiêu đề modal: Soạn Tweet bắt đầu. Cung cấp cho ngữ chình ảnh.

Mẹo: tiêu đềbottom( khởi chạy modal) cùng title modal nên kiểu như nhau

3. Button

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


*
Invision có những buttom được gắn tên rõ ràng

Lưu ý: Không tạo cho thương hiệu buttom tạo lầm lẫn. Nếu người tiêu dùng vẫn nỗ lực để né với một modal lộ diện ANOTHER cancel buttom, dễ gây nhầm lần rằng: " Tôi bao gồm hủy Việc diệt bỏ không? Hay liên tiếp câu hỏi diệt bỏ?"

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

Một hành lang cửa số modal tránh việc quá lớn hoặc vượt nhỏ. Mục đích giữ lại ngữ chình ảnh, cho nên vì thế một modal quan trọng chiếm phần tổng thể màn hình hiển thị. Content yêu cầu vừa với modal. Nếu buộc phải cho tới tkhô nóng cuộn, chúng ta có thể chú ý câu hỏi chế tác một trang mới thay thế sửa chữa.

Xem thêm: Network: Làm Thế Nào Xóa Lỗi Compile Error In Hidden Module Trong Excel

*

Vị trí- nửa bên trên của screen bởi trong chế độ di động có thể bị mất nếu đặt rẻ hơnKích thước-Không thừa 1/2 màn hình mang lại overlay

5. Tiêu điểm

Khi các bạn mở 1 modal thực hiện cảm giác lightbox( làm tối background). Vấn đề này đắm say sự chăm chú cùng cho thấy rằng người tiêu dùng cần yếu liên tưởng với trang gốc.

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

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

Đừng có tác dụng người dùng bất thần với 1 modal dạng popup. Hãy để một cồn tác, nlỗi buttom cliông xã, following a link hoặc selecting an option, nhằm kích hoạt modal. Các modal tự bật lên rất có thể khiến bất thần cho người sử dụng và hiệu quả là bọn họ hối hả tắt chúng.


*
Modal bật lên khi duy nhất nút ít Log in

Modal trên mobile

Modal cùng thiệt bị di động cầm tay thường xuyên không xúc tiến tốt cùng nhau. Hiển thị nội dung khôn xiết nặng nề vị modal rất có thể quá to, chiếm không ít không gian screen hoặc quá nhỏ dại. Thêm một element nhỏng bàn phím máy cùng thanh khô cuộn lồng nhau; người tiêu dùng bị vướng vàpngóng to lớn nhằm cố gắng coi modal. Có các lựa chọn xuất sắc rộng đến modal cùng không nên sử dụng bọn chúng trên các máy cầm tay.


*
một modal tốt- facebook

Trợ năng

*

Bàn phím

Khi sản xuất một modal hãy ghi nhớ thêm vào một phím trợ năng. Hãy lưu ý mọi điều sau:

Mnghỉ ngơi modal-element kích hoạt dialog yêu cầu có phím trợ năng

Di đưa tiêu điểm vào modal-khi hành lang cửa số modal thứ nhất bật lên, tiêu điểm keyboard yêu cầu đượ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 hộp thoại, nó sẽ bị "kẹt" phía bên trong cho tới khi vỏ hộp thoại được đóng.

Đóng vỏ hộp thoại-mỗi hành lang cửa số overlay cần có thể điều khiển và tinh chỉnh bởi bàn phím để ngừng hoạt động sổ kia.

Để hiểu thêm biết tin cụ thể về danh sách bên trên, hãy coi bài viết trênhttps://www.nomensa.com/blog/2014/how-improve-accessibility-overlay-windows-part-1.

ARIA

Các ứng dụng internet đa dạng và phong phú (ARIA) xác minh cách để văn bản trang web và áp dụng website dễ dàng truy cập hơn.

Các thẻ ARIA dưới đây rất có thể bổ ích trong bài toán tạo nên một cách làm modal: Role="dialog", aria-hidden, aria-label

Trong khi, hãy ghi nhớ đến những người dùng bao gồm thị giác kém nhẹm. Họ hoàn toàn có thể áp dụng kính lúp trên màn hình nhằm phóng to lớn nội dung. Sau Khi phóng to lớn người tiêu dùng chỉ hoàn toàn có thể nhìn thấy một trong những phần của screen. Ở trường hòa hợp này, các modal sẽ sở hữu công dụng y như bên trên di động.

Kết luận

Nếu những fan đã làm được chỉ dẫn để sử dụng cách đóng góp modal, vì sao các bạn lại ko sử dụng chúng chứ?

Thu hút sự để ý của người tiêu dùng, giữ ngữ cảnh với dễ dàng hóa UI là hầu hết công dụng tuyệt đối của modal. Tuy nhiên, bao gồm điểm yếu kém nlỗi bọn chúng làm ngăn cách luồng truy cập của người dùng với cần yếu tiếp cận với trang gốc bởi việc ẩn đi câu chữ đằng sau modal. Modal hoàn toàn có thể chưa hẳn thời gian làm sao cũng có hiệu quả. Hãy cân nhắcmọi điều dưới đây khi bạn lựa chọn:

Danh mục

lúc như thế nào chúng ta hiển thịmodal?Chúng ta hiển thị chúng như thế nào?Modal sẽ trông như vậy nào?Thông tin cơ mà chúng ta hiển thị với thu thập là gì?

Có một UI sửa chữa cho các modal: non-modal hoặc a.ka.toast( thuật ngữ được goolge sử dụng trong thi công Material cùng Microsoft).

Hãy xem bài xích đăng tiếp theo của tôi để bài viết liên quan.

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