Haru's 개발 블로그

[HIG] Modality 본문

IOS/HIG(UI,UX)

[HIG] Modality

Haru_29 2022. 5. 29. 09:36

Modality는 명시적 작업이 필요한 임시 모드에서 콘텐츠를 표시하는 디자인 기술입니다. 콘텐츠를 모달로 표시하면 다음을 수행할 수 있습니다 :

  • 사람들이 독립적인 작업 혹은 관련된 옵션 집합에 집중할 수 있도록 돕습니다.
  • 사람들이 중요한 정보를 받고 필요한 경우 조치를 취하도록 합니다.

Alert vs Modal View

다양한 시스템 정의 모달 경험을 가능하게 하기 위해 iOS 는 경고, 활동 뷰, 공유 시트 및 액션 시트를 제공합니다. 앱에서 사용자 지정 모달 콘텐츠를 표시하려면 다음 프레젠테이션 스타일 중 하나를 사용할 수 있습니다.

 

  • Automatic
  • 기본 프레젠테이션 스타일 (일반적으로 시트)을 사용합니다.
  • Fullscreen.
  • 이전 뷰를 덮고, 닫기 버튼을 요구합니다. (필요합니다.)
  • Popover.
  • 수평으로 규칙적인 환경에서는 팝오버를 제공하고, 컴팩트한 환경에서는 시트를 제공합니다.
  • Page sheet and form sheet.
  • 이전 뷰를 부분적으로 가립니다; 가이드를 위해서는 시트 문서를 참고하십시오.
  • Current context.
  • 특정 이전 뷰를 가립니다.
  • Custom.
  • 사용자 정의 애니메이션을 사용하여 사용자 정의 컨테이너에 콘텐츠를 표시합니다.

NOTE

현재 컨텍스트 모달 뷰 스타일을 사용하여 분할 보기 창, 팝오버 혹은 전체화면이 아닌 기타 보기 내에서 모달 콘텐츠를 표시할 때 시트를 사용하도록 전환합니다.

의미가 있을 때 Modality를 사용하십시오.

현재 작업과 다른 작업을 선택하거나 수행하는데 사람들의 주의를 집중시키는 것이 중요한 경우에만 모달 환경을 만듭니다. 모달 경험은 사람들을 현재 상황에서 벗어나게하고 해제할 조치가 필요하므로 명확한 이점을 제공할 때만 사용하는 것이 중요합니다.

 

필수적이고 이상적으로 실행 가능한 정보를 전달하기 위한 경고(Alert)을 에약합니다.

일반적으로 무언가 잘못되면 경고가 나타납니다. 왜냐하면 경고는 현재 경험을 방해하고 무시하기 위해 탭을 해야 하기 때문에, 사람들이 침입이 정당하다고 느끼게 하는 것이 중요합니다. 자세한 내용은 문서를 참고하십시오.

 

일반적으로, 모달 작업은 단순하고, 짧고, 좁게 집중해야합니다.

모달 작업이 너무 복잡하면 사람들은 모달 컨텍스트에 들어갈 때 일시 중단한 작업을 보지 못할 수 있습니다. 당신이 앱 안에서 앱처럼 느껴지는 모달 경험을 만들지 않도록 주의하십시오. 특히 사람들은 원래 과업으로 돌아간느 방법을 잊어버릴 수 있기 때문에 모달 과제 내에서 관점의 위계를 제시하는 것을 경계해야 합니다. 모달 태스크에 하위 보기가 포함되어야 하는 경우 계층을 통과하는 단일 경로와 명확한 전체 경로를 제공하십시오. 태스크 완료 이외의 작업에는 완료 단추를 사용하지 않도록 하십시오.

 

몰입형 콘텐츠 또는 복잡한 작업에 전체 화면 모달 스타일을 사용하는 것을 고려해 보십시오.

풀 스크린 모달 경험은 산만함을 최소화하므로 비디오, 사진 혹은 카메라 뷰를 표시하거나 문서 표시 또는 사진 편집과 같은 다단계 작업을 수행할 수 있습니다.

 

모달 뷰를 닫는 버튼을 항상 포함하십시오.

예를 들어 완료 또는 취소를 사용할 수 있습니다. 버튼을 포함하면 모달 뷰가 보조 기술에 접근할 수 있고 무시 제스처에 대한 대안을 제공할 수 있습니다.

 

필요한 경우 모달 뷰를 닫기 전에 확인을 받아 데이터 손실을 방지할 수 있습니다.

사람들이 화면을 닫기 위해 무시 제스처를 사용하든 버튼을 사용하든 상관없이, 만약 그 행동이 사용자 생성 콘텐츠의 손실을 초래할 수 있다면 상황을 설명하고 해결 방법을 사람들에게 제시하는 작업 시트를 제시하십시오.

 

모달 뷰의 작업을 쉽게 식별할 수 있도록 하십시오.

사람들은 모달 뷰에 들어가면 이전 컨텍스트에서 벗어나 바로 되돌아가지 않을 수 있습니다. 모달 뷰의 태스크 이름을 지정하는 제목 혹은 태스크를 설명하거나 안내를 제공하는 추가 텍스트를 제공하면 사용자가 앱에서 자신의 위치(? 장소..?)를 유지할 수 있습니다.

 

모달 뷰의 모양을 앱으로 조정합니다.

예를 들어, 모달 뷰에 탐색 막대가 포함된 경우 앱의 탐색 막대와 동일한 모양을 사용해야 합니다.

 

앱에서 적합한 모달 전환 스타일을 선택하십시오.

앱으로 조정하고 임시 컨텍스트 전환에 대한 인식을 향상시키는 전환 스타일을 사용합니다. 기본 전환은 모달 뷰를 화면 아래쪽에서 위로 수직으로 밀어 올렸다가 해제되면 뒤로 내립니다. 앱 전체에서 일관된 모달 전환 스타일을 사용합니다.

 

 

 

 

 

 

 

참고자료 및 출처 : https://velog.io/@dnr6054/Modal%EC%97%90-%EA%B4%80%ED%95%9C-%EA%B0%84%EB%8B%A8%ED%95%9C-%EA%B3%A0%EC%B0%B0

 

"Modal"에 관한 간단한 고찰

Modality Is the One UX Concept That Most Designers Don’t Fully Understand

velog.io

 

https://medium.com/@ryu1sazae/modal-presentation-in-ios-e1fa6d89df24

 

Modal presentation in iOS

This article describes the basics of the standard iOS modality and differences around iOS13.

medium.com

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

 

'IOS > HIG(UI,UX)' 카테고리의 다른 글

[HIG] Navigation  (0) 2022.05.29
[HIG] Accessing User Data and Resources  (0) 2022.05.29
[HIG]Loading  (0) 2022.05.23
[HIG] Onboarding  (0) 2022.05.23
[HIG] Launching  (0) 2022.05.23
Comments