[HIG] Components - Buttons

https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/buttons

Buttons - Menus and actions - Components - Human Interface Guidelines - Design - Apple Developer

버튼은 기능을 명확하게 전달하기 위해 3가지 특성을 가진다.

1. Style : 크기, 색상, 모양에 따른 시각적인 스타일
2. Content : Content는 버튼 안에 있는 symbol, text label, 또는 둘 다를 의미한다. 버튼의 목적을 전달한다.
3. Role : 시스템이 정의한 Role은 버튼이 가진 의미를 나타내며 버튼의 외형에 영향을 미친다.

다용도의 버튼 외에도 "Info", "Close", "Contact Add" 와 같이 자주 사용되는 공통 버튼 스타일을 통해 시스템 전체에서 친숙한 동작을 제공할 수 있다.

toggles, pup-up buttons, segmented controls처럼 특정 사용 사례에 대해 적합한 특성을 가진 button-like 콤포넌트들도 있다.

 

Best practices

당연하게도 버튼은 사용자가 쉽게 인식하고 이해할 수 있어야한다. 이러한 버튼이 잘 설계된 버튼이다.

 

1. 사람들이 쉽게 누를 수 있어야 한다. 

• 터치를 위해 최소 44x44 points의 공간이 필요하다. (iOS 개발을 하다보면 44px을 많이 보게 되던데 이러한 이유였구나!)
• 주변 요소, 콘텐츠와 시각적으로 구분할 수 있도록 버튼 주위에 충분한 공간이 필요하다.

이 뷰의 버튼들의 높이가 전부 44px이다. (44px는 이정도의 크기!)

2. 기능을 명확하게 전달해야 한다.

• 버튼은 항상 text와 symbol(icon)이 포함될 수 있다. 이를 이용해 사용자가 버튼의 기능을 예상하는데 도움을 줄 수 있다.

---

System

애플은 시스템 버튼을 통해 이미 정의된 다양한 디자인의 버튼을 제공하고 있다.

built-in interaction states, accessibility support, appearance adaption을 제공한다.

iOS, iPadOS에서는 4가지의 버튼 스타일이 각각 3가지 크기로 제공된다.

사용자가 원하는 대로 조합하여 사용 가능하다.

시스템 버튼은 기본적으로  radius와 accent color를 사용한다.

필요하다면 커스텀하여 content layout과 activity indicator 등의 속성을 변경할 수 있다.

 

• 뷰에서 가장 사용될 가능성이 높은 기능은 색이 채워진 버튼을 사용하자
  • 대신 너무 많은 곳에 filled 버튼을 사용하지는 말자
• 다양한 선택지 중에 원하는 선택이 있다면 그 버튼의 스타일을 사용해 강조하자! 크기 변화는 좋지 않다.
  • 크기가 다르면 일관된 세트로 보이지 않기 때문

Xcode에서 command+shift+l 을 눌러서 system button의 종류를 확인하고 바로 드래그 앤 드랍으로 사용할 수 있다.

 

---

Content

• 사용자가 버튼의 기능을 직관적으로 이해할 수 있도록 Content를 생성한다.
• 버튼에 아이콘이 필요하다면 기존 스타일이나 SF Symbol을 사용하는 것을 권장한다.
• 텍스트를  사용하려면 버튼의 기능을 요약하여 짧게 작성하자
• Title-Style Capitalization을 사용해 동사로 시작하는 label을 작성하자 (예를 들어 "Add to Cart" 처럼!)
• 추가적인 텍스트는 사용자에게 중요한 세부 정보가 있을 때에만 label 밑에 위치시킨다.
  • label 보다 작은 크기여야한다.
  • 버튼의 기능에 대해 자세히 설명하는 것은 좋지 않다.
• 빠르게 완료되지 않는 작업을 수행할 때에는 activity indicator를 보여주는 것이 좋다.
  
  • 사용자 인터페이스의 공간을 절약할 수 있고, 지연 이유를 명확하게 보여줄 수 있다.
  • 추가로 activity indicator 옆에 다른 label을 넣어 상황을 설명할 수도 있다.

 

---

Role

시스템 버튼은 다음과 같은 role 중에 하나를 가진다.

• Normal: 특별한 의미가 없다.
• Primary: 디폴트 버튼, 사용자들이 가장 많이 사용할 버튼
• Cancel: 현재 액션을 취소한다.
• Destructive: data destruction이 발생할 수 있는 작업을 수행한다.

버튼의 Role(역할)은 버튼의 스타일에 영향을 미칠 수 있다.

예를 들어, Primary button에는 더 굵은 텍스트를 사용한다. 반면 destructive 버튼에는 붉은 색을 사용한다.

 

• 사용자가 선택할 가능성이 높은 버튼을 Primary로 설정하자
  • Return key에 사용되면 사용자들은 쉽게 그들의 선택을 확신할 수 있다.
  • sheet, editable view, alert 등과 같은 임시적인 뷰에 있는 경우 Primary 버튼은 사용자가 return 을 눌렀을 때 자동으로 뷰가 닫힐 거라는 의미를 전달한다.
• 사용자가 많이 사용할 버튼이라도 Destructive한 액션을 수행할 버튼에는 Primary를 할당하지 말자!
  • Primary의 시각적인 요소 때문에 사용자들은 종종 제대로 읽지 않고 누를 가능성이 있기 때문이다.