[HIG] Button 읽기

 

버튼은 액션을 일으킨다

버튼은 세 가지 속성(스타일 ,콘텐츠 ,역할)을 결합하여 기능을 명확하게 전달합니다:

In addition to all-purpose buttons, many common button styles — like Info, Close, and Contact Add — perform familiar tasks throughout the system. There are also many button-like components that have distinct appearances and behaviors for specific use cases, like toggles, pop-up buttons, and segmented controls.

 

닫기 , 연락처추가 ,정보 같은 공통적인 버튼이있고

그외 토글, segment control 같이 다른 외형과 행동을 가진 버튼들도있다.

 

Best practices

When buttons are instantly recognizable and easy to understand, an app tends to feel intuitive and well designed.

 

즉각적으로 이해할수 있고 인지적인 버튼이 직관적이고 잘 디자인된거다.

Make buttons easy for people to use. It’s essential to include enough space around a button so that people can visually distinguish it from surrounding components and content. Giving a button enough space is also critical for helping people select or activate it, regardless of the method of input they use. As a general rule, a button needs a hit region of at least 44x44 pt — in visionOS, 60x60 pt — to ensure that people can select it easily, whether they use a fingertip, a pointer, their eyes, or a remote.

 

버튼을 쉽게 사용하도록하라

충분한 버튼 주변 공간을 주어 주변 컴포넌트와 구별할수있도록 하라

최소 포인트 44를 줘야한다.

Style

System buttons offer a range of styles that support extensive customization while providing built-in interaction states, accessibility support, and appearance adaptation. Different platforms define different styles that help you communicate hierarchies of actions in your app.

You can configure a system button to use any combination of style and size. By default, a system button uses a size-specific corner radius and your app’s accent color. If necessary, you can change these attributes, in addition to attributes that control content layout and the presence of an activity indicator.

 

시스템 버튼 style과 size 설정을 줄수 있다.

attributes 를 통해 corner와 color를 줄수있고 컨텐츠 레이아웃과 activity indicator 의 존재를 설정할수있다.

In general, use a button that has a visible background for the most likely action in a view. Buttons that have a fill or background shape tend to be the most visually prominent, helping people quickly identify the action they’re most likely to want.

 

배경이 채워진 버튼이 눈에 잘 띄고 액션을 식별하는데 도움이 된다.

Consider keeping the number of visually prominent buttons to one or two per view. Giving people too many prominent buttons increases their cognitive load, requiring them to spend more time considering options before making a choice.

 

하나의 뷰에 두개 이상 버튼을 주는것을 고려하라. 사람들에게 cognitive load (버퍼링?) 을 주어 선택하는데 시간을 오래 걸리게 한다.

Use style — not size — to visually distinguish the preferred choice among multiple options. When you use buttons of the same size to offer two or more options, you signal that the options form a coherent set of choices. If you want to highlight the preferred or most likely option in a set, use a more prominent button style for that option and a less prominent style for the remaining ones.

 

두개의 버튼이 있을때 강조하고 싶은 버튼이 있으면 사이즈가 아닌 스타일에 강조를 줘라

Content

icon과 텍스트를 넣을수 있다. 버튼의 역할을 이해하는데 돕는데 사용하라

Consider using an icon when a button performs a familiar action that people associate with the icon. For example, people can predict that a button containing the square.and.arrow.up symbol will help them perform share-related activities. If it makes sense to use an icon in your button, consider using an existing or customized symbol.

 

square.and.arrow.up symbol 을 보면 사람들이 버튼이 share의 역할을 하는것을 사람들이 예상할수 있듯이

사람들이 특정 아이콘을 보고 특정 액션을 연상할수있을때 아이콘을 쓰는게 좋다.

Consider using text when a short label communicates more clearly than an icon. To use text, write a few words that succinctly describe what the button does. Using title-style capitalization, consider starting the label with a verb to help convey the button’s action — for example, a button that lets people add items to their shopping cart might use the label “Add to Cart.”

 

icon보다 명확하고 짧은 라벨이라면 text를 사용하는게 좋다.

버튼의 역할을 동사로 시작하라

Role

A system button can have one of the following roles:

• Normal. No specific meaning.
• Primary. The button is the default button — the button people are most likely to choose.
• Cancel. The button cancels the current action.
• Destructive. The button performs an action that can result in data destruction.

A button’s role can have additional effects on the appearance you configure. For example, the system can use bold text for the label in a primary button, whereas a destructive button uses a red color.

 

system 버튼은 네가지 역할중 하나를 가질수있다.

Assign the primary role to the button people are most likely to choose. When a primary button responds to the Return key, it makes it easy for people to quickly confirm their choice. In addition, when the button is in a temporary view — like a sheet, an editable view, or an alert — assigning it the primary role means that the view can automatically close when people press Return.

 

alert sheet 같은 view에서 확인 버튼같은거에 primary role을 사용 ( 사람들이 잘 누를거같은 버튼에 )

Don’t assign the primary role to a button that performs a destructive action, even if that action is the most likely choice. Because of its visual prominence, people sometimes choose a primary button without reading it first. Help people avoid losing content by assigning the primary role to nondestructive buttons.

 

데이터 파괴같은 역할을 하는버튼에 primary 주지 말것

Platform consideration(iOS, iPadOS)

Include additional text below the label only if it provides useful details. Additional text uses a smaller text size than the label, showing that the information is secondary to the button’s action. For example, you might add text to update an Add to Cart button with the number of items in the cart. Avoid writing a subtitle that explains more about what the button does; make sure a button’s containing view, label or image, style, and role provide all the information people need to understand its action.

 

버튼 밑에 info text를 둘 경우는 버튼 컨텐츠 label보다 작게, 그리고 꼭 필요할때만 사용 할것

최대한 버튼의 label, image, style, role을 통해 확실히 액션을 이해할수 있도록 할것

Configure a button to display an activity indicator when you need to provide feedback about an action that doesn’t instantly complete. Displaying an activity indicator within a button can save space in your user interface while clearly communicating the reason for the delay. To help clarify what’s happening, you can also configure the button to display a different label alongside the activity indicator. For example, the label “Checkout” could change to “Checking out…” while the activity indicator is visible. When a delay occurs after people click or tap your configured button, the system displays the activity indicator next to the original or alternative label, hiding the button image, if there is one.

 

activity indicator(로딩) 은 액션이 즉각적인 완료가 되지 않을때 사용

버튼 로딩뷰를 통해 UI 공간을 살리면서 딜레이에대한 명확한 커뮤니케이션이 가능

동시에 로딩중… 같은 텍스트를 사용할수 있음

로딩뷰가 뜨면 버튼 이미지를 숨기고 그자리에 들어간다