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

+ 버튼의 Menu
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



Video editing view
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의 변화







iPadOS, macOS

Color picker (NEW)
– iOS 14에서 새로 추가된 component
– 색상을 선택하는 방법은 4가지 : Grid/Spectrum/Slider/Spoid
– Pallete across apps
색상을 선택하는 방법은 4가지

– Grid / Spectrum / Slider 의 3가지 선택화면을 제공한다.

– 스포이드 기능도 제공한다.
색상을 선택하는 방법은 4가지

– Saved colors는 어떤 App이라도 동일하게 표시되고 사용할 수 있다.
[…] 방법: WWDC 2020 | Design with iOS pickers, menus and actions — unnnyong […]
좋아요좋아요