HIG

[iOS / HIG] Popovers

Minny27 2022. 3. 3. 16:30

Popovers

A popover is a transient view that appears above other content onscreen when you tap a control or in an area. Typically, a popover includes an arrow pointing to the location from which it emerged. Popovers can be nonmodal or modal. A nonmodal popover is dismissed by tapping another part of the screen or a button on the popover. A modal popover is dismissed by tapping a Cancel or other button on the popover.

팝오버는 컨트롤 또는 영역을 누를 때 화면의 다른 콘텐츠 위에 나타나는 일시적 뷰입니다. 일반적으로 팝오버에는 해당 팝오버가 나타나는 위치를 가리키는 화살표가 포함됩니다. 팝오버는 비모달 또는 모달일 수 있습니다. 비모달 팝오버는 화면의 다른 부분이나 팝오버의 버튼을 눌러 비활성화됩니다. 모달 팝오버는 팝오버에서 취소 또는 기타 버튼을 눌러 비활성화됩니다.

 

Popovers are most appropriate on larger screens and can contain any variety of elements, including navigation bars, toolbars, tab bars, tables, collections, images, maps, and custom views. When a popover is visible, interactions with other views are normally disabled until the popover is dismissed. Use a popover to show options or information related to the content onscreen. Many iPad apps, for example, show a popover of sharing options when you tap the Action button.

팝오버는 큰 화면에 가장 적합하며 네비게이션 바, 툴 바, 탭 바, 테이블, 컬렉션, 이미지, 지도 및 사용자 지정 보기를 포함한 다양한 요소를 포함할 수 있습니다. 팝오버가 표시되면 팝오버가 해제될 때까지 다른 뷰와의 상호 작용은 일반적으로 비활성화됩니다. 팝오버를 사용하여 콘텐츠와 관련된 옵션 또는 정보를 화면에 표시할 수 있습니다. 예를 들어, 많은 iPad 앱은 작업 버튼을 누르면 공유 옵션이 팝업되어 표시됩니다.

 

Avoid displaying popovers on iPhones. Generally, popovers should be reserved for use in iPad apps. In iPhone apps, utilize all available screen space by presenting information in a full-screen modal view, rather than in a popover. For related guidance, see Modality.

아이폰에 팝오버를 표시하지 마세요. 일반적으로 아이패드 앱에서 사용할 수 있도록 팝오버를 예약해야 합니다. iPhone 앱에서는 정보를 팝오버 화면이 아닌 전체 화면 모달 뷰로 표시하여 사용 가능한 모든 화면 공간을 활용합니다. 관련 지침은 Modality를 참조하십시오.

 

Use a Close button for confirmation and guidance only. A Close button, such as Cancel or Done, is worth including if it provides clarity, such as exiting with or without saving changes. In general, a popover should close automatically when its presence is no longer necessary. In most cases, a popover should close when someone taps outside of its bounds or selects an item in the popover. If multiple selections can be made, the popover should remain open until someone explicitly dismisses it or taps outside of its bounds.

Close(닫기) 버튼은 확인 및 안내용으로만 사용하십시오. [취소] 또는 [완료]와 같은 닫기 단추는 변경사항을 저장하거나 저장하지 않고 종료하는 것과 같이 명확성을 제공하는 경우에 유용합니다. 일반적으로 팝오버는 더 이상 필요하지 않을 때 자동으로 닫힙니다. 대부분의 경우, 누군가가 해당 범위를 벗어나 탭하거나 팝업에서 항목을 선택할 때 팝오버를 닫아야 합니다. 여러 번 선택할 수 있는 경우 팝오버를 명시적으로 무시하거나 경계 밖으로 탭할 때까지 팝오버를 열어 두어야 합니다.

 

Always save work when automatically closing a nonmodal popover. It’s easy to dismiss a nonmodal popover unintentionally by tapping another part of the screen. Discard work only when someone taps an explicit Cancel button.

비모달 팝오버를 자동으로 닫을 때는 항상 작업을 저장하십시오. 화면의 다른 부분을 누르면 의도하지 않게 비모달 팝오버를 무시할 수 있습니다. 다른 사용자가 명시적 취소 버튼을 누를 때만 작업을 취소합니다.

 

Position popovers appropriately onscreen. A popover’s arrow should point as directly as possible to the element that revealed it. Because popovers can’t be dragged around the screen, a popover shouldn’t cover essential content people may need to see while using the popover. A popover also shouldn’t cover the element that was tapped to show the popover.

팝오버를 화면에 적절하게 배치합니다. 팝오버의 화살표는 팝오버를 드러낸 요소를 최대한 직접적으로 가리켜야 합니다. 팝오버는 화면에서 끌어다 놓을 수 없기 때문에 팝오버를 사용하는 동안 사람들이 봐야 할 중요한 콘텐츠를 포함해서는 안 됩니다. 팝오버는 팝오버를 표시하기 위해 누른 요소를 덮지 않아야 합니다.

 

Show one popover at a time. Displaying multiple popovers clutters the interface and causes confusion. Never show a cascade or hierarchy of popovers, in which one emerges from another. If you need to show a new popover, close the open one first.

한 번에 하나의 팝업을 표시합니다. 여러 개의 팝오버를 표시하면 인터페이스가 어수선해지고 혼란이 발생합니다. 팝오버가 다른 팝오버에서 나타나는 계단식 또는 계층 구조를 절대 보여주지 마십시오. 새 팝오버를 표시해야 하는 경우 열려 있는 팝오버를 먼저 닫으십시오.

 

Don’t show another view over a popover. Except for an alert, nothing should be displayed on top of a popover.

팝업 화면에 다른 뷰를 표시하지 않습니다. 팝업 상단에 알림을 제외하고 아무것도 표시되지 않아야 합니다.

 

When possible, let users close one popover and open another with a single tap. Avoiding extra taps is especially desirable when several different bar buttons each open a popover.

가능한 경우 사용자가 한 번의 탭으로 하나의 팝오버를 닫고 다른 팝오버를 열 수 있도록 합니다. 특히 여러 개의 다른 막대 단추가 각각 팝오버를 열 때 추가 탭을 피하는 것이 좋습니다.

 

Avoid making a popover too big. A popover shouldn’t take over the entire screen. Make it only big enough to display its contents and point to the place it came from. Be aware that the system might adjust the size of a popover to ensure it fits well onscreen.

팝오버를 너무 크게 만들지 마세요. 팝오버가 전체 화면을 차지해서는 안 됩니다. 내용물이 보일 정도로만 크게 만들고 그것이 온 곳을 가리킵니다. 시스템이 화면에 잘 맞도록 팝업 크기를 조정할 수 있습니다.

 

Make sure custom popovers look like popovers. Although you can customize many of the visual aspects of a popover, avoid creating a design people might not recognize as a popover. Popovers tend to work best when they contain standard controls and views.

커스텀 팝오버를 팝오버처럼 보이게 하세요. 팝업의 많은 시각적 측면을 사용자 정의할 수 있지만, 사용자가 팝업으로 인식하지 못할 수 있는 설계를 작성하지 않도록 합니다. 팝오버는 표준 컨트롤과 뷰를 포함할 때 가장 잘 작동하는 경향이 있습니다.

 

Provide a smooth transition when changing the size of a popover. Some popovers provide both condensed and expanded views of the same information. If you adjust the size of a popover, animate the change to avoid giving the impression that a new popover replaced the old one.

팝업의 크기를 변경할 때 부드러운 전환을 제공합니다. 일부 팝오버는 동일한 정보에 대한 요약 보기와 확장 보기를 모두 제공합니다. 팝오버 크기를 조정하는 경우 새 팝오버가 이전 팝오버를 대체한다는 인상을 주지 않도록 변경 사항을 애니메이션화합니다.

 

For developer guidance, see UIPopoverPresentationController.

개발자 지침은 UIPopoverPresentationController를 참조하세요.

 

 

 

참고 출처

애플 개발자 문서

 

Popovers - Views - iOS - Human Interface Guidelines - Apple Developer

Popovers A popover is a transient view that appears above other content onscreen when you tap a control or in an area. Typically, a popover includes an arrow pointing to the location from which it emerged. Popovers can be nonmodal or modal. A nonmodal popo

developer.apple.com

'HIG' 카테고리의 다른 글

[iOS / HIG] Sheets  (0) 2022.03.03
[iOS / HIG] Modality  (0) 2022.03.03
[iOS / HIG] Refresh Content Controls  (0) 2022.02.19
[iOS / HIG] Progress Indicators  (0) 2022.02.19
[iOS / HIG] Labels  (0) 2022.02.19