WWDC 2020 | Design with iOS pickers, menus and actions

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

+ Button, Photos
Camera Button, Notes
Done Button,
Video editing view


Navigation


Selection


Secondary options





iOS File App (iOS13 VS iOS 14)

iOS14

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


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

나쁜 예
좋은 예

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


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

Mail app

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







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






Date and time picker

~ iOS13

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

iOS 14

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



Sample, Reminder app (iOS14)

1
2
3
4


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

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




Design의 변화

Tap 전 , 표시 상태
Tap 후, 시간 입력
Tap 전 , 표시 상태
Tap 후, 입력 상태





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”의 1개의 생각

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중