iOS human interface guidelines(HIG)

  • 18,440 views
Uploaded on

iOS human interface guidelines(HIG)

iOS human interface guidelines(HIG)

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
18,440
On Slideshare
0
From Embeds
0
Number of Embeds
17

Actions

Shares
Downloads
718
Comments
5
Likes
125

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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)으로 이루어져서 사용자의 이해를 돕고 재미를 추가한다.
  • 5. Deference • 컨텐츠를 살리기 위해서 전체 화면 Flat 반투명
  • 6. Clarity 여백의 활용 제한적인 색상 시스템 폰트
  • 7. Depth • 사용자의 현재 위치를 알려주기 위해서 투명배경의 사용 Parallax Effect
  • 8. iOS App 기본
  • 9. iOS App 요소 Bar Content View Control
  • 10. 가이드 1.
 앱은 바로 시작할 수 있어야 한다. • 사용자가 앱을 테스트하는 데에는 1-2분 이상 사용하지 않음. • (가능하면) 시작화면을 별도로 구성하지 않음.
  • 11. 가이드 1.
 앱은 바로 시작할 수 있어야 한다. • 시작할 때 입력하는 정보의 양을 최소화한다. • 80퍼센트의 사용자에게 필요한 정보는 무엇일까? • 기기에서 얻을 수 있는 데이터를 최대한 활용. • 로그인해야만 보여지는 컨텐츠는 가능하면 뒤로 미룬다. • 시작화면은 앱의 첫화면과 거의 유사한 화면으로 제작 • 가능하면, 약관 동의서 같은 화면을 처음에 표시하지 않는다. • 앱을 재시작하면 마지막에 사용하던 곳으로 돌아가게 한다.
  • 12. 가이드 2.
 앱은 언제든지 종료될 수 있다. • 보관이 필요한 사용자 정보는 바로바로 저장한다. • 앱을 강제로 종료하지 말자. • 앱에서 필요한 기능이 막힌 경우에는 표시를 해주자. • 앱에서 필요한 환경설정이 비활성화 된경우 표시해주자.
  • 13. 레이아웃과 네비게이션
  • 14. 레이아웃 • 터치할 수 있는 항목은 최소 44 x 44 point 이상 되어야한다.
  • 15. 레이아웃 • 컨텐츠의 중요도에 따른 배치를 한다.
  • 16. 레이아웃 • 시각적인 무게(visual weight)를 이용하여 정보의 중요도를 표시한다.
  • 17. 레이아웃 • 가능한 UI의 일관성을 유지하자.
  • 18. 네비게이션 • 앱에서 주로 사용되는 정보의 형태: - Hierarchical - Flat - Content- or experience-driven
  • 19. Modal 컨텍스트 • 모달(modal)이란? - 사용자가 보던 화면을 일시중단하고 집중해서 보여지는 새 영역
  • 20. Modal 컨텍스트 • Modal 창은 사용자의 사용을 가로막게 되므로, 꼭 필요할 때만 사용한다. - 반드시 사용자가 봐야만 하는 내용 - 적절한 사용자 선택이 없으면 정보가 유실될 수도 있는 상황에서 사용 ! • Modal 창은 가능하면 작고 간단 명료하게 만든다. • 필요한 경우 반복되는 메시지는 환경설정에서 끌 수 있도록 한다.
  • 21. 인터렉티브, 피드백
  • 22. 제스쳐의 종류
  • 23. 제스쳐의 종류
  • 24. 제스쳐의 종류
  • 25. 제스쳐 사용 가이드라인 • 기본 제스쳐의 용도를 바꾸지 말자 • 복잡한 제스쳐를 특정 작업을 위한 “유일한 방법”으로 만들지 말자 • 가능하면 새로운 제스쳐를 정의하지 말자
  • 26. 터치를 유도하는 컨트롤 • 버튼이 반드시 frame이 필요한 것은 아님 • 아래에서는 액티브 컬러가 interactive한 컨트롤임을 나타내고 있음.
  • 27. 터치를 유도하는 컨트롤 • 필요한 경우에는 border, 색으로 구분한다
  • 28. 사용자의 이해를 도와주는 피드백 • 가능하면 현재 UI 안에서 사용자의 상태를 표시해주자. • 불필요한 알림창(alert view)를 줄인다.
  • 29. 데이터 입력은 쉬워야 한다. • 사용자가 선택하기 편하게 하자. • 가능하면 입력 대신 기기에서 읽어올 수 있는 정보를 활용하자. • 많은 정보를 입력할 때에는 give and take 방법을 활용해보자.
  • 30. 애니메이션
  • 31. 적절한 애니메이션은 • 현재 상태 정보를 제공하고, • Direct manipulation을 가능하게 하며, • 사용자가 한 행동의 결과를 시각적으로 보여준다.
  • 32. 애니메이션 가이드라인 • 불필요한 애니메이션을 최소화하자. • 앱 내에서 애니메이션은 일관성을 유지하자. • 물리법칙을 따르는 애니메이션이 직관적이다.
  • 33. 브랜딩
  • 34. 브랜딩 • 브랜딩 요소(로고 등)이 컨텐츠보다 돋보이지 않아야 한다. • iOS 7에 최적화되어 있다는 느낌을 주려면, iOS 7의 기본 요소인 deference, clarity, depth를 적절히 활용해보자.
  • 35. 색상과 타이포그라피
  • 36. 색상 • 앱에서 색상이 가지는 힘은, 인터렉티브함을 더하고 에너지를 주며 시각적인 연결감을 준 다. (굉장히 뜬구름이네요 -_-)
  • 37. 색상 • 구분 주어야 하는 객체 사이에는 50% 이상의 대비(contrast)를 준다. • 색맹도 앱을 사용할 수 있게 하자. • 인터렉티브한 요소에는 공통적으로 사용되는 키 컬러를 주자. • 인터렉티브/넌인터렉티브한 요소에 같은 색상을 사용하지 말자. • 색상 자체가 사용자의 눈을 어지럽히게 하지 말자.
  • 38. 타이포그라피 • 글자는 읽을 수 있어야 한다. • 글자를 읽을 수 없을 경우 타이포그라피가 아무리 아름다워도 소용이 없다. • 사용자 환경설정에서 특별히 큰 글꼴을 지정할 수 있는데, 이 설정에 따라 특정 부분의 글꼴 을 특별히 크게 보여줄 수 있도록 하자.
  • 39. 타이포그라피 • 글꼴은 22 point보다는 커야 한다. • 본문의 기본값은 34 point이다. • 네비게이션 바에 있는 글꼴의 크기는 34 point이다. (시스템 정의) • 가능하면 앱 전체적으로 동일한 글꼴을 사용하자.
  • 40. 아이콘과 그래픽
  • 41. 앱 아이콘 • 앱 스토어에서 사용자들이 가장 먼저 앱을 판단하는 요소는 앱 아이콘이다. ! ! • 앱 아이콘은 독창적이고, 지저분하지 않고, 집중을 이끌어내고, 잘 기억되어야 한다. (말이 쉽지!) • 앱 아이콘은 다양한 사이즈에서도 잘 인식될 수 있어야 한다.
  • 42. 바 아이콘 • 시스템에서 정의한 바 아이콘을 가능하면 사용하자. • 사용자들은 아무런 부연 설명을 해 주지 않더라도 용도를 이해하게 될 것이다. ! • 툴바에서는 텍스트가 더 효용적일 때도 있다.
  • 43. 그래픽 • 레티나 디스플레이에 대응하자. (@2x) • 사진은 가로/세로비율을 바꿔서 표시하지 말자. • 애플 제품을 본딴 그래픽은 앱 심사에서 문제가 될 수 있다.
  • 44. iOS 통합
  • 45. Standard UI elements • iOS가 업데이트되면 자동으로 업데이트 된다. • 기본적으로 커스터마이제이션을 할 수 있다. • 사용자가 직관적으로 사용할 수 있다. ! • 표준 UI를 사용할 때에는 가이드라인을 지킨다. • 표준 UI와 모양이 같지만 다르게 동작하는 커스텀 UI를 만들지 말자.
  • 46. Device Orientation • 사용자가 기기를 사용하는 방향은 아무도 예측할 수 없다. • 기기의 방향에 알맞는 화면을 보여주자. • 가능하면 모든 방향(orientation)을 지원하자. • 최대한 사용자에게 기기를 돌리라는 메시지를 보여주지 않도록 한다. • 폰에서 사용자는 가로모드를 통해 “더 보기”를 원한다.
  • 47. File, document • iOS에는 파인더(파일 익스플로러)가 없다. • 사용자가 파일시스템이 무엇인지 몰라도 사용할 수 있게 하자. • 가능하면 iCloud를 통해 저장한다. • 언제나 유저가 만든 변화를 저장한다.
  • 48. 환경설정 • 대다수의 사용자들에게 유용한 환경설정을 미리 함으로써 settings에 들어갈 필요 줄임 • 가능하면 앱 안에서 환경설정을 할 수 있게 하자. • 가능하면 중요한 설정은 메인 UI에서 할 수 있게 하자.
  • 49. iOS technologies • 가능하면 iOS에서 지원하는 최신 기능들을 지원하자. • 예) 멀티태스킹, 보이스오버, 패스북, 인앱결재, iAd, 게임센터, iCloud 등
  • 50. Design 원칙
  • 51. Aesthetic integrity 미적 일치 • 얼마나 아름다운가가 아닌 • 기능과 외관이 얼마나 어울리는가 • 유틸리티와 앱에 따라 모양, 꾸밈 정도가 달라진다.
  • 52. Consistency 일관성 • 앱 한쪽에서 사용자가 습득한 사용법이 다른 부분에서도 동일하게 적용되어야 함. • 일관성 정도를 가늠해볼 수 있는 질문 - iOS 표준과 일맥상통하는가 - 앱 내부적으로 일치하는가 - 이전 버전과 일치하는가
  • 53. Direct Manipulation 직접 조작 • 조작을 위해 별도의 컨트롤을 이용하지 않고 터치를 통해 직접 조작하는 느낌. • 사진을 확대할 때 pinch in/out 이용
  • 54. Feedback 피드백 • 사용자의 동작을 인지하고 결과를 보여주며 이후 진행에 따른 업데이트를 표시한다.
 예) 리스트 항목을 탭하면 표시가 됨 • 작지만 의미있는 애니메이션은 좋은 피드백이 된다.
 예) 리스트 항목이 삭제될 때 위, 아래 항목이 붙는 애니메이션
  • 55. Metaphors 메타포 • 앱에서 사용되는 객체나 행동이 사용자에게 익숙한 것들과 비슷하다면 사용자는 쉽게 동작 을 익히고 사용할 수 있다. • 메타포는 현실 세계에서 가져올 수도 있고, 디지털 세계에서 가져올 수도 있다. • 메타포를 적절하게 활용하면 부가 설명 없이도 사용자가 사용법을 익힌다.
 예) 파일을 휴지통에 버리는 것
 예) iBooks에서 페이지 넘기기
  • 56. User Control 사용자 조작감 • 사용자가 조작의 주인이 되어야 한다. • 좋은 앱: 사용자가 많은 부분을 조작할 수 있되 결과가 파괴적인 경우에는 경고한다. • 앱 안에서 사용자가 조작을 마음대로 익숙하게 하면 편안한 느낌을 받는다. • 시간이 오래 걸리는 동작은 취소할 수 있게 한다.
  • 57. Concept이 제품이 되기까지
  • 58. 앱 정의하기 • App definition statement
 : 간결하게 작성된 앱의 목적과 기능이 담긴 하나의 문장. • App definition state 작성의 이점 - 많은 기능들이 떠오를 때 어떤 것이 중요한지 알 수 있다. - 주요 사용자가 누구인지 알 수 있다.
  • 59. 앱 정의 프로세스 • 1단계: 앱에서 필요한 기능을 모두 나열해보자. • 예) 장보기 앱 - list 생성/삭제 - 조리법 받기 - 가격 비교 - 가게 위치 찾기 - 쿠폰 받기/사용 - 요리시연 영상 보기 - 포함된 영양소 보기
  • 60. 앱 정의 프로세스 • 2단계: 앱의 주요 사용자가 누구인지 본다. • 그에게 가장 중요한 것은 무엇인가? • 예) 장보기 앱의 사용자 - 집에서 요리를 하고 사먹는 음식보다 조리하는 음식을 선호한다. - 쿠폰 사용에 환장(!)했다. - 특별한 요리 비법을 알고 싶어한다. - 조리법을 보고 그대로 따라하거나 영감을 얻는다. - 주로 소량으로 자주 구매하고 대량으로 가끔 구입한다.
  • 61. 앱 정의 프로세스 • 3단계: 주요 사용자에 따라 주요 기능을 추린다. • 예) 장보기 앱의 주요 기능 - list 생성/삭제 - 조리법 받기 - 쿠폰 받기/사용 ! • 주요 기능을 중심으로 앱의 정의를 내린다. • 예) “시간이 없지만 요리하기를 즐겨하는 사람들을 위한 쇼핑 리스트 제작 도구”
  • 62. 앱 정의 프로세스 • 3단계: 여기서 멈추지 말자. • 앱 정의를 앱 개발 전반적인 과정에서 활용한다. - 새 기능을 추가할 때: 앱 정의에 비추어서 필요한지 다시 생각해본다. - UI의 기능이나 외관을 결정할 때: 사용자들이 심플한걸 원하는지 복잡한걸 원하는지 생각해본다. - 앱에서 사용되는 용어를 정할 때: 사용자들이 알아들을 수 있는 말은 무엇인가 생각해 본다.
  • 63. 커스터마이제이션(customisation) • 나쁜 예) 전화거는 앱
  • 64. 커스터마이제이션(customisation) • 좋은 예) 수평기 맞추는 앱
  • 65. 커스터마이제이션(customisation) • 모든 커스터마이제이션은 ‘이유’가 있어야 한다. • 사용자의 시각적인 부담을 줄여주자. • 내부적으로 일관성이 있어야 한다. • 컨텐츠가 여전히 부각되고 있는지 확인해보자. • 표준 컨트롤을 새로 디자인 할 때에는 한 번 더 생각해보자. • 충분한 테스트를 거치자
  • 66. 프로토타이핑(prototype) • 개발 시간을 많이 들여서 다 만든 후에 테스트 하지 말고 • 프로토타입을 만들어서 작은 기능단위로 테스트해보자 • 앱 개발 초기에는 와이어프레임이나 종이 프로토타입으로도 테스트해볼 수 있다.
 하지만, 의미있는 피드백을 얻기에는 어려움이 따른다. • 메인 기능만 담고 있는 프로토타입으로 테스트해서 유의미한 피드백을 얻을 수 있다. • prototype - feedback - next prototype - feedback - … 반복
  • 67. Case Study: From desktop to iOS
  • 68. Keynote
  • 69. Keynote
  • 70. Mail
  • 71. Mail
  • 72. Running on iPhone 5
  • 73. iPhone 5를 위한 고려사항 • iPhone 5 이상의 화면은 176 pixel 더 높다. • 화면의 종류
  • 74. iOSTechnology Preview
  • 75. Passbook • 멤버쉽 카드, 쿠폰 등을 발행 가능 • 예) 비행기 티켓, 스타벅스 쿠폰 등
  • 76. Multitasking • 앱 간 전환이 쉬움 • 고려해야 할 상황 - 오디오 인터럽트 발생시 (예: 전화가 올 때) - 백그라운드로 전환될 때와 다시 돌아올 때의 상황 • 앱이 언제라도 종료되고 다시 시작될 수 있다고 가정 • 전화 중, 테더링 중과 같이 상단 status bar가 높아지는 상황 대비
  • 77. Routing • iOS 6부터 사용 가능 • 지도상의 특정 두 지점간의 경로를 알아보는 앱 • 이런 앱 종류가 있다라는 것 정도만.
  • 78. Social Media • 유저들의 현재 화면을 앱 안에서 공유할 수 있게 함 • iOS에서 기본적으로 지원하는 공유 방법 - 문자 메시지 - 메일 - 페이스북 (계정 로그인 된 경우) - 트위터 (계정 로그인 된 경우)
  • 79. iCloud • 일부러 동기화하지 않아도 기기간의 데이터 동기가 가능 • iCloud는 개인당 5GB. 최대한 각 앱에서 공간을 적게 사용하면 좋다. • 사용자가 일일히 동기화 할 항목, 하지 않아야 할 항목을 선택할 필요 없게 디자인하자.
  • 80. In-App Purchase (IAP) • 앱 내부에서 추가 기능에 대한 구매를 가능하게 하는 기능. • 인앱결재를 자주 사용하는 경우의 예 - 기본 버전에서 프리미엄 버전으로 업글하는 경우 - 월간 컨텐츠를 구독하는 경우 - 게임에서 새 레벨이나 무기를 구입하는 경우 - 새 책을 구매하는 경우
  • 81. Game Centre • 게임의 온라인 점수보기로 시작됨 • 앱에서 달성한 업적 관리 • 내 친구들이 달성한 업적도 볼 수 있음
  • 82. Notification Centre • 사용 예 - 메시지 받음 - 이벤트가 발생함 - 다운로드 받을 수 있는 새 컨텐츠가 생성됨 - 상태(status)가 변함 • 배너, 알림, badge의 형태가 있다. • 사용자 지정 소리를 낼 수 있다. • 같은 이벤트에 대해서 중복 알림을 보내지 말자
  • 83. iAd • 앱 안에 광고를 노출해서 수익을 얻을 수 있음 • iOS에서는 구글 애드몹도 사용 가능
  • 84. AirPrint • 지원하는 프린터 모델이 네트워크에 연결된 경우 • 앱의 컨텐츠를 무선 출력이 가능함.
  • 85. Location Services • 위치정보 접근을 위해서 사용자의 동의를 받아야 함. (자동)
  • 86. Quick Look • 앱에서 만든 “문서”에 대해서 • 앱을 열지 않고도 미리보기를 할 수 있음.
  • 87. Sound 사용자의 기대 이해하기 • 무음모드로 하는 경우 - 전화연결음이나 메시지 소리를 받고 싶지 않음 - 키보드와 터치 피드백 소리를 듣고 싶지 않음 - 게임 할 때에도 꼭 필요한 소리가 아니면 듣고 싶지 않음 • 하지만, 무음 모드에서도 다음 소리는 나야한다. - 비디오 재생음 (사용자가 명시적으로 비디오를 재생하기 때문에) - 알람 소리 - 어학 학습 앱에서 발음 소리 등 - 오디오 채팅 앱
  • 88. Sound 사용자의 기대 이해하기 • 기기의 볼륨을 조절하는 경우 - 앱에서 나는 모든 소리를 조절하고 싶어한다. • 헤드셋/이어폰을 착용하는 경우 - 소리가 남한테 들리지 않고 싶어한다.
  • 89. Sound 앱의 오디오 동작 정의하기 • 꼭 필요한 경우에는 앱 내에서 볼륨 조절을 하게 한다. 
 (이 경우에도 시스템 볼륨 크기에는 영향을 받는다) • 가능한 경우 오디오 출력방법을 고를 수 있게 한다. • 볼륨 조절 컨트롤은 시스템에서 제공하는 것을 사용한다. • 필요한 경우 리모콘을 이용한 동작에 반응하게 한다. (재생, 일시정지 등)
  • 90. VoiceOver • 시각 장애인을 위한 서비스 • 화면을 탭 하면 어떤 내용인지 말해줌 • 우리가 할 수 있는 것? 
 화면을 터치할 때 “어떤 말”을 할지 정의하기
  • 91. Edit Menu • 텍스트를 꾹 누르면 나오는 메뉴 • 필요한 경우 메뉴 목록을 정의할 수 있다.
  • 92. Undo & Redo • 가능하면 되돌리기, 다시하기를 지원하자. • 기본 제스쳐: 흔들기(shake)
  • 93. Keyboards & Input views • 필요한 경우 사용자 입력 키보드를 디자인할 수 있다.
  • 94. UI Elements: Bars
  • 95. 상태바(Status bar) • 색상에 따라 두 종류가 있다. iOS 7에는 투명한 것이 기본 ! ! • 상태바를 없앨 수 있으나 꼭 그래야 하는지 다시 생각해보자. • 네트워크를 접속하는 경우 indicator를 표시해주자.
  • 96. 네비게이션 바(navigation bar) • 정보를 계층적(hierarchy)으로 보여줌 ! ! ! • 기본적으로 반투명함(iOS 7) • 가로모드에서는 높이가 좀 더 작아진다(아이폰의 경우, 아이패드는 그대로) • 필요한 경우 현재 화면을 설명해줄 수도 있다.
  • 97. 툴바(toolbar) • 화면 하단에서 현재 가능한 동작(action)을 보여주는 방법 ! ! ! • 기본적으로 반투명함 • 아이폰의 경우 하단에, 아이패드의 경우에는 주로 상단에 온다. • 필요한 경우 세그먼트 바를 넣어서 계층관계를 줄일 수 있다. • 항목이 3개 이상일 경우 아이콘을 사용하자 • 아이폰의 경우 가로모드에서는 높이가 더 줄어든다.
  • 98. 툴바, 네비게이션 바 아이콘 • 시스템 정의 아이콘
  • 99. 탭바 • 사용자가 다른 모드, 뷰를 전환하기 쉽게 함 ! ! ! • 일반적으로 반투명 (iOS 7), 화면 하단에 위치 • 아이폰의 경우 5개가 최대 • 뱃지를 표시할 수 있다. • 가이드 1. 앱의 최상위 레벨을 표시하는데 사용하자 • 가이드 2. 기능이 비활성화여부에 따라 항목을 더하거나 빼지 말자: 대신 비활성화
  • 100. 탭바 아이콘 • 시스템 정의 아이콘
  • 101. 탭바 아이콘 • 선택되었을 경우, 아닌 경우
  • 102. 탭바 아이콘 • 선택되었을 경우, 아닌 경우
  • 103. 검색 바(search bar) • 검색할 때 사용되는 컨트롤 ! • Placeholder: 아무것도 입력하지 않았을 때 안내해주는 텍스트 • Bookmark: 최근 검색어를 불러오는 기능 • Clear button: 입력된 키워드를 지우는 버튼 • Scope bar와 함께 사용되기도 함
  • 104. ContentView
  • 105. ActivityView Controller • 공유에 사용됨 • 텍스트, 이미지를 지정하면 공유 포맷에 맞게 시스템에서 알아서 보냄
  • 106. CollectionView • 격자로 아이템을 표시하는 뷰
  • 107. 맵 뷰(map view) • iOS 6부터 애플 지도 탑재
  • 108. 페이지 뷰 컨트롤러 • 종이 넘기는 효과 낼 수 있음
  • 109. 팝 오버(popover) • 현재 문맥(context)에 맞는 컨텐츠 표시 • 아이패드 전용 • 닫기 버튼은 기본적으로 없다. (사용이 다 되면 자동으로 사라짐)
  • 110. 스크롤 뷰(scroll view) • 미리 정의된 모습이 없다. (기본적으로 스크롤 바도 안보임) • 화면이 처음 보이면 스크롤 바가 flash 된다(깜빡임) • 스크롤 방향과 속도에 영향을 받아서 스크롤 됨 • 모드 1. 일반 모드 • 모드 2. 페이징 모드 (한 화면씩 넘기기 모드)
  • 111. SpiltView Controller • 아이패드에서 한 화면에 두 아이템을 보여줌 • 아이패드 전용 • 주로 왼쪽에는 네비게이션 영역, 오른쪽에는 컨텐츠 영역이 보여짐
  • 112. 테이블 뷰 • 스크롤 되는 여러 항목을 나타내는데 적합 • 기본 높이: 44 point (88 pixel)
  • 113. • 선택한 아이템에 대해서는 피드백을 제공하자 • 컨텐츠가 많은 경우 화면 로딩 자체를 가로막지 말고, 일단 화면은 로딩한 후에 세부 아이템 을 로딩하자 -> 기다리는 느낌을 줄인다. • 필요한 경우 커스텀 셀을 만들자. (위에서 제시한 4가지 모양의 셀이 아닌 경우)
  • 114. 텍스트 뷰(text view) • 텍스트 입력을 위한 기본 컨트롤 ! ! ! ! • 다양한 높이 지원 • 스크롤링 지원
  • 115. 웹 뷰(web view) • 웹 컨텐츠를 표시하는 영역 • HTML 표시
  • 116. Controls
  • 117. Activity Indicator • 기다리는 상태 표시 ! ! ! • 애니메이션되는 상태로 표시하자 • 사용자로 하여금 앱이 멈추지 않은 것으로 보여지게 해서 안심시키는 기능 수행.
  • 118. 연락처 추가 버튼 (Contact Add) • 특정 컨트롤러에 연락처에 있는 사람을 추가-포함 시킬 때 사용되는 버튼
  • 119. Date Picker • 특정 날짜 혹은 시간을 고를 때 사용됨 ! ! ! ! • 휠을 이용해서 선택이 가능 • 선택된 값은 검정색, 그렇지 않은 값은 회색 • 지원 모드: 날짜와 시간, 날짜, 시간, 카운트다운 타이머 • 분의 간격을 조절 가능
  • 120. Detail Disclosure button • 이 버튼을 누르면 세부 정보를 더 볼 수 있다는 것을 암묵적으로 표시
  • 121. Label • 고정 텍스트 표시
  • 122. Network Activity Indicator • 네트워크를 사용하고 있음을 알려줌 • 데이터 사용에 민감한 사용자에게 알려주기 위함 • 상단 바(status bar)에 표시됨
  • 123. Page Control • 넘기는 페이지의 총 페이지 갯수와 현재 페이지 위치를 표시하는 컨트롤 • 이게 있으면 사용자는 직관적으로 여러 페이지가 있고 스크롤을 통해 이동할 수 있다는 것 을 알게
  • 124. Picker • 여러개의 항목을 고르는 일반적인 피커 (이 중 특별한 것이 date picker)
  • 125. ProgressView • 상태 진행을 알려줌 • 형태: 기본 형태, 바 형태
  • 126. Refresh Control • 테이블 뷰에서 상단에서 끌어 내려서 현재 보고 있는 컨텐츠를 update하게 하는 컨트롤 !
  • 127. Segmented Control • 약 2-3개의 아이템이 존재하고 현재 선택된 아이템이 무엇인지 표시하는 컨트롤 ! • 텍스트와 이미지를 섞지 말자 • 탭 가능한 사이즈로 조절하자
  • 128. Slider • 지정된 범위 안에서 값을 조절하는데 사용되는 컨트롤
  • 129. Stepper • 값을 1씩, 혹은 지정한 단위 만큼씩 변하게 할 수 있는 컨트롤
  • 130. Switch • 켜고 끄는 값을 조작할 때 사용됨 • 테이블 뷰에 포함되어서도 자주 사용됨 (주로 설정에서)
  • 131. System Button • 액션(action) 가능한 버튼을 나타냄 ! • iOS 7부터 테두리가 없어짐 • 아이콘이나 텍스트를 포함하는 것이 가능 • 텍스트를 사용할 경우 “동사”를 나타내자 • “제목” 형태의 대소문자 표시를 하자(button: x, Button: o) • 너무 긴 타이틀을 만들지 말자
  • 132. Text Field • 한 줄의 텍스트를 입력받는 컨트롤 ! ! ! • 고정된 높이 • Round된 테두리를 가지고 있음
  • 133. TemporaryViews
  • 134. Alert • 중요한 선택을 위한 경고창을 표시 / 안전한 선택이 “우측”에 온다. ! ! ! ! • 제목에는 “제목” 스타일의 대소문자를, 본문에는 “문장” 스타일의 대소문자를 적용한다.
  • 135. Action Sheet • 사용자 문맥에서 여러 개의 선택을 할 경우 제공 ! ! ! ! ! • 중요한 (파괴적인) action 전에는 확인하는 용도로 사용됨 • 파괴적인 action은 빨간색으로 표시, 안전한 버튼은 가장 아래쪽에 위치
  • 136. ModalView • 새로 뜬 창 • 화면 전체를 차지함, 아이패드의 경우에는
 화면에서 차지하는 크기를 조절 가능 • 새로 작업이 필요할 경우 사용 • 애니메이션을 적절히 사용하자 - 아래에서 위로 뜨는 경우: 새 작업, 취소 가능 - 화면이 뒤집히는 경우: 화면의 뒷면 같은 느낌
  • 137. Graphic Resources
  • 138. Icon, image 크기
  • 139. App Icon • 앱을 대표하는 이미지 • 인식이 잘 되게 하자 • 단순한 것이 인식이 잘 된다 • 앱의 메인 아이디어를 추상화 해보자
  • 140. Launch Images
  • 141. Bar Button Icons