[iOS] HIG Themes 공식문서 정리 - Lawn

Lawn·2022년 5월 20일
1

🌱 iOS HIG Study

목록 보기
1/13
post-thumbnail

안녕하세요 🌱 Lawn입니다 HIG 스터디 모임을 통해 공부한 내용을 정리했습니다.

🌱 iOS Design Themes

앱 디자이너는 App Store 차트의 상위에 오르는 앱을 만들수 있다. 그렇게 하려면 품질과 기능에 대한 사용자의 높은 기대치를 충족해야 한다.

  • iOS에는 다른 플랫폼들과 차별성을 만드는 세 가지 주요한 Theme 이 있다.

Clarity

명확성 : 시스템 전체에서 텍스트는 모든 크기의 디바이스에서 읽을 수 있고 아이콘은 정확하고 명확하며 장식은 사용이 적절하며 날카로운 기능에 대한 관점은 디자인에 동기를 부여한다. 여백, 색상, 글꼴, 그래픽 및 인터페이스 요소는 중요한 내용을 강조하고 사용자에게 앱과의 상호 작용을 제공한다.

🍀 Comments

  • 읽을 수 없는 글자는 화면에서 전부 빼야한다.
  • 맑고 깨끗함, 여백을 중요시 하며 사용자의 컨텐츠가 중요하다.
  • 기능에 좀더 포커스를 두는것이 좋다.
  • 은은한 UI를 활용 ➡️ 뭔가 터치하고 싶어지는 버튼 등

Deference

존중 : 부드러운 모션과 선명하고 아름다운 인터페이스는 사용자들의 앱 사용 경험을 좋게한다. 또한 반투명과 흐림 효과 등으로 뒤에있는 콘텐츠를 보이게 해서 사용자들이 콘텐츠에 더욱 집중할 수 있게 할수있다. 콘텐츠를 강조하고 인터페이스를 밝고 경쾌하게 유지하기 위해 베젤, 그라디언트 및 그림자를 최소한으로 사용하는 것이 좋다는것을 기억하자.

🍀 Comments

  • 사용자들은 컨텐츠를 사용하기 위해 내 앱을 사용한다.
  • 화려함은 시선을 분산 시킨다.
  • UI는 컨텐츠를 잘 보이도록 돕는 것일 뿐(왼손은 거들뿐)
  • 반투명한 UI는 뒤에있는 컨텐츠를 알 수있게 해준다 ➡️ 컨텐츠에 집중하게해줌

Depth

깊이 : 뚜렷한 시각적 계층구조와 현실적인 움직임은 계층구조를 분명하게 보여준다. 계층구조를 분명하게 보여주면 추가적인 콘텐츠의 맥락을 유지하면서 사용자에게 보여줄 수 있다. 트랜지션은 계층구조에 대한 이해를 제공하니 잘 사용하는것이 좋다.

🍀 Comments

  • 터치와 검색 기능은 사용자의 즐거움을 높임.
  • 깊이감 ➡️ 모달을 올리면 뒤쪽 뷰가 한계층 내려가는 것.

☘️ Design Principles

앱의 영향력을 극대화하기 위해서 아래 디자인 원칙들을 기억해야한다.

Aesthetic Integrity

미적 통일성 : 앱의 성격과 UI는 통일시켜야한다.

🍀 Comments

  • 앱의 성향과 맞는 방식의 UI를 적용하자.
  • 중요한 업무를 도와주는 앱(예: 은행) ➡️ 은행 앱에서 헬로키티가 나온다?(X)
  • 몰입형 예술 앱(예: 게임) ➡️ 눈길을 끌어당기는 디자인
  • 게임 ➡️ 화려한 UI 액션 등.

Consitency

일관성 : 사람들이 예상하는 방식대로 앱을 동작하게 함

🍀 Comments

  • 빨간색 : 오류, 경고, 정지
  • 파란색 : 활성화, 실행
  • 애플에서 제공하는 표준화된 다양한 라이브러리

Direct Manipulation

직접조작 : 아이패드처럼 스크롤을 통해 직접적으로 컨텐츠를 움직일 수 있게하면서 사용자들이 자신의 행동에 대한 즉각적이고 시각적인 결과를 볼수 있는것.

🍀 Comments

  • 아이패드 터치 조작
  • Indirect ➡️ 마우스로 커서움직이는 것

Feedback

피드백 : 동작에 대한 결과를 알려주자. 사용자의 행동에 대한 결과를 보여줌.

🍀 Comments

  • 탭 ➡️ 로딩화면 (progress indicator)
  • 게임 로딩시 보여지는 에니메이션과 사운드
  • 메일이 보내지는 과정을 보여줌 (progress bar)
  • 메일이 보내지지 않았을때 (Alert)

Metaphors

은유 : 앱내의 요소나 행동들이 기능을 암시하도록 메타포를 담자. 사람들은 메타포를 통해 앱을 더 빨리 배운다.

🍀 Comments

  • 스크롤 바
  • 휴지통 아이콘
  • 지우개 모양

User Control

사용자 제어권 : 모든 상황에서 사용자가 결정권을 가질 수 있게 해야한다. 사용자가 모든것을 컨트롤 하고 있다고 느끼게 해주는 것. 앱이 결정권을 떠안게 하면 안된다.

🍀 Comments

  • 시작하면 먹통이 되서 UI 응답을 못하는 경우(X)
  • 작업이 진행 중이더라도 취소가 가능해야함
  • 앱은 동작을 제안하거나 위험한 결과에 대한 경고를 보여주는 역할
  • 통제와 결정권은 오로지 사용자에게
profile
안녕하세요 글쓰는 🌱풀떼기 입니다.

0개의 댓글