Download as PDF, PPTX
Uploaded byTheodore(Yongbin) Cha
iOS Human Interface Guidelines 정리 (1)
UI Design Basics의 Designing for iOS, iOS App Anatomy, Adaptivity and Layout 부분을 정리해보았습니다. 이후 뒷부분도 정리해서 올리겠습니다.
![[2016널리세미나] 모바일 접근성 지침 Ato z 20160405](https://cdn.slidesharecdn.com/ss_thumbnails/atoz20160405-160411120045-thumbnail.jpg?width=640&height=640&fit=bounds)
![[SpecialLecture] Design.for.All.in.the.Digital.World.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/speciallecturedesign-251110042236-b520cbb1-thumbnail.jpg?width=640&height=640&fit=bounds)
iOS Human Interface Guidelines 정리 (1)
- 1. iOS Human InterfaceGuidelines 1 NHN NEXT 차용빈
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. Deference UI -사용자가 컨텐츠를 이해, 상호작용 도움 경쟁은 해선 안됨. Clarity 글자 - 모든 사이즈에서 가독성 아이콘 - 정확하고 명료 Depth 시각적 계층 및 사실적인 움직임 사용자의 즐거움, 이해도 증대
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. Content 간결하지만 아름다운UI와 유동적인 움직임은 iOS 경험의 하이라이트 사용자의 컨텐츠가 그 중심
- 51.
- 52.
- 53. Content 전체 스크린을활용하라 인셋과 프레임의 사용을 다시 생각하자 컨텐츠가 화면의 모서리가 닿도록 늘이자 날씨 앱은 이러한 접근법을 보여줌 현재 날씨의 아름다운 묘사는 즉각적으로 가장 중요한 정보를 제공 시간별 데이터를 제공할 여유공간 제공
- 54.
- 55.
- 56. Content 물리적, 사실적인시각적 인디케이터를 다시 생각 베젤, 그라디언트, 그림자 컨텐츠를 압도하는 무거운 UI 요소 컨텐츠에 집중하고 UI는 서포트하는 역할
- 57.
- 58.
- 59. Content 반투명한 UI요소는 그 뒤의 컨텐츠에 힌트 제공 투명도는 상황을 제공함 추가적인 컨텐츠가 가능하다는 것을 사용자에게 알려준다.
- 60.
- 61. Clarity App에서 컨텐츠가최상위임을 확인하는 또 다른 방법 명쾌함을 제공하는 것
- 62.
- 63. Clarity 여백을 많이사용하라 중요한 컨텐츠와 기능을 알아보기 쉽게함 차분하고 평안한 느낌을 전달 App이 보다 더 집중되고 효율적으로 보이게 함.
- 64.
- 65. Clarity 색상이 UI를단순화하게 하라 iOS 기본 앱 중 ‘Notes’ Notes 에서의 노란색과 같이 키 컬러는 중요한 상태에 주목 인터렉티비티를 섬세하게 알림 App에 일관된 시각적인 테마를 제공
- 66.
- 67. Clarity 시스템 폰트를이용해 가독성 확보 iOS 시스템 폰트는 자동적으로 자간, 행간 조정 사용자가 어떤 크기를 선택하든 읽기 쉽게 만듦 다이나믹 타입을 적용 사용자가 어떤 폰트를 사용하든 App이 사용자가 선택한 다른 사이즈의 텍스트에 대응할 수 있게 하자
- 68.
- 69. Clarity 경계선 없는버튼을 받아들이자 베젤에 의존해서 인터렉티비티를 알리기 의미있는 버튼 제목을 만들고 키 컬로 또는 시스템 컬러를 이용해 사용자에게 해당 요소가 인터렉티브 함을 알림 ‘연락처’는 시스템 블루 컬러를 이용함 스크린 위의 대부분이 인터렉션 반응함
- 70.
- 71.
- 72.
- 73. Communicate 컨텐츠를 계층과위치를 제공하는 구별된 레이어에 드러냄 오브젝트들 간의 관계를 이해
- 74.
- 75.
- 76.
- 77. Communicate 투명한 배경 홈 스크린 위에 떠있는 것 처럼 보이게 함 폴더는 폴너 내의 컨텐츠를 스크린과 분리
- 78.
- 79.
- 80.
- 81. Communicate 하나의 아이템을가지고 작업하는 동안 추가적인 아이템을 아래의 레이어에 표시 모든 아이템을 보려면 레이어를 펼치는 형식
- 82.
- 83.
- 84.
- 85. Communicate 개선된 장면전환 년, 월, 일 뷰를 이동할 때, 깊이를 느낄수 있음. 보는 것처럼 Year뷰를 스크롤 하면, 사용자는 즉각적으로 오늘 날짜를 볼 수 있음 또한 다른 캘린더 작업이 가능
- 86.
- 87.
- 88.
- 89.
- 90.
- 91. 대부분의 iOS의 App UIKit Framework의 UI요소 사용 UI 요소의 이름과 역할, 기능을 하는 것 App의 UI 디자인시 세련된 결정에 도움
- 93. Bar Content Views 사용자에게 어디있는지 알려줌 네비게이션 역할 컨츠롤을 포함하는 문맥상의 정보를 가짐 App 특유의 컨텐츠를 담음 아이템들의 스크롤링, 삽입, 삭제, 재배열 UIKit에 의해서 제공되는 UI요소 Controls Temporary Views 액션을 실행하거나 정보를 표시 사용자에게 중요한 정보 제공을 위해 추가적인 선택과 기능 제공을 위해 일시적으로 보이는 것
- 94. 이외 UIKit에 의해서제공하는 것 제스처 인식기 드로잉 접근성 프린팅 지원
- 95. App에서 View의 집합이나계층을 관리하기 위해 뷰 컨트롤러 (View Controller) 뷰들의 표시를 관리하여 사용자 인터렉션 뒤의 기능을 구현 한 화면에서 다른 화면으로 전환하는 것을 관리
- 97. 개발자가 ‘뷰’나 ‘뷰컨트롤러’와 같은 용어로 생각 사용자들은 iOS App을 스크린의 모음으로 경험하는 경향 Screen은 일반적으로 앱에서의 독특한 시각적 상태 또는 모드에 해당
- 98. iOS App은 윈도우를가지고 있음 컴퓨터 앱의 윈도우와 다르게 iOS 윈도우는 시각적 파트를 가지고 있지 않음 디스플레이에서 다른 위치로 옮겨질 수가 없음 대부분의 iOS 앱들은 하나의 윈도우만 가진다. (외부 디스플레이를 지원하는 앱은 하나 이상의 윈도우를 가짐)
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105. Adaptivity 기대를 충족할 수 있도록 크기 종류 및 자동 레이아웃을 사용 디스플레이 환경의 변화에 적응하는 방법을 정의
- 106. iOS Size Regular Compact “넓은 공간과 대응” “제한된 공간과 대응”
- 107. 아이패드의 디스플레이의 환경은항상 일정한 수평과 수직
- 108. 아이폰의 디스플레이 환경은디바이스와 장치에 따라 달라질 수 있음. iPhone 6 Plus
- 109. 아이폰6 를 포함하여다른 모든 아이폰 모델은 크기종류의 동일한 세트를 사용 iPhone 6
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116. Environment 모든 장치와방향에 큰 경험을 제공하기 위해 가이드 라인을 따라야 함 디스플레이 환경에 따라 적절하게 대응
- 117. 모든 환경에서의 기본컨텐츠에 초점을 유지한다. 레이아웃의 불필요하게 변경하지 않는다. App 이 한 방향으로만 실행하면 간단하다. 장치 회전을 알려주는 UI요소를 표시하는 것을 피한다. 방향 둘 모두를 지원한다. App 이 입력과 같은 장치 방향의 변화를 해석하면 App 의 고유 방식으로 회전 처리
- 118.
- 119.
- 120.
- 121.
- 122. 레이아웃을 이용하여, 사용자에게어떤 것이 가장 중요한지, 그들이 무엇을 선택했는지, 그리고 컨텐츠와의 관계를 보여줄 수 있음. 앱이 동작하는 장치에 따라, 장치의 현재 방향에 따라 레이아웃은 변형될 것
- 123. 중요한 컨텐츠나 기능을위쪽으로 올려보냄으로서 중심이 되는 작업에 초점을 맞추기 쉽도록 하다.
- 124. 사용자들에게 스크린 위의요소들 간의 연관된 중요성을 보여주기 위해 시각적인 무게와 균형을 사용 큰 아이템 그리고 무거워 보이는 것들은 눈을 끌기에 작은 것들에 비해 중요함
- 125. 충분한 여백을 제공함으로서사용자들이 컨텐츠와 폰트들의 인터렉션을 쉽게 하게 함 탭을 해야하는 부분은 44 X 44 정도의 터치 크기를 가져야함.
- 126. 일반적으로 UI 외형의불일치를 피해야함. 가능한 유사함 기능을 가진 요소들은 유사하게 보여야함. 사용자가 기본 사이즈에서 보이는 것이 주 컨텐츠라고 이해할 수 있게 함