WWDC 2020 | Design with iOS pickers, menus and actions

https://developer.apple.com/videos/play/wwdc2020/10205/

iOS 14부터는 어떤 버튼이라도 Menu를 지원한다.

Menu?
– Replace action sheets and popovers

왜 iOS에서 이런 Menu를 지원하기 시작했는가?
지금까지 iOS에서는 Action sheet, iPadOS의 popover이 지원됐었다.
점점 iOS의 화면은 커지고 iPad App은 복잡해지면서 Action sheet와 popover는 점점 메리트가 사라졌다.
– 화면을 많이 차지하고 모서리로 굳이 화면 모서리로 손을 이동해야하기 때문.

Button(Action)에서 바로 Menu가 나오면 Button으로부터 손가락을 크게 움직이지 않아도 원하는 동작을 선택할 수 있다.
Menu가 나오고 Menu 이외의 영역을 Tap 하면 Menu는 자동으로 닫힌다.

Menu Design

– icon은 SFSymbol, Custom Image 모두 사용 가능.

Menu 사용법 (User)

1. Button을 Tap하고 손가락을 떼지 않은 채로 원하는 menu의 항목 위에서 손가락을 떼기.
2. Button Tap -> Menu 항목 Tap

– Menu 이외의 영역을 Tap 하면 Menu가 닫히는 cancel action이기 때문에 굳이 menu에 cancel을 추가하는 것은 옳지않다.

Menu의 활용 예
– disambiguation
– navigation
– selection
– secondary options

Disambiguation

Navigation

Selection

Secondary options

iOS File App (iOS13 VS iOS 14)

– 좌측상단 More button의 등장으로 복잡했던 UI가 해결되었다

👷 More Button을 사용할 때의 주의점
1. Primary action과 Secondary Action을 잘 고려해야한다

– 나쁜 예를 살펴보면 모든 Action이 More Button에 추가되어있어서 자주 사용되는 New Message도 More Button을 거쳐야만 한다.

2. 주의가 필요한 Action이 Menu에 포함된 경우

– Delete처럼 정말로 삭제할 것인지 확인이 필요할 때에는 꼭 Action sheet를 사용해서 한 번 더 물어보자.
– 유저가 손가락을 굳이 움직이면서 확인해야하기 때문에 실수가 줄어든다.

UX는 macOS와 통일성을 갖게 되었다.

Date and time picker

– iOS 13까지는 Date/Time/Date and time picker가 동일한 휠 디자인이었다.

– 모두 새로운 디자인으로 변경되었다.

Sample, Reminder app (iOS14)

1 / 2 | Date picker
– June 2020의 월을 선택하는 곳을 Touch하면 기존의 Wheel 로 간편하게 선택할 수 있다.

3 / 4 | Time picker
– Touch, Keyboard, pencil 모든걸로 시간을 입력할 수 있다.

Design의 변화