iOS human interface guidelines(HIG)

1. iOS
Human Interface
Guidelines
Last updated: 1 Mar 2014
http://www.cedars.kr

2. • Designing for iOS 7
• iOS App 기본
• 레이아웃과 네비게이션
• 인터렉티브, 피드백
• 애니메이션
• 브랜딩
• 색상과 타이포그라피
• 아이콘과 그래픽
• iOS
• Design 원칙
• Concept이 제품이 되기까지
• Case Study:
• From desktop to iOS
• Running on iPhone 5
• iOS Technology Preview
• UI Elements: Bars
• Content View
• Controls
• Temporary Views
• Graphic Resources

3. Designing for iOS 7

4. iOS 7의 테마
• Deference
- UI는 유저가 컨텐츠를 이해하고 상호작용하는 것을 도와주어야 하지만, 컨텐츠에 집
중하는 것을 방해해서는 안된다.
• Clarity
- 글꼴은 읽기 쉽게, 아이콘은 이해하기 쉽게, 장식적인 요소는 잔잔하게(subtle), 기능
으로부터 모티브를 얻은 디자인을 지향한다.
• Depth
- 눈으로 보여지는 요소들은 층 구성(layered)으로 이루어져서 사용자의 이해를 돕고
재미를 추가한다.

8. Deference
• 컨텐츠를 살리기 위해서
전체 화면 Flat 반투명

9. Clarity
여백의 활용 제한적인 색상 시스템 폰트

10. Depth
• 사용자의 현재 위치를 알려주기 위해서
투명배경의 사용 Parallax Effect

12. iOS App 기본

13. iOS App 요소
Bar
Content View
Control

14. 가이드 1.
앱은 바로 시작할 수 있어야 한다.
• 사용자가 앱을 테스트하는 데에는 1-2분 이상 사용하지 않음.
• (가능하면) 시작화면을 별도로 구성하지 않음.

15. 가이드 1.
앱은 바로 시작할 수 있어야 한다.
• 시작할 때 입력하는 정보의 양을 최소화한다.
• 80퍼센트의 사용자에게 필요한 정보는 무엇일까?
• 기기에서 얻을 수 있는 데이터를 최대한 활용.
• 로그인해야만 보여지는 컨텐츠는 가능하면 뒤로 미룬다.
• 시작화면은 앱의 첫화면과 거의 유사한 화면으로 제작
• 가능하면, 약관 동의서 같은 화면을 처음에 표시하지 않는다.
• 앱을 재시작하면 마지막에 사용하던 곳으로 돌아가게 한다.

16. 가이드 2.
앱은 언제든지 종료될 수 있다.
• 보관이 필요한 사용자 정보는 바로바로 저장한다.
• 앱을 강제로 종료하지 말자.
• 앱에서 필요한 기능이 막힌 경우에는 표시를 해주자.
• 앱에서 필요한 환경설정이 비활성화 된경우 표시해주자.

17. 레이아웃과 네비게이션

18. 레이아웃
• 터치할 수 있는 항목은 최소 44 x 44 point 이상 되어야한다.

19. 레이아웃
• 컨텐츠의 중요도에 따른 배치를 한다.

20. 레이아웃
• 시각적인 무게(visual weight)를 이용하여 정보의 중요도를 표시한다.

21. 레이아웃
• 가능한 UI의 일관성을 유지하자.

22. 네비게이션
• 앱에서 주로 사용되는 정보의 형태:
- Hierarchical
- Flat
- Content- or experience-driven

23. Modal 컨텍스트
• 모달(modal)이란?
- 사용자가 보던 화면을 일시중단하고 집중해서 보여지는 새 영역

24. Modal 컨텍스트
• Modal 창은 사용자의 사용을 가로막게 되므로, 꼭 필요할 때만 사용한다.
- 반드시 사용자가 봐야만 하는 내용
- 적절한 사용자 선택이 없으면 정보가 유실될 수도 있는 상황에서 사용
!
• Modal 창은 가능하면 작고 간단 명료하게 만든다.
• 필요한 경우 반복되는 메시지는 환경설정에서 끌 수 있도록 한다.

25. 인터렉티브, 피드백

26. 제스쳐의 종류

27. 제스쳐의 종류

28. 제스쳐의 종류

29. 제스쳐 사용 가이드라인
• 기본 제스쳐의 용도를 바꾸지 말자
• 복잡한 제스쳐를 특정 작업을 위한 “유일한 방법”으로 만들지 말자
• 가능하면 새로운 제스쳐를 정의하지 말자

30. 터치를 유도하는 컨트롤
• 버튼이 반드시 frame이 필요한 것은 아님
• 아래에서는 액티브 컬러가 interactive한 컨트롤임을 나타내고 있음.

31. 터치를 유도하는 컨트롤
• 필요한 경우에는 border, 색으로 구분한다

32. 사용자의 이해를 도와주는 피드백
• 가능하면 현재 UI 안에서 사용자의 상태를 표시해주자.
• 불필요한 알림창(alert view)를 줄인다.

33. 데이터 입력은 쉬워야 한다.
• 사용자가 선택하기 편하게 하자.
• 가능하면 입력 대신 기기에서 읽어올 수 있는 정보를 활용하자.
• 많은 정보를 입력할 때에는 give and take 방법을 활용해보자.

34. 애니메이션

35. 적절한 애니메이션은
• 현재 상태 정보를 제공하고,
• Direct manipulation을 가능하게 하며,
• 사용자가 한 행동의 결과를 시각적으로 보여준다.

36. 애니메이션 가이드라인
• 불필요한 애니메이션을 최소화하자.
• 앱 내에서 애니메이션은 일관성을 유지하자.
• 물리법칙을 따르는 애니메이션이 직관적이다.

37. 브랜딩

38. 브랜딩
• 브랜딩 요소(로고 등)이 컨텐츠보다 돋보이지 않아야 한다.
• iOS 7에 최적화되어 있다는 느낌을 주려면, iOS 7의 기본 요소인 deference, clarity,
depth를 적절히 활용해보자.

39. 색상과 타이포그라피

40. 색상
• 앱에서 색상이 가지는 힘은, 인터렉티브함을 더하고 에너지를 주며 시각적인 연결감을 준
다. (굉장히 뜬구름이네요 -_-)

41. 색상
• 구분 주어야 하는 객체 사이에는 50% 이상의 대비(contrast)를 준다.
• 색맹도 앱을 사용할 수 있게 하자.
• 인터렉티브한 요소에는 공통적으로 사용되는 키 컬러를 주자.
• 인터렉티브/넌인터렉티브한 요소에 같은 색상을 사용하지 말자.
• 색상 자체가 사용자의 눈을 어지럽히게 하지 말자.

42. 타이포그라피
• 글자는 읽을 수 있어야 한다.
• 글자를 읽을 수 없을 경우 타이포그라피가 아무리 아름다워도 소용이 없다.
• 사용자 환경설정에서 특별히 큰 글꼴을 지정할 수 있는데, 이 설정에 따라 특정 부분의 글꼴
을 특별히 크게 보여줄 수 있도록 하자.

43. 타이포그라피
• 글꼴은 22 point보다는 커야 한다.
• 본문의 기본값은 34 point이다.
• 네비게이션 바에 있는 글꼴의 크기는 34 point이다. (시스템 정의)
• 가능하면 앱 전체적으로 동일한 글꼴을 사용하자.

44. 아이콘과 그래픽

45. 앱 아이콘
• 앱 스토어에서 사용자들이 가장 먼저 앱을 판단하는 요소는 앱 아이콘이다.
!
!
• 앱 아이콘은 독창적이고, 지저분하지 않고, 집중을 이끌어내고, 잘 기억되어야 한다. (말이
쉽지!)
• 앱 아이콘은 다양한 사이즈에서도 잘 인식될 수 있어야 한다.

46. 바 아이콘
• 시스템에서 정의한 바 아이콘을 가능하면 사용하자.
• 사용자들은 아무런 부연 설명을 해 주지 않더라도 용도를 이해하게 될 것이다.
!
• 툴바에서는 텍스트가 더 효용적일 때도 있다.

47. 그래픽
• 레티나 디스플레이에 대응하자. (@2x)
• 사진은 가로/세로비율을 바꿔서 표시하지 말자.
• 애플 제품을 본딴 그래픽은 앱 심사에서 문제가 될 수 있다.

48. iOS 통합

49. Standard UI elements
• iOS가 업데이트되면 자동으로 업데이트 된다.
• 기본적으로 커스터마이제이션을 할 수 있다.
• 사용자가 직관적으로 사용할 수 있다.
!
• 표준 UI를 사용할 때에는 가이드라인을 지킨다.
• 표준 UI와 모양이 같지만 다르게 동작하는 커스텀 UI를 만들지 말자.

50. Device Orientation
• 사용자가 기기를 사용하는 방향은 아무도 예측할 수 없다.
• 기기의 방향에 알맞는 화면을 보여주자.
• 가능하면 모든 방향(orientation)을 지원하자.
• 최대한 사용자에게 기기를 돌리라는 메시지를 보여주지 않도록 한다.
• 폰에서 사용자는 가로모드를 통해 “더 보기”를 원한다.

51. File, document
• iOS에는 파인더(파일 익스플로러)가 없다.
• 사용자가 파일시스템이 무엇인지 몰라도 사용할 수 있게 하자.
• 가능하면 iCloud를 통해 저장한다.
• 언제나 유저가 만든 변화를 저장한다.

52. 환경설정
• 대다수의 사용자들에게 유용한 환경설정을 미리 함으로써 settings에 들어갈 필요 줄임
• 가능하면 앱 안에서 환경설정을 할 수 있게 하자.
• 가능하면 중요한 설정은 메인 UI에서 할 수 있게 하자.

53. iOS technologies
• 가능하면 iOS에서 지원하는 최신 기능들을 지원하자.
• 예) 멀티태스킹, 보이스오버, 패스북, 인앱결재, iAd, 게임센터, iCloud 등

54. Design 원칙

55. Aesthetic integrity
미적 일치
• 얼마나 아름다운가가 아닌
• 기능과 외관이 얼마나 어울리는가
• 유틸리티와 앱에 따라 모양, 꾸밈 정도가 달라진다.

56. Consistency
일관성
• 앱 한쪽에서 사용자가 습득한 사용법이 다른 부분에서도 동일하게 적용되어야 함.
• 일관성 정도를 가늠해볼 수 있는 질문
- iOS 표준과 일맥상통하는가
- 앱 내부적으로 일치하는가
- 이전 버전과 일치하는가

57. Direct Manipulation
직접 조작
• 조작을 위해 별도의 컨트롤을 이용하지 않고 터치를 통해 직접 조작하는 느낌.
• 사진을 확대할 때 pinch in/out 이용

58. Feedback
피드백
• 사용자의 동작을 인지하고 결과를 보여주며 이후 진행에 따른 업데이트를 표시한다.
예) 리스트 항목을 탭하면 표시가 됨
• 작지만 의미있는 애니메이션은 좋은 피드백이 된다.
예) 리스트 항목이 삭제될 때 위, 아래 항목이 붙는 애니메이션

59. Metaphors
메타포
• 앱에서 사용되는 객체나 행동이 사용자에게 익숙한 것들과 비슷하다면 사용자는 쉽게 동작
을 익히고 사용할 수 있다.
• 메타포는 현실 세계에서 가져올 수도 있고, 디지털 세계에서 가져올 수도 있다.
• 메타포를 적절하게 활용하면 부가 설명 없이도 사용자가 사용법을 익힌다.
예) 파일을 휴지통에 버리는 것
예) iBooks에서 페이지 넘기기

60. User Control
사용자 조작감
• 사용자가 조작의 주인이 되어야 한다.
• 좋은 앱: 사용자가 많은 부분을 조작할 수 있되 결과가 파괴적인 경우에는 경고한다.
• 앱 안에서 사용자가 조작을 마음대로 익숙하게 하면 편안한 느낌을 받는다.
• 시간이 오래 걸리는 동작은 취소할 수 있게 한다.

61. Concept이 제품이 되기까지

62. 앱 정의하기
• App definition statement
: 간결하게 작성된 앱의 목적과 기능이 담긴 하나의 문장.
• App definition state 작성의 이점
- 많은 기능들이 떠오를 때 어떤 것이 중요한지 알 수 있다.
- 주요 사용자가 누구인지 알 수 있다.

63. 앱 정의 프로세스
• 1단계: 앱에서 필요한 기능을 모두 나열해보자.
• 예) 장보기 앱
- list 생성/삭제
- 조리법 받기
- 가격 비교
- 가게 위치 찾기
- 쿠폰 받기/사용
- 요리시연 영상 보기
- 포함된 영양소 보기

64. 앱 정의 프로세스
• 2단계: 앱의 주요 사용자가 누구인지 본다.
• 그에게 가장 중요한 것은 무엇인가?
• 예) 장보기 앱의 사용자
- 집에서 요리를 하고 사먹는 음식보다 조리하는 음식을 선호한다.
- 쿠폰 사용에 환장(!)했다.
- 특별한 요리 비법을 알고 싶어한다.
- 조리법을 보고 그대로 따라하거나 영감을 얻는다.
- 주로 소량으로 자주 구매하고 대량으로 가끔 구입한다.

65. 앱 정의 프로세스
• 3단계: 주요 사용자에 따라 주요 기능을 추린다.
• 예) 장보기 앱의 주요 기능
- list 생성/삭제
- 조리법 받기
- 쿠폰 받기/사용
!
• 주요 기능을 중심으로 앱의 정의를 내린다.
• 예) “시간이 없지만 요리하기를 즐겨하는 사람들을 위한 쇼핑 리스트 제작 도구”

66. 앱 정의 프로세스
• 3단계: 여기서 멈추지 말자.
• 앱 정의를 앱 개발 전반적인 과정에서 활용한다.
- 새 기능을 추가할 때: 앱 정의에 비추어서 필요한지 다시 생각해본다.
- UI의 기능이나 외관을 결정할 때: 사용자들이 심플한걸 원하는지 복잡한걸 원하는지
생각해본다.
- 앱에서 사용되는 용어를 정할 때: 사용자들이 알아들을 수 있는 말은 무엇인가 생각해
본다.

67. 커스터마이제이션(customisation)
• 나쁜 예) 전화거는 앱

68. 커스터마이제이션(customisation)
• 좋은 예) 수평기 맞추는 앱

69. 커스터마이제이션(customisation)
• 모든 커스터마이제이션은 ‘이유’가 있어야 한다.
• 사용자의 시각적인 부담을 줄여주자.
• 내부적으로 일관성이 있어야 한다.
• 컨텐츠가 여전히 부각되고 있는지 확인해보자.
• 표준 컨트롤을 새로 디자인 할 때에는 한 번 더 생각해보자.
• 충분한 테스트를 거치자

70. 프로토타이핑(prototype)
• 개발 시간을 많이 들여서 다 만든 후에 테스트 하지 말고
• 프로토타입을 만들어서 작은 기능단위로 테스트해보자
• 앱 개발 초기에는 와이어프레임이나 종이 프로토타입으로도 테스트해볼 수 있다.
하지만, 의미있는 피드백을 얻기에는 어려움이 따른다.
• 메인 기능만 담고 있는 프로토타입으로 테스트해서 유의미한 피드백을 얻을 수 있다.
• prototype - feedback - next prototype - feedback - … 반복

71. Case Study:
From desktop to iOS

72. Keynote

73. Keynote

74. Mail

75. Mail

76. Running on iPhone 5

77. iPhone 5를 위한 고려사항
• iPhone 5 이상의 화면은 176 pixel 더 높다.
• 화면의 종류

82. iOSTechnology Preview

83. Passbook
• 멤버쉽 카드, 쿠폰 등을 발행 가능
• 예) 비행기 티켓, 스타벅스 쿠폰 등

84. Multitasking
• 앱 간 전환이 쉬움
• 고려해야 할 상황
- 오디오 인터럽트 발생시 (예: 전화가 올 때)
- 백그라운드로 전환될 때와 다시 돌아올 때의 상황
• 앱이 언제라도 종료되고 다시 시작될 수 있다고 가정
• 전화 중, 테더링 중과 같이 상단 status bar가 높아지는 상황 대비

85. Routing
• iOS 6부터 사용 가능
• 지도상의 특정 두 지점간의 경로를 알아보는 앱
• 이런 앱 종류가 있다라는 것 정도만.

86. Social Media
• 유저들의 현재 화면을 앱 안에서 공유할 수 있게 함
• iOS에서 기본적으로 지원하는 공유 방법
- 문자 메시지
- 메일
- 페이스북 (계정 로그인 된 경우)
- 트위터 (계정 로그인 된 경우)

87. iCloud
• 일부러 동기화하지 않아도 기기간의 데이터 동기가 가능
• iCloud는 개인당 5GB. 최대한 각 앱에서 공간을 적게 사용하면 좋다.
• 사용자가 일일히 동기화 할 항목, 하지 않아야 할 항목을 선택할 필요 없게 디자인하자.

88. In-App Purchase (IAP)
• 앱 내부에서 추가 기능에 대한 구매를 가능하게 하는 기능.
• 인앱결재를 자주 사용하는 경우의 예
- 기본 버전에서 프리미엄 버전으로 업글하는 경우
- 월간 컨텐츠를 구독하는 경우
- 게임에서 새 레벨이나 무기를 구입하는 경우
- 새 책을 구매하는 경우

89. Game Centre
• 게임의 온라인 점수보기로 시작됨
• 앱에서 달성한 업적 관리
• 내 친구들이 달성한 업적도 볼 수 있음

90. Notification Centre
• 사용 예
- 메시지 받음
- 이벤트가 발생함
- 다운로드 받을 수 있는 새 컨텐츠가 생성됨
- 상태(status)가 변함
• 배너, 알림, badge의 형태가 있다.
• 사용자 지정 소리를 낼 수 있다.
• 같은 이벤트에 대해서 중복 알림을 보내지 말자

91. iAd
• 앱 안에 광고를 노출해서 수익을 얻을 수 있음
• iOS에서는 구글 애드몹도 사용 가능

92. AirPrint
• 지원하는 프린터 모델이 네트워크에 연결된 경우
• 앱의 컨텐츠를 무선 출력이 가능함.

93. Location Services
• 위치정보 접근을 위해서 사용자의 동의를 받아야 함. (자동)

94. Quick Look
• 앱에서 만든 “문서”에 대해서
• 앱을 열지 않고도 미리보기를 할 수 있음.

95. Sound
사용자의 기대 이해하기
• 무음모드로 하는 경우
- 전화연결음이나 메시지 소리를 받고 싶지 않음
- 키보드와 터치 피드백 소리를 듣고 싶지 않음
- 게임 할 때에도 꼭 필요한 소리가 아니면 듣고 싶지 않음
• 하지만, 무음 모드에서도 다음 소리는 나야한다.
- 비디오 재생음 (사용자가 명시적으로 비디오를 재생하기 때문에)
- 알람 소리
- 어학 학습 앱에서 발음 소리 등
- 오디오 채팅 앱

96. Sound
사용자의 기대 이해하기
• 기기의 볼륨을 조절하는 경우
- 앱에서 나는 모든 소리를 조절하고 싶어한다.
• 헤드셋/이어폰을 착용하는 경우
- 소리가 남한테 들리지 않고 싶어한다.

97. Sound
앱의 오디오 동작 정의하기
• 꼭 필요한 경우에는 앱 내에서 볼륨 조절을 하게 한다.
(이 경우에도 시스템 볼륨 크기에는 영향을 받는다)
• 가능한 경우 오디오 출력방법을 고를 수 있게 한다.
• 볼륨 조절 컨트롤은 시스템에서 제공하는 것을 사용한다.
• 필요한 경우 리모콘을 이용한 동작에 반응하게 한다. (재생, 일시정지 등)

98. VoiceOver
• 시각 장애인을 위한 서비스
• 화면을 탭 하면 어떤 내용인지 말해줌
• 우리가 할 수 있는 것?
화면을 터치할 때 “어떤 말”을 할지 정의하기

99. Edit Menu
• 텍스트를 꾹 누르면 나오는 메뉴
• 필요한 경우 메뉴 목록을 정의할 수 있다.

100. Undo & Redo
• 가능하면 되돌리기, 다시하기를 지원하자.
• 기본 제스쳐: 흔들기(shake)

101. Keyboards & Input views
• 필요한 경우 사용자 입력 키보드를 디자인할 수 있다.

102. UI Elements: Bars

103. 상태바(Status bar)
• 색상에 따라 두 종류가 있다. iOS 7에는 투명한 것이 기본
!
!
• 상태바를 없앨 수 있으나 꼭 그래야 하는지 다시 생각해보자.
• 네트워크를 접속하는 경우 indicator를 표시해주자.

104. 네비게이션 바(navigation bar)
• 정보를 계층적(hierarchy)으로 보여줌
!
!
!
• 기본적으로 반투명함(iOS 7)
• 가로모드에서는 높이가 좀 더 작아진다(아이폰의 경우, 아이패드는 그대로)
• 필요한 경우 현재 화면을 설명해줄 수도 있다.

105. 툴바(toolbar)
• 화면 하단에서 현재 가능한 동작(action)을 보여주는 방법
!
!
!
• 기본적으로 반투명함
• 아이폰의 경우 하단에, 아이패드의 경우에는 주로 상단에 온다.
• 필요한 경우 세그먼트 바를 넣어서 계층관계를 줄일 수 있다.
• 항목이 3개 이상일 경우 아이콘을 사용하자
• 아이폰의 경우 가로모드에서는 높이가 더 줄어든다.

106. 툴바, 네비게이션 바 아이콘
• 시스템 정의 아이콘

107. 탭바
• 사용자가 다른 모드, 뷰를 전환하기 쉽게 함
!
!
!
• 일반적으로 반투명 (iOS 7), 화면 하단에 위치
• 아이폰의 경우 5개가 최대
• 뱃지를 표시할 수 있다.
• 가이드 1. 앱의 최상위 레벨을 표시하는데 사용하자
• 가이드 2. 기능이 비활성화여부에 따라 항목을 더하거나 빼지 말자: 대신 비활성화

108. 탭바 아이콘
• 시스템 정의 아이콘

109. 탭바 아이콘
• 선택되었을 경우, 아닌 경우

110. 탭바 아이콘
• 선택되었을 경우, 아닌 경우

111. 검색 바(search bar)
• 검색할 때 사용되는 컨트롤
!
• Placeholder: 아무것도 입력하지 않았을 때 안내해주는 텍스트
• Bookmark: 최근 검색어를 불러오는 기능
• Clear button: 입력된 키워드를 지우는 버튼
• Scope bar와 함께 사용되기도 함

112. ContentView

113. ActivityView Controller
• 공유에 사용됨
• 텍스트, 이미지를 지정하면 공유 포맷에 맞게 시스템에서 알아서 보냄

114. CollectionView
• 격자로 아이템을 표시하는 뷰

115. 맵 뷰(map view)
• iOS 6부터 애플 지도 탑재

116. 페이지 뷰 컨트롤러
• 종이 넘기는 효과 낼 수 있음

117. 팝 오버(popover)
• 현재 문맥(context)에 맞는 컨텐츠 표시
• 아이패드 전용
• 닫기 버튼은 기본적으로 없다. (사용이 다 되면 자동으로 사라짐)

118. 스크롤 뷰(scroll view)
• 미리 정의된 모습이 없다. (기본적으로 스크롤 바도 안보임)
• 화면이 처음 보이면 스크롤 바가 flash 된다(깜빡임)
• 스크롤 방향과 속도에 영향을 받아서 스크롤 됨
• 모드 1. 일반 모드
• 모드 2. 페이징 모드 (한 화면씩 넘기기 모드)

119. SpiltView Controller
• 아이패드에서 한 화면에 두 아이템을 보여줌
• 아이패드 전용
• 주로 왼쪽에는 네비게이션 영역, 오른쪽에는 컨텐츠 영역이 보여짐

120. 테이블 뷰
• 스크롤 되는 여러 항목을 나타내는데 적합
• 기본 높이: 44 point (88 pixel)

125. • 선택한 아이템에 대해서는 피드백을 제공하자
• 컨텐츠가 많은 경우 화면 로딩 자체를 가로막지 말고, 일단 화면은 로딩한 후에 세부 아이템
을 로딩하자 -> 기다리는 느낌을 줄인다.
• 필요한 경우 커스텀 셀을 만들자. (위에서 제시한 4가지 모양의 셀이 아닌 경우)

126. 텍스트 뷰(text view)
• 텍스트 입력을 위한 기본 컨트롤
!
!
!
!
• 다양한 높이 지원
• 스크롤링 지원

127. 웹 뷰(web view)
• 웹 컨텐츠를 표시하는 영역
• HTML 표시

128. Controls

129. Activity Indicator
• 기다리는 상태 표시
!
!
!
• 애니메이션되는 상태로 표시하자
• 사용자로 하여금 앱이 멈추지 않은 것으로 보여지게 해서 안심시키는 기능 수행.

130. 연락처 추가 버튼 (Contact Add)
• 특정 컨트롤러에 연락처에 있는 사람을 추가-포함 시킬 때 사용되는 버튼

131. Date Picker
• 특정 날짜 혹은 시간을 고를 때 사용됨
!
!
!
!
• 휠을 이용해서 선택이 가능
• 선택된 값은 검정색, 그렇지 않은 값은 회색
• 지원 모드: 날짜와 시간, 날짜, 시간, 카운트다운 타이머
• 분의 간격을 조절 가능

132. Detail Disclosure button
• 이 버튼을 누르면 세부 정보를 더 볼 수 있다는 것을 암묵적으로 표시

133. Label
• 고정 텍스트 표시

134. Network Activity Indicator
• 네트워크를 사용하고 있음을 알려줌
• 데이터 사용에 민감한 사용자에게 알려주기 위함
• 상단 바(status bar)에 표시됨

135. Page Control
• 넘기는 페이지의 총 페이지 갯수와 현재 페이지 위치를 표시하는 컨트롤
• 이게 있으면 사용자는 직관적으로 여러 페이지가 있고 스크롤을 통해 이동할 수 있다는 것
을 알게

136. Picker
• 여러개의 항목을 고르는 일반적인 피커 (이 중 특별한 것이 date picker)

137. ProgressView
• 상태 진행을 알려줌
• 형태: 기본 형태, 바 형태

138. Refresh Control
• 테이블 뷰에서 상단에서 끌어 내려서 현재 보고 있는 컨텐츠를 update하게 하는 컨트롤
!

139. Segmented Control
• 약 2-3개의 아이템이 존재하고 현재 선택된 아이템이 무엇인지 표시하는 컨트롤
!
• 텍스트와 이미지를 섞지 말자
• 탭 가능한 사이즈로 조절하자

140. Slider
• 지정된 범위 안에서 값을 조절하는데 사용되는 컨트롤

141. Stepper
• 값을 1씩, 혹은 지정한 단위 만큼씩 변하게 할 수 있는 컨트롤

142. Switch
• 켜고 끄는 값을 조작할 때 사용됨
• 테이블 뷰에 포함되어서도 자주 사용됨 (주로 설정에서)

143. System Button
• 액션(action) 가능한 버튼을 나타냄
!
• iOS 7부터 테두리가 없어짐
• 아이콘이나 텍스트를 포함하는 것이 가능
• 텍스트를 사용할 경우 “동사”를 나타내자
• “제목” 형태의 대소문자 표시를 하자(button: x, Button: o)
• 너무 긴 타이틀을 만들지 말자

144. Text Field
• 한 줄의 텍스트를 입력받는 컨트롤
!
!
!
• 고정된 높이
• Round된 테두리를 가지고 있음

145. TemporaryViews

146. Alert
• 중요한 선택을 위한 경고창을 표시 / 안전한 선택이 “우측”에 온다.
!
!
!
!
• 제목에는 “제목” 스타일의 대소문자를, 본문에는 “문장” 스타일의 대소문자를 적용한다.

147. Action Sheet
• 사용자 문맥에서 여러 개의 선택을 할 경우 제공
!
!
!
!
!
• 중요한 (파괴적인) action 전에는 확인하는 용도로 사용됨
• 파괴적인 action은 빨간색으로 표시, 안전한 버튼은 가장 아래쪽에 위치

148. ModalView
• 새로 뜬 창
• 화면 전체를 차지함, 아이패드의 경우에는
화면에서 차지하는 크기를 조절 가능
• 새로 작업이 필요할 경우 사용
• 애니메이션을 적절히 사용하자
- 아래에서 위로 뜨는 경우: 새 작업, 취소 가능
- 화면이 뒤집히는 경우: 화면의 뒷면 같은 느낌

149. Graphic Resources

150. Icon, image 크기

152. App Icon
• 앱을 대표하는 이미지
• 인식이 잘 되게 하자
• 단순한 것이 인식이 잘 된다
• 앱의 메인 아이디어를 추상화 해보자

153. Launch Images

154. Bar Button Icons