[HIG] iOS Design Themes

오늘은 iOS Theme과 Interface Essentials에 대해 읽어보려구 합니다. 

전체적으로 어떤 내용이 있는지 정리해볼게요. 

문서링크 https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

iOS Design Themes (iOS 디자인 주제)

다른 플랫폼과 차이점을 주는 iOS만의 3가지 주요한 주제는 아래와 같다구 합니다. 

 

• Clarity
• Deference
• Depth 

Clarity 명쾌함, 명확성..?

 Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.

• 가독성 높은 텍스트
• 이해하기 쉬운 정확한 아이콘
• 적절하게 쓰인 최소화된 장식 

기능 주도의 디자인과 (폰트,색깔,그래픽,인터페이스 요소들) 등 여러 요소들을 이용하여 중요한 컨텐츠 강조

Deference 존중

Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. Content typically fills the entire screen, while translucency and blurring often hint at more. Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.

• 베젤, 그라데이션, 그림자의 활용을 최소화시켜 컨텐츠 강조
• 밝은 인터페이스 유지
• 전체를 활용하여 컨텐츠 표시 ..

메인 컨텐츠가 부각되기 위해 다른 디자인적 요소들을 최소화 시켜 존중한다는 의미인 것 같아요.

Depth 깊이

Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.

• 레이어와 모션을 활용해 계층을 표현
• 터치와 검색 기능으로 컨텐츠에 쉽게 엑세스
• 컨텐츠를 찾을 때 깊이감을 제공한 화면 전환 

Design principles

총 6가지가 있습니다.

 

1. Aesthetic Integrity

심미적 통일 기능과 앱의 디자인이 얼마나 잘 통합(?)되어있는지를 나타냅니다. 예를 들어, 게임이라면 재미, 흥분 등의 매력적인 모습이 진지한 앱이라면 눈에 거슬리지 않고, 집중력을 유지할 수 있는 모습이어야 합니다.

 

2. Consistency

일관성 앱의 통일성을 의미합니다. 화면, 아이콘, 기능, 동작 등 모두 일관되게 유지되어야 합니다.

 

3. Direct Manipulation

직접적 조작. 장치 회전, 제스처 사용 등을 통해 사용자의 이해도를 높인다구 합니다.

 

4. Feedback

피드백 사용자들이 발생시킨 동작에 대한 응답으로 애니메이션, 사운드를 통해 작업 결과를 보여줌으로 명확하게 이해시키는데 도움을 줍니다. 

 

5. Metaphors

은유 뷰를 이동하고, 콘텐츠를 드래그앤 스와이프하고, 스위치를 토글, 슬라이더를 이동하는 등 친숙한 경험, 은유일수록 더 빨리 배웁니다. 

 

6. User Control

사용자 컨트롤 앱의 작업은 앱이 아닌 사용자가 직접 결정하여 동작하도록 합니다.

---

Interface Essentials (인터페이스 필수요소)

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

Interface Essentials - iOS - Human Interface Guidelines - Apple Developer

모든 iOS 앱의 인터페이스는 UIKit 프레임워크의 구성 요소들을 사용하여 빌드됩니다.

이 프레임워크를 사용하여 일관된 모습을 유지해줄 뿐만 아니라 커스텀도 자유자재로 할 수 있습니다. 즉, 일관성 유지 + 커스텀 가능

이 UIKit은 크게 세가지로 나뉩니다. 

 

• Bars : 사람들에게 앱에 있다는 것을 알리고, 검색을 제공하고, 다른 작업들을 위한 버튼이나 기타 요소들이 포함됩니다.
• Views: 텍스트, 그래픽, 애니메이션, 대화형 요소 등 주요 콘텐츠들이 포함됩니다. 스크롤, 삽입, 삭제 및 정렬 등과 같은 동작 제공
• Controls : 버튼, 스위치, 텍스트 필드 및 progress bar 등과 같은 요소들처럼 액션과 정보 전달을 합니다.

iOS 인터페이스 외에도 UIKit은 터치스크린의 제스처, 그리기 등 다른 기능들도 제공합니다.

iOS는 Apple Pay, HealthKit, ResearchKit과 같은 다른 프레임워크와도 아주 잘 통합되어 있어 앱을 더 이쁘고 다양하게 디자인할 수 있습니다.