[Human Interface Guidellines] H.I.G 문서 둘러보기

야곰아카데미 활동학습을 통해 학습한 내용입니다. (스포일러가 있을 수 있습니다.)

 

아래 내용은 애플에서 제공한 Human Interface Guidelines를 보고 의역 및 정리한 내용입니다. 

# iOS가 다른 플랫폼과 차별화된 주요한 3가지 Themes

명확성 (Clarity)

• 시스템 전반에 걸쳐 텍스트는 전부 읽기 좋은 사이즈이고, 아이콘은 정확하고 뚜렷하다. 
• 기능에 대해 정확한 focus가 있을 때 좋은 디자인이 나올 수 있다. 
• Negative Space, 색, 폰트, 이미지, UI 모두 중요한 내용을 미묘하게 강조하고 상호작용을 전달한다.

존중 (Deference)

• 내가 이해했을 때 iOS에서 Deference란 사용자가 콘텐츠를 이해하기 쉽도록 하는 것을 의미한다고 생각함.
• 부드러운 모션과 선명하고, 아름다운 인터페이스는 사람들이 콘텐츠를 이해하고 상호작용하는데 도움이 된다.
• 콘텐츠는 일반적으로 전체 화면을 채우지만 종종 반투명과 블러 처리가 더 많은 것을 암시한다.
• 베젤, 그라디언트, 그림자를 최소한으로 사용하여 밝고 경쾌한 인터페이스를 유지하는 것이 콘텐츠가 중요함을 보장한다.

깊이 (Depth)

• 뚜렷한 시각적 레이어와 사실적인 모션을 통해 계층을 이동하고, 활력을 부여하며, 이해를 용이하게 한다.
• 터치 및 검색 가능성은 즐거움을 높이고 추가 컨텐츠에 문맥을 잃지 않고 접근할 수 있게 해준다.
• 전환(방식)은 콘텐츠를 볼 때 깊이감을 제공한다.

 

# iOS의 디자인 원칙

미적 무결성 (Aesthetic Integrity)

• 앱의 외형이 앱의 동작, 기능과 얼마나 잘 통합이 되어 있는가. 

일관성 (Consistency)

• 일관된 앱은 시스템 제공, 인터페이스 요소, 잘 알려진 아이콘, 표준 텍스트 스타일 및 통일된 용어를 사용하여 친숙한 표준과 패러다임을 제공함.
• 앱은 사람들이 기대하는 방식으로 기능과 통작을 통합해야 함. 

직접 조작 (Direct Manipulation)

• 화면 콘텐츠의 직접 조작은 사람들의 관심을 끌고 이해를 촉진시킨다.
• 사용자는 직접 조작을 디바이스를 돌리거나 제스처를 사용하여 화면 컨텐츠에 영향을 줄 때 경험하게 된다.
• 직접 조작을 통해 사용자는 즉각적이고 시각적인 결과를 볼 수 있다.

반응 (Feedback)

• 사람들에게 계속 정보를 알리기 위해 피드백은 액션을 인지하고 결과를 보여준다.
• 내장된 iOS 앱은 사용자의 모든 액션에 예상 가능한 반응을 제공한다.
• 사용자에게 Interactive한 요소이다.

(탭하면 짧게 불이 들어옴 / 진행표시를 통해 긴 작업의 상태를 보여줌 / 애니메이션과 사운드를 통해 Action 결과를 명확히 보여줌)

 

내재화 (Metaphor)

• 내가 이해한 Metaphor는 사용자가 앱을 사용하면서 얻는 사용 경험을 사용자에게 내재화시키는 것이라고 생각했다.
• 사람들은 앱의 가상 객체와 행위가 현실세계 기반이든, 가상세계 기반이든 친숙한 경험에서 가져오면 더 빨리 배운다.
• 사람들이 직접 화면과 상호작용하기 때문에 iOS는 Metaphor 작업이 잘 된다.
  • 아래에 있는 콘텐츠를 보기 위해 시선을 이동한다.
  • 드래그 & 스와이프 한다.
  • 원하는 것을 선택하기 위해 스위치를 누르고, 슬라이더를 이동시키고, 스크롤을 한다.
  • 가볍게 클릭해서 책이나 신문의 페이지도 넘길 수 있다.

사용자가 직접 컨트롤 (User Control)

• iOS에선 앱이 아닌 사람이 컨트롤을 한다.
• 물론 앱이 행동 방침을 제안하거나, 위험한 결과에 대해 경고를 할 수 있지만 일반적으로 앱이 결정을 하는 것은 실수이다.
• 가장 좋은 앱은 유저가 할 수 있는 것과 원하지 않는 결과를 피하는 것에서 적당한 균형을 찾는 것이다.
• 앱이 사람들에게 통제하고 있다는 것을 느낄 수 있게 해주는 방법 
  • 상호작용 요소로 친숙하고 예상가능하도록 한다.
  • 파괴적인 행동(삭제 같은 행동)을 확인한다.
  • 작동 취소를 쉽게 한다.

 

# Interface Essentials

대부분의 iOS 앱은 UIKit(공통 인터페이스 요소를 규정하는 프로그래밍 프레임워크)으로 만들어진다.

 

UIKit을 통해 할 수 있는 것들

• 시스템 전체에 일관된 모양을 만들 수 있다.
• 높은 수준의 Customization을 제공할 수 있다.
• 모든 iOS 기기에서 멋있어 보이는 single 앱을 디자인할 수 있다.
• 시스템이 업데이트되면 자동으로 모양을 바꾼다.
• 인터페이스를 정의하는 것 외에도 앱이 채택할 수 있는 기능(그림그리기 등)을 정의한다.
• Apple pay / Health Kit / Research Kit과 연동할 수 있다.

UIKit 인터페이스 요소의 3가지 카테고리

• Bars
  • 사람들에게 앱의 어디에 그들이 있는지 말해준다.
  • 네비게이션 제공
  • 작업을 시작하고, 정보를 전달하는 버튼 또는 기타 요소를 포함할 수 있음
• Views
  • 사람들이 볼 수 있는 주요한 콘텐츠(텍스트, 그래픽, 애니메이션, 상호작용 요소)를 포함함
  • Views에선 다음과 같은 행동이 가능하다.
    • 스크롤링
    • 삽입
    • 삭제
    • 정렬
• Controls
  • 행동을 시작하고 정보를 전달한다.
    • 버튼
    • 스위치
    • 텍스트 필드
    • process indicator 등