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