SlideShare a Scribd company logo
Human Interface
Guidelines for iOS
UI Element Part.
Seungmin Shim @CodeSquad
2018.01.08
Views
- 앱 콘텐츠를 표시
- 하위 뷰를 표시
- 콘텐츠 조회, 수정, 갱신, 삭제 가능
UI Elements
Bars
- 앱 내 사용자의 위치 표시
- 문맥정보를 가지고 적합한 기능 또는 정보 제공
Controls
- 사용자 입력을 받음
- 부수적인 정보 표시
Temporary Views
-특정 상황에서 중요한 메시지를 전달하고
추가적인 입력을 받기 위한 일시적인 뷰
Bars
UI Elements
Navigation Bars
계층구조로 구성된 연속적인
페이지를 차례로 조회 가능
•위치: 화면 상단의 상태바 아래
•좌측: 보통 뒤로가기 버튼 삽입. 보통
이전 페이지 제목으로 표시.
•우측: 기타 컨트롤 요소 삽입. 보통
수정 또는 완료 버튼 표시.
뒤로가기 버튼 기타 컨트롤 요소
숨김 처리
•제스처 발생, 키보드 노출, 뷰 사이즈 변경 등의 상황에 바를 숨긴다.
•콘텐츠를 전체화면으로 보여주는 경우, 바를 숨기는 편이 좋다.
Navigation Bars
바 내부에 컨트롤 요소 배치 시
권유사항
•컨트롤 요소를 너무 많이 넣지 않는다.
•버튼 사이 간격을 넓게 한다.
(UIBarButtonSystemItemFixedSpace 참고)
•뒤로가기 버튼은 Standard Back Button 사용.
항상 직전 화면을 표시하는 액션만 취해야 한다.
•세그먼트 컨트롤을 사용하면 페이지들의 계층
구조를 단순하게 보여줄 수 있다.
•세그먼트 컨트롤을 넣을 땐 타이틀을 제외한다.
타이틀 배치 시 권유사항
•현재 보여지는 뷰의 제목을 표시하는 편이 좋다.
•종류: Standard title, Large title
•기본적으로 Large title로 표시한 후, 스크롤 등의 이벤트가 발생 시
Standard title로 변경하는 것이 좋다. (prefersLargeTitles 참고)
Standard TitleLarge Title
현재 뷰 제목 컨트롤 요소
세그먼트 컨트롤
Tab Bars
앱 내에서 다른 섹션으로 스위칭 가능
•앱 구조를 단순하게 표시할 수 있다. 앱 레벨에서 사용한다.
•위치: 화면 하단
•탭바 버튼은 액션을 수행하는 데 사용하지 않는다. 현재 뷰에서 특정
액션을 취해야 하는 경우, Tool Bar를 사용한다.
•기기 사이즈나 오리엔테이션에 따라 보여지는 탭 개수가 달라진다.
•너무 많은 탭을 쓰지 않는다: 보통 3~5개의 탭을 쓴다.
•탭은 항상 활성화 상태로 둔다: 탭 내부 콘텐츠가 사용할 수 없더라
도 탭 내부에서 이를 표시한다.
•특정 탭에 업데이트된 정보가 있으면 배지를 달아서 표시할 수 있다.
•액션 수행에 사용하지 않음
•3~5개가 적당
•항상 활성화 상태
•업데이트 표시는 배지 사용
Tab Bars
Q. 상단에 위치한 탭바?
A. iOS에서 탭바는 하단에 배치되기 때문에 위 예시들은 탭처럼 구현된 커스텀 뷰이다.
안드로이드와 디자인 통일을 위해 탭을 상단에 배치하기도 한다.
Tool Bars
현재 뷰에서 수행가능한 기능 표시
•위치: 화면 하단
•현재 화면과 관련된 버튼만 표시한다.
•툴바 위에 세그먼트 컨트롤은 사용하지 않는 편이 좋다.
•텍스트 버튼들은 간격을 넓게 한다
(UIBarButtonSystemItemFixedSpace)
Q. 툴바?
Search Bars
•단독으로 배치되거나 내비게이션 바 등의 뷰 내부에 배치
•Text Field 말고 Search Bar 요소를 이용한다.
•Clear 버튼 사용
•Cancel 버튼을 만들어 검색을 중단할 수 있도록 한다.
•검색 중 하단에 연관검색어를 보여주면 좋다.
•힌트 문구를 넣어 검색 가능한 범위를 알 수 있도록 한다.
모두 지우기 검색 취소
연관 검색어 리스트
검색어 힌트
Scope Bar
검색 바에 붙이면 검색 범위를 좁힐 수 있다.
Status Bars
현재 시간, 네트워크 상태, 배터리 등 기기의 현재 상태를 표시
•시스템 제공 바를 사용한다.
•앱 디자인에 따라 바 색상을 변경할 수 있다: Light / Dark
•기본적으로 투명해서 콘텐츠가 비쳐보인다: 상태바 내용이 잘 보일 수 있도록
상태바 뒷부분에 UIBlurEffect를 적용하여 흐리게 만든다.
•전체화면으로 미디어를 보여줄 때는 상태바를 잠시 숨긴다.
Light Dark
Views
UI Elements
Tables
컬럼 1개인 리스트로,
여러 줄의 데이터를 스크롤 조회 가능
•주로 텍스트 기반의 콘텐츠나 Split View에서 내비게이션을
표시할 때 사용됨.
•테이블 너비를 고려한다.
•이미지 등의 추가적인 데이터를 보여주기 위해 기다리지 않는
다: 텍스트 데이터부터 빠르게 보여준다.
•콘텐츠가 로드될 때까지 Progress Indicator를 보여준다.
•테이블 콘텐츠를 정기적으로 업데이트하는 방법을 고려한다.
단, 업데이트될 때 현재 스크롤 위치는 유지한다.
Tables
Plain
•행이 라벨이 있는 섹션 단위로 묶일 수 있다.
•Header와 Footer를 가질 수 있다.
•우측에는 색인(index)을 세로로 삽입할 수 있다.
•단, 우측에 Disclosure Indicator 등의 요소가 있
으면 색인은 넣지 않는다.
Grouped
•행이 그룹 단위로 묶일 수 있다.
•Header와 Footer를 가질 수 있다.
•항상 1개 이상의 그룹을 가지며, 각 그룹은 1개
이상의 행을 가진다.
•색인은 삽입할 수 없다.
Disclosure
Indicator
Footer
Header
Index
Tables
Subtitle
Left Detail
Basic
Right Detail
행 스타일
이미지 삽입 가능
제목 왼쪽 정렬
부제목 삽입
제목
왼쪽 정렬
부제목
오른쪽 정렬
제목
오른쪽 정렬
부제목
왼쪽 정렬
Collections
정렬된 콘텐츠 모음을 관리하고
시각적인 레이아웃으로 표시
•엄격한 선형구조를 요구하지 않기 때문에, 여러 사이즈로 콘텐츠들을 보
여주는 데 적합하다.
•콘텐츠 주위에 패딩 사용: 레이아웃을 깨끗하게 유지하고 콘텐츠가 겹치
는 것을 방지할 수 있다.
•텍스트 콘텐츠 배치 시, 컬렉션보다 테이블 사용
Split Views
스크린을 두 화면으로 나누어 관리
•주 화면(왼쪽): 변하지 않는 내용 표시
•보통 카테고리(내비게이션) 표시
•사용하지 않을 땐 숨겨둔다.
•보조 화면(오른쪽): 관련 콘텐츠 표시
•화면 분할은 콘텐츠 균형에 맞게 한다:
•기본적으로 주 화면은 1/3, 보조 화면은 2/3를
차지한다.
•보조 화면이 주 화면보다 더 작아지면 안된다.
•숨겨져 있는 주 화면 노출 시, 여러 방법 제공:
•스와이핑, 버튼 클릭 등
주 화면
Master
보조 화면
Detail
Split Views
Q. 아이폰에서의 스플릿 뷰인가?
A. 아니다. 커스텀 뷰이다.
Scroll Views
사용자와 상호작용 시, 일시적인 스크롤 인디케이터 노출
•tap, flick, drag, pinch, swipe 제스처를 따른다.
•사용자 제스처의 적정선을 설정한다: 예를 들어, 줌인 시 너무 커지거나 작
아지지 않도록 최대 스케일, 최소 스케일 값을 설정한다.
•페이징 모드로 설정 시: 스크롤 시 새 페이지로 전환 가능
•스크롤 뷰 안에 스크롤 뷰를 중첩해서 넣지 않는다.
•스크롤 뷰는 한 화면에 1개만 보여준다:
•만약 2개의 스크롤 뷰를 넣어야 한다면, 다른 방향으로 스크롤 하도록
만든다. 제스처가 다른 뷰에 영향을 주지 않기 때문.
Pages
문서, 책, 메모장, 달력 등에 사용되며,
여러 장의 콘텐츠를 차례대로 접근 가능
•화면 전환 방법: Scrolling 또는 Page-curl
•연속되지 않는 특정 페이지에 바로 접근할 수 있도록 구현하면 좋다.
Text Views
•텍스트 뷰는 어떤 높이도 될 수 있으며, 콘텐츠가 뷰보다
길어질 때 스크롤 가능하다.
•텍스트는 읽기 쉽게 쓴다:
•여러 글꼴, 색 등을 입혀 창의적인 방법을 사용할 수 있
지만, 콘텐츠 가독성을 유지하는 것이 중요하다.
•Dynamic Type을 사용하면 기기에서 텍스트 크기가 변
경되어도 여전히 좋게 보인다.
•만약 텍스트뷰가 수정 가능하면(editable), 탭 시 키보드
가 올라온다.
•적절한 키보드를 보여준다: 효율적인 텍스트 입력을 위해
서는 필드에 들어갈 콘텐츠 타입에 맞는 키보드를 노출해
야 한다. (UIKeyboardType)
Image Views
한 장의 이미지나 여러 장의 연결된 이미지들을 표시
•이미지는 이미지뷰 안에서 늘어나거나 커지거나 작아지거나 딱 맞춰지거
나 특정 위치에 고정될 수 있다.
•이미지뷰는 기본적으로 사용자 상호작용이 불가능하다.
•연속되는 이미지들을 통해 애니메이션 형태로 보여줄 땐 최대한 같은 사
이즈의 이미지를 사용한다: 시스템이 스케일링을 해주긴 하지만, 미리 이
미지들이 뷰 사이즈에 맞게 처리돼있는 것이 좋은 결과를 보여준다.
•템플릿 이미지로 설정된 이미지: color 값이 제거되고 이미지뷰의 틴트값
을 사용한다.
•이미지를 항상 템플릿 이미지로 그리는 옵션:
UIImageRenderingModeAlwaysTemplate
* 템플릿 이미지란?
단색 이미지로, 마스크를 사용하여 모양을 정의함.
투명도가 있고, 안티앨리어싱 기능이 있으며 명암이 없다.
이는 자동으로 상황이나 상호작용에 따라 적절한 색상 지정, 강조 표시
등을 받아 사용한다.
Map Views
지형정보를 보여주고
빌트인 맵 앱에서 제공하는 기능을 지원
•표준지도, 위성이미지 표시 가능
•pin, overlay, zooming, panning 기능 제공
•이동루트 표시 가능 (feat. 러닝앱)
•예측 가능한 pin 색상을 사용한다: 사용자는 표준 pin 색상에
익숙하다. 목적지는 빨간색, 출발지는 녹색, 사용자 선택 지점
은 보라색으로 표시한다.
Web Views
HTML이나 웹사이트 등 웹 콘텐츠를 앱 내부에 표시
•필요하면 이전페이지보기/ 다음페이지보기 버튼을 활성화한다:
•기본적으로 비활성화 되어있다. 앱에서 여러 페이지의 웹뷰를 보
여줘야 한다면 활성화하는 것이 좋다.
•웹뷰를 웹브라우저로 사용하지 않는다.
Temporary Views
UI Elements
Alerts
•중요한 상황에만 사용한다:
•사용자 작업을 한 번 더 확인하거나 삭제 등의 작업을 수행하
거나 문제 사항을 알릴 때 등에만 사용한다.
•기본 알럿창은 보통 커스터마이즈 될 수 없다.
•필요한 정보만 노출시키도록 사이즈를 최소화한다.
•Landscape 모드, Portrait 모드에서 모두 확인해본다.
Alerts
제목
•한 줄로 작성한다.
•한 단어만 사용하진 않는다: 한 단어만 사용하면 내용란에 부가적인 설명이 필요할 수 있다.
설명
•설명은 되도록 적지 않는다.
•꼭 적어야 한다면, 짧은 문장으로 적는다.
버튼
•주로 버튼은 2개만 배치한다:
•버튼 1개로는 사용자가 상황을 컨트롤하기 힘들다.
•3개 이상의 버튼이 필요하면 액션시트로 대체한다.
•사용자들이 더 많이 누를 것 같은 버튼은 오른쪽에 배치하며, 취소버튼은 항상 왼쪽에 배치한다.
•취소버튼명은 항상 ‘취소(Cancel)’로만 표시되어야 한다.
•Delete 등의 버튼은 Destructive 스타일(UIAlertActionStyleDestructive)로 만든다. 또, 취소 버튼도 같이
제공한다.
•홈 버튼 등으로 앱이 종료되는 경우, 알럿이 취소되도록 구현한다:
•알럿창이 노출된 상황에서 홈 버튼으로 앱이 종료되면, ‘취소’ 버튼을 누른 것과 같은 결과를 내야 한다.
•만약 알럿창에 취소 버튼이 없으면 앱이 종료되는 시점에 취소 액션을 구현할 수도 있다.
제목
부제목
취소 삭제
Alerts
Q. 커스텀 알럿인가?
A. 알럿은 사용자 정의가 되지 않는다.
알럿처럼 만들어 모달 형태로 띄운 커스텀 뷰이다.
Action Sheets
알림 컨트롤러의 일종으로, 2~3 개 이상의 선택지 제공
•새 작업창을 열거나, 종료 여부 확인 시 사용하면 좋다.
•작은 화면에서는 액션시트가 화면 아래에 표시되지만, 큰 화면에서는
팝오버(Popover) 형태로 나타나야 한다.
•아이패드에서는 구현 시에 팝오버로 띄우지 않으면 에러 발생
•취소 버튼을 반드시 넣는다: 액션 시트 마지막 항목으로 배치하면 좋다.
•위험한 선택지는 눈에 띄게 넣는다: 빨간색을 사용하여 눈에 띄게 표시
한다. 액션 시트 첫 항목으로 배치하면 좋다.
•스크롤이 생기지 않도록 너무 많은 항목을 넣지 않는다.
Action Sheets
예시. 커스텀 액션시트
Popovers
특정 컨트롤이나 영역 탭 시
콘텐츠 위에 잠시 뜨는 뷰
• 비모달 형태:
• 스크린의 다른 부분을 탭하거나 팝오
버 위의 버튼을 누르면 닫힘
• 닫히기 직전에 자동으로 내용을 저장
하는 것이 좋다.
• 한 번에 1개만 표시한다.
• 팝오버 위에는 알럿 외에 다른 뷰를 띄
우지 않는다.
• 너무 크게 만들어 스크린 전체를 사용하
지 않도록 주의한다.
Popovers
• 팝오버는 아이패드에 주로 사용되며, 아이폰에선 사용하지 않
는다:
• 아이폰에서는 스크린의 모든 공간을 사용하여 모달형식으로
만 뷰를 표시하기 때문에 팝오버를 쓰지 않는 것이 좋다.
Q. 팝오버인가?
A. 팝오버는 화살표가 있다. 위 예시는 팝오버처럼 만들어 모달형태로 띄운 커스텀 뷰이다.
Activity Views
해당 페이지에 관련된 액티비티 관리
•액티비티:
•현재 페이니 내에서 수행할 수 있는 복사, 즐겨찾기, 검색 등의 작업 단위
•액티비티 뷰의 관리를 받는데, 액션시트나 팝오버 형태로 표시된다.
•시스템 제공 빌트인 액티비티: Print, Message, AirPlay. 액티비티 뷰에 가
장 먼저 표시되며, 순서를 변경할 수 없다. 제외는 가능.
•작업명은 아이콘 바로 아래 간단히 표시: 작업명이 길면 iOS는 텍스트를 먼
저 줄인 후 너무 길면 자른다. 또한, 회사나 제품 이름을 포함시키지 않는다.
•시스템이 제공하는 Action(공유) 버튼을 사용한다.
Controls
UI Elements
Buttons
시스템 제공 버튼
System Button
•주로 내비게이션 바나 툴바
에 사용
•되도록 동사로 작성
Detail Disclosure Button
•세부정보 뷰를 띄움
•테이블에서 특정 행의 세부정
보 페이지 띄울 때 주로 사용
•테이블 행 전체를 세부정보에
사용하고 싶을 땐 Detail
disclosure accessory type을
사용 ( > 표시)
Info Button
•앱의 상세 설정창 표시 시 사용
•현재 뷰의 뒷면을 나타낼 때 사
용하기도 함
Add Contact Button
•연락처 리스트 탐색 시, 새
텍스트필드나 다른 뷰 삽입
시 사용
Labels
•텍스트는 읽기 쉽게 쓴다:
•여러 글꼴, 색 등을 입혀 창의적인 방법을 사용할 수 있지만, 콘
텐츠 가독성을 유지하는 것이 중요하다.
•Dynamic Type을 사용하면 사람들이 기기에서 텍스트 크기를
변경하는 경우에도 여전히 좋게 보이게 할 수 있다.
Text Fields
1줄짜리 라인 필드로, 소량의 정보를 요청할 때 사용
•높이는 고정이다.
•사용자가 탭하면 키보드가 자동으로 노출된다.
•되도록 라벨을 따로 두지 말고 힌트를 사용한다.
•오른쪽 끝에 Clear 버튼을 삽입한다.
•암호와 같은 중요한 데이터를 요청할 때, 항상 보안 필드를 활용한다.
•이미지와 버튼을 사용하여 텍스트 필드에 목적과 추가기능을 표시한
다: 일반적으로 텍스트 필드의 왼쪽 끝은 필드의 목적을 나타내고, 오
른쪽 끝은 북마크와 같은 추가 기능이 있음을 나타낸다.
•여러 줄의 텍스트를 입력받기 위해선 Text View를 사용한다.
•적절한 키보드 유형을 표시한다. (UIKeyboardType)
Edit Menus
•현재 페이지에 적합한 메뉴들만 표시:
•기본적으로, 잘라내기, 복사하기, 붙여넣기, 선택, 전체
선택, 삭제 기능을 제공하지만, 선택적으로 비활성화 시
킬 수 있다.
•필요한 경우, 위치를 변경한다:
•기본적으로 선택한 부분의 위 또는 아래에 배치되지만,
중요한 콘텐츠를 가리고 있는 경우 위치를 변경할 수 있
다.
•수정 불가한 텍스트는 선택/복사가 가능하도록 만들면 좋
다.
•수정 메뉴는 한 번 실행되면 취소할 수 없기 때문에, Undo/
Redo 명령을 제공한다.
Progress Indicators
복잡한 데이터 로드, 동기화 작업 등
수치화 불가능한 작업 수행 중 사용
•계속 움직이도록 만든다: 사용자들
은 인디케이터가 정지되면 작업도
정지되었다고 생각한다.
•기다리는 동안 유용한 정보를 제공
하면 좋다: ‘로딩 중’, ‘인증 중’ 과
같은 모호한 용어는 쓰지 않는다.
왼쪽에서 오른쪽으로 트랙을 채워가면서
작업의 진행률을 보여줌
•취소 버튼이 함께 제공되기도 한다.
•부정확한 진행 정보는 표시하지 않는다.
•기간이 명확한 작업에 사용한다.
네트워킹 발생 시 회전하며,
네트워킹이 연결되면 멈춤
•아이폰X 예외
•몇 초가 지나도 연결이 안 될 때
만 사용한다.
Activity Indicators Progress Bars Network Activity Indicators
Progress Indicators
Q. Progress Bar 인가?
A. Progress bar 라고 할 수 있다.
Refresh Content Controls
•주로 테이블뷰에서 수동으로 새로고침 시 사용된다.
•기본적으로 숨겨져 있으며, 화면을 아래로 드래그하면 나타난다.
•자동 업데이트도 정기적으로 수행하도록 구현한다:
•사용자들은 자동 업데이트가 실행되기를 기대한다.
•값이 추가되는 경우에만 짧은 제목을 제공한다:
•제목을 포함시킬 수 있는데, 대부분의 경우 불필요하다.
•제목을 포함할 경우엔 콘텐츠에 대한 가치있는 정보를 제공한다.
예를 들어, 마지막 업데이트 발생 시점을 보여줄 수 있다.
Refresh Content Controls
예시. 커스텀 새로고침 컨트롤
Page Controls
여러 페이지 중 현재 페이지를 나타냄
•일련의 작은 점으로 표시되는데, 색칠된 점은 현재 페이지를 나타낸다.
•점들은 항상 같은 거리를 유지하며, 너무 많으면 잘린다.
•페이지 컨트롤의 앞부분/뒷부분을 탭하면 바로 앞 페이지나 뒷 페이지
로 이동하지만, 특정 페이지로 이동할 수는 없다.
•계층구조의 페이지에는 사용하지 않는다: 페이지 컨트롤은 페이지들이
관련된 방식을 보여주지 않고, 각 점에 해당되는 페이지를 나타내지 않
는다. 페이지 컨트롤은 동등한 관계에 있는 페이지를 위해 설계되었다.
•항상 콘텐츠와 스크린 사이에 위치해야 한다.
Segmented Controls
각 세그먼트는 상호배타적이며, 다른 뷰를 표시하는 데 사용되기도 함
•모든 세그먼트의 폭은 동일하며, 텍스트나 이미지를 삽입할 수 있다.
•단, 텍스트와 이미지를 혼합하지 않는다.
•세그먼트 수를 제한한다: 아이폰에서는 5개 이하여야 한다.
•콘텐츠 크기도 일관성 있어야 한다:
•모든 세그먼트가 동일한 폭을 가지기 때문에 콘텐츠가 일부 세그먼트만 채우고 다른 세그먼
트는 채우지 않으면 좋아 보이지 않는다.
Switches
Default Custom
상호배타적인 2개의 상태값을 지닌 토글
•스위치 모양을 앱의 스타일에 맞춰 변경하면 좋다.
•스위치는 테이블에서 사용되도록 설계되었다. 테이블 행에만 사용한다:
•툴바나 내비게이션 바에는 스위치 대신 버튼을 사용한다.
•스위치 값을 설명하는 라벨은 넣지 않는다.
•연관 인터페이스의 요소들에 미칠 영향을 고려한다:
•스위치는 종종 화면의 다른 콘텐츠에 영향을 미친다.
•(예) Wi-Fi 스위치 비활성화 시, 사용가능한 네트워크 및 기타 옵션이 사라짐.
Sliders
가로트랙 위에서
최소값과 최대값 사이를 이동시켜 특정 값 변경
•양쪽으로 최소값, 최대값을 의미하는 아이콘을 표시할 수 있다.
•오디오 볼륨에는 슬라이더를 사용하지 않는다:
•앱에서 볼륨 컨트롤을 제공해야 하는 경우, Volume View 사용
Steppers
2개의 세그먼트로 이뤄진 컨트롤.
값을 증가/감소시키는 데 사용
•스테퍼가 영향 주는 값을 명확히 표시한다:
•스테퍼 자체는 값을 표시하지 않기 때문에 변경하는 값이 뭔지 알
려줘야 한다.
•큰 값을 변경할 때는 스테퍼를 사용하지 않는다:
•스테퍼는 보통 몇 번의 탭으로 변경할 수 있는 정도에만 사용한다.
Pickers
•보통 화면 아래쪽에 표시되거나 팝오버 형태로 표시된다.
•테이블 특정 행의 인라인으로 표시되기도 한다.
•피커의 높이는 5개 행 정도이다.
•논리적으로 정렬된 값을 사용한다:
•많은 값이 숨겨져 있기 때문에 사용자가 어떤 값이 나올 지 예측 가능하
도록 만드는 것이 중요하다. (예) 알파벳 순, 날짜 순 등
•피커를 보여주기 위해 화면전환을 하지 않는다:
•현재 페이지 내에서 편집하는 필드 아래나 근처에 위치시킨다.
•아주 긴 리스트를 보여줘야 할 때는 피커 대신 테이블을 사용한다:
•너무 긴 피커는 탐색할 때 지루해질 수 있다. 반면, 테이블은 높이를 조정
할 수 있고 색인이 있기 때문에 빠르게 탐색할 수 있다.
Pickers
Date Picker
특정 날짜나 시간을 선택하는 피커
•4가지 모드가 있다:
•Date: 년/월/일
•Time: 시/분/AM/PM
•Date and Time: 위의 둘 모두 표시 가능
•Countdown timer: 시/분
•분 간격을 넓힐 수 있다: 기본적으로 1분 단위로 제공되지만, 선택
적으로 간격을 설정할 수 있다.
•피커에 표시되는 정확한 값은 사용자의 위치에 따라 다르다.
감사합니다.

More Related Content

Similar to HIG for iOS: UI Element (Bars, Views, Controls)

iOS Human Interface Guidlines #12_SYS4U
iOS Human Interface Guidlines #12_SYS4UiOS Human Interface Guidlines #12_SYS4U
iOS Human Interface Guidlines #12_SYS4Usys4u
 
iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.Dong Jin Lee
 
Unity Scroll View에 관하여
Unity Scroll View에 관하여Unity Scroll View에 관하여
Unity Scroll View에 관하여민수 김
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표Minho Lee
 
Guide To Mobile App UI
Guide To Mobile App UI Guide To Mobile App UI
Guide To Mobile App UI Yun Jin Kim
 
2013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_201310282013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_20131028Yun Jin Kim
 
Windows Phone App Design Guide
Windows Phone App Design GuideWindows Phone App Design Guide
Windows Phone App Design GuideSeo Jinho
 
Design blueb manual_1.0
Design blueb manual_1.0Design blueb manual_1.0
Design blueb manual_1.0중진 한
 
서비스를 성공적으로 만드는 방법
서비스를 성공적으로 만드는 방법서비스를 성공적으로 만드는 방법
서비스를 성공적으로 만드는 방법우영 주
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4Usys4u
 

Similar to HIG for iOS: UI Element (Bars, Views, Controls) (12)

Bootstrap
BootstrapBootstrap
Bootstrap
 
iOS Human Interface Guidlines #12_SYS4U
iOS Human Interface Guidlines #12_SYS4UiOS Human Interface Guidlines #12_SYS4U
iOS Human Interface Guidlines #12_SYS4U
 
iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.
 
Unity Scroll View에 관하여
Unity Scroll View에 관하여Unity Scroll View에 관하여
Unity Scroll View에 관하여
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표
 
Guide To Mobile App UI
Guide To Mobile App UI Guide To Mobile App UI
Guide To Mobile App UI
 
2013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_201310282013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_20131028
 
Dubuplus guide
Dubuplus guideDubuplus guide
Dubuplus guide
 
Windows Phone App Design Guide
Windows Phone App Design GuideWindows Phone App Design Guide
Windows Phone App Design Guide
 
Design blueb manual_1.0
Design blueb manual_1.0Design blueb manual_1.0
Design blueb manual_1.0
 
서비스를 성공적으로 만드는 방법
서비스를 성공적으로 만드는 방법서비스를 성공적으로 만드는 방법
서비스를 성공적으로 만드는 방법
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4U
 

HIG for iOS: UI Element (Bars, Views, Controls)

  • 1. Human Interface Guidelines for iOS UI Element Part. Seungmin Shim @CodeSquad 2018.01.08
  • 2. Views - 앱 콘텐츠를 표시 - 하위 뷰를 표시 - 콘텐츠 조회, 수정, 갱신, 삭제 가능 UI Elements Bars - 앱 내 사용자의 위치 표시 - 문맥정보를 가지고 적합한 기능 또는 정보 제공 Controls - 사용자 입력을 받음 - 부수적인 정보 표시 Temporary Views -특정 상황에서 중요한 메시지를 전달하고 추가적인 입력을 받기 위한 일시적인 뷰
  • 4. Navigation Bars 계층구조로 구성된 연속적인 페이지를 차례로 조회 가능 •위치: 화면 상단의 상태바 아래 •좌측: 보통 뒤로가기 버튼 삽입. 보통 이전 페이지 제목으로 표시. •우측: 기타 컨트롤 요소 삽입. 보통 수정 또는 완료 버튼 표시. 뒤로가기 버튼 기타 컨트롤 요소 숨김 처리 •제스처 발생, 키보드 노출, 뷰 사이즈 변경 등의 상황에 바를 숨긴다. •콘텐츠를 전체화면으로 보여주는 경우, 바를 숨기는 편이 좋다.
  • 5. Navigation Bars 바 내부에 컨트롤 요소 배치 시 권유사항 •컨트롤 요소를 너무 많이 넣지 않는다. •버튼 사이 간격을 넓게 한다. (UIBarButtonSystemItemFixedSpace 참고) •뒤로가기 버튼은 Standard Back Button 사용. 항상 직전 화면을 표시하는 액션만 취해야 한다. •세그먼트 컨트롤을 사용하면 페이지들의 계층 구조를 단순하게 보여줄 수 있다. •세그먼트 컨트롤을 넣을 땐 타이틀을 제외한다. 타이틀 배치 시 권유사항 •현재 보여지는 뷰의 제목을 표시하는 편이 좋다. •종류: Standard title, Large title •기본적으로 Large title로 표시한 후, 스크롤 등의 이벤트가 발생 시 Standard title로 변경하는 것이 좋다. (prefersLargeTitles 참고) Standard TitleLarge Title 현재 뷰 제목 컨트롤 요소 세그먼트 컨트롤
  • 6. Tab Bars 앱 내에서 다른 섹션으로 스위칭 가능 •앱 구조를 단순하게 표시할 수 있다. 앱 레벨에서 사용한다. •위치: 화면 하단 •탭바 버튼은 액션을 수행하는 데 사용하지 않는다. 현재 뷰에서 특정 액션을 취해야 하는 경우, Tool Bar를 사용한다. •기기 사이즈나 오리엔테이션에 따라 보여지는 탭 개수가 달라진다. •너무 많은 탭을 쓰지 않는다: 보통 3~5개의 탭을 쓴다. •탭은 항상 활성화 상태로 둔다: 탭 내부 콘텐츠가 사용할 수 없더라 도 탭 내부에서 이를 표시한다. •특정 탭에 업데이트된 정보가 있으면 배지를 달아서 표시할 수 있다. •액션 수행에 사용하지 않음 •3~5개가 적당 •항상 활성화 상태 •업데이트 표시는 배지 사용
  • 7. Tab Bars Q. 상단에 위치한 탭바? A. iOS에서 탭바는 하단에 배치되기 때문에 위 예시들은 탭처럼 구현된 커스텀 뷰이다. 안드로이드와 디자인 통일을 위해 탭을 상단에 배치하기도 한다.
  • 8. Tool Bars 현재 뷰에서 수행가능한 기능 표시 •위치: 화면 하단 •현재 화면과 관련된 버튼만 표시한다. •툴바 위에 세그먼트 컨트롤은 사용하지 않는 편이 좋다. •텍스트 버튼들은 간격을 넓게 한다 (UIBarButtonSystemItemFixedSpace) Q. 툴바?
  • 9. Search Bars •단독으로 배치되거나 내비게이션 바 등의 뷰 내부에 배치 •Text Field 말고 Search Bar 요소를 이용한다. •Clear 버튼 사용 •Cancel 버튼을 만들어 검색을 중단할 수 있도록 한다. •검색 중 하단에 연관검색어를 보여주면 좋다. •힌트 문구를 넣어 검색 가능한 범위를 알 수 있도록 한다. 모두 지우기 검색 취소 연관 검색어 리스트 검색어 힌트 Scope Bar 검색 바에 붙이면 검색 범위를 좁힐 수 있다.
  • 10. Status Bars 현재 시간, 네트워크 상태, 배터리 등 기기의 현재 상태를 표시 •시스템 제공 바를 사용한다. •앱 디자인에 따라 바 색상을 변경할 수 있다: Light / Dark •기본적으로 투명해서 콘텐츠가 비쳐보인다: 상태바 내용이 잘 보일 수 있도록 상태바 뒷부분에 UIBlurEffect를 적용하여 흐리게 만든다. •전체화면으로 미디어를 보여줄 때는 상태바를 잠시 숨긴다. Light Dark
  • 12. Tables 컬럼 1개인 리스트로, 여러 줄의 데이터를 스크롤 조회 가능 •주로 텍스트 기반의 콘텐츠나 Split View에서 내비게이션을 표시할 때 사용됨. •테이블 너비를 고려한다. •이미지 등의 추가적인 데이터를 보여주기 위해 기다리지 않는 다: 텍스트 데이터부터 빠르게 보여준다. •콘텐츠가 로드될 때까지 Progress Indicator를 보여준다. •테이블 콘텐츠를 정기적으로 업데이트하는 방법을 고려한다. 단, 업데이트될 때 현재 스크롤 위치는 유지한다.
  • 13. Tables Plain •행이 라벨이 있는 섹션 단위로 묶일 수 있다. •Header와 Footer를 가질 수 있다. •우측에는 색인(index)을 세로로 삽입할 수 있다. •단, 우측에 Disclosure Indicator 등의 요소가 있 으면 색인은 넣지 않는다. Grouped •행이 그룹 단위로 묶일 수 있다. •Header와 Footer를 가질 수 있다. •항상 1개 이상의 그룹을 가지며, 각 그룹은 1개 이상의 행을 가진다. •색인은 삽입할 수 없다. Disclosure Indicator Footer Header Index
  • 14. Tables Subtitle Left Detail Basic Right Detail 행 스타일 이미지 삽입 가능 제목 왼쪽 정렬 부제목 삽입 제목 왼쪽 정렬 부제목 오른쪽 정렬 제목 오른쪽 정렬 부제목 왼쪽 정렬
  • 15. Collections 정렬된 콘텐츠 모음을 관리하고 시각적인 레이아웃으로 표시 •엄격한 선형구조를 요구하지 않기 때문에, 여러 사이즈로 콘텐츠들을 보 여주는 데 적합하다. •콘텐츠 주위에 패딩 사용: 레이아웃을 깨끗하게 유지하고 콘텐츠가 겹치 는 것을 방지할 수 있다. •텍스트 콘텐츠 배치 시, 컬렉션보다 테이블 사용
  • 16. Split Views 스크린을 두 화면으로 나누어 관리 •주 화면(왼쪽): 변하지 않는 내용 표시 •보통 카테고리(내비게이션) 표시 •사용하지 않을 땐 숨겨둔다. •보조 화면(오른쪽): 관련 콘텐츠 표시 •화면 분할은 콘텐츠 균형에 맞게 한다: •기본적으로 주 화면은 1/3, 보조 화면은 2/3를 차지한다. •보조 화면이 주 화면보다 더 작아지면 안된다. •숨겨져 있는 주 화면 노출 시, 여러 방법 제공: •스와이핑, 버튼 클릭 등 주 화면 Master 보조 화면 Detail
  • 17. Split Views Q. 아이폰에서의 스플릿 뷰인가? A. 아니다. 커스텀 뷰이다.
  • 18. Scroll Views 사용자와 상호작용 시, 일시적인 스크롤 인디케이터 노출 •tap, flick, drag, pinch, swipe 제스처를 따른다. •사용자 제스처의 적정선을 설정한다: 예를 들어, 줌인 시 너무 커지거나 작 아지지 않도록 최대 스케일, 최소 스케일 값을 설정한다. •페이징 모드로 설정 시: 스크롤 시 새 페이지로 전환 가능 •스크롤 뷰 안에 스크롤 뷰를 중첩해서 넣지 않는다. •스크롤 뷰는 한 화면에 1개만 보여준다: •만약 2개의 스크롤 뷰를 넣어야 한다면, 다른 방향으로 스크롤 하도록 만든다. 제스처가 다른 뷰에 영향을 주지 않기 때문.
  • 19. Pages 문서, 책, 메모장, 달력 등에 사용되며, 여러 장의 콘텐츠를 차례대로 접근 가능 •화면 전환 방법: Scrolling 또는 Page-curl •연속되지 않는 특정 페이지에 바로 접근할 수 있도록 구현하면 좋다.
  • 20. Text Views •텍스트 뷰는 어떤 높이도 될 수 있으며, 콘텐츠가 뷰보다 길어질 때 스크롤 가능하다. •텍스트는 읽기 쉽게 쓴다: •여러 글꼴, 색 등을 입혀 창의적인 방법을 사용할 수 있 지만, 콘텐츠 가독성을 유지하는 것이 중요하다. •Dynamic Type을 사용하면 기기에서 텍스트 크기가 변 경되어도 여전히 좋게 보인다. •만약 텍스트뷰가 수정 가능하면(editable), 탭 시 키보드 가 올라온다. •적절한 키보드를 보여준다: 효율적인 텍스트 입력을 위해 서는 필드에 들어갈 콘텐츠 타입에 맞는 키보드를 노출해 야 한다. (UIKeyboardType)
  • 21. Image Views 한 장의 이미지나 여러 장의 연결된 이미지들을 표시 •이미지는 이미지뷰 안에서 늘어나거나 커지거나 작아지거나 딱 맞춰지거 나 특정 위치에 고정될 수 있다. •이미지뷰는 기본적으로 사용자 상호작용이 불가능하다. •연속되는 이미지들을 통해 애니메이션 형태로 보여줄 땐 최대한 같은 사 이즈의 이미지를 사용한다: 시스템이 스케일링을 해주긴 하지만, 미리 이 미지들이 뷰 사이즈에 맞게 처리돼있는 것이 좋은 결과를 보여준다. •템플릿 이미지로 설정된 이미지: color 값이 제거되고 이미지뷰의 틴트값 을 사용한다. •이미지를 항상 템플릿 이미지로 그리는 옵션: UIImageRenderingModeAlwaysTemplate * 템플릿 이미지란? 단색 이미지로, 마스크를 사용하여 모양을 정의함. 투명도가 있고, 안티앨리어싱 기능이 있으며 명암이 없다. 이는 자동으로 상황이나 상호작용에 따라 적절한 색상 지정, 강조 표시 등을 받아 사용한다.
  • 22. Map Views 지형정보를 보여주고 빌트인 맵 앱에서 제공하는 기능을 지원 •표준지도, 위성이미지 표시 가능 •pin, overlay, zooming, panning 기능 제공 •이동루트 표시 가능 (feat. 러닝앱) •예측 가능한 pin 색상을 사용한다: 사용자는 표준 pin 색상에 익숙하다. 목적지는 빨간색, 출발지는 녹색, 사용자 선택 지점 은 보라색으로 표시한다.
  • 23. Web Views HTML이나 웹사이트 등 웹 콘텐츠를 앱 내부에 표시 •필요하면 이전페이지보기/ 다음페이지보기 버튼을 활성화한다: •기본적으로 비활성화 되어있다. 앱에서 여러 페이지의 웹뷰를 보 여줘야 한다면 활성화하는 것이 좋다. •웹뷰를 웹브라우저로 사용하지 않는다.
  • 25. Alerts •중요한 상황에만 사용한다: •사용자 작업을 한 번 더 확인하거나 삭제 등의 작업을 수행하 거나 문제 사항을 알릴 때 등에만 사용한다. •기본 알럿창은 보통 커스터마이즈 될 수 없다. •필요한 정보만 노출시키도록 사이즈를 최소화한다. •Landscape 모드, Portrait 모드에서 모두 확인해본다.
  • 26. Alerts 제목 •한 줄로 작성한다. •한 단어만 사용하진 않는다: 한 단어만 사용하면 내용란에 부가적인 설명이 필요할 수 있다. 설명 •설명은 되도록 적지 않는다. •꼭 적어야 한다면, 짧은 문장으로 적는다. 버튼 •주로 버튼은 2개만 배치한다: •버튼 1개로는 사용자가 상황을 컨트롤하기 힘들다. •3개 이상의 버튼이 필요하면 액션시트로 대체한다. •사용자들이 더 많이 누를 것 같은 버튼은 오른쪽에 배치하며, 취소버튼은 항상 왼쪽에 배치한다. •취소버튼명은 항상 ‘취소(Cancel)’로만 표시되어야 한다. •Delete 등의 버튼은 Destructive 스타일(UIAlertActionStyleDestructive)로 만든다. 또, 취소 버튼도 같이 제공한다. •홈 버튼 등으로 앱이 종료되는 경우, 알럿이 취소되도록 구현한다: •알럿창이 노출된 상황에서 홈 버튼으로 앱이 종료되면, ‘취소’ 버튼을 누른 것과 같은 결과를 내야 한다. •만약 알럿창에 취소 버튼이 없으면 앱이 종료되는 시점에 취소 액션을 구현할 수도 있다. 제목 부제목 취소 삭제
  • 27. Alerts Q. 커스텀 알럿인가? A. 알럿은 사용자 정의가 되지 않는다. 알럿처럼 만들어 모달 형태로 띄운 커스텀 뷰이다.
  • 28. Action Sheets 알림 컨트롤러의 일종으로, 2~3 개 이상의 선택지 제공 •새 작업창을 열거나, 종료 여부 확인 시 사용하면 좋다. •작은 화면에서는 액션시트가 화면 아래에 표시되지만, 큰 화면에서는 팝오버(Popover) 형태로 나타나야 한다. •아이패드에서는 구현 시에 팝오버로 띄우지 않으면 에러 발생 •취소 버튼을 반드시 넣는다: 액션 시트 마지막 항목으로 배치하면 좋다. •위험한 선택지는 눈에 띄게 넣는다: 빨간색을 사용하여 눈에 띄게 표시 한다. 액션 시트 첫 항목으로 배치하면 좋다. •스크롤이 생기지 않도록 너무 많은 항목을 넣지 않는다.
  • 30. Popovers 특정 컨트롤이나 영역 탭 시 콘텐츠 위에 잠시 뜨는 뷰 • 비모달 형태: • 스크린의 다른 부분을 탭하거나 팝오 버 위의 버튼을 누르면 닫힘 • 닫히기 직전에 자동으로 내용을 저장 하는 것이 좋다. • 한 번에 1개만 표시한다. • 팝오버 위에는 알럿 외에 다른 뷰를 띄 우지 않는다. • 너무 크게 만들어 스크린 전체를 사용하 지 않도록 주의한다.
  • 31. Popovers • 팝오버는 아이패드에 주로 사용되며, 아이폰에선 사용하지 않 는다: • 아이폰에서는 스크린의 모든 공간을 사용하여 모달형식으로 만 뷰를 표시하기 때문에 팝오버를 쓰지 않는 것이 좋다. Q. 팝오버인가? A. 팝오버는 화살표가 있다. 위 예시는 팝오버처럼 만들어 모달형태로 띄운 커스텀 뷰이다.
  • 32. Activity Views 해당 페이지에 관련된 액티비티 관리 •액티비티: •현재 페이니 내에서 수행할 수 있는 복사, 즐겨찾기, 검색 등의 작업 단위 •액티비티 뷰의 관리를 받는데, 액션시트나 팝오버 형태로 표시된다. •시스템 제공 빌트인 액티비티: Print, Message, AirPlay. 액티비티 뷰에 가 장 먼저 표시되며, 순서를 변경할 수 없다. 제외는 가능. •작업명은 아이콘 바로 아래 간단히 표시: 작업명이 길면 iOS는 텍스트를 먼 저 줄인 후 너무 길면 자른다. 또한, 회사나 제품 이름을 포함시키지 않는다. •시스템이 제공하는 Action(공유) 버튼을 사용한다.
  • 34. Buttons 시스템 제공 버튼 System Button •주로 내비게이션 바나 툴바 에 사용 •되도록 동사로 작성 Detail Disclosure Button •세부정보 뷰를 띄움 •테이블에서 특정 행의 세부정 보 페이지 띄울 때 주로 사용 •테이블 행 전체를 세부정보에 사용하고 싶을 땐 Detail disclosure accessory type을 사용 ( > 표시) Info Button •앱의 상세 설정창 표시 시 사용 •현재 뷰의 뒷면을 나타낼 때 사 용하기도 함 Add Contact Button •연락처 리스트 탐색 시, 새 텍스트필드나 다른 뷰 삽입 시 사용
  • 35. Labels •텍스트는 읽기 쉽게 쓴다: •여러 글꼴, 색 등을 입혀 창의적인 방법을 사용할 수 있지만, 콘 텐츠 가독성을 유지하는 것이 중요하다. •Dynamic Type을 사용하면 사람들이 기기에서 텍스트 크기를 변경하는 경우에도 여전히 좋게 보이게 할 수 있다.
  • 36. Text Fields 1줄짜리 라인 필드로, 소량의 정보를 요청할 때 사용 •높이는 고정이다. •사용자가 탭하면 키보드가 자동으로 노출된다. •되도록 라벨을 따로 두지 말고 힌트를 사용한다. •오른쪽 끝에 Clear 버튼을 삽입한다. •암호와 같은 중요한 데이터를 요청할 때, 항상 보안 필드를 활용한다. •이미지와 버튼을 사용하여 텍스트 필드에 목적과 추가기능을 표시한 다: 일반적으로 텍스트 필드의 왼쪽 끝은 필드의 목적을 나타내고, 오 른쪽 끝은 북마크와 같은 추가 기능이 있음을 나타낸다. •여러 줄의 텍스트를 입력받기 위해선 Text View를 사용한다. •적절한 키보드 유형을 표시한다. (UIKeyboardType)
  • 37. Edit Menus •현재 페이지에 적합한 메뉴들만 표시: •기본적으로, 잘라내기, 복사하기, 붙여넣기, 선택, 전체 선택, 삭제 기능을 제공하지만, 선택적으로 비활성화 시 킬 수 있다. •필요한 경우, 위치를 변경한다: •기본적으로 선택한 부분의 위 또는 아래에 배치되지만, 중요한 콘텐츠를 가리고 있는 경우 위치를 변경할 수 있 다. •수정 불가한 텍스트는 선택/복사가 가능하도록 만들면 좋 다. •수정 메뉴는 한 번 실행되면 취소할 수 없기 때문에, Undo/ Redo 명령을 제공한다.
  • 38. Progress Indicators 복잡한 데이터 로드, 동기화 작업 등 수치화 불가능한 작업 수행 중 사용 •계속 움직이도록 만든다: 사용자들 은 인디케이터가 정지되면 작업도 정지되었다고 생각한다. •기다리는 동안 유용한 정보를 제공 하면 좋다: ‘로딩 중’, ‘인증 중’ 과 같은 모호한 용어는 쓰지 않는다. 왼쪽에서 오른쪽으로 트랙을 채워가면서 작업의 진행률을 보여줌 •취소 버튼이 함께 제공되기도 한다. •부정확한 진행 정보는 표시하지 않는다. •기간이 명확한 작업에 사용한다. 네트워킹 발생 시 회전하며, 네트워킹이 연결되면 멈춤 •아이폰X 예외 •몇 초가 지나도 연결이 안 될 때 만 사용한다. Activity Indicators Progress Bars Network Activity Indicators
  • 39. Progress Indicators Q. Progress Bar 인가? A. Progress bar 라고 할 수 있다.
  • 40. Refresh Content Controls •주로 테이블뷰에서 수동으로 새로고침 시 사용된다. •기본적으로 숨겨져 있으며, 화면을 아래로 드래그하면 나타난다. •자동 업데이트도 정기적으로 수행하도록 구현한다: •사용자들은 자동 업데이트가 실행되기를 기대한다. •값이 추가되는 경우에만 짧은 제목을 제공한다: •제목을 포함시킬 수 있는데, 대부분의 경우 불필요하다. •제목을 포함할 경우엔 콘텐츠에 대한 가치있는 정보를 제공한다. 예를 들어, 마지막 업데이트 발생 시점을 보여줄 수 있다.
  • 41. Refresh Content Controls 예시. 커스텀 새로고침 컨트롤
  • 42. Page Controls 여러 페이지 중 현재 페이지를 나타냄 •일련의 작은 점으로 표시되는데, 색칠된 점은 현재 페이지를 나타낸다. •점들은 항상 같은 거리를 유지하며, 너무 많으면 잘린다. •페이지 컨트롤의 앞부분/뒷부분을 탭하면 바로 앞 페이지나 뒷 페이지 로 이동하지만, 특정 페이지로 이동할 수는 없다. •계층구조의 페이지에는 사용하지 않는다: 페이지 컨트롤은 페이지들이 관련된 방식을 보여주지 않고, 각 점에 해당되는 페이지를 나타내지 않 는다. 페이지 컨트롤은 동등한 관계에 있는 페이지를 위해 설계되었다. •항상 콘텐츠와 스크린 사이에 위치해야 한다.
  • 43. Segmented Controls 각 세그먼트는 상호배타적이며, 다른 뷰를 표시하는 데 사용되기도 함 •모든 세그먼트의 폭은 동일하며, 텍스트나 이미지를 삽입할 수 있다. •단, 텍스트와 이미지를 혼합하지 않는다. •세그먼트 수를 제한한다: 아이폰에서는 5개 이하여야 한다. •콘텐츠 크기도 일관성 있어야 한다: •모든 세그먼트가 동일한 폭을 가지기 때문에 콘텐츠가 일부 세그먼트만 채우고 다른 세그먼 트는 채우지 않으면 좋아 보이지 않는다.
  • 44. Switches Default Custom 상호배타적인 2개의 상태값을 지닌 토글 •스위치 모양을 앱의 스타일에 맞춰 변경하면 좋다. •스위치는 테이블에서 사용되도록 설계되었다. 테이블 행에만 사용한다: •툴바나 내비게이션 바에는 스위치 대신 버튼을 사용한다. •스위치 값을 설명하는 라벨은 넣지 않는다. •연관 인터페이스의 요소들에 미칠 영향을 고려한다: •스위치는 종종 화면의 다른 콘텐츠에 영향을 미친다. •(예) Wi-Fi 스위치 비활성화 시, 사용가능한 네트워크 및 기타 옵션이 사라짐.
  • 45. Sliders 가로트랙 위에서 최소값과 최대값 사이를 이동시켜 특정 값 변경 •양쪽으로 최소값, 최대값을 의미하는 아이콘을 표시할 수 있다. •오디오 볼륨에는 슬라이더를 사용하지 않는다: •앱에서 볼륨 컨트롤을 제공해야 하는 경우, Volume View 사용
  • 46. Steppers 2개의 세그먼트로 이뤄진 컨트롤. 값을 증가/감소시키는 데 사용 •스테퍼가 영향 주는 값을 명확히 표시한다: •스테퍼 자체는 값을 표시하지 않기 때문에 변경하는 값이 뭔지 알 려줘야 한다. •큰 값을 변경할 때는 스테퍼를 사용하지 않는다: •스테퍼는 보통 몇 번의 탭으로 변경할 수 있는 정도에만 사용한다.
  • 47. Pickers •보통 화면 아래쪽에 표시되거나 팝오버 형태로 표시된다. •테이블 특정 행의 인라인으로 표시되기도 한다. •피커의 높이는 5개 행 정도이다. •논리적으로 정렬된 값을 사용한다: •많은 값이 숨겨져 있기 때문에 사용자가 어떤 값이 나올 지 예측 가능하 도록 만드는 것이 중요하다. (예) 알파벳 순, 날짜 순 등 •피커를 보여주기 위해 화면전환을 하지 않는다: •현재 페이지 내에서 편집하는 필드 아래나 근처에 위치시킨다. •아주 긴 리스트를 보여줘야 할 때는 피커 대신 테이블을 사용한다: •너무 긴 피커는 탐색할 때 지루해질 수 있다. 반면, 테이블은 높이를 조정 할 수 있고 색인이 있기 때문에 빠르게 탐색할 수 있다.
  • 48. Pickers Date Picker 특정 날짜나 시간을 선택하는 피커 •4가지 모드가 있다: •Date: 년/월/일 •Time: 시/분/AM/PM •Date and Time: 위의 둘 모두 표시 가능 •Countdown timer: 시/분 •분 간격을 넓힐 수 있다: 기본적으로 1분 단위로 제공되지만, 선택 적으로 간격을 설정할 수 있다. •피커에 표시되는 정확한 값은 사용자의 위치에 따라 다르다.