소피it블로그

[iOS HIG] Human Interface Guidelines - iOS 정리 본문

기획, 디자인/디자인

[iOS HIG] Human Interface Guidelines - iOS 정리

sophie_l 2022. 5. 9. 21:29

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

 

Themes - iOS - Human Interface Guidelines - Apple Developer

iOS Design Themes As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality. Three primary themes differenti

developer.apple.com

목적: to meet high expectations for quality and functionality 품질과 기능성에 대한 높은 기대를 충족시키기 위하여

 

1. Themes 테마: iOS의 차별성은 다음과 같은 세 가지 주요 테마에서 온다.

  • Clarity 명확성: 텍스트, 아이콘, 꾸밈이 적절하고 뚜렷하여야 함.
  • Deference 존중: 유동적인 모션과 뚜렷하고 아름다운 인터페이스
  • Depth 깊이: 명확한 시각적 계층과 현실적인 모션.

2. Design Principles 디자인 원칙

  • Aesthetic Integrity 미적 완전성: 앱의 생김새와 행동이 기능과 얼마나 잘 어우러지는지를 보여줌. 무거운 목적의 앱과 게임과 같은 가벼운 앱의 생김새가 각 앱의 기능 전달에 있어 어떤 효과를 갖는지 생각해보면 될 것. 즉, 가벼운 앱은 귀엽고 매력적인 모습을, 진중한 앱은 딱딱하고 정형화된 모습을 보여주는 것이 어울린다.
  • Consistency 일관성: 시스템에서 제공하는 인터페이스 요소와 널리 쓰이는 아이콘, 표준의 텍스트 스타일, 그리고 일관된 용어를 통해 일관성을 확보할 수 있다. 사용자들이 예측하는 대로의 모습과 행동을 보여줌.
  • Direct Manipulation 직접 조작: 사용자가 직접 참관하고 이해할 수 있게 한다. 기기를 옆으로 돌리거나 제스쳐를 사용할 경우에 직접 조작을 할 수 있는데, 이를 통해 자신의 행위에 대한 즉각적이고 시각적인 결과를 확인할 수 있다.
  • Feedback 피드백: 탭을 한 경우에 짧게 하이라이트 되는 interactive elements, 시간이 소요되는 작업의 상태를 알 수 있게 해주는 progress indicators, 그리고 애니메이션과 사운드 등을 통해 사용자의 행위에 대한 결과 즉 피드백이 명확해진다.
  • Metaphors 비유: 친숙한 경험을 비유할 경우에 사용자가 더 빨리 배울 수 있음. iOS에서는 사용자들이 물리적으로 스크린과 상호작용을 하기 때문에 비유가 효과적으로 이행된다.
  • User Control 유저 컨트롤: 앱이 아닌 사용자가 컨트롤해야 한다. 앱은 사용자에게 특정 액션들을 제안하거나 위험한 결과에 대한 경고를 해줄 수는 있으나 앱이 결정을 하도록 해서는 안 된다.

3. Interface Essentials: 대부분의 iOS앱들은 공통된 인터페이스 요소를 정의하는 프레임워크인 UIKit의 컴포넌트를 사용한다. 이를 통해 앱에 높은 수준의 커스텀화를 제공하는 한편, 앱이 일관된 모습을 하도록 할 수 있다. UI키트가 제공하는 인터페이스 요소는 크게 세 가지 분류로 나뉜다.

  • Bars 바: 바는 앱에서 사용자가 어디에 위치하는지 알려주고, 네비게이션을 제공하며, 액션을 시작하거나 정보를 교류하는 버튼 등을 포함할 수 있다.
  • Views 뷰: 텍스트, 그래픽, 애니메이션, interactive elements 등 앱에서 시각적으로 볼 수 있는 주된 컨텐츠를 포함한다. 뷰는 스크롤, 삽입, 삭제, 그리고 정리 등의 행위를 가능하게 한다.
  • Controls 컨트롤: 액션을 시작하게 하고 정보를 전달한다. 버튼, 스위치, 텍스트 필드, 프로그레스 인디케이터 등.

UI키트는 iOS의 인터페이스뿐만이 아니라 앱의 기능까지 정의할 수 있고, 다른 프레임워크와 통합하여 더 강력한 기능을 구현할 수 있게 한다.