Download as PDF, PPTX
More Related Content
![[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용](https://cdn.slidesharecdn.com/ss_thumbnails/hci2011uiui-110412085125-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[124] 하이브리드 앱 개발기 김한솔](https://cdn.slidesharecdn.com/ss_thumbnails/124-161023163714-thumbnail.jpg?width=640&height=640&fit=bounds)
![[H3 2012] 기획/디자인/개발자 모두 알아야 하는 '대박앱의 비밀'](https://cdn.slidesharecdn.com/ss_thumbnails/b6-slideshare-121105214055-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
iOS human interface guidelines(HIG)
- 1. iOS Human Interface Guidelines Last updated: 1 Mar 2014 http://www.cedars.kr
- 2. • Designing foriOS 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.
- 4. iOS 7의 테마 •Deference - UI는 유저가 컨텐츠를 이해하고 상호작용하는 것을 도와주어야 하지만, 컨텐츠에 집 중하는 것을 방해해서는 안된다. • Clarity - 글꼴은 읽기 쉽게, 아이콘은 이해하기 쉽게, 장식적인 요소는 잔잔하게(subtle), 기능 으로부터 모티브를 얻은 디자인을 지향한다. • Depth - 눈으로 보여지는 요소들은 층 구성(layered)으로 이루어져서 사용자의 이해를 돕고 재미를 추가한다.
- 8. Deference • 컨텐츠를 살리기위해서 전체 화면 Flat 반투명
- 9. Clarity 여백의 활용 제한적인색상 시스템 폰트
- 10. Depth • 사용자의 현재위치를 알려주기 위해서 투명배경의 사용 Parallax Effect
- 12.
- 13. iOS App 요소 Bar ContentView Control
- 14. 가이드 1. 앱은 바로시작할 수 있어야 한다. • 사용자가 앱을 테스트하는 데에는 1-2분 이상 사용하지 않음. • (가능하면) 시작화면을 별도로 구성하지 않음.
- 15. 가이드 1. 앱은 바로시작할 수 있어야 한다. • 시작할 때 입력하는 정보의 양을 최소화한다. • 80퍼센트의 사용자에게 필요한 정보는 무엇일까? • 기기에서 얻을 수 있는 데이터를 최대한 활용. • 로그인해야만 보여지는 컨텐츠는 가능하면 뒤로 미룬다. • 시작화면은 앱의 첫화면과 거의 유사한 화면으로 제작 • 가능하면, 약관 동의서 같은 화면을 처음에 표시하지 않는다. • 앱을 재시작하면 마지막에 사용하던 곳으로 돌아가게 한다.
- 16. 가이드 2. 앱은 언제든지종료될 수 있다. • 보관이 필요한 사용자 정보는 바로바로 저장한다. • 앱을 강제로 종료하지 말자. • 앱에서 필요한 기능이 막힌 경우에는 표시를 해주자. • 앱에서 필요한 환경설정이 비활성화 된경우 표시해주자.
- 17.
- 18. 레이아웃 • 터치할 수있는 항목은 최소 44 x 44 point 이상 되어야한다.
- 19. 레이아웃 • 컨텐츠의 중요도에따른 배치를 한다.
- 20. 레이아웃 • 시각적인 무게(visualweight)를 이용하여 정보의 중요도를 표시한다.
- 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. 타이포그라피 • 글꼴은 22point보다는 커야 한다. • 본문의 기본값은 34 point이다. • 네비게이션 바에 있는 글꼴의 크기는 34 point이다. (시스템 정의) • 가능하면 앱 전체적으로 동일한 글꼴을 사용하자.
- 44.
- 45. 앱 아이콘 • 앱스토어에서 사용자들이 가장 먼저 앱을 판단하는 요소는 앱 아이콘이다. ! ! • 앱 아이콘은 독창적이고, 지저분하지 않고, 집중을 이끌어내고, 잘 기억되어야 한다. (말이 쉽지!) • 앱 아이콘은 다양한 사이즈에서도 잘 인식될 수 있어야 한다.
- 46. 바 아이콘 • 시스템에서정의한 바 아이콘을 가능하면 사용하자. • 사용자들은 아무런 부연 설명을 해 주지 않더라도 용도를 이해하게 될 것이다. ! • 툴바에서는 텍스트가 더 효용적일 때도 있다.
- 47. 그래픽 • 레티나 디스플레이에대응하자. (@2x) • 사진은 가로/세로비율을 바꿔서 표시하지 말자. • 애플 제품을 본딴 그래픽은 앱 심사에서 문제가 될 수 있다.
- 48.
- 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.
- 55. Aesthetic integrity 미적일치 • 얼마나 아름다운가가 아닌 • 기능과 외관이 얼마나 어울리는가 • 유틸리티와 앱에 따라 모양, 꾸밈 정도가 달라진다.
- 56. Consistency 일관성 • 앱 한쪽에서사용자가 습득한 사용법이 다른 부분에서도 동일하게 적용되어야 함. • 일관성 정도를 가늠해볼 수 있는 질문 - iOS 표준과 일맥상통하는가 - 앱 내부적으로 일치하는가 - 이전 버전과 일치하는가
- 57. Direct Manipulation 직접 조작 •조작을 위해 별도의 컨트롤을 이용하지 않고 터치를 통해 직접 조작하는 느낌. • 사진을 확대할 때 pinch in/out 이용
- 58. Feedback 피드백 • 사용자의 동작을인지하고 결과를 보여주며 이후 진행에 따른 업데이트를 표시한다. 예) 리스트 항목을 탭하면 표시가 됨 • 작지만 의미있는 애니메이션은 좋은 피드백이 된다. 예) 리스트 항목이 삭제될 때 위, 아래 항목이 붙는 애니메이션
- 59. Metaphors 메타포 • 앱에서 사용되는객체나 행동이 사용자에게 익숙한 것들과 비슷하다면 사용자는 쉽게 동작 을 익히고 사용할 수 있다. • 메타포는 현실 세계에서 가져올 수도 있고, 디지털 세계에서 가져올 수도 있다. • 메타포를 적절하게 활용하면 부가 설명 없이도 사용자가 사용법을 익힌다. 예) 파일을 휴지통에 버리는 것 예) iBooks에서 페이지 넘기기
- 60. User Control 사용자 조작감 •사용자가 조작의 주인이 되어야 한다. • 좋은 앱: 사용자가 많은 부분을 조작할 수 있되 결과가 파괴적인 경우에는 경고한다. • 앱 안에서 사용자가 조작을 마음대로 익숙하게 하면 편안한 느낌을 받는다. • 시간이 오래 걸리는 동작은 취소할 수 있게 한다.
- 61.
- 62. 앱 정의하기 • Appdefinition statement : 간결하게 작성된 앱의 목적과 기능이 담긴 하나의 문장. • App definition state 작성의 이점 - 많은 기능들이 떠오를 때 어떤 것이 중요한지 알 수 있다. - 주요 사용자가 누구인지 알 수 있다.
- 63. 앱 정의 프로세스 •1단계: 앱에서 필요한 기능을 모두 나열해보자. • 예) 장보기 앱 - list 생성/삭제 - 조리법 받기 - 가격 비교 - 가게 위치 찾기 - 쿠폰 받기/사용 - 요리시연 영상 보기 - 포함된 영양소 보기
- 64. 앱 정의 프로세스 •2단계: 앱의 주요 사용자가 누구인지 본다. • 그에게 가장 중요한 것은 무엇인가? • 예) 장보기 앱의 사용자 - 집에서 요리를 하고 사먹는 음식보다 조리하는 음식을 선호한다. - 쿠폰 사용에 환장(!)했다. - 특별한 요리 비법을 알고 싶어한다. - 조리법을 보고 그대로 따라하거나 영감을 얻는다. - 주로 소량으로 자주 구매하고 대량으로 가끔 구입한다.
- 65. 앱 정의 프로세스 •3단계: 주요 사용자에 따라 주요 기능을 추린다. • 예) 장보기 앱의 주요 기능 - list 생성/삭제 - 조리법 받기 - 쿠폰 받기/사용 ! • 주요 기능을 중심으로 앱의 정의를 내린다. • 예) “시간이 없지만 요리하기를 즐겨하는 사람들을 위한 쇼핑 리스트 제작 도구”
- 66. 앱 정의 프로세스 •3단계: 여기서 멈추지 말자. • 앱 정의를 앱 개발 전반적인 과정에서 활용한다. - 새 기능을 추가할 때: 앱 정의에 비추어서 필요한지 다시 생각해본다. - UI의 기능이나 외관을 결정할 때: 사용자들이 심플한걸 원하는지 복잡한걸 원하는지 생각해본다. - 앱에서 사용되는 용어를 정할 때: 사용자들이 알아들을 수 있는 말은 무엇인가 생각해 본다.
- 67.
- 68. 커스터마이제이션(customisation) • 좋은 예)수평기 맞추는 앱
- 69. 커스터마이제이션(customisation) • 모든 커스터마이제이션은‘이유’가 있어야 한다. • 사용자의 시각적인 부담을 줄여주자. • 내부적으로 일관성이 있어야 한다. • 컨텐츠가 여전히 부각되고 있는지 확인해보자. • 표준 컨트롤을 새로 디자인 할 때에는 한 번 더 생각해보자. • 충분한 테스트를 거치자
- 70. 프로토타이핑(prototype) • 개발 시간을많이 들여서 다 만든 후에 테스트 하지 말고 • 프로토타입을 만들어서 작은 기능단위로 테스트해보자 • 앱 개발 초기에는 와이어프레임이나 종이 프로토타입으로도 테스트해볼 수 있다. 하지만, 의미있는 피드백을 얻기에는 어려움이 따른다. • 메인 기능만 담고 있는 프로토타입으로 테스트해서 유의미한 피드백을 얻을 수 있다. • prototype - feedback - next prototype - feedback - … 반복
- 71. Case Study: From desktopto iOS
- 72.
- 73.
- 74.
- 75.
- 76.
- 77. iPhone 5를 위한고려사항 • iPhone 5 이상의 화면은 176 pixel 더 높다. • 화면의 종류
- 82.
- 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 & Inputviews • 필요한 경우 사용자 입력 키보드를 디자인할 수 있다.
- 102.
- 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.
- 113. ActivityView Controller • 공유에사용됨 • 텍스트, 이미지를 지정하면 공유 포맷에 맞게 시스템에서 알아서 보냄
- 114.
- 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.
- 129. Activity Indicator • 기다리는상태 표시 ! ! ! • 애니메이션되는 상태로 표시하자 • 사용자로 하여금 앱이 멈추지 않은 것으로 보여지게 해서 안심시키는 기능 수행.
- 130. 연락처 추가 버튼(Contact Add) • 특정 컨트롤러에 연락처에 있는 사람을 추가-포함 시킬 때 사용되는 버튼
- 131. Date Picker • 특정날짜 혹은 시간을 고를 때 사용됨 ! ! ! ! • 휠을 이용해서 선택이 가능 • 선택된 값은 검정색, 그렇지 않은 값은 회색 • 지원 모드: 날짜와 시간, 날짜, 시간, 카운트다운 타이머 • 분의 간격을 조절 가능
- 132. Detail Disclosure button •이 버튼을 누르면 세부 정보를 더 볼 수 있다는 것을 암묵적으로 표시
- 133.
- 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.
- 146. Alert • 중요한 선택을위한 경고창을 표시 / 안전한 선택이 “우측”에 온다. ! ! ! ! • 제목에는 “제목” 스타일의 대소문자를, 본문에는 “문장” 스타일의 대소문자를 적용한다.
- 147. Action Sheet • 사용자문맥에서 여러 개의 선택을 할 경우 제공 ! ! ! ! ! • 중요한 (파괴적인) action 전에는 확인하는 용도로 사용됨 • 파괴적인 action은 빨간색으로 표시, 안전한 버튼은 가장 아래쪽에 위치
- 148. ModalView • 새로 뜬창 • 화면 전체를 차지함, 아이패드의 경우에는 화면에서 차지하는 크기를 조절 가능 • 새로 작업이 필요할 경우 사용 • 애니메이션을 적절히 사용하자 - 아래에서 위로 뜨는 경우: 새 작업, 취소 가능 - 화면이 뒤집히는 경우: 화면의 뒷면 같은 느낌
- 149.
- 150.
- 152. App Icon • 앱을대표하는 이미지 • 인식이 잘 되게 하자 • 단순한 것이 인식이 잘 된다 • 앱의 메인 아이디어를 추상화 해보자
- 153.
- 154.