brunch

매거진 디자이너 성장일기

라이킷 101 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 서한교 Jan 22. 2017

iOS디자인 가이드라인 번역(5)- UI Control

UI Controls

이 글은 iOS Human Interface Guidelines를 학습하기 위해 번역한 것이며, 개인적인 이해를 돕기 위한 의역이 포함되어 있습니다. 잘못된 부분은 댓글 남겨주시면 감사하겠습니다. :)

1. Button

버튼은 대부분의 사용 사례에 대해 미리 정의된 여러 가지 스타일을 제공합니다. 또한 사용자가 버튼을 직접 디자인할 수 있습니다.

system button

a) System button

동사를 사용하세요. 동사형 제목은 버튼을 탭 하면 어떻게 되는지 알려줍니다.

대문자를 사용하세요. 기사, 접속사, 전치사를 제외한 모든 단어는 대문자로 시작해야 합니다.

짧게 유지하세요. 긴 텍스트는 인터페이스를 복잡하게 만들고, 작은 화면에서 잘릴 수 있습니다.

테두리 또는 배경은 필요한 경우에만 추가하세요.기본적으로 시스템 버튼에는 테두리나 배경이 없지만, 일부 콘텐츠에서는 상호 작용을 나타내기 위해 테두리나 배경이 필요합니다.

Detail Disclosure button

b) Detail Disclosure button

상세정보 버튼은 화면상의 특정 항목과 관련된 추가 정보 또는 기능을 포함하는 화면을 보여줍니다.

테이블에서 상세정보 버튼을 적절히 사용하세요.

상세정보 버튼이 테이블의 행에 있는 경우 버튼을 누르면 추가 정보가 표시됩니다. 버튼이 아닌 다른 곳을 두드리면 행이 선택되거나 다른 동작이 실행됩니다. 추가 세부 정보를 보기 위해 전체 행을 탭하도록하려면 상세정보 버튼을 넣지 마세요.

Info button

c) Info button

응용 프로그램에 대한 세부 정보를 표시합니다. 정보 버튼은 밝고 어두운 두 가지 스타일로 제공됩니다. 앱의 디자인과 가장 잘 조화되고 화면 상에 어울리는 스타일을 선택하세요.

Add contact button

d) Add contact button

사용자는 연락처 추가 버튼을 탭 하여 기존 연락처 목록을 탐색해서 텍스트 필드나 다른 화면에 연락처를 추가할 수 있습니다.

연락처 추가 버튼 외에도 키보드 입력을 허용하세요. 연락처 추가 버튼은 직접 입력하지 않아도 연락처를 추가할 수 있기 때문에 편리합니다. 하지만 사용자가 연락처 정보를 직접 입력하는 것을 막아서는 안됩니다.

2. Edit Menu

요소를 길게 누르고 두번 탭 하면 복사 및 붙여 넣기와 같은 편집 옵션을 표시할 수 있습니다.

현재 상황에 맞는 기능을 보여줘야 합니다. 기본적으로 편집 옵션에는 잘라내기, 복사, 붙여 넣기, 선택, 모두 선택 및 삭제 명령이 포함되며 이 중 일부는 선택적으로 비활성화할 수 있습니다. 텍스트가 없는 부분을 선택하면 복사 또는 잘라내기와 같이 텍스트가 필요한 옵션이 표시되지 않아야 합니다. 마찬가지로 이미 항목이 선택되어있는 경우 메뉴에 선택 옵션이 없어야 합니다.

사용자가 표준 제스처를 사용하여 편집 옵션에 접근할 수 있어야 합니다. 사용자는 텍스트나 사진과 같은 내용을 길게 터치하거나 두 번 탭 하여 메뉴를 이끌어 냅니다. 앱은 두 제스처 모두에 응답해야 합니다. 텍스트는 단어별로 선택되는 것이 기본값이 되어야 합니다.

필요한 경우 편집 옵션의 배치를 조정하세요. 기본적으로 메뉴는 사용 가능한 공간에 따라 다르지만 보통 선택항목의 위나 아래에 배치되며, 관련 내용에 대한 포인터가 포함됩니다. 메뉴의 모양을 변경할 수는 없지만 위치를 구성할 수 있으므로 중요한 내용이나 인터페이스 부분에 따라 위치를 조정하세요.

편집 메뉴와 동일한 기능을 가진 다른 컨트롤을 구현하지 마세요. 작업에 대한 여러 가지 방법을 제공하면 일관성 없는 사용자 경험이 발생하고 혼동을 초래할 수 있습니다. 예를 들어 앱에서 메뉴를 사용하여 콘텐츠를 복사할 수 있게 하는 경우 화면의 다른 부분에 복사 버튼을 또 만들면 안 됩니다.

편집 옵션을 버튼으로 만들지 마세요. 버튼으로 만들면 사용자는 표준 제스처를 사용하지 않고 버튼을 사용하게 됩니다.

편집 작업을 실행 취소가 가능해야 합니다. 누군가 작업을 수행한 후에 마음을 바꿀 수 있으므로 항상 실행 취소와 다시 실행 지원을 구현하세요.

옵션 선택지를 최소화하세요. 너무 많은 선택지는 사용자에게 부담스러울 수 있습니다.

3. Label

레이블은 화면상의 인터페이스 요소를 설명하거나 짧은 메시지를 제공합니다. 사람들은 레이블을 편집할 수 없지만 때때로 레이블의 내용을 복사할 수 있습니다. 레이블은 정적 텍스트를 얼마든지 표시할 수 있지만 짧게 유지하는 것이 가장 좋습니다.

레이블은 읽기 쉬워야 합니다. 레이블에는 일반 텍스트 또는 스타일이 지정된 텍스트가 포함될 수 있습니다. 레이블의 스타일을 조정하거나 사용자 지정 글꼴을 사용하는 경우 읽기 쉽도록 해야 합니다.

4. Page Control

페이지 컨트롤은 현재 페이지의 위치를 보여주며, 흰색 점은 현재 페이지를 나타냅니다. 시각적으로 이 점들은 항상 같은 간격이며, 화면에 너무 많이 나타나면 잘립니다. 사용자는 페이지 컨트롤의 앞이나 뒤쪽을 탭 하여 다음 또는 이전 페이지를 방문할 수 있지만, 특정 점을 탭 하여 특정 페이지로 이동할 수는 없습니다. 탐색은 항상 페이지를 한쪽으로 스와이프 하여 순차적으로 발생합니다.

hierarchical page와 함께 페이지 컨트롤을 사용하지 마세요. 페이지 컨트롤은 다른 계층의 페이지와 함께 사용되면 안 됩니다. 페이지 컨트롤은 같은 계층의 페이지를 위해 설계되어야 합니다.

너무 많은 페이지를 표시하지 마세요. 10개 이상의 점은 한눈에 보기 어렵고, 순차적으로 방문하는데 많은 시간을 소비합니다. 10 페이지가 넘을 경우 비 순차적 탐색을 가능하게 하는 다른 정렬(ex: 그리드)을 사용하세요.

5. Refresh Content Controls

새로 고침 컨트롤은 기본적으로 숨겨져 있으며 다시 로드할 화면에서 아래로 끌 면 나타납니다. 예를 들어 Mail의 경우 Inbox 메시지 목록을 아래로 끌어 새 메시지를 확인할 수 있습니다.

콘텐츠는 자동으로 업데이트되어야 합니다. 사용자는 직접 새로고침을 컨트롤할 수 있다는 것을 잘 알고 있지만 정기적으로 자동 새로고침이 이루어지기를 기대합니다. 사용자에게 모든 업데이트를 시작할 책임을 부여하지 마세요. 데이터를 정기적으로 업데이트하여 최신 상태로 유지하는 것이 좋습니다.

6. Slider

슬라이더는 엄지(thumb)라고 불리는 컨트롤이 있는 가로 트랙으로써, 손가락으로 슬라이드 하여 미디어 재생 중 화면 밝기나 위치와 같이 최소값과 최대 값 사이를 이동할 수 있습니다. 슬라이더의 값이 변경되면 최소값과 최대값 사이의 트랙 부분이 색상으로 채워집니다. 슬라이더는 선택적으로 최소, 최대값을 아이콘으로 표시할 수 있습니다.

슬라이더의 모양을 변경할 수 있습니다. 트랙 색상, 및 좌우 아이콘을 포함한 슬라이더의 모양을 앱의 디자인과 어울리게 변경하여 의도를 전달할 수 있습니다. 예를 들어 이미지 크기를 조정하는 슬라이더는 왼쪽에 작은 이미지 아이콘을 표시하고 오른쪽에 큰 이미지 아이콘을 표시할 수 있습니다.

슬라이더를 사용하여 오디오 볼륨을 조정하지 마세요. 만약 앱에 볼륨 컨트롤을 제공해야 하는 경우 커스토마이즈 된 볼륨 화면을 사용해야 하고, 볼륨 조절 슬라이더와 오디오 출력장치를 변경하기 위한 컨트롤이 포함되어야 합니다.

7. switch

앱의 스타일과 일치하도록 스위치의 모양을 조정하는 것이 좋습니다. 스위치의 색상으로 on / off를 나타내거나 맞춤 이미지를 사용하여 나타낼 수 있습니다.

테이블 행에서만 스위치를 사용하세요. 스위치는 on / off로 전환할 수 있는 설정 목록과 같이 테이블에서 사용하기 위한 것입니다. 도구 모음이나 탐색 모음에 비슷한 기능이 필요한 경우 스위치가 아닌 다른 버튼을 사용하고 상태를 알리는 두 개의 다른 아이콘을 제공하세요.

레이블 값을 사용하여 스위치 값을 설명하지 마세요. 스위치가 켜져 있거나 꺼져 있다는 것을 텍스트로 설명하는 레이블을 제공하면 인터페이스가 혼란스럽습니다.

스위치가 관련된 다른 콘텐츠에 영향을 끼친다는 것을 고려하세요. 스위치는 종종 화면상의 다른 콘텐츠에 영향을 미칩니다. 예를 들어 설정에서 비행기 모드 스위치를 사용하면 셀룰러 및 개인 핫스팟과 같은 특정 설정이 비활성화됩니다.

8. text field

텍스트 필드는 사용자가 탭 하면 자동으로 키보드를 가져옵니다. 텍스트 필드를 사용하여 이메일 주소와 같은 소량의 정보를 요청하세요.

텍스트 필드에 힌트를 표시하여 의사소통을 돕습니다. 텍스트 필드에 다른 텍스트가 없을 때 "email" 또는 "password"와 같은 placeholder 텍스트가 포함될 수 있습니다. placeholder 텍스트가 충분하다면, 텍스트 필드를 설명할 별도의 레이블을 사용하지 마세요.

적절한 경우 보안 텍스트 필드를 사용하세요. 앱에서 비밀번호와 같은 중요한 데이터를 요청할때는 항상 보안 텍스트 필드를 사용하세요.