Dialogs provide important prompts in a user flow. They can require an action, communicate information for making decisions, or help users accomplish a focused task.
대화 상자는 사용자 흐름에서 중요한 프롬프트를 제공합니다. 작업을 요구하거나, 의사 결정을 위한 정보를 전달하거나, 사용자가 집중적인 작업을 수행할 수 있도록 도와줍니다.
•
Use dialogs to make sure users act on information
대화 상자를 사용하여 사용자가 정보에 따라 행동하도록 유도하기
•
Two types: basic and full-screen
•
Should be dedicated to completing a single task
단일 작업을 완료하는 데만 사용해야 합니다.
•
Can also display information relevant to the task
작업과 관련된 정보를 표시할 수도 있습니다.
•
Commonly used to confirm high-risk actions like deleting progress
일반적으로 진행 상황 삭제와 같은 고위험 작업을 확인하는 데 사용됩니다.
usage
A dialog is a modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.
대화상자는 중요한 정보를 제공하거나 결정을 요청하기 위해 앱 콘텐츠 앞에 표시되는 모달 창입니다. 대화 상자가 표시되면 모든 앱 기능이 비활성화되며 확인, 해제 또는 필요한 조치가 취해질 때까지 화면에 남아 있습니다.
Dialogs are purposefully interruptive, so they should be used sparingly. A less disruptive alternative is to use a menu, which provides options without interrupting a user’s experience.
대화 상자는 의도적으로 방해가 되므로 신중하게 사용해야 합니다. 덜 방해가 되는 대안은 사용자 환경을 방해하지 않고 옵션을 제공하는 메뉴를 사용하는 것입니다.
Use dialogs for prompts that block an app’s normal operation, and for critical information that requires a specific user task, decision, or acknowledgement
앱의 정상적인 작동을 차단하는 메시지와 특정 사용자 작업, 결정 또는 승인이 필요한 중요한 정보에는 대화 상자를 사용합니다.
Don’t use dialogs for low- or medium-priority information. Instead use a snackbar, which can be dismissed or disappear automatically.
우선순위가 낮거나 중간 정도인 정보에는 대화 상자를 사용하지 마세요. 대신 자동으로 닫히거나 사라질 수 있는 스낵바를 사용하세요.
유사한 컴포넌트
Snackbars and banners are also designed to show important messages.
스낵바와 배너도 중요한 메시지를 표시하도록 디자인되었습니다.
Choose the right component based on the importance of the message. This component messaging strategy can help avoid overusing dialogs.
메시지의 중요도에 따라 적합한 컴포넌트를 선택하세요. 이 컴포넌트 메시지 전략은 대화 상자의 과도한 사용을 방지하는 데 도움이 될 수 있습니다.
•
snackbar : 스낵바에는 버튼이 없을 수 있으며 자동으로 사라질 수 있습니다.
•
banner : 배너는 작업을 수행하거나 해제할 때까지 또는 배너의 원인이 된 상태가 해결될 때까지 화면에 유지됩니다.
•
Dialog : 작업이 확인될 때까지 대화 상자가 주요 콘텐츠를 차단합니다.
basic dialog
Basic dialogs interrupt users with urgent information, details, or actions. Common use cases for basic dialogs include alerts, quick selection, and confirmation.
기본 대화 상자는 긴급한 정보, 세부 정보 또는 작업으로 사용자를 방해합니다. 기본 대화 상자의 일반적인 사용 사례에는 알림, 빠른 선택 및 확인이 포함됩니다.
Basic dialogs often appear as alerts or lists, but may also use a variety of layouts and component combinations, including lists, date pickers, and time pickers.
기본 대화 상자는 주로 알림이나 목록으로 표시되지만 목록, 날짜 선택기, 시간 선택기 등 다양한 레이아웃과 구성 요소 조합을 사용할 수도 있습니다.
Full-screen dialog
Full-screen dialogs fill the entire screen, containing actions that require a series of tasks to complete. One example is creating a calendar entry with the event title, date, location, and time.
전체 화면 대화 상자는 전체 화면을 가득 채우며 일련의 작업을 완료해야 하는 작업을 포함합니다. 한 가지 예로 이벤트 제목, 날짜, 위치, 시간이 포함된 캘린더 항목을 만드는 것이 있습니다.
Because they take up the entire screen, full-screen dialogs are the only dialogs over which other dialogs can appear.
전체 화면을 차지하기 때문에 전체 화면 대화 상자는 다른 대화 상자가 표시될 수 있는 유일한 대화 상자입니다.
Use a container transform pattern to transition a FAB(Floating action buttons) into a full-screen dialog.
컨테이너 변환 패턴을 사용하여 FAB를 전체 화면 대화 상자로 전환할 수 있습니다.