애플 휴먼 인터페이스 가이드라인(53) Controls -1 Buttons

Buttons
버튼

Buttons initiate app-specific actions, have customizable backgrounds, and can include a title or an icon. The system provides a number of predefined button styles for most use cases. You can also design fully custom buttons.

For developer guidance, see UIButton.
버튼은 앱 특화된 액션을 실행할 수 있고, 커스텀된 배경값을 가지며, 타이틀 혹은 아이콘을 포함할 수 있습니다. 시스템은 가장 자주 사용되는 경우를 위한 버튼 스타일을 미리 만들어 제공하고 있습니다. 이 외에도 버튼을 커스텀해 직접 디자인할 수 있습니다.

System Buttons
시스템 버튼

System buttons often appear in navigation bars and toolbars, but may be used anywhere.
시스템 버튼은 네비게이션 바나 툴바에서 볼 수 있지만, 어디서도 사용될 수 있습니다.

 

 

Use verbs in titles. An action-specific title shows that a button is interactive and says what happens when you tap it.

타이틀엔 동사를 사용하세요. 액션에 맞춰 제작된 타이틀은 버튼이 상호작용 가능하다는 것과 탭했을 때 무엇이 일어날지 알려줍니다.

 

Use title-case for titles. Capitalize every word except articles, coordinating conjunctions, and prepositions of four or fewer letters.

첫글자는 대문자로 하세요. 모든 글자의 첫단어는 대문자를 사용하되, 관사(a, an, the), 등위 접속사(and, or, but..), 4글자 이하의 전치사는 예외입니다.

 

Keep titles short. Overly long text can crowd your interface and may get truncated on smaller screens.

타이틀은 짧게 유지하세요. 너무 긴 텍스트는 화면을 부산스럽게 만들고, 작은 화면에서는 텍스트가 잘릴 수 있습니다.

 

Consider adding a border or a background only when necessary. By default, a system button has no border or background. In some content areas, however, a border or background is necessary to denote interactivity. In the Phone app, bordered number keys reinforce the traditional model of making a call, and the background of the Call button provides an eye-catching target that’s easy to hit.

For developer guidance, see the UIButtonTypeSystem button type of UIButton.

필요한 경우에만 테두리나 배경을 추가하세요. 기본적으로 시스템 버튼엔 테두리나 배경이 없습니다. 그러나 몇몇 콘텐츠 영역에선 상호작용성을 나타내기 위해 필요한 경우도 있습니다. 전화 앱에선 숫자 키에 테두리가 있어 전화를 거는 전통적인 모델을 강화시키고, 발신 버튼의 배경색은 누르기 쉽도록 시선을 잡아끕니다.

Detail Disclosure Buttons

A Detail Disclosure button opens a view—typically, a modal view—containing additional information or functionality related to a specific item onscreen. Although you can use them in any type of view, Detail Disclosure buttons are commonly used in tables to access information about specific rows.

디테일 디스클로져 버튼(상세보기 버튼)은 화면의 특정 아이템과 관련된 추가 정보나 기능을 보여줍니다. 이는 대개 모달 뷰에서 보여집니다. 물론 이 버튼을 어떤 종류의 뷰에서든 사용할 수 있지만, 상세보기 버튼은 주로 테이블에서 사용되어 해당 줄의 정보에 접근할 수 있게 합니다.

 

 

Use Detail Disclosure buttons appropriately in tables. When a Detail Disclosure button is present in a table row, tapping the button shows additional information. Tapping elsewhere selects the row or results in app-defined behavior. If you want people to tap the entire row to see additional detail, don’t use a Detail Disclosure button. Instead, use a disclosure indicator accessory control. See disclosureIndicator in UITableViewCell.

For developer guidance, see the UIButtonTypeDetailDisclosure button type of UIButton.

테이블에서 상세보기 버튼을 적절히 사용하세요. 상세보기 버튼이 테이블의 줄에 놓여있을 때, 이 버튼을 누르면 추가 정보가 나오게 됩니다. 다른 곳을 탭하면 줄이 선택되거나, 앱에서 정의한 동작이 발생합니다. 만약 사용자들이 추가 정보를 보기 위해 줄 전체 어디든 누르게 만들고 싶다면, 상세보기 버튼은 사용하지 마세요. 대신, 디스클로저 인디케이터 악세사리 컨트롤(>)을 사용하세요.

Info Buttons

An Info button reveals configuration details about an app, sometimes on the back of the current view, after flipping the view around. Info buttons come in two styles—light and dark. Pick the style that best coordinates with your app’s design and doesn’t get lost onscreen.

정보 버튼은 앱의 설정 디테일을 보여주는데, 뷰 주변을 플립한 후엔 종종 현재 뷰의 뒤를 보여주기도 합니다. 정보 버튼은 두가지 스타일이 있는데, 라이트와 다크입니다. 앱의 디자인과 잘 어울리는 스타일을 골라 화면에서 찾을 수 있도록 하세요.

 

For developer guidance, see the UIButtonTypeInfoLight and UIButtonTypeInfoDark button types of UIButton.

Add Contact Buttons

Users can tap an Add Contact button to browse a list of existing contacts and to select one for insertion into a text field or other view. In Mail, for example, you can tap the Add Contact button in the To field of a message to select a recipient from your list of contacts.

사용자들은 연락처 추가 버튼을 탭해 연락처 리스트를 보고, 하나를 골라 텍스트 필드나 다른 뷰에 삽입시킬 수 있습니다. 예를 들어 메일 앱의 경우, 메세지의 To(수신인) 필드에서 연락처 추가 버튼을 탭해 연락처 리스트에서 누가 메일을 수신할지 지정할 수 있습니다. 

 

 

Allow keyboard entry in addition to the Add Contact button. The Add Contact button provides an alternative, not a replacement, to typing contact information. It’s fine to provide it as a shortcut for adding existing contacts, but let people enter contact information with the keyboard too.

For developer guidance, see the UIButtonTypeContactAdd button type of UIButton.

연락처 추가 버튼에 키보드도 같이 보여주세요. 연락처 추가 버튼은 연락처 정보를 타이핑하는걸 아예 대신하는게 아니라, 대안을 제공하는 것 뿐입니다. 갖고있는 연락처를 추가하는 지름길로서 제공하는 것은 좋지만, 키보드도 함께 보여주어 연락처 정보를 입력할 수 있게 하세요.