A pull-down button displays a menu of items or actions that directly relate to the button’s purpose.
풀다운 버튼은 버튼의 목적과 직접 관련된 항목 또는 작업 메뉴를 표시합니다.
After people choose an item in a pull-down button’s menu, the menu closes, and the app performs the chosen action.
사람들이 풀다운 버튼 메뉴에서 항목을 선택하면 메뉴가 닫히고 앱이 선택한 작업을 수행합니다.
Use a pull-down button to present commands or items that are directly related to the button’s action. The menu lets you help people clarify the button’s target or customize its behavior without requiring additional buttons in your interface. For example:
풀다운 버튼을 사용하여 버튼 동작과 직접적으로 관련된 명령이나 항목을 표시합니다. 메뉴를 사용하면 사람들이 인터페이스에 추가 버튼을 요구하지 않고도 버튼의 대상을 명확하게 하거나 동작을 맞춤 설정할 수 있습니다. 예를 들어:
•
An Add button could present a menu that lets people specify the item they want to add.
추가 버튼은 사람들이 추가하려는 항목을 지정할 수 있는 메뉴를 제공할 수 있습니다.
•
A Sort button could use a menu to let people select an attribute on which to sort.
정렬 버튼은 메뉴를 사용하여 사람들이 정렬할 속성을 선택할 수 있도록 할 수 있습니다.
•
A Back button could let people choose a specific location to revisit instead of opening the previous one.
뒤로 버튼을 사용하면 사람들이 이전 위치를 여는 대신 다시 방문할 특정 위치를 선택할 수 있습니다.
역자 첨언
If you need to provide a list of mutually exclusive choices that aren’t commands, use a pop-up button instead.
명령이 아닌 상호 배타적인 선택 항목 목록을 제공해야 하는 경우 대신 팝업 버튼을 사용하세요.
역자 첨언
Avoid putting all of a view’s actions in one pull-down button. A view’s primary actions need to be easily discoverable, so you don’t want to hide them in a pull-down button that people have to open before they can do anything.
하나의 풀다운 버튼에 뷰의 모든 작업을 넣는 것을 피하세요. 뷰의 기본 작업은 쉽게 검색할 수 있어야 하므로 사용자가 작업을 수행하기 전에 열어야 하는 풀다운 버튼에 해당 작업을 숨기고 싶지 않을 것입니다.
Balance menu length with ease of use. Because people have to interact with a pull-down button before they can view its menu, listing a minimum of three items can help the interaction feel worthwhile. If you need to list only one or two items, consider using alternative components to present them, such as buttons to perform actions and toggles or switches to present selections. In contrast, listing too many items in a pull-down button’s menu can slow people down because it takes longer to find a specific item.
사용 편의성을 고려하여 메뉴 길이의 균형을 맞추세요. 사람들은 메뉴를 보기 전에 풀다운 버튼과 상호 작용해야 하기 때문에 최소 3개의 항목을 나열하면 상호 작용이 가치 있다고 느끼는 데 도움이 될 수 있습니다. 하나 또는 두 개의 항목만 나열해야 하는 경우 작업을 수행하는 버튼, 선택 항목을 표시하는 토글 또는 스위치와 같은 대체 구성 요소를 사용하여 해당 항목을 표시하는 것이 좋습니다. 대조적으로, 풀다운 버튼 메뉴에 너무 많은 항목을 나열하면 특정 항목을 찾는 데 시간이 더 오래 걸리기 때문에 사람들의 속도가 느려질 수 있습니다.
→ 풀다운 버튼의 메뉴 길이는 최소 3개, 너무 많게는 또 하지 마라.
Display a succinct menu title only if it adds meaning. In general, a pull-down button’s content — combined with descriptive menu items — provides all the context people need, making a menu title unnecessary.
의미를 추가하는 경우에만 간결한 메뉴 제목을 표시하세요. 일반적으로 설명이 포함된 메뉴 항목과 결합된 풀다운 버튼의 콘텐츠는 사람들에게 필요한 모든 컨텍스트를 제공하므로 메뉴 제목이 필요하지 않습니다.
→ 굳이 정렬 풀다운 버튼에 “정렬”이라는 제목을 붙여 밖에서 보이게 할 필요가 없다. “최신순” “인기순" 등의 메뉴 항목이 충분히 맥락을 전달한다.
Let people know when a pull-down button’s menu item is destructive, and ask them to confirm their intent. Menus use red text to highlight actions that you identify as potentially destructive. When people choose a destructive action, the system displays an action sheet (iOS) or popover (iPadOS) in which they can confirm their choice or cancel the action. Because an action sheet appears in a different location from the menu and requires deliberate dismissal, it can help people avoid losing data by mistake.
풀다운 버튼의 메뉴 항목이 파괴적인(destructive) 경우 사람들에게 알리고 의도를 확인하도록 요청하세요. 메뉴는 잠재적으로 파괴적인 것으로 식별되는 작업을 강조하기 위해 빨간색 텍스트를 사용합니다. 사람들이 파괴적인 행동을 선택하면 시스템은 선택을 확인하거나 작업을 취소할 수 있는 작업 시트 (iOS) 또는 팝오버 (iPadOS)를 표시합니다. 작업 시트는 메뉴와 다른 위치에 나타나며 의도적으로 닫아야 하기 때문에 실수로 데이터가 손실되는 것을 방지하는 데 도움이 될 수 있습니다.
Include an interface icon with a menu item when it provides value. If you need to clarify an item’s meaning, you can display an icon or image after its label. Using SF Symbols for this purpose can help you provide a familiar experience while ensuring that the symbol remains aligned with the text at every scale.
값을 제공하는 경우 메뉴 항목에 인터페이스 아이콘을 포함합니다. 항목의 의미를 명확히 해야 하는 경우 해당 레이블 뒤에 아이콘 이나 이미지를 표시할 수 있습니다. 이러한 목적으로 SF 기호를 사용하면 기호가 모든 축척에서 텍스트와 정렬된 상태를 유지하면서 친숙한 경험을 제공하는 데 도움이 될 수 있습니다.
No additional considerations for macOS or visionOS. Not supported in tvOS or watchOS.
Note
You can also let people reveal a pull-down menu by performing a specific gesture on a button. For example, in iOS 14 and later, Safari responds to a touch and hold gesture on the Tabs button by displaying a menu of tab-related actions, like New Tab and Close All Tabs.
버튼에 특정 동작을 수행하여 사람들이 풀다운 메뉴를 표시하도록 할 수도 있습니다. 예를 들어, iOS 14 이상에서 Safari는 새 탭 및 모든 탭 닫기와 같은 탭 관련 작업 메뉴를 표시하여 탭 버튼을 길게 터치하는 동작에 반응합니다.
역자첨언
Consider using a More pull-down button to present items that don’t need prominent positions in the main interface. A More button can help you offer a range of items where space is constrained, but it can also hinder discoverability. Although people generally understand that a More button offers additional functionality related to the current context, the ellipsis icon doesn’t necessarily help them predict its contents. To design an effective More button, weigh the convenience of its size against its impact on discoverability to find a balance that works in your app. Create a More button by using the ellipsis.circle symbol.
기본 인터페이스에서 눈에 띄는 위치가 필요하지 않은 항목을 표시하려면 더보기 풀다운 버튼을 사용하는 것이 좋습니다. 더보기 버튼은 공간이 제한된 다양한 항목을 제공하는 데 도움이 될 수 있지만 검색 가능성을 방해할 수도 있습니다. 사람들은 일반적으로 자세히 버튼이 현재 컨텍스트와 관련된 추가 기능을 제공한다는 것을 이해하지만 줄임표 아이콘이 반드시 내용을 예측하는 데 도움이 되는 것은 아닙니다. 효과적인 더보기 버튼을 디자인하려면 크기의 편리함과 검색 가능성에 미치는 영향을 비교하여 앱에서 작동하는 균형을 찾으세요. ellipsis.circle 심볼을 사용하여 자세히 버튼을 만듭니다 .
Change log
작성 날짜 | 작성자 | 수정사항 |
2023/10/10 | 하니 | 초기 번역 |
2023/12/25 | 하니 | 배포 |