HIG - Page controls

[ffalswo2]

Page controls

A page control displays a row of indicator images, each of which represents a page in a flat list.

페이지 컨트롤에는 indicator images row가 표시되며, 각각의 indicator image는 평면 list의 페이지를 나타냅니다.

Scrolling row of indicators는 사람들이 원하는 페이지를 찾기 위해 목록을 탐색하는 데 도움이 됩니다. 페이지 컨트롤은 임의의 페이지 수를 처리할 수 있으므로 사용자 지정(custom) list를 만들 수 있는 상황에서 특히 유용합니다.

페이지 컨트롤은 기본적으로 일련의 작은 점표시(small indicator dots)로 표현되며 사용 가능한 페이지를 나타냅니다. 단색 점(solid dot)은 현재 페이지를 나타냅니다.

시각적으로 이러한 점은 항상 등거리에 있으며 화면에 너무 많이 표시되면 잘립니다.

(Visually, these dots are always equidistant, and are clipped if too many appear onscreen.)

Best practices

Use page controls to represent movement between an ordered list of pages.

페이지 컨트롤을 사용하여 정렬된 페이지 목록 간의 이동을 표시합니다.

페이지 컨트롤은 계층적 또는 비순차적 페이지 관계를 나타내지 않습니다. 보다 복잡한 탐색을 원한다면 sidebar 또는 split view를 사용하는 것이 좋습니다.

Center a page control at the bottom of the screen.

페이지 컨트롤을 화면 하단에 중앙에 배치합니다.

사람들이 페이지 컨트롤의 위치를 항상 알 수 있도록 가로로 중앙에 배치하고 화면 하단 근처에 배치하세요.

Although page controls can handle any number of pages, don’t display too many.

페이지 컨트롤은 페이지 수에 관계없이 처리할 수 있지만 너무 많은 페이지를 표시하지 마세요.

약 10개 이상의 점은 한 눈에 세기 어렵습니다. 앱에서 10개 이상의 페이지를 peer로 표시해야 하는 경우 비순차 탐색이 가능한 grid와 같은 다른 arrangement을 사용하는 것이 좋습니다.

Customizing indicators

기본적으로 페이지 컨트롤은 모든 indicators에 시스템에서 제공하는 dot 이미지를 사용하지만 특정 페이지를 식별하는 데 도움이 되는 고유한 이미지를 표시할 수도 있습니다.

예를 들어 날씨에서는 location.fill 기호를 사용하여 “현재 위치 페이지”를 구분합니다.

앱이나 게임을 향상시키는 경우 모든 indicators의 기본 이미지로 사용할 사용자 지정 이미지를 제공할 수 있으며 특정 페이지에 대해 다른 이미지를 제공할 수도 있습니다. 개발자 지침은 preferredIndicatorImage 및 setIndicatorImage(_:forPage:)를 참조하세요.

사용자 지정 표시기 이미지(custom indicator images)는 단순하고 선명해야 합니다. 복잡한 모양은 피하고 여백, 텍스트, 안쪽 선 등을 포함하지 마세요. 이러한 디테일은 아이콘을 흐릿하게 만들고 아주 작은 크기에서는 해독이 불가능하게 만들 수 있습니다. 간단한 SF 기호를 표시로 사용하거나 직접 아이콘을 디자인하는 것이 좋습니다. 지침은 아이콘을 참조하세요.

default indicator image는 페이지 컨트롤의 전반적인 의미를 향상시키는 경우에만 사용자 지정합니다. 예를 들어, 나열하는 모든 페이지에 bookmarks가 포함되어 있는 경우 bookmark.fill symobl을 기본 indicator 이미지로 사용할 수 있습니다.

페이지 컨트롤에 서로 다른 indicator 이미지를 두 개 이상 사용하지 마세요.

날씨의 현재 위치 페이지처럼 목록에 특별한 의미가 있는 페이지가 하나 포함되어 있는 경우에는 해당 페이지에 고유한 표시 이미지를 지정하여 페이지를 쉽게 찾을 수 있도록 만들 수 있습니다. 반대로 여러 개의 고유한 이미지를 사용하여 여러 개의 중요한 페이지를 표시하는 페이지 컨트롤은 사람들이 각 이미지의 의미를 외워야 하므로 사용하기가 어렵습니다. 두 가지 이상의 표시기 이미지를 표시하는 페이지 컨트롤은 각 이미지가 명확하더라도 지저분하고 어수선해 보이는 경향이 있습니다.

indicator images에 색상을 지정하지 마세요.

Custom colors can reduce the contrast that differentiates the current-page indicator and makes the page control visible on the screen

사용자 지정 색상은 현재 페이지 indicator와 page control를 구분하기 어렵게 만들 수 있다. 페이지 컨트롤을 사용하기 쉽고 다양한 상황에서 보기 좋게 만들려면 시스템에서 자동으로 표시기의 색상을 지정하도록 하세요😮

Platform considerations

iOS, iPadOS

페이지 컨트롤은 List에 대한 자세한 정보를 제공하기 위해 indicator의 모양을 조정할 수 있습니다. 예를 들어, 이 컨트롤은 현재 페이지의 indicator를 강조 표시하여 list에서 페이지의 상대적 위치를 추정할 수 있도록 합니다. 공간에 맞는 것보다 많은 표시기가 있는 경우 컨트롤은 양쪽의 indicator를 축소하여 사용 가능한 페이지가 더 많음을 표시할 수 있습니다.

Tap하거나 scrubbing하여 페이지 컨트롤과 상호 작용합니다(scrubbing하려면 컨트롤을 터치하고 왼쪽 또는 오른쪽으로 드래그합니다). 현재 페이지 indicator의 앞쪽 또는 뒤쪽을 탭하면 다음 페이지 또는 이전 페이지가 표시되며, iPadOS에서는 포인터(?)를 사용하여 특정 표시기를 지정할 수도 있습니다. scrubbing하면 페이지가 순서대로 열리며, 컨트롤의 앞쪽 또는 뒤쪽 가장자리를 지나서 스크러빙하면 첫 페이지 또는 마지막 페이지로 빠르게 이동할 수 있습니다.

💡 API에서 Tapping은 discrete 상호작용인 반면, Scrubbing은 continuous 상호작용입니다

UIPageControl.InteractionState | Apple Developer Documentation

스크러빙 중에 페이지 전환 애니메이션을 사용하지 마세요. 사람들은 매우 빠르게 스크러빙할 수 있으며, 모든 전환에 스크롤 애니메이션을 사용하면 앱이 지연되고 시각적으로 산만해질 수 있습니다. 애니메이션 스크롤 전환은 탭할 때만 사용하세요.

페이지 컨트롤에는 반투명하고 둥근 직사각형의 배경 모양이 포함되어 표시기에 시각적 대비를 제공할 수 있습니다. 다음 배경 스타일 중 하나를 선택할 수 있습니다:

• Automatic — Displays the background only when people interact with the control. Use this style when the page control isn't the primary navigational element in the UI.
  • 사용자가 컨트롤과 상호 작용할 때만 배경을 표시합니다. 페이지 컨트롤이 UI의 기본 탐색 요소가 아닌 경우 이 스타일을 사용합니다.
• Prominent — Always displays the background. Use this style only when the control is the primary navigational control in the screen.
  • 항상 배경을 표시합니다. 컨트롤이 화면의 기본 탐색 컨트롤인 경우에만 이 스타일을 사용합니다.
• Minimal — Never displays the background. Use this style when you just want to show the position of the current page in the list and you don't need to provide visual feedback during scrubbing.
  • 배경을 표시하지 않습니다. list에서 현재 페이지의 위치만 표시하고 스크러빙 중에 시각적 피드백을 제공할 필요가 없는 경우 이 스타일을 사용합니다.

• 왼쪽부터 prominent, automatic, minimal

UIPageControl.BackgroundStyle | Apple Developer Documentation

Avoid supporting the scrubber when you use the minimal background style.

minimal background style 사용할 때는 스크러버를 support하지 마세요.

최소 스타일은 스크러빙 중에 시각적 피드백을 제공하지 않습니다. 사람들이 앱의 페이지 목록을 스크러빙할 수 있도록 하려면 automatic 또는 prominent background style을 사용하세요.

노션링크
https://complex-rook-29b.notion.site/Page-controls-416f7f4314dd4f4884048ab81f8cbd97

Ref

pagecontrol on iOS 14