UI Design Basics의 Designing for iOS, iOS App Anatomy, Adaptivity and Layout 부분을 정리해보았습니다. 이후 뒷부분도 정리해서 올리겠습니다.

1. iOS Human Interface Guidelines
1
NHN NEXT 차용빈

2. UI

3. Design

4. Basics
UI

5. 디자인의

6. 기본

7. Designing

8. for

9. iOS
iOS를

10. 위한

11. 디자인

12. Deference
UI - 사용자가 컨텐츠를 이해, 상호작용 도움
경쟁은 해선 안됨.
Clarity
글자 - 모든 사이즈에서 가독성
아이콘 - 정확하고 명료
Depth
시각적 계층 및 사실적인 움직임
사용자의 즐거움, 이해도 증대

13. 새롭게

14. 디자인

15. or

16. 재

17. 디자인
애플의

18. 사례
UI를

19. 벗겨내어

20. 앱의

21. 핵심

22. 기능이

23. 드러나도록

24. 한다.

25.
각각의

26. 적절함을

27. 재

28. 확인
iOS의

29. 테마를

30. 사용해

31. UI

32. /

33. UX

34. 를

35. 제작
선례를

36. 부정할

37. 준비

38.
가정에

39. 대해

40. 질문

41.
컨텐츠로의

42. 포커스와

43. 기능성
모든

44. 디자인

45. 결정에

46. 대한

47. 원동력

48. Defer

49. to

50. Content
간결하지만 아름다운 UI와 유동적인 움직임은 iOS 경험의 하이라이트
사용자의 컨텐츠가 그 중심

51. Defer

52. to

53. Content
전체 스크린을 활용하라
인셋과 프레임의 사용을 다시 생각하자
컨텐츠가 화면의 모서리가 닿도록 늘이자
날씨 앱은 이러한 접근법을 보여줌
현재 날씨의 아름다운 묘사는 즉각적으로
가장 중요한 정보를 제공
시간별 데이터를 제공할 여유공간 제공

54. Defer

55. to

56. Content
물리적, 사실적인 시각적 인디케이터를 다시 생각
베젤, 그라디언트, 그림자
컨텐츠를 압도하는 무거운 UI 요소
컨텐츠에 집중하고
UI는 서포트하는 역할

57. Defer

58. to

59. Content
반투명한 UI 요소는 그 뒤의 컨텐츠에 힌트 제공
투명도는 상황을 제공함
추가적인 컨텐츠가 가능하다는 것을
사용자에게 알려준다.

60. Provide

61. Clarity
App에서 컨텐츠가 최상위임을 확인하는 또 다른 방법
명쾌함을 제공하는 것

62. Provide

63. Clarity
여백을 많이 사용하라
중요한 컨텐츠와 기능을 알아보기 쉽게함
차분하고 평안한 느낌을 전달
App이 보다 더 집중되고
효율적으로 보이게 함.

64. Provide

65. Clarity
색상이 UI를 단순화하게 하라
iOS 기본 앱 중 ‘Notes’
Notes 에서의 노란색과 같이
키 컬러는 중요한 상태에 주목
인터렉티비티를 섬세하게 알림
App에 일관된 시각적인 테마를 제공

66. Provide

67. Clarity
시스템 폰트를 이용해 가독성 확보
iOS 시스템 폰트는 자동적으로 자간, 행간 조정
사용자가 어떤 크기를 선택하든 읽기 쉽게 만듦
다이나믹 타입을 적용
사용자가 어떤 폰트를 사용하든
App이 사용자가 선택한 다른 사이즈의
텍스트에 대응할 수 있게 하자

68. Provide

69. Clarity
경계선 없는 버튼을 받아들이자
베젤에 의존해서 인터렉티비티를 알리기
의미있는 버튼 제목을 만들고
키 컬로 또는 시스템 컬러를 이용해
사용자에게 해당 요소가 인터렉티브 함을 알림
‘연락처’는 시스템 블루 컬러를 이용함
스크린 위의 대부분이 인터렉션 반응함

70. Use

71. Depth

72. to

73. Communicate
컨텐츠를 계층과 위치를 제공하는 구별된 레이어에 드러냄
오브젝트들 간의 관계를 이해

74. Use

75. Depth

76. to

77. Communicate
투명한 배경
홈 스크린 위에 떠있는 것 처럼 보이게 함
폴더는 폴너 내의 컨텐츠를 스크린과 분리

78. Use

79. Depth

80. to

81. Communicate
하나의 아이템을 가지고 작업하는 동안
추가적인 아이템을 아래의 레이어에 표시
모든 아이템을 보려면
레이어를 펼치는 형식

82. Use

83. Depth

84. to

85. Communicate
개선된 장면 전환
년, 월, 일 뷰를 이동할 때, 깊이를 느낄수 있음.
보는 것처럼 Year뷰를 스크롤 하면,
사용자는 즉각적으로 오늘 날짜를 볼 수 있음
또한 다른 캘린더 작업이 가능

86. iOS

87. App

88. Anatomy
iOS

89. App

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. Adaptivity

100. and

101. Layout
적응성과

102. 레이아웃

103. Build

104. In

105. Adaptivity
기대를 충족 할 수 있도록 크기 종류 및 자동 레이아웃을 사용
디스플레이 환경의 변화에 적응하는 방법을 정의

106. iOS Size
Regular
Compact
“넓은 공간과 대응”
“제한된 공간과 대응”

107. 아이패드의 디스플레이의 환경은 항상 일정한 수평과 수직

108. 아이폰의 디스플레이 환경은 디바이스와 장치에 따라 달라질 수 있음.
iPhone 6 Plus

109. 아이폰6 를 포함하여 다른 모든 아이폰 모델은 크기종류의 동일한 세트를 사용
iPhone 6

110. Provide

111. a

112. Great

113. Experience

114. in

115. Each

116. Environment
모든 장치와 방향에 큰 경험을 제공하기 위해 가이드 라인을 따라야 함
디스플레이 환경에 따라 적절하게 대응

117. 모든 환경에서의 기본 컨텐츠에 초점을 유지한다.
레이아웃의 불필요하게 변경하지 않는다.
App 이 한 방향으로만 실행하면 간단하다.
장치 회전을 알려주는 UI요소를 표시하는 것을 피한다.
방향 둘 모두를 지원한다.
App 이 입력과 같은 장치 방향의 변화를 해석하면 App 의 고유 방식으로 회전 처리

118. Use

119. Layout

120. to

121. Communicate

122. 레이아웃을 이용하여,
사용자에게 어떤 것이 가장 중요한지,
그들이 무엇을 선택했는지,
그리고 컨텐츠와의 관계를 보여줄 수 있음.
앱이 동작하는 장치에 따라, 장치의 현재 방향에 따라
레이아웃은 변형될 것

123. 중요한 컨텐츠나 기능을 위쪽으로 올려보냄으로서
중심이 되는 작업에 초점을 맞추기 쉽도록 하다.

124. 사용자들에게 스크린 위의 요소들 간의
연관된 중요성을 보여주기 위해
시각적인 무게와 균형을 사용
큰 아이템 그리고 무거워 보이는 것들은
눈을 끌기에 작은 것들에 비해 중요함

125. 충분한 여백을 제공함으로서 사용자들이
컨텐츠와 폰트들의 인터렉션을 쉽게 하게 함
탭을 해야하는 부분은 44 X 44 정도의
터치 크기를 가져야함.

126. 일반적으로 UI 외형의 불일치를 피해야함.
가능한 유사함 기능을 가진 요소들은 유사하게 보여야함.
사용자가 기본 사이즈에서 보이는 것이 주 컨텐츠라고 이해할 수 있게 함