Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

도니의 iOS 프로그래밍 세상

Modality - 1 본문

HIG(iOS14)

Modality - 1

Donee 2022. 2. 11. 15:09

전자시계에서 Mode 버튼을 누를 시, 화면이 현재 시각이 나오거나 날짜, 스톱워치, 알람에 대한 정보가 나오기도 한다. 이렇게 네 개의 모드가 전자시계를 공유하고 있는 것처럼 앱에도 모드란 게 존재한다. 이때 앱에서는 유저의 현재 context로부터 벗어나는 임시 모드를 제공한다.

매일 앱에서 메일 답장 모드로 들어간 상태에서 보내기 혹은 취소를 누른다면, 메일함을 읽을 수 있는 메일 읽기 모드로 변한다. 그래서 Modality는 앱 안네 여러 모드가 있다는 것을 전제로 하며, 사용목적으로는 task에 집중하거나 중요 정보가 있는 경우 경고를 하기 위해서 사용한다.

앱 내부 특정 상황에 쓰일 수 있는 alert, Activity view, Action sheet이 제공되며 이때 Activity view는 Share sheet라고 해서, 공유 버튼을 나타내며 어떤 콘텐츠를 다른 곳에 보내기도 한다. 이에 사용되는 것으로는 대표적으로 에어드롭이 있다. (그에 반해 안드로이드에서는 각각의 뷰를 scene이나 activity라고 한다. 그리하여 여기서 지칭하는 activity view는 share sheet를 의미한다.) Action Sheet는 사진을 요구하는 특정 상황에서 사진을 찍을지 앨범에서 선택할지를 화면 아래에 나타내주는 것이다. (이때 각각의 모드는 Taken Photo, choose from Album과 같이 두 가지 케이스로 나뉘는데 on in of 같은 전치사와 같이 4글자 이하 전치사는 소문자로 쓴다는 rule이 존재한다.)

1. Sheet & FullScreen

sheet와 fullscreen의 목표는 interaction을 막는 것이다.

1) Sheet

Sheet는 기본적으로 전체 화면으로 나타내지 않더라도 특정 부분의 interaction을 막기 위해 modal이 화면의 아랫부분만 존재하더라도 interaction이 불가능 해진다. iOS13부터 현재 카드 뒤쪽 채 context들이 살짝 보이기 시작하였다. sheet를 사용해야 할 땐 immersive task가 아닌 modal 콘텐츠에 사용된다.

FullScreen의 예시

2) FullScreen

fullscreen은 immersive modal 콘텐츠에 사용된다. 예를 들어 원래 safari에서 윈도를 별도 저장하려고 하면 Modal sheet가 나왔고, 그러면 뒤쪽에 있는 웹페이지와 더 이상 interaction을 할 수 없는 상황이다. modal sheet가 들어가는 동안 원래와는 interaction을 할 수가 없었고, 만약 이 다운로드 페이지를 기존 경로의 폴더가 아닌 새로운 폴더에 넣기 위해선 어떻게 해야 할까? 그러기 위해선 새로운 폴더를 만들어야 하고 이때 "새로운 폴더의 생성"의 뒤쪽 페이지인 "저장 항목"과 interaction을 할 수 없다. 그래서 이때 할 수 있는 것은 새로운 폴더를 생성하거나 취소할 수밖에 없고 이것을 modal window라고 한다. 이것은 video, photo, camera view 등과 같이 fullscreen으로 보여줄 때 이익이 되는 task에서 사용한다.

출처

Apple Human Interface Guidelines(https://developer.apple.com/design/human-interface-guidelines/)

​스위프트하이(https://www.youtube.com/watch?v=ta9N8zNCPis&t=1s)

'HIG(iOS14)' 카테고리의 다른 글

Navigation  (0) 2022.02.11
Modality - 2  (0) 2022.02.11
Loading  (0) 2022.02.11
Onboarding  (0) 2022.02.11
Launching  (0) 2022.02.11
Comments